@athoscommerce/snap-preact 1.6.0 → 1.7.0

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

@@ -3,8 +3,8 @@ import { useState, useEffect } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
-import { useClickOutside, useComponent } from '../../../hooks';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useClickOutside, useCustomComponentOverride } from '../../../hooks';
 import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
 import { useA11y } from '../../../hooks/useA11y';
 import { Overlay } from '../../Atoms/Overlay';
@@ -40,7 +40,6 @@ const defaultStyles = () => {
 };
 export const Modal = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         startOpen: false,
@@ -50,12 +49,10 @@ export const Modal = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('modal', globalTheme, defaultProps, properties);
-    const { button, content, buttonSelector, children, disabled, open, onClick, lockScroll, startOpen, disableClickOutside, disableA11y, className, internalClassName, disableStyles, overlayColor, onOverlayClick, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.modal || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { button, content, buttonSelector, children, disabled, open, onClick, lockScroll, startOpen, disableClickOutside, disableA11y, className, internalClassName, disableStyles, overlayColor, onOverlayClick, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('modal', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const subProps = {
         overlay: {

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

@@ -1,8 +1,8 @@
-import { ComponentChildren } from 'preact';
+import { ComponentChildren, h } from 'preact';
 import { ComponentProps, ComponentMap } from '../../../types';
 import type { AutocompleteController, RecommendationController, SearchController } from '@athoscommerce/snap-controller';
 import type { Product } from '@athoscommerce/snap-store-mobx';
-export declare const OverlayBadge: ((properties: OverlayBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const OverlayBadge: ((properties: OverlayBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type OverlayBadgeProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAuD9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAwGjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CACjF,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAgE9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAwGjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CACjF,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B,CAAC"}

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

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useTheme, CacheProvider, useSnap, useTreePath } from '../../../providers';
 import { defaultBadgeComponentMap, mergeProps, mergeStyles } from '../../../utilities';
-import { useComponent } from '../../../hooks';
+import { useComponent, useCustomComponentOverride } from '../../../hooks';
 const defaultBadgeStyles = ({ section, top, bottom, index, tag, }) => {
     return css({
         position: 'relative',
@@ -47,6 +47,13 @@ const defaultStyles = ({ controller }) => {
         },
     });
 };
+const BadgeRenderer = ({ badge, badgeComponentMap, treePath }) => {
+    const { ComponentOverride: BadgeComponent } = useComponent(badgeComponentMap, badge.component);
+    if (!BadgeComponent) {
+        return null;
+    }
+    return _jsx(BadgeComponent, { ...badge, ...badge.parameters, treePath: treePath });
+};
 export const OverlayBadge = observer((properties) => {
     const globalTheme = useTheme();
     const snap = useSnap();
@@ -56,12 +63,10 @@ export const OverlayBadge = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('overlayBadge', globalTheme, defaultProps, properties);
-    const { result, children, controller, renderEmpty, limit, className, internalClassName, treePath, customComponent } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.overlayBadge || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { result, children, controller, renderEmpty, limit, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('overlayBadge', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     if (!children) {
         controller?.log?.warn('OverlayBadge component must have children');
@@ -110,13 +115,7 @@ export const OverlayBadge = observer((properties) => {
                                     top: slot.top,
                                     bottom: slot.bottom,
                                 });
-                                return (_jsx("div", { className: classnames('ss__overlay-badge__grid-wrapper__slot', `ss__overlay-badge__grid-wrapper__slot--${slot.tag}`), css: [badgeStyles], children: slot.badges.map((badge) => {
-                                        const BadgeComponent = useComponent(badgeComponentMap, badge.component);
-                                        if (!BadgeComponent) {
-                                            return null;
-                                        }
-                                        return _jsx(BadgeComponent, { ...badge, ...badge.parameters, treePath: treePath });
-                                    }) }));
+                                return (_jsx("div", { className: classnames('ss__overlay-badge__grid-wrapper__slot', `ss__overlay-badge__grid-wrapper__slot--${slot.tag}`), css: [badgeStyles], children: slot.badges.map((badge, badgeIndex) => (_jsx(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, `${slot.tag}-${badge.component}-${badgeIndex}`))) }, `${location.section}-${slot.tag}`));
                             });
                         }) }), children] }) }));
     }

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

@@ -0,0 +1,48 @@
+import { h } from 'preact';
+import { MutableRef } from 'preact/hooks';
+import { ComponentProps } from '../../../types';
+import type { SearchController, AutocompleteController, RecommendationController } from '@athoscommerce/snap-controller';
+import type { Product } from '@athoscommerce/snap-store-mobx';
+import { Lang } from '../../../hooks';
+export declare const OverlayResult: ((properties: OverlayResultProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export interface TruncateTitleProps {
+    limit: number;
+    append?: string;
+}
+export type OverlayResultProps = {
+    result: Product;
+    controller?: SearchController | AutocompleteController | RecommendationController;
+    lang?: Partial<OverlayResultLang>;
+    trackingRef?: MutableRef<HTMLElement | null>;
+} & OverlayResultTemplatesLegalProps & ComponentProps<OverlayResultProps>;
+export type OverlayResultTemplatesLegalProps = {
+    disableSlide?: boolean;
+    overlayBackground?: string;
+    hideBadge?: boolean;
+    hideTitle?: boolean;
+    hideImage?: boolean;
+    hidePricing?: boolean;
+    hideRating?: boolean;
+    hideVariantSelections?: boolean;
+    hideAddToCartButton?: boolean;
+    addToCartButtonText?: string;
+    onAddToCartClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, result: Product) => void;
+    addToCartButtonSuccessText?: string;
+    addToCartButtonSuccessTimeout?: number;
+    detailSlot?: JSX.Element | JSX.Element[];
+    fallback?: string;
+    truncateTitle?: TruncateTitleProps;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, Event>) => void;
+};
+export interface OverlayResultLang {
+    addToCartButtonText: Lang<OverlayResultPropData>;
+    addToCartButtonSuccessText: Lang<OverlayResultPropData>;
+}
+interface OverlayResultPropData {
+    result: Product;
+    controller?: SearchController | AutocompleteController | RecommendationController;
+}
+export {};
+//# sourceMappingURL=OverlayResult.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayResult/OverlayResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAUpD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,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,EAAuC,MAAM,gBAAgB,CAAC;AAiH3E,eAAO,MAAM,aAAa,gBAAyB,kBAAkB;;CAwQnE,CAAC;AAWH,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C,GAAG,gCAAgC,GACnC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEpC,MAAM,MAAM,gCAAgC,GAAG;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,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,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF,MAAM,WAAW,iBAAiB;IACjC,mBAAmB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACjD,0BAA0B,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;CACxD;AAED,UAAU,qBAAqB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

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

@@ -0,0 +1,260 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 } from '../../../providers';
+import { defined, cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
+import { filters } from '@athoscommerce/snap-toolbox';
+import { CalloutBadge } from '../CalloutBadge';
+import { OverlayBadge } from '../OverlayBadge';
+import { Rating } from '../Rating';
+import { Button } from '../../Atoms/Button';
+import deepmerge from 'deepmerge';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
+import { VariantSelection } from '../VariantSelection';
+const defaultStyles = (props) => {
+    const { overlayBackground, disableSlide } = props;
+    return css({
+        position: 'relative',
+        overflow: 'hidden',
+        '& .ss__overlay-result__image-wrapper': {
+            position: 'relative',
+            width: '100%',
+            '& .ss__overlay-result__badge': {
+                background: 'rgba(255, 255, 255, 0.5)',
+                padding: '10px',
+            },
+            '& .ss__overlay-result__image': {
+                display: 'block',
+                width: '100%',
+                objectFit: 'cover',
+            },
+        },
+        '& .ss__overlay-result__details': {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            width: '100%',
+            boxSizing: 'border-box',
+            padding: '18px 10px 10px',
+            background: overlayBackground,
+            color: '#fff',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+            alignItems: 'flex-start',
+            textAlign: 'left',
+            transform: 'translateY(0)',
+            transition: disableSlide ? 'none' : 'transform 260ms ease',
+            '& .ss__overlay-result__details__title': {
+                marginBottom: '4px',
+                '& a': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+            },
+            '& .ss__overlay-result__details__pricing': {
+                marginBottom: '4px',
+                '& .ss__overlay-result__price': {
+                    color: '#fff',
+                    fontSize: '1.3em',
+                },
+                '& .ss__price--strike': {
+                    color: 'rgba(255,255,255,0.7)',
+                    fontSize: '0.9em',
+                },
+            },
+            '& .ss__overlay-result__rating': {
+                marginBottom: '4px',
+            },
+            '& .ss__overlay-result__button--addToCart': {
+                marginTop: '6px',
+            },
+            '& .ss__overlay-result__details__extra': {
+                display: 'grid',
+                gridTemplateRows: disableSlide ? '1fr' : '0fr',
+                opacity: disableSlide ? 1 : 0,
+                transform: disableSlide ? 'translateY(0)' : 'translateY(1px)',
+                transition: disableSlide ? 'none' : 'grid-template-rows 260ms ease, opacity 220ms ease, transform 260ms ease',
+                width: '100%',
+                '& .ss__overlay-result__details__extra-inner': {
+                    overflow: 'hidden',
+                    minHeight: 0,
+                },
+            },
+        },
+        '&:hover .ss__overlay-result__details': {
+            transform: 'translateY(0)',
+        },
+        '&:hover .ss__overlay-result__details .ss__overlay-result__details__extra': {
+            gridTemplateRows: '1fr',
+            opacity: 1,
+            transform: 'translateY(0)',
+        },
+        //a11y support for touch devices - show details on focus of the result
+        '&:focus-within .ss__overlay-result__details': {
+            transform: 'translateY(0)',
+        },
+        '&:focus-within .ss__overlay-result__details .ss__overlay-result__details__extra': {
+            gridTemplateRows: '1fr',
+            opacity: 1,
+            transform: 'translateY(0)',
+        },
+        '@media (hover: none)': {
+            '& .ss__overlay-result__details .ss__overlay-result__details__extra': {
+                gridTemplateRows: '1fr',
+                opacity: 1,
+                transform: 'translateY(0)',
+            },
+        },
+    });
+};
+export const OverlayResult = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        addToCartButtonText: 'Add To Cart',
+        addToCartButtonSuccessText: 'Added!',
+        addToCartButtonSuccessTimeout: 2000,
+        hideAddToCartButton: true,
+        overlayBackground: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%)',
+    };
+    const props = mergeProps('overlayResult', globalTheme, defaultProps, properties);
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('overlayResult', {
+        ...props,
+        customComponent: !treePath?.split(' ')?.includes('result') && props.customComponent && props.customComponent !== 'OverlayResult'
+            ? props.customComponent
+            : undefined,
+    });
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const core = result?.display?.mappings.core || result?.mappings?.core;
+    const [addedToCart, setAddedToCart] = useState(false);
+    const subProps = {
+        variantSelection: {
+            // global theme
+            internalClassName: 'ss__overlay-result__variant-selection',
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+        price: {
+            // global theme
+            internalClassName: 'ss__overlay-result__price',
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+        calloutBadge: {
+            // default props
+            internalClassName: 'ss__overlay-result__callout-badge',
+            result,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+        overlayBadge: {
+            // default props
+            internalClassName: 'ss__overlay-result__overlay-badge',
+            result,
+            controller: controller,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+        image: {
+            // default props
+            internalClassName: 'ss__overlay-result__image',
+            alt: core?.name || '',
+            src: core?.imageUrl || '',
+            // inherited props
+            ...defined({
+                disableStyles,
+                fallback: fallback,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+        rating: {
+            // default props
+            internalClassName: 'ss__overlay-result__rating',
+            value: core?.rating || 0,
+            count: Number(core?.ratingCount || 0),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+        button: {
+            // default props
+            internalClassName: 'ss__overlay-result__button--addToCart',
+            onClick: (e) => {
+                setAddedToCart(true);
+                if (onAddToCartClick) {
+                    onAddToCartClick(e, result);
+                }
+                controller?.addToCart([result]);
+                setTimeout(() => setAddedToCart(false), addToCartButtonSuccessTimeout);
+            },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    let displayName = core?.name;
+    if (props.truncateTitle) {
+        displayName = filters.truncate(core?.name || '', props.truncateTitle.limit, props.truncateTitle.append);
+    }
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        addToCartButtonText: {
+            value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        result: result,
+        controller: controller,
+    });
+    const isOnSale = Boolean(core?.msrp && core?.price && core?.price < core?.msrp);
+    return core ? (_jsx(CacheProvider, { children: _jsxs("article", { ...styling, className: classnames('ss__overlay-result', { 'ss__overlay-result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && (_jsx("div", { className: "ss__overlay-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__overlay-result__details", children: [!hideTitle && (_jsx("div", { className: "ss__overlay-result__details__title", children: _jsx("a", { href: core.url, onClick: (e) => {
+                                    onClick && onClick(e);
+                                }, dangerouslySetInnerHTML: {
+                                    __html: displayName || '',
+                                } }) })), _jsx("div", { className: "ss__overlay-result__details__extra", children: _jsxs("div", { className: "ss__overlay-result__details__extra-inner", children: [!hideBadge && (_jsx(CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideRating && _jsx(Rating, { ...subProps.rating }), !hidePricing && core.price && core.price > 0 ? (_jsx("div", { className: "ss__overlay-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__overlay-result__details__variant-selection", children: result.variants?.selections.map((selection) => {
+                                            return _jsx(VariantSelection, { ...subProps.variantSelection, selection: selection });
+                                        }) })) : null, !hideAddToCartButton && (_jsx("div", { className: "ss__overlay-result__add-to-cart-wrapper", children: _jsx(Button, { ...subProps.button, content: addToCartButtonText, ...mergedLang.addToCartButtonText.all }) }))] }) })] })] }) })) : null;
+});

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAmB7D,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CAgL7D,CAAC;AAMH,MAAM,MAAM,eAAe,GAAG;IAC7B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B,GAAG,6BAA6B,GAChC,cAAc,CAAC,eAAe,CAAC,CAAC;AAEjC,MAAM,MAAM,6BAA6B,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,IAAI,CAAC;QACd,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,KAAK,EAAE,IAAI,CAAC;QACX,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;QAClC,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;CACH"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAkB3E,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CA6K7D,CAAC;AAMH,MAAM,MAAM,eAAe,GAAG;IAC7B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B,GAAG,6BAA6B,GAChC,cAAc,CAAC,eAAe,CAAC,CAAC;AAEjC,MAAM,MAAM,6BAA6B,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,IAAI,CAAC;QACd,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,KAAK,EAAE,IAAI,CAAC;QACX,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;QAClC,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;CACH"}

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

@@ -2,11 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 deepmerge from 'deepmerge';
-import { useComponent, useLang } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = () => {
     return css({
         '& .ss__pagination__page': {
@@ -24,19 +24,16 @@ const defaultStyles = () => {
 };
 export const Pagination = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         pages: 5,
         treePath: globalTreePath,
     };
     const props = mergeProps('pagination', globalTheme, defaultProps, properties);
-    const { pagination, controller, pages, pagesLeft, pagesRight, hideFirst, hideLast, persistFirst, persistLast, hideEllipsis, hideNext, hidePrev, nextButton, prevButton, firstButton, lastButton, disableStyles, className, internalClassName, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.pagination || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { pagination, controller, pages, pagesLeft, pagesRight, hideFirst, hideLast, persistFirst, persistLast, hideEllipsis, hideNext, hidePrev, nextButton, prevButton, firstButton, lastButton, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('pagination', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const subProps = {
         icon: {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PerPage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/PerPage/PerPage.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAgB,MAAM,gBAAgB,CAAC;AAYpD,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CA+HvD,CAAC;AAQH,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"PerPage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/PerPage/PerPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,IAAI,EAA8B,MAAM,gBAAgB,CAAC;AAWlE,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CA6HvD,CAAC;AAQH,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

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

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Select } from '../Select';
 import { RadioList } from '../RadioList';
 import { List } from '../List';
 import deepmerge from 'deepmerge';
-import { useComponent } from '../../../hooks';
+import { useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = () => {
     return css({
         '.ss__button__content': {
@@ -19,7 +19,6 @@ const defaultStyles = () => {
 };
 export const PerPage = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         label: 'Per Page',
@@ -27,12 +26,10 @@ export const PerPage = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('perPage', globalTheme, defaultProps, properties);
-    const { pagination, type, controller, label, disableStyles, className, internalClassName, treePath, customComponent } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.perPage || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { pagination, type, controller, label, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('perPage', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const store = pagination || controller?.store?.pagination;
     const subProps = {

package/dist/esm/components/src/components/Molecules/Radio/Radio.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 Radio: ((properties: RadioProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const Radio: ((properties: RadioProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type RadioProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Radio/Radio.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;AAwB7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CAyJnD,CAAC;AAOH,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CAC1B,GAAG,wBAAwB,GAC3B,cAAc,CAAC,UAAU,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,SAAS;IACzB,KAAK,EAAE,IAAI,CAAC;QACX,QAAQ,EAAE,OAAO,CAAC;QAClB,YAAY,EAAE,OAAO,CAAC;KACtB,CAAC,CAAC;CACH"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Radio/Radio.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;AAuB3E,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CAsJnD,CAAC;AAOH,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CAC1B,GAAG,wBAAwB,GAC3B,cAAc,CAAC,UAAU,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,SAAS;IACzB,KAAK,EAAE,IAAI,CAAC;QACX,QAAQ,EAAE,OAAO,CAAC;QAClB,YAAY,EAAE,OAAO,CAAC;KACtB,CAAC,CAAC;CACH"}

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

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

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

@@ -1,6 +1,7 @@
+import { h } from 'preact';
 import { ComponentProps, ListOption } from '../../../types';
 import { Lang } from '../../../hooks';
-export declare function RadioList(properties: RadioListProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare function RadioList(properties: RadioListProps): import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null;
 export type RadioListProps = {
     lang?: Partial<RadioListLang>;
 } & RadioListTemplatesLegalProps & ComponentProps<RadioListProps>;