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

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

@@ -0,0 +1,200 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatResult = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Image_1 = require("../../Atoms/Image");
+var Button_1 = require("../../Atoms/Button");
+var __1 = require("../../..");
+var hooks_1 = require("../../../hooks");
+var defaultStyles = function () {
+    return (0, react_1.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',
+            },
+        },
+    });
+};
+exports.ChatResult = (0, providers_1.withTracking)((0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('chatResult', globalTheme, defaultProps, properties);
+    var controller = props.controller, result = props.result, scrollToBottom = props.scrollToBottom, trackingRef = props.trackingRef, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var _r = (0, hooks_1.useCustomComponentOverride)('chatResult', __assign(__assign({}, props), { customComponent: props.customComponent && props.customComponent !== 'ChatResult' ? props.customComponent : undefined })), overrideElement = _r.overrideElement, shouldRenderDefault = _r.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    var isInComparison = (_a = controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.items.some(function (item) { var _a; return ((_a = item.result) === null || _a === void 0 ? void 0 : _a.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
+    var isConfigurable = !!((_b = result.variants) === null || _b === void 0 ? void 0 : _b.optionConfig) && Object.keys(result.variants.optionConfig).length > 0;
+    var subProps = {
+        button: {
+            disableStyles: disableStyles,
+            theme: props.theme,
+            treePath: treePath,
+        },
+        image: {
+            lazy: false,
+            onLoad: scrollToBottom,
+            disableStyles: disableStyles,
+            theme: props.theme,
+            treePath: treePath,
+        },
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__chat-result', className, internalClassName), ref: trackingRef }, styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat-result__image", children: [(0, jsx_runtime_1.jsx)(__1.OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { className: 'ss__chat-result__detail-slot__image', alt: ((_c = result.display.mappings.core) === null || _c === void 0 ? void 0 : _c.name) || '', src: ((_d = result.display.mappings.core) === null || _d === void 0 ? void 0 : _d.imageUrl) || ((_e = result.display.mappings.core) === null || _e === void 0 ? void 0 : _e.parentImageUrl) || '' })) }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat-result__image__buttons", children: [controller.store.features.similarProducts.enabled && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { className: 'ss__chat-result__image__buttons__similar', content: 'Similar', "aria-label": "Show similar to ".concat(((_f = result.display.mappings.core) === null || _f === void 0 ? void 0 : _f.name) || 'product'), onClick: function () {
+                                        controller.productSimilar(result);
+                                    } }))), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, 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
+                                        ? "".concat(((_g = result.display.mappings.core) === null || _g === void 0 ? void 0 : _g.name) || 'Product', " added to comparison")
+                                        : "Compare ".concat(((_h = result.display.mappings.core) === null || _h === void 0 ? void 0 : _h.name) || 'product'), "aria-pressed": isInComparison, onClick: function () {
+                                        var _a;
+                                        // toggle: clicking again removes it from comparison, matching the 'x' icon in the comparison view
+                                        if (isInComparison) {
+                                            (_a = controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.remove(result.id);
+                                            return;
+                                        }
+                                        controller.compareProduct(result);
+                                    } }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat-result__image__icons", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { className: 'ss__chat-result__image__icons__icon--inquire', icon: { icon: 'chat', title: 'Discuss Product' }, "aria-label": "Discuss ".concat(((_j = result.display.mappings.core) === null || _j === void 0 ? void 0 : _j.name) || 'product'), onClick: function () {
+                                        controller.productQuery(result);
+                                    } })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { className: 'ss__chat-result__image__icons__icon--cart', icon: { icon: 'cart', title: isConfigurable ? 'Configure' : 'Add to Cart' }, "aria-label": isConfigurable
+                                        ? "Configure ".concat(((_k = result.display.mappings.core) === null || _k === void 0 ? void 0 : _k.name) || 'product')
+                                        : "Add ".concat(((_l = result.display.mappings.core) === null || _l === void 0 ? void 0 : _l.name) || 'product', " to cart"), onClick: function () {
+                                        // 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);
+                                    } }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat-result__content", children: [((_m = result.display.mappings.core) === null || _m === void 0 ? void 0 : _m.name) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat-result__content__title--primary", children: (_o = result.display.mappings.core) === null || _o === void 0 ? void 0 : _o.name })), ((_p = result.display.mappings.core) === null || _p === void 0 ? void 0 : _p.price) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat-result__content__price", children: (0, jsx_runtime_1.jsx)(__1.Price, { value: (_q = result.display.mappings.core) === null || _q === void 0 ? void 0 : _q.price }) })), (0, jsx_runtime_1.jsx)(__1.CalloutBadge, { controller: controller, result: result })] })] })) }));
+}));

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

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

package/dist/cjs/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/cjs/components/src/components/Molecules/ChatResult/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChatResult"), exports);

package/dist/cjs/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/cjs/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/cjs/components/src/components/Molecules/ChatResultsDisplay/ChatResultsDisplay.js

@@ -0,0 +1,123 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatResultsDisplay = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Slideshow_1 = require("../Slideshow");
+var ChatResult_1 = require("../ChatResult");
+var defaultStyles = function () {
+    return (0, react_1.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',
+            },
+        },
+    });
+};
+var slideshowStyleScript = function () {
+    return (0, react_1.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)',
+        },
+    });
+};
+exports.ChatResultsDisplay = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('chatResultsDisplay', globalTheme, defaultProps, properties);
+    var chatItem = props.chatItem, controller = props.controller, scrollToBottom = props.scrollToBottom, onProductQuickView = props.onProductQuickView, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var currentChat = controller.store.currentChat;
+    var activeMessage = currentChat === null || currentChat === void 0 ? void 0 : currentChat.activeMessage;
+    var isSideChatOpen = !!activeMessage &&
+        ['inspirationResult', 'productComparison', 'productQuery'].includes(activeMessage.messageType) &&
+        (currentChat === null || currentChat === void 0 ? void 0 : currentChat.dismissedSideChatMessageId) !== activeMessage.id;
+    var 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
+    var isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth <= 1200;
+    var slidesToShow = isNarrow || isConstrained ? 1.9 : 2.9;
+    var subProps = {
+        slideshow: {
+            disableStyles: disableStyles,
+            theme: props.theme,
+            treePath: treePath,
+            slidesToShow: slidesToShow,
+            slidesToMove: isNarrow || isConstrained ? 2 : 3,
+            loop: false,
+            showPagination: false,
+            centerInsufficientSlides: false,
+            overlayNavigation: true,
+            styleScript: slideshowStyleScript,
+        },
+        chatResult: {
+            disableStyles: disableStyles,
+            theme: props.theme,
+            treePath: treePath,
+        },
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var handleResultClick = function (e, result) {
+        // buttons should be able to be clicked without triggering the product click
+        if (e.composedPath().some(function (el) { return el instanceof HTMLElement && el.matches('button, .ss__button, a'); }))
+            return;
+        controller.track.product.click(e, result);
+        controller.productQuickView(result);
+        onProductQuickView === null || onProductQuickView === void 0 ? void 0 : onProductQuickView();
+    };
+    var handleResultKeyDown = function (e, result) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            controller.productQuickView(result);
+            onProductQuickView === null || onProductQuickView === void 0 ? void 0 : onProductQuickView();
+        }
+    };
+    var renderSlideshow = function (results, key) {
+        var slides = results.map(function (result) {
+            var _a, _b, _c;
+            return ({
+                content: ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat-results-display__result", role: "button", tabIndex: 0, "aria-label": "Open ".concat(((_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.display) === null || _a === void 0 ? void 0 : _a.mappings) === null || _b === void 0 ? void 0 : _b.core) === null || _c === void 0 ? void 0 : _c.name) || 'product'), onClick: function (e) { return handleResultClick(e, result); }, onKeyDown: function (e) { return handleResultKeyDown(e, result); }, children: (0, jsx_runtime_1.jsx)(ChatResult_1.ChatResult, __assign({}, subProps.chatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom })) }, result.id)),
+            });
+        });
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__chat-results-display', className, internalClassName) }, styling, { children: (0, jsx_runtime_1.jsx)(Slideshow_1.Slideshow, __assign({}, subProps.slideshow, { slides: slides })) }), key));
+    };
+    if (chatItem.messageType === 'productRecommendation' && ((_a = chatItem.recommendationResult) === null || _a === void 0 ? void 0 : _a.length)) {
+        return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: chatItem.recommendationResult.map(function (recommendation, index) { var _a; return ((_a = recommendation.results) === null || _a === void 0 ? void 0 : _a.length) > 0 ? renderSlideshow(recommendation.results, index) : null; }) }) }));
+    }
+    return ((_b = chatItem.results) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: renderSlideshow(chatItem.results) }) : null;
+});

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

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

package/dist/cjs/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/cjs/components/src/components/Molecules/ChatResultsDisplay/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChatResultsDisplay"), exports);

package/dist/cjs/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/cjs/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/cjs/components/src/components/Molecules/ChatSuggestedQuestions/ChatSuggestedQuestions.js

@@ -0,0 +1,99 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatSuggestedQuestions = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Icon_1 = require("../../Atoms/Icon");
+var defaultStyles = function (_a) {
+    var primaryColor = _a.primaryColor;
+    var colorPrimary = primaryColor || '#253B80';
+    return (0, react_1.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 ".concat(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',
+                },
+            },
+        },
+    });
+};
+exports.ChatSuggestedQuestions = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('chatSuggestedQuestions', globalTheme, defaultProps, properties);
+    var controller = props.controller, questions = props.questions, actions = props.actions, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var items = (_a = questions !== null && questions !== void 0 ? questions : actions === null || actions === void 0 ? void 0 : actions.map(function (action) { return action.message; })) !== null && _a !== void 0 ? _a : [];
+    if (items.length === 0) {
+        return null;
+    }
+    var subProps = {
+        icon: {
+            disableStyles: disableStyles,
+            theme: props.theme,
+            treePath: treePath,
+        },
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__chat-suggested-questions', className, internalClassName) }, styling, { children: items.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "ss__chat-suggested-questions__item", "aria-label": item, onClick: function () {
+                    controller.openChat(item);
+                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "ss__chat-suggested-questions__item__text", children: item }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat-suggested-questions__item__icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: "chat" })) })] }, index)); }) })) }));
+});

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

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

package/dist/cjs/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/cjs/components/src/components/Molecules/ChatSuggestedQuestions/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChatSuggestedQuestions"), exports);

package/dist/cjs/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/cjs/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/cjs/components/src/components/Molecules/Checkbox/Checkbox.js

@@ -65,9 +65,8 @@ var defaultStyles = function (_a) {
 };
 exports.Checkbox = (0, mobx_react_lite_1.observer)(function (properties) {
     var _a;
-    var _b, _c, _d;
+    var _b, _c;
     var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         size: '12px',
@@ -76,19 +75,17 @@ exports.Checkbox = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('checkbox', globalTheme, defaultProps, properties);
-    var checked = props.checked, color = props.color, disabled = props.disabled, icon = props.icon, iconColor = props.iconColor, onClick = props.onClick, size = props.size, startChecked = props.startChecked, native = props.native, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, theme = props.theme, treePath = props.treePath, lang = props.lang, customComponent = props.customComponent, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, ____ = props.name, additionalProps = __rest(props, ["checked", "color", "disabled", "icon", "iconColor", "onClick", "size", "startChecked", "native", "disableA11y", "disableStyles", "className", "internalClassName", "theme", "treePath", "lang", "customComponent", "style", "styleScript", "themeStyleScript", "name"]);
-    if (customComponent) {
-        var ComponentOverride = (0, hooks_2.useComponent)(((_b = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _b === void 0 ? void 0 : _b.library.import.component.checkbox) || {}, customComponent);
-        if (ComponentOverride) {
-            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
-        }
+    var checked = props.checked, color = props.color, disabled = props.disabled, icon = props.icon, iconColor = props.iconColor, onClick = props.onClick, size = props.size, startChecked = props.startChecked, native = props.native, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, theme = props.theme, treePath = props.treePath, lang = props.lang, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, ____ = props.name, additionalProps = __rest(props, ["checked", "color", "disabled", "icon", "iconColor", "onClick", "size", "startChecked", "native", "disableA11y", "disableStyles", "className", "internalClassName", "theme", "treePath", "lang", "style", "styleScript", "themeStyleScript", "name"]);
+    var _d = (0, hooks_2.useCustomComponentOverride)('checkbox', props), overrideElement = _d.overrideElement, shouldRenderDefault = _d.shouldRenderDefault;
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     var pixelSize = isNaN(Number(size)) ? size : "".concat(size, "px");
     var subProps = {
         icon: __assign(__assign({ 
             // default props
             internalClassName: 'ss__checkbox__icon', icon: 'check-thin' }, (0, utilities_1.defined)({
-            color: iconColor || color || ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.primary),
+            color: iconColor || color || ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary),
             disableStyles: disableStyles,
             icon: icon,
             size: pixelSize && "calc(".concat(pixelSize, " - 30%)"),

package/dist/cjs/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/cjs/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"}