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

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

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath, withTracking } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+import { Image } from '../../Atoms/Image';
+import { Button } from '../../Atoms/Button';
+import { CalloutBadge, OverlayBadge, Price } from '../../..';
+import { useCustomComponentOverride } from '../../../hooks';
+const defaultStyles = () => {
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        boxSizing: 'border-box',
+        border: '1px solid #e5e7eb',
+        borderRadius: '1em',
+        overflow: 'hidden',
+        // rest slightly scaled down and grow to full size on hover so the zoom
+        // reads as a subtle enlargement without ever exceeding the slide bounds
+        // (the surrounding Slideshow clips overflow), which would otherwise crop
+        // the card's border on hover
+        transform: 'scale(0.96)',
+        transition: 'transform 0.3s ease',
+        '&:hover': {
+            transform: 'scale(1)',
+        },
+        '.ss__chat-result__image': {
+            width: '100%',
+            aspectRatio: '1 / 1',
+            position: 'relative',
+            overflow: 'hidden',
+            // fixed-aspect frame: scale the image to fill it and crop overflow so
+            // results with different intrinsic image aspect ratios still line up
+            // at the same height when displayed side-by-side.
+            img: {
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+            },
+            '.ss__chat-result__image__buttons': {
+                position: 'absolute',
+                bottom: 0,
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                gap: '0.5em',
+                padding: '0.5em',
+                boxSizing: 'border-box',
+                '.ss__button': {
+                    padding: '0.25em 0.5em',
+                    background: 'rgba(255, 255, 255, 0.9)',
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '2em',
+                    boxShadow: 'inset 0 0 1px 0px rgba(0, 0, 0, 0.5)',
+                    flex: '1 1 0',
+                    minWidth: 0,
+                    fontWeight: 'bold',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                },
+            },
+            '.ss__chat-result__image__icons': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                gap: '0.5em',
+                padding: '0.5em',
+                flex: '0 0 auto',
+                alignItems: 'flex-start',
+                boxSizing: 'border-box',
+                '.ss__button': {
+                    height: '2.5em',
+                    width: '2.5em',
+                    backgroundColor: '#000',
+                    borderRadius: '50%',
+                    justifyContent: 'center',
+                    boxSizing: 'border-box',
+                    '&.ss__chat-result__image__icons__icon--cart': {
+                        backgroundColor: '#feeeae',
+                        svg: {
+                            fill: '#000',
+                            stroke: '#000',
+                        },
+                    },
+                    svg: {
+                        fill: '#fff',
+                        stroke: '#fff',
+                    },
+                },
+            },
+        },
+        '.ss__chat-result__content': {
+            background: '#f9fafb',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5em',
+            flex: '1 1 auto',
+            padding: '0.5em 0',
+            '.ss__chat-result__content__title--primary': {
+                padding: '0 0.5em',
+            },
+            '.ss__chat-result__content__title--secondary': {
+                padding: '0 0.5em',
+                color: '#6A7282',
+                fontSize: '90%',
+            },
+            '.ss__chat-result__content__price': {
+                padding: '0 0.5em',
+                color: '#000',
+                fontWeight: 'bold',
+                fontSize: '1.2em',
+            },
+        },
+    });
+};
+export const ChatResult = withTracking(observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatResult', globalTheme, defaultProps, properties);
+    const { controller, result, scrollToBottom, trackingRef, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('chatResult', {
+        ...props,
+        customComponent: props.customComponent && props.customComponent !== 'ChatResult' ? props.customComponent : undefined,
+    });
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const isInComparison = controller.store.currentChat?.comparisons.items.some((item) => item.result?.id === result.id);
+    // a result is "configurable" when it ships with selectable variant options
+    // (e.g. color/size); those need a selection before they can be added to cart
+    const isConfigurable = !!result.variants?.optionConfig && Object.keys(result.variants.optionConfig).length > 0;
+    const subProps = {
+        button: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        image: {
+            lazy: false,
+            onLoad: scrollToBottom,
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-result', className, internalClassName), ref: trackingRef, ...styling, children: [_jsxs("div", { className: "ss__chat-result__image", children: [_jsx(OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: _jsx(Image, { ...subProps.image, className: 'ss__chat-result__detail-slot__image', alt: result.display.mappings.core?.name || '', src: result.display.mappings.core?.imageUrl || result.display.mappings.core?.parentImageUrl || '' }) }), _jsxs("div", { className: "ss__chat-result__image__buttons", children: [controller.store.features.similarProducts.enabled && (_jsx(Button, { ...subProps.button, className: 'ss__chat-result__image__buttons__similar', content: 'Similar', "aria-label": `Show similar to ${result.display.mappings.core?.name || 'product'}`, onClick: () => {
+                                        controller.productSimilar(result);
+                                    } })), _jsx(Button, { ...subProps.button, className: 'ss__chat-result__image__buttons__compare', content: isInComparison ? undefined : 'Compare', icon: isInComparison ? { icon: 'check-thin', title: 'Added to comparison' } : undefined, "aria-label": isInComparison
+                                        ? `${result.display.mappings.core?.name || 'Product'} added to comparison`
+                                        : `Compare ${result.display.mappings.core?.name || 'product'}`, "aria-pressed": isInComparison, onClick: () => {
+                                        // toggle: clicking again removes it from comparison, matching the 'x' icon in the comparison view
+                                        if (isInComparison) {
+                                            controller.store.currentChat?.comparisons.remove(result.id);
+                                            return;
+                                        }
+                                        controller.compareProduct(result);
+                                    } })] }), _jsxs("div", { className: "ss__chat-result__image__icons", children: [_jsx(Button, { ...subProps.button, className: 'ss__chat-result__image__icons__icon--inquire', icon: { icon: 'chat', title: 'Discuss Product' }, "aria-label": `Discuss ${result.display.mappings.core?.name || 'product'}`, onClick: () => {
+                                        controller.productQuery(result);
+                                    } }), _jsx(Button, { ...subProps.button, className: 'ss__chat-result__image__icons__icon--cart', icon: { icon: 'cart', title: isConfigurable ? 'Configure' : 'Add to Cart' }, "aria-label": isConfigurable
+                                        ? `Configure ${result.display.mappings.core?.name || 'product'}`
+                                        : `Add ${result.display.mappings.core?.name || 'product'} to cart`, onClick: () => {
+                                        // configurable products need a variant selection — open the product
+                                        // information panel so the user can pick options before adding to cart
+                                        if (isConfigurable) {
+                                            controller.productQuickView(result);
+                                            return;
+                                        }
+                                        controller.track.product.addToCart(result);
+                                        controller.addToCart(result);
+                                    } })] })] }), _jsxs("div", { className: "ss__chat-result__content", children: [result.display.mappings.core?.name && (_jsx("div", { className: "ss__chat-result__content__title--primary", children: result.display.mappings.core?.name })), result.display.mappings.core?.price && (_jsx("div", { className: "ss__chat-result__content__price", children: _jsx(Price, { value: result.display.mappings.core?.price }) })), _jsx(CalloutBadge, { controller: controller, result: result })] })] }) }));
+}));

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from '../../../types';
+import type { ChatController } from '@athoscommerce/snap-controller';
+export declare const ChatResultsDisplay: ((properties: ChatResultsDisplayProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type ChatResultsDisplayProps = {
+    chatItem: any;
+    controller: ChatController;
+    scrollToBottom: () => void;
+    onProductQuickView?: () => void;
+} & ComponentProps<ChatResultsDisplayProps>;
+//# sourceMappingURL=ChatResultsDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatResultsDisplay/ChatResultsDisplay.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAoCrE,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CAoG7E,CAAC;AAOH,MAAM,MAAM,uBAAuB,GAAG;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC"}

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+import { Slideshow } from '../Slideshow';
+import { ChatResult } from '../ChatResult';
+const defaultStyles = () => {
+    return css({
+        width: '100%',
+        marginTop: '12px',
+        '.ss__chat-results-display__result': {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            cursor: 'pointer',
+            '&:focus-visible': {
+                outline: '2px solid #253B80',
+                outlineOffset: '2px',
+            },
+        },
+    });
+};
+const slideshowStyleScript = () => {
+    return css({
+        '.ss__slideshow__navigation .ss__button': {
+            background: 'rgba(255, 255, 255, 0.85)',
+            borderRadius: '50%',
+            width: '2em',
+            height: '2em',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
+        },
+    });
+};
+export const ChatResultsDisplay = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatResultsDisplay', globalTheme, defaultProps, properties);
+    const { chatItem, controller, scrollToBottom, onProductQuickView, disableStyles, className, internalClassName, treePath } = props;
+    const currentChat = controller.store.currentChat;
+    const activeMessage = currentChat?.activeMessage;
+    const isSideChatOpen = !!activeMessage &&
+        ['inspirationResult', 'productComparison', 'productQuery'].includes(activeMessage.messageType) &&
+        currentChat?.dismissedSideChatMessageId !== activeMessage.id;
+    const isNarrow = typeof window !== 'undefined' && window.innerWidth < 550;
+    // only the tablet range needs the narrower slideshow when the side chat is open;
+    // at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
+    const isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth <= 1200;
+    const slidesToShow = isNarrow || isConstrained ? 1.9 : 2.9;
+    const subProps = {
+        slideshow: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+            slidesToShow,
+            slidesToMove: isNarrow || isConstrained ? 2 : 3,
+            loop: false,
+            showPagination: false,
+            centerInsufficientSlides: false,
+            overlayNavigation: true,
+            styleScript: slideshowStyleScript,
+        },
+        chatResult: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const handleResultClick = (e, result) => {
+        // buttons should be able to be clicked without triggering the product click
+        if (e.composedPath().some((el) => el instanceof HTMLElement && el.matches('button, .ss__button, a')))
+            return;
+        controller.track.product.click(e, result);
+        controller.productQuickView(result);
+        onProductQuickView?.();
+    };
+    const handleResultKeyDown = (e, result) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            controller.productQuickView(result);
+            onProductQuickView?.();
+        }
+    };
+    const renderSlideshow = (results, key) => {
+        const slides = results.map((result) => ({
+            content: (_jsx("div", { className: "ss__chat-results-display__result", role: "button", tabIndex: 0, "aria-label": `Open ${result?.display?.mappings?.core?.name || 'product'}`, onClick: (e) => handleResultClick(e, result), onKeyDown: (e) => handleResultKeyDown(e, result), children: _jsx(ChatResult, { ...subProps.chatResult, result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id)),
+        }));
+        return (_jsx("div", { className: classnames('ss__chat-results-display', className, internalClassName), ...styling, children: _jsx(Slideshow, { ...subProps.slideshow, slides: slides }) }, key));
+    };
+    if (chatItem.messageType === 'productRecommendation' && chatItem.recommendationResult?.length) {
+        return (_jsx(CacheProvider, { children: _jsx(_Fragment, { children: chatItem.recommendationResult.map((recommendation, index) => recommendation.results?.length > 0 ? renderSlideshow(recommendation.results, index) : null) }) }));
+    }
+    return chatItem.results?.length > 0 ? _jsx(CacheProvider, { children: renderSlideshow(chatItem.results) }) : null;
+});

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { ComponentProps } from '../../../types';
+import type { ChatController } from '@athoscommerce/snap-controller';
+import type { ChatResponseActionsData } from '@athoscommerce/snap-client';
+export declare const ChatSuggestedQuestions: ((properties: ChatSuggestedQuestionsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type ChatSuggestedQuestionsProps = {
+    controller: ChatController;
+    questions?: string[];
+    actions?: ChatResponseActionsData['actions'];
+} & ChatSuggestedQuestionsTemplatesLegalProps & ComponentProps<ChatSuggestedQuestionsProps>;
+export type ChatSuggestedQuestionsTemplatesLegalProps = {
+    primaryColor?: string;
+};
+//# sourceMappingURL=ChatSuggestedQuestions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSuggestedQuestions.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatSuggestedQuestions/ChatSuggestedQuestions.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAoD1E,eAAO,MAAM,sBAAsB,gBAAyB,2BAA2B;;CAkDrF,CAAC;AAMH,MAAM,MAAM,2BAA2B,GAAG;IACzC,UAAU,EAAE,cAAc,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;CAC7C,GAAG,yCAAyC,GAC5C,cAAc,CAAC,2BAA2B,CAAC,CAAC;AAE7C,MAAM,MAAM,yCAAyC,GAAG;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+import { Icon } from '../../Atoms/Icon';
+const defaultStyles = ({ primaryColor }) => {
+    const colorPrimary = primaryColor || '#253B80';
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        '.ss__chat-suggested-questions__item': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '12px',
+            background: '#fff',
+            border: '1px solid #eee',
+            borderRadius: '12px',
+            padding: '14px 16px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            color: '#333',
+            textAlign: 'left',
+            width: '100%',
+            '&:hover': {
+                borderColor: '#ccc',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+            },
+            '&:focus-visible': {
+                outline: `2px solid ${colorPrimary}`,
+                outlineOffset: '2px',
+            },
+            '.ss__chat-suggested-questions__item__text': {
+                flex: 1,
+                fontWeight: 500,
+            },
+            '.ss__chat-suggested-questions__item__icon': {
+                width: '30px',
+                height: '30px',
+                background: colorPrimary,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '50%',
+                flexShrink: 0,
+                svg: {
+                    fill: '#fff',
+                    stroke: '#fff',
+                },
+            },
+        },
+    });
+};
+export const ChatSuggestedQuestions = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatSuggestedQuestions', globalTheme, defaultProps, properties);
+    const { controller, questions, actions, disableStyles, className, internalClassName, treePath } = props;
+    const items = questions ?? actions?.map((action) => action.message) ?? [];
+    if (items.length === 0) {
+        return null;
+    }
+    const subProps = {
+        icon: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    return (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__chat-suggested-questions', className, internalClassName), ...styling, children: items.map((item, index) => (_jsxs("button", { type: "button", className: "ss__chat-suggested-questions__item", "aria-label": item, onClick: () => {
+                    controller.openChat(item);
+                }, children: [_jsx("span", { className: "ss__chat-suggested-questions__item__text", children: item }), _jsx("span", { className: "ss__chat-suggested-questions__item__icon", "aria-hidden": "true", children: _jsx(Icon, { ...subProps.icon, icon: "chat" }) })] }, index))) }) }));
+});

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
+import { h } from 'preact';
 import { ComponentProps } from '../../../types';
 import { IconProps, IconType } from '../../Atoms/Icon';
 import { Lang } from '../../../hooks';
-export declare const Checkbox: ((properties: CheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const Checkbox: ((properties: CheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type CheckboxProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AA6B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAkJzD,CAAC;AAMH,MAAM,MAAM,aAAa,GAAG;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,QAAQ,EAAE,IAAI,CAAC;QACd,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,EAAE,OAAO,CAAC;KAClB,CAAC,CAAC;CACH"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AA4B3E,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA+IzD,CAAC;AAMH,MAAM,MAAM,aAAa,GAAG;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,QAAQ,EAAE,IAAI,CAAC;QACd,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,EAAE,OAAO,CAAC;KAClB,CAAC,CAAC;CACH"}

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

@@ -4,10 +4,10 @@ import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { Icon } from '../../Atoms/Icon';
 import { useA11y } from '../../../hooks/useA11y';
-import { useComponent, useLang } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const defaultStyles = ({ size, color, theme, native }) => {
     const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
@@ -35,7 +35,6 @@ const defaultStyles = ({ size, color, theme, native }) => {
 };
 export const Checkbox = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         size: '12px',
@@ -44,12 +43,10 @@ export const Checkbox = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('checkbox', globalTheme, defaultProps, properties);
-    const { checked, color, disabled, icon, iconColor, onClick, size, startChecked, native, disableA11y, disableStyles, className, internalClassName, theme, treePath, lang, customComponent, style: _, styleScript: __, themeStyleScript: ___, name: ____, ...additionalProps } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.checkbox || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { checked, color, disabled, icon, iconColor, onClick, size, startChecked, native, disableA11y, disableStyles, className, internalClassName, theme, treePath, lang, style: _, styleScript: __, themeStyleScript: ___, name: ____, ...additionalProps } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('checkbox', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
     const subProps = {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorHandler.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ErrorHandler/ErrorHandler.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AA0G7D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAwHjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACjC,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,QAAQ,EAAE,IAAI,CAAC;QACd,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,SAAS,EAAE,IAAI,CAAC;QACf,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;CACH"}
+{"version":3,"file":"ErrorHandler.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ErrorHandler/ErrorHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAW3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAyG3E,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAsHjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACjC,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,QAAQ,EAAE,IAAI,CAAC;QACd,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,SAAS,EAAE,IAAI,CAAC;QACf,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;CACH"}

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

@@ -5,9 +5,9 @@ import { observer } from 'mobx-react-lite';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Button } from '../../Atoms/Button/Button';
 import { defined, Colour, mergeProps, mergeStyles } from '../../../utilities';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { ErrorType } from '@athoscommerce/snap-store-mobx';
-import { useComponent, useLang } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const warnColour = new Colour('#ecaa15');
 const errorColour = new Colour('#cc1212');
@@ -107,18 +107,15 @@ const defaultStyles = ({ theme }) => {
 };
 export const ErrorHandler = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         treePath: globalTreePath,
     };
     const props = mergeProps('errorHandler', globalTheme, defaultProps, properties);
-    const { controller, error, disableStyles, onRetryClick, className, internalClassName, treePath, customComponent } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.errorHandler || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { controller, error, disableStyles, onRetryClick, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('errorHandler', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const subProps = {
         icon: {

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

@@ -1,7 +1,8 @@
+import { h } from 'preact';
 import { ComponentProps } from '../../../types';
 import type { FacetValue, ValueFacet } from '@athoscommerce/snap-store-mobx';
 import { Lang } from '../../../hooks';
-export declare const FacetGridOptions: ((properties: FacetGridOptionsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const FacetGridOptions: ((properties: FacetGridOptionsProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type FacetGridOptionsProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAoE7D,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAkFzE,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG;IACnC,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;CACnB,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACpC,UAAU,EAAE,IAAI,CAAC;QAChB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;KAClB,CAAC,CAAC;CACH"}
+{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAmE3E,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAgFzE,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG;IACnC,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;CACnB,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACpC,UAAU,EAAE,IAAI,CAAC;QAChB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;KAClB,CAAC,CAAC;CACH"}

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

@@ -2,10 +2,10 @@ 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, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
 import { createHoverProps } from '../../../toolbox';
-import { useComponent, useLang } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const defaultStyles = ({ columns, gapSize, gridSize, theme }) => {
     return css({
@@ -68,7 +68,6 @@ const defaultStyles = ({ columns, gapSize, gridSize, theme }) => {
 };
 export const FacetGridOptions = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         columns: 4,
@@ -77,12 +76,10 @@ export const FacetGridOptions = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('facetGridOptions', globalTheme, defaultProps, properties);
-    const { values, onClick, previewOnFocus, valueProps, facet, horizontal, className, internalClassName, customComponent } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.facetGridOptions || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { values, onClick, previewOnFocus, valueProps, facet, horizontal, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('facetGridOptions', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     if (horizontal) {
         props.columns = 0;

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

@@ -1,8 +1,9 @@
+import { h } from 'preact';
 import { ComponentProps } from '../../../types';
 import type { FacetHierarchyValue, ValueFacet } from '@athoscommerce/snap-store-mobx';
 import { Lang } from '../../../hooks';
 import { IconProps, IconType } from '../../Atoms/Icon';
-export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type FacetHierarchyOptionsProps = {