@athoscommerce/snap-preact 1.5.1 → 1.7.0

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

@@ -3,10 +3,10 @@ import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { Button } from '../../Atoms/Button';
 import { Icon } from '../../Atoms/Icon';
-import { useComponent, useLang } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const defaultStyles = ({}) => {
     return css({
@@ -28,18 +28,15 @@ const defaultStyles = ({}) => {
 // TODO: look into urlManager and how it connects in this case, left the href out for the time being
 export const Filter = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         treePath: globalTreePath,
     };
     const props = mergeProps('filter', globalTheme, defaultProps, properties);
-    const { filter, facetLabel, valueLabel, url, hideFacetLabel, onClick, icon, separator, disableStyles, className, internalClassName, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.filter || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { filter, facetLabel, valueLabel, url, hideFacetLabel, onClick, icon, separator, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('filter', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const link = filter?.url?.link || url?.link;
     const value = filter?.value.label || valueLabel;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Grid/Grid.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,IAAI,EAAkC,MAAM,gBAAgB,CAAC;AA0HtE,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAkNzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AA4HpF,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2EAmNzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;CACH"}

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

@@ -4,11 +4,13 @@ import { useState } from 'preact/hooks';
 import classnames from 'classnames';
 import deepmerge from 'deepmerge';
 import { filters } from '@athoscommerce/snap-toolbox';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
-import { useA11y, useLang, useComponent } from '../../../hooks';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useA11y, useLang, useCustomComponentOverride } from '../../../hooks';
 import { Image } from '../../Atoms/Image';
 import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
-import { colord } from 'colord';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+extend([namesPlugin]);
 const defaultStyles = ({ gapSize, columns, theme, disableOverflowAction }) => {
     return css({
         '.ss__grid__options': {
@@ -113,7 +115,6 @@ const defaultStyles = ({ gapSize, columns, theme, disableOverflowAction }) => {
 };
 export function Grid(properties) {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         // default props
@@ -123,12 +124,10 @@ export function Grid(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('grid', globalTheme, defaultProps, properties);
-    const { titleText, onSelect, hideLabels, disableOverflowAction, multiSelect, overflowButton, columns, rows, hideShowLess, overflowButtonInGrid, disabled, options, disableStyles, onOverflowButtonClick, className, internalClassName, treePath, disableA11y, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.grid || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { titleText, onSelect, hideLabels, disableOverflowAction, multiSelect, overflowButton, columns, rows, hideShowLess, overflowButtonInGrid, disabled, options, disableStyles, onOverflowButtonClick, className, internalClassName, treePath, disableA11y, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('grid', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const subProps = {
         image: {
@@ -216,11 +215,16 @@ export function Grid(properties) {
     return typeof options == 'object' && options?.length ? (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__grid', disabled ? 'ss__grid--disabled' : '', className, internalClassName), children: [titleText && _jsx("h5", { className: "ss__grid__title", children: titleText }), _jsxs("div", { className: "ss__grid__options", children: [options.map((option, idx) => {
                             const selected = selection.some((select) => select.value == option.value);
                             let isDark = false;
-                            try {
-                                const color = colord(option.background ? option.background.toLowerCase() : option.backgroundImageUrl ? `` : option.value.toString().toLowerCase());
-                                isDark = color.isDark();
+                            const colorString = option.background?.toLowerCase() || (!option.backgroundImageUrl ? option.value.toString().toLowerCase() : null);
+                            if (colorString) {
+                                try {
+                                    const color = colord(colorString);
+                                    if (color.isValid()) {
+                                        isDark = color.isDark();
+                                    }
+                                }
+                                catch (err) { }
                             }
-                            catch (err) { }
                             if (!limited || options.length == limit || idx < limit - (overflowButtonInGrid ? 1 : 0)) {
                                 return (_jsx("div", { className: classnames(`ss__grid__option`, {
                                         'ss__grid__option--selected': selected,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutSelector.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LayoutSelector/LayoutSelector.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAIzE,OAAO,EAAE,IAAI,EAAgB,MAAM,gBAAgB,CAAC;AAapD,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAyJrE,CAAC;AAOH,MAAM,MAAM,mBAAmB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACtB,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"LayoutSelector.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LayoutSelector/LayoutSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAIzE,OAAO,EAAE,IAAI,EAA8B,MAAM,gBAAgB,CAAC;AAYlE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA2IrE,CAAC;AAOH,MAAM,MAAM,mBAAmB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACtB,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,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/LayoutSelector/LayoutSelector.js

@@ -2,12 +2,12 @@ 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 { List } from '../List';
 import { RadioList } from '../RadioList';
-import { useComponent } from '../../../hooks';
+import { useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const defaultStyles = ({}) => {
     return css({
@@ -19,7 +19,6 @@ const defaultStyles = ({}) => {
 };
 export const LayoutSelector = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         label: 'Layout',
@@ -29,13 +28,11 @@ export const LayoutSelector = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('layoutSelector', globalTheme, defaultProps, properties);
-    const { options, selected, type, onSelect, showSingleOption, hideLabel, hideOptionLabels, disableStyles, className, internalClassName, treePath, customComponent, } = props;
+    const { options, selected, type, onSelect, showSingleOption, hideLabel, hideOptionLabels, disableStyles, className, internalClassName, treePath } = props;
     let label = props.label;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.layoutSelector || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('layoutSelector', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const subProps = {
         Select: {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/List/List.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAkC,MAAM,gBAAgB,CAAC;AAoDtE,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAkLzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AAmDpF,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2EA+KzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

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

@@ -4,10 +4,10 @@ import { css } from '@emotion/react';
 import classnames from 'classnames';
 import deepmerge from 'deepmerge';
 import { filters } from '@athoscommerce/snap-toolbox';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Checkbox } from '../Checkbox';
-import { useA11y, useComponent, useLang } from '../../../hooks';
+import { useA11y, useLang, useCustomComponentOverride } from '../../../hooks';
 import { Icon } from '../../Atoms/Icon';
 const defaultStyles = ({ horizontal }) => {
     return css({
@@ -52,18 +52,15 @@ const defaultStyles = ({ horizontal }) => {
 };
 export function List(properties) {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         treePath: globalTreePath,
     };
     const props = mergeProps('list', globalTheme, defaultProps, properties);
-    const { titleText, onSelect, native, multiSelect, hideOptionLabels, hideOptionIcons, hideOptionCheckboxes, disabled, hideTitleText, options, requireSelection, disableStyles, className, internalClassName, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.list || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { titleText, onSelect, native, multiSelect, hideOptionLabels, hideOptionIcons, hideOptionCheckboxes, disabled, hideTitleText, options, requireSelection, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('list', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     let selected = props.selected;
     const subProps = {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"LoadMore.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LoadMore/LoadMore.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAA0C,MAAM,gBAAgB,CAAC;AAC9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAsD7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA2KzD,CAAC;AAOH,MAAM,MAAM,aAAa,GAAG;IAC3B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,cAAc,EAAE,IAAI,CAAC;QACpB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;CACH"}
+{"version":3,"file":"LoadMore.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LoadMore/LoadMore.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAwD,MAAM,gBAAgB,CAAC;AAC5F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAqD7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAwKzD,CAAC;AAOH,MAAM,MAAM,aAAa,GAAG;IAC3B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,cAAc,EAAE,IAAI,CAAC;QACpB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;CACH"}

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

@@ -4,9 +4,9 @@ import { css, keyframes } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import deepmerge from 'deepmerge';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
-import { useComponent, useIntersection, useLang } from '../../../hooks';
+import { useIntersection, useLang, useCustomComponentOverride } from '../../../hooks';
 import { Button } from '../../Atoms/Button';
 import { Icon } from '../../Atoms/Icon';
 import { useFuncDebounce } from '../../../hooks';
@@ -61,7 +61,6 @@ const defaultStyles = ({ pagination, progressIndicatorWidth, progressIndicatorSi
 };
 export const LoadMore = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         loadMoreText: 'Load More',
@@ -72,12 +71,10 @@ export const LoadMore = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('loadMore', globalTheme, defaultProps, properties);
-    const { pagination, controller, onClick, autoFetch, intersectionOffset, loading, loadMoreText, hideProgressIndicator, hideProgressText, loadingLocation, loadingIcon, disableStyles, className, internalClassName, treePath, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.loadMore || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { pagination, controller, onClick, autoFetch, intersectionOffset, loading, loadMoreText, hideProgressIndicator, hideProgressText, loadingLocation, loadingIcon, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('loadMore', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const store = pagination || controller?.store?.pagination;
     const isLoading = typeof loading == 'boolean' ? loading : controller?.store?.loading;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAwC7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA8KnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuC7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA2KnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC"}

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"}