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

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Rating/Rating.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAwC7D,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA6GrD,CAAC;AAOH,MAAM,MAAM,WAAW,GAAG,yBAAyB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;CAC1C,CAAC"}
+{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAuC7D,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA+FrD,CAAC;AAOH,MAAM,MAAM,WAAW,GAAG,yBAAyB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;CAC1C,CAAC"}

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Icon } from '../../Atoms/Icon';
-import { useComponent } from '../../../hooks';
+import { useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = () => {
     return css({
         display: 'flex',
@@ -37,7 +37,6 @@ const defaultStyles = () => {
 };
 export const Rating = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         fullIcon: 'star',
@@ -45,12 +44,10 @@ export const Rating = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('rating', globalTheme, defaultProps, properties);
-    const { alwaysRender, count, text, disablePartialFill, emptyIcon, fullIcon, disableStyles, className, internalClassName, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.rating || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { alwaysRender, count, text, disablePartialFill, emptyIcon, fullIcon, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('rating', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const subProps = {
         fullIcon: {

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

@@ -1,9 +1,11 @@
+import { h } from 'preact';
 import { MutableRef } from 'preact/hooks';
 import { ComponentProps, ResultsLayout } from '../../../types';
-import type { SearchController, AutocompleteController, RecommendationController } from '@athoscommerce/snap-controller';
+import type { SearchController, AutocompleteController, RecommendationController, ChatController } from '@athoscommerce/snap-controller';
 import type { Product } from '@athoscommerce/snap-store-mobx';
+import { IconProps } from '../../Atoms/Icon';
 import { Lang } from '../../../hooks';
-export declare const Result: ((properties: ResultProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const Result: ((properties: ResultProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export interface TruncateTitleProps {
@@ -12,7 +14,7 @@ export interface TruncateTitleProps {
 }
 export type ResultProps = {
     result: Product;
-    controller?: SearchController | AutocompleteController | RecommendationController;
+    controller?: SearchController | AutocompleteController | RecommendationController | ChatController;
     lang?: Partial<ResultLang>;
     trackingRef?: MutableRef<HTMLElement | null>;
 } & ResultTemplatesLegalProps & ComponentProps<ResultProps>;
@@ -33,7 +35,7 @@ export type ResultTemplatesLegalProps = {
     layout?: keyof typeof ResultsLayout | ResultsLayout;
     truncateTitle?: TruncateTitleProps;
     onClick?: (e: React.MouseEvent<HTMLAnchorElement, Event>) => void;
-    customComponent?: string;
+    discussProductIcon?: IconProps;
 };
 export interface ResultLang {
     addToCartButtonText: Lang<ResultPropData>;
@@ -41,7 +43,7 @@ export interface ResultLang {
 }
 interface ResultPropData {
     result: Product;
-    controller?: SearchController | AutocompleteController | RecommendationController;
+    controller?: SearchController | AutocompleteController | RecommendationController | ChatController;
 }
 export type ResultNames = 'seed';
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAUpD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAG5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAI9D,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAyD7D,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAmQrD,CAAC;AAWH,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3F,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;IACpD,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,mBAAmB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1C,0BAA0B,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cAAc;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAUpD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAG5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACzI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAG9D,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAwD3E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAmRrD,CAAC;AAWH,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,GAAG,cAAc,CAAC;IACnG,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3F,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;IACpD,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,kBAAkB,CAAC,EAAE,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,mBAAmB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1C,0BAA0B,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cAAc;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,GAAG,cAAc,CAAC;CACnG;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC"}

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

@@ -1,11 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { Image } from '../../Atoms/Image';
 import { Price } from '../../Atoms/Price';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { defined, cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
 import { filters } from '@athoscommerce/snap-toolbox';
 import { ResultsLayout } from '../../../types';
@@ -13,8 +13,9 @@ import { CalloutBadge } from '../../Molecules/CalloutBadge';
 import { OverlayBadge } from '../../Molecules/OverlayBadge';
 import { Rating } from '../Rating';
 import { Button } from '../../Atoms/Button';
+import { Icon } from '../../Atoms/Icon';
 import deepmerge from 'deepmerge';
-import { useLang, useComponent } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 import { VariantSelection } from '../VariantSelection';
 const defaultStyles = () => {
     return css({
@@ -66,7 +67,6 @@ const defaultStyles = () => {
 };
 export const Result = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         layout: ResultsLayout.grid,
@@ -78,12 +78,13 @@ export const Result = observer((properties) => {
         hideRating: true,
     };
     const props = mergeProps('result', globalTheme, defaultProps, properties);
-    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.result || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, discussProductIcon, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('result', {
+        ...props,
+        customComponent: props.customComponent && props.customComponent !== 'Result' ? props.customComponent : undefined,
+    });
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const core = result?.display?.mappings.core || result?.mappings?.core;
     const [addedToCart, setAddedToCart] = useState(false);
@@ -137,7 +138,7 @@ export const Result = observer((properties) => {
             // default props
             internalClassName: 'ss__result__image',
             alt: core?.name || '',
-            src: core?.imageUrl || '',
+            src: core?.imageUrl || core?.thumbnailImageUrl || '',
             // inherited props
             ...defined({
                 disableStyles,
@@ -198,13 +199,17 @@ export const Result = observer((properties) => {
         controller: controller,
     });
     const isOnSale = Boolean(core?.msrp && core?.price && core?.price < core?.msrp);
-    return core ? (_jsx(CacheProvider, { children: _jsxs("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && (_jsx("div", { className: "ss__result__image-wrapper", children: _jsx("a", { href: core.url, onClick: (e) => {
-                            onClick && onClick(e);
-                        }, children: !hideBadge ? (_jsx(OverlayBadge, { ...subProps.overlayBadge, controller: controller, children: _jsx(Image, { ...subProps.image }) })) : (_jsx(Image, { ...subProps.image })) }) })), _jsxs("div", { className: "ss__result__details", children: [!hideBadge && (_jsx(CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && (_jsx("div", { className: "ss__result__details__title", children: _jsx("a", { href: core.url, onClick: (e) => {
+    return core ? (_jsx(CacheProvider, { children: _jsxs("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && (_jsxs("div", { className: "ss__result__image-wrapper", children: [_jsx("a", { href: core.url, onClick: (e) => {
+                                onClick && onClick(e);
+                            }, children: !hideBadge ? (_jsx(OverlayBadge, { ...subProps.overlayBadge, controller: controller, children: _jsx(Image, { ...subProps.image }) })) : (_jsx(Image, { ...subProps.image })) }), discussProductIcon && (_jsx("span", { className: "ss__result__discuss-product-button", onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                window?.athos?.fire?.('chat/productQuery', { result });
+                            }, role: "button", title: "Discuss this product", style: { position: 'absolute', bottom: '8px', left: '8px', cursor: 'pointer' }, children: _jsx(Icon, { ...discussProductIcon }) }))] })), _jsxs("div", { className: "ss__result__details", children: [!hideBadge && (_jsx(CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && (_jsx("div", { className: "ss__result__details__title", children: _jsx("a", { href: core.url, onClick: (e) => {
                                     onClick && onClick(e);
                                 }, dangerouslySetInnerHTML: {
                                     __html: displayName || '',
-                                } }) })), !hideRating && _jsx(Rating, { ...subProps.rating }), !hidePricing && core.price && core.price > 0 ? (_jsx("div", { className: "ss__result__details__pricing", children: isOnSale ? (_jsxs(_Fragment, { children: [_jsx(Price, { ...subProps.price, value: core.msrp, lineThrough: true, name: 'msrp' }), "\u00A0", _jsx(Price, { ...subProps.price, value: core.price, name: 'price' })] })) : (_jsx(Price, { ...subProps.price, value: core.price })) })) : null, cloneWithProps(detailSlot, { result, treePath }), !hideVariantSelections && result.variants?.selections.length && (_jsx("div", { className: "ss__result__details__variant-selection", children: result.variants?.selections.map((selection) => {
+                                } }) })), !hideRating && _jsx(Rating, { ...subProps.rating }), !hidePricing && core.price && core.price > 0 ? (_jsx("div", { className: "ss__result__details__pricing", children: isOnSale ? (_jsxs(_Fragment, { children: [_jsx(Price, { ...subProps.price, value: core.msrp, lineThrough: true, name: 'msrp' }), "\u00A0", _jsx(Price, { ...subProps.price, value: core.price, name: 'price' })] })) : (_jsx(Price, { ...subProps.price, value: core.price })) })) : null, cloneWithProps(detailSlot, { result, treePath }), !hideVariantSelections && result.variants?.selections?.length ? (_jsx("div", { className: "ss__result__details__variant-selection", children: result.variants?.selections.map((selection) => {
                                 return (_jsx(VariantSelection, { ...subProps.variantSelection, type: selection.type, selection: selection }));
-                            }) })), !hideAddToCartButton && (_jsx("div", { className: "ss__result__add-to-cart-wrapper", children: _jsx(Button, { ...subProps.button, content: addToCartButtonText, ...mergedLang.addToCartButtonText.all }) }))] })] }) })) : null;
+                            }) })) : null, !hideAddToCartButton && (_jsx("div", { className: "ss__result__add-to-cart-wrapper", children: _jsx(Button, { ...subProps.button, ...mergedLang.addToCartButtonText.all }) }))] })] }) })) : null;
 });

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

@@ -1,8 +1,9 @@
+import { h } from 'preact';
 import { ComponentProps } from '../../../types';
 import { MutableRef } from 'preact/hooks';
 import { ButtonProps } from '../../Atoms/Button';
 import { Lang, LangAttributes } from '../../../hooks/useLang';
-export declare const SearchInput: ((properties: SearchInputProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const SearchInput: ((properties: SearchInputProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type SearchInputProps = {
@@ -15,6 +16,7 @@ export type SearchInputTemplatesLegalProps = {
     submitSearchButton?: Buttons;
     clearSearchButton?: Buttons;
     closeSearchButton?: Buttons;
+    chatButton?: Buttons;
     hideSubmitSearchButton?: boolean;
     hideClearSearchButton?: boolean;
     hideCloseSearchButton?: boolean;
@@ -32,6 +34,7 @@ export interface SearchInputLang {
     closeSearchButton?: Lang<never>;
     clearSearchButton?: Lang<never>;
     submitSearchButton?: Lang<never>;
+    chatButton?: Lang<never>;
 }
 export {};
 //# sourceMappingURL=SearchInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAY,UAAU,EAA0B,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,cAAc,EAAW,MAAM,wBAAwB,CAAC;AAqCvE,eAAO,MAAM,WAAW,gBAAyB,gBAAgB;;CA6M/D,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,8BAA8B,GACjC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,MAAM,8BAA8B,GAAG;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,OAAO,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAQpC,MAAM,WAAW,eAAe;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,iBAAiB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACjC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAY,UAAU,EAA0B,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,cAAc,EAAW,MAAM,wBAAwB,CAAC;AAoCvE,eAAO,MAAM,WAAW,gBAAyB,gBAAgB;;CA6O/D,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,8BAA8B,GACjC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,MAAM,8BAA8B,GAAG;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,OAAO,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AASpC,MAAM,WAAW,eAAe;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,iBAAiB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACzB"}

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

@@ -3,12 +3,12 @@ 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 { useState } from 'preact/hooks';
 import { Button } from '../../Atoms/Button';
 import deepmerge from 'deepmerge';
 import { useLang } from '../../../hooks/useLang';
-import { useComponent } from '../../../hooks';
+import { useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = ({ theme }) => {
     return css({
         display: 'flex',
@@ -40,7 +40,6 @@ const defaultStyles = ({ theme }) => {
 };
 export const SearchInput = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         placeholderText: 'Search',
@@ -51,6 +50,9 @@ export const SearchInput = observer((properties) => {
         clearSearchButton: {
             icon: 'close-thin',
         },
+        chatButton: {
+            icon: 'chat',
+        },
     };
     const props = mergeProps('searchInput', globalTheme, defaultProps, properties);
     props.submitSearchButton = {
@@ -77,12 +79,18 @@ export const SearchInput = observer((properties) => {
         //passed in properties
         ...properties?.closeSearchButton,
     };
-    const { placeholderText, value, submitSearchButton, closeSearchButton, clearSearchButton, hideSubmitSearchButton, hideClearSearchButton, hideCloseSearchButton, inputRef, inputName, onChange, onClick, onKeyDown, onKeyUp, disabled, disableStyles, className, internalClassName, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.searchInput || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    props.chatButton = {
+        //defaults
+        ...defaultProps.chatButton,
+        //theme
+        ...props.chatButton,
+        //passed in properties
+        ...properties?.chatButton,
+    };
+    const { placeholderText, value, submitSearchButton, closeSearchButton, clearSearchButton, chatButton, hideSubmitSearchButton, hideClearSearchButton, hideCloseSearchButton, inputRef, inputName, onChange, onClick, onKeyDown, onKeyUp, disabled, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('searchInput', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     let inputValue;
     let setInputValue;
@@ -144,6 +152,23 @@ export const SearchInput = observer((properties) => {
             theme: props?.theme,
             treePath,
         },
+        chatButton: {
+            // default props
+            ...chatButton,
+            internalClassName: 'ss__search-input__button--chat-button',
+            name: 'chat',
+            onClick: () => {
+                // @ts-ignore - this is a button, so it should have an onClick prop?
+                chatButton?.onClick && chatButton.onClick();
+            },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
     };
     const styling = mergeStyles(props, defaultStyles);
     //initialize lang
@@ -168,6 +193,11 @@ export const SearchInput = observer((properties) => {
                 'aria-label': 'Submit Search',
             },
         },
+        chatButton: {
+            attributes: {
+                'aria-label': 'Open Chat',
+            },
+        },
     };
     //deep merge with props.lang
     const lang = deepmerge(defaultLang, props.lang || {});
@@ -177,5 +207,5 @@ export const SearchInput = observer((properties) => {
                             setInputValue(e.target.value || '');
                         }
                         onChange && onChange(e);
-                    }, disabled: disabled }), _jsxs("div", { className: "ss__search-input__icons", children: [!hideClearSearchButton && clearSearchButton && inputValue?.length ? (_jsx(Button, { ...subProps.clearSearchButton, ...mergedLang.clearSearchButton.all })) : null, !hideSubmitSearchButton && submitSearchButton && _jsx(Button, { ...subProps.submitSearchButton, ...mergedLang.submitSearchButton.all })] })] }) }));
+                    }, disabled: disabled }), _jsxs("div", { className: "ss__search-input__icons", children: [!hideClearSearchButton && clearSearchButton && inputValue?.length ? (_jsx(Button, { ...subProps.clearSearchButton, ...mergedLang.clearSearchButton.all })) : null, chatButton ? _jsx(Button, { ...subProps.chatButton, ...mergedLang.chatButton.all }) : null, !hideSubmitSearchButton && submitSearchButton && _jsx(Button, { ...subProps.submitSearchButton, ...mergedLang.submitSearchButton.all })] })] }) }));
 });

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAkE7D,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA8RrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,WAAW,EAAE,IAAI,CAAC;QACjB,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,OAAO,CAAC;KACd,CAAC,CAAC;CACH"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAiE3E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA2RrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,WAAW,EAAE,IAAI,CAAC;QACjB,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,OAAO,CAAC;KACd,CAAC,CAAC;CACH"}

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

@@ -3,13 +3,13 @@ import { useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Dropdown } from '../../Atoms/Dropdown';
 import { Button } from '../../Atoms/Button';
 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 = ({ color, backgroundColor, borderColor, theme, native }) => {
     if (!native) {
@@ -69,7 +69,6 @@ const defaultStyles = ({ color, backgroundColor, borderColor, theme, native }) =
 };
 export const Select = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         iconOpen: 'angle-down',
@@ -79,13 +78,11 @@ export const Select = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('select', globalTheme, defaultProps, properties);
-    const { backgroundColor, borderColor, color, clearSelection, disableClickOutside, disabled, hideLabel, hideLabelOnSelection, iconColor, iconClose, iconOpen, label, native, onSelect, selected, separator, startOpen, hideIcon, hideOptionIcons, hideOptionLabels, hideSelection, stayOpenOnSelection, disableStyles, className, internalClassName, treePath, customComponent, } = props;
+    const { backgroundColor, borderColor, color, clearSelection, disableClickOutside, disabled, hideLabel, hideLabelOnSelection, iconColor, iconClose, iconOpen, label, native, onSelect, selected, separator, startOpen, hideIcon, hideOptionIcons, hideOptionLabels, hideSelection, stayOpenOnSelection, disableStyles, className, internalClassName, treePath, } = props;
     let { options } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.select || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('select', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const subProps = {
         dropdown: {

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

@@ -1,6 +1,6 @@
-import { ComponentChildren } from 'preact';
+import { h, ComponentChildren } from 'preact';
 import { ComponentProps } from '../../../types';
-export declare const Slideout: ((properties: SlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const Slideout: ((properties: SlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type SlideoutProps = SlideoutTemplatesLegalProps & ComponentProps<SlideoutProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAgC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAiIzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA+B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA0HzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useRef } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { defined, cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
-import { useComponent, useMediaQuery } from '../../../hooks';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useMediaQuery, useCustomComponentOverride } from '../../../hooks';
 import { Overlay } from '../../Atoms/Overlay';
 const defaultStyles = ({ slideDirection, transitionSpeed, width }) => {
     return css({
@@ -34,7 +34,6 @@ const defaultStyles = ({ slideDirection, transitionSpeed, width }) => {
 };
 export const Slideout = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         active: false,
@@ -47,12 +46,10 @@ export const Slideout = observer((properties) => {
         rerender: true,
     };
     const props = mergeProps('slideout', globalTheme, defaultProps, properties);
-    const { children, active, rerender, buttonContent, buttonSelector, noButtonWrapper, displayAt, transitionSpeed, overlayColor, disableStyles, className, internalClassName, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.slideout || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { children, active, rerender, buttonContent, buttonSelector, noButtonWrapper, displayAt, transitionSpeed, overlayColor, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('slideout', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const subProps = {
         overlay: {
@@ -72,20 +69,19 @@ export const Slideout = observer((properties) => {
     // state
     const [isActive, setActive] = useState(Boolean(active));
     const [renderContent, setRenderContent] = useState(Boolean(active));
-    const toggleActive = () => {
-        if (isActive) {
-            setActive(false);
-            if (rerender) {
-                setTimeout(() => {
-                    setRenderContent(false);
-                }, 250);
-            }
-        }
-        else {
-            setActive(true);
+    const isActiveRef = useRef(isActive);
+    isActiveRef.current = isActive;
+    const toggleActive = (force) => {
+        const next = typeof force !== 'undefined' ? force : !isActiveRef.current;
+        setActive(next);
+        if (next) {
             setRenderContent(true);
         }
-        document.body.style.overflow = isActive ? 'hidden' : '';
+        else if (rerender) {
+            setTimeout(() => {
+                setRenderContent(false);
+            }, 250);
+        }
     };
     //this is used to update active state if active prop is changed from parent component.
     useEffect(() => {
@@ -100,19 +96,15 @@ export const Slideout = observer((properties) => {
     document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
     const styling = mergeStyles(props, defaultStyles);
     useEffect(() => {
-        if (buttonSelector) {
-            let button;
-            if (typeof buttonSelector == 'string') {
-                button = document.querySelector(buttonSelector);
-            }
-            else {
-                button = buttonSelector;
-            }
-            if (button) {
-                button.addEventListener('click', () => toggleActive());
-            }
-        }
-    }, []);
+        if (!buttonSelector)
+            return;
+        const targets = typeof buttonSelector == 'string' ? Array.from(document.querySelectorAll(buttonSelector)) : [buttonSelector];
+        const handler = typeof buttonSelector == 'string' ? () => toggleActive(true) : () => toggleActive();
+        targets.forEach((target) => target.addEventListener('click', handler));
+        return () => {
+            targets.forEach((target) => target.removeEventListener('click', handler));
+        };
+    }, [buttonSelector]);
     return isVisible || !rerender ? (_jsxs(CacheProvider, { children: [buttonContent &&
-                (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive, treePath })) : (_jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: cloneWithProps(buttonContent, { active: isActive, treePath }) }))), _jsx("div", { className: classnames('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && cloneWithProps(children, { toggleActive, active: isActive, treePath }) }), _jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive })] })) : null;
+                (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive, treePath })) : (_jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: cloneWithProps(buttonContent, { active: isActive, treePath }) }))), _jsx("div", { className: classnames('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && cloneWithProps(children, { toggleActive, active: isActive, treePath }) }), _jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: () => toggleActive(false) })] })) : null;
 });

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

@@ -1,7 +1,8 @@
+import { h } from 'preact';
 import { ComponentProps } from '../../../types';
 import { Lang } from '../../../hooks';
 import { LangAttributes } from '../../../hooks/useLang';
-export declare function Slideshow(properties: SlideshowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Slideshow(properties: SlideshowProps): import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null;
 export interface SlideshowLang {
     pauseButton: Lang<{
         isPlaying: boolean;

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

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

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

@@ -1,12 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useState, useEffect, useRef } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { mergeProps, mergeStyles, defined } from '../../../utilities';
 import { Image } from '../../Atoms/Image';
 import { Button } from '../../Atoms/Button';
-import { useComponent, useLang } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayNavigation = false, showNavigation }) => {
     return css({
@@ -143,7 +143,6 @@ const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayN
 };
 export function Slideshow(properties) {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         treePath: globalTreePath,
@@ -161,12 +160,10 @@ export function Slideshow(properties) {
         dragThreshold: 50,
     };
     const props = mergeProps('slideshow', globalTheme, defaultProps, properties);
-    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, gap, treePath, overlayNavigation, dragThreshold, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.slideshow || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, gap, treePath, overlayNavigation, dragThreshold, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('slideshow', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     let touchDragging = props.touchDragging;
     const subProps = {
@@ -578,7 +575,7 @@ export function Slideshow(properties) {
                         }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
                         // Touch events
                         // @ts-ignore - touch events
-                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0]) : undefined, 
+                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
                         // @ts-ignore - touch events
                         onTouchMove: touchDragging
                             ? (event) => {
@@ -593,6 +590,10 @@ export function Slideshow(properties) {
                         // @ts-ignore - mouse events
                         onMouseDown: touchDragging
                             ? (event) => {
+                                // Only initiate dragging with the primary (left) mouse button.
+                                // Right/middle clicks should not start a drag (e.g. opening the context menu).
+                                if (event.button !== 0)
+                                    return;
                                 event.preventDefault();
                                 handleDragStart(event.clientX);
                             }

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

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