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

package/dist/esm/components/src/components/Atoms/Overlay/Overlay.d.ts

@@ -1,5 +1,6 @@
+import { h } from 'preact';
 import { ComponentProps } from '../../../types';
-export declare function Overlay(properties: OverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Overlay(properties: OverlayProps): import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null;
 export type OverlayProps = OverlayTemplatesLegalProps & ComponentProps<OverlayProps>;
 export type OverlayTemplatesLegalProps = {
     active: boolean;

package/dist/esm/components/src/components/Atoms/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuB7D,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,oDAkC/C;AAED,MAAM,MAAM,YAAY,GAAG,0BAA0B,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;AAErF,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAsB7D,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,2EAgC/C;AAED,MAAM,MAAM,YAAY,GAAG,0BAA0B,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;AAErF,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}

package/dist/esm/components/src/components/Atoms/Overlay/Overlay.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 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 } from '../../../utilities';
-import { useComponent } from '../../../hooks';
+import { useCustomComponentOverride } from '../../../hooks';
 import { useA11y } from '../../../hooks';
 const defaultStyles = ({ transitionSpeed, color }) => {
     return css({
@@ -23,7 +23,6 @@ const defaultStyles = ({ transitionSpeed, color }) => {
 };
 export function Overlay(properties) {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         color: 'rgba(0,0,0,0.8)',
@@ -31,12 +30,10 @@ export function Overlay(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('overlay', globalTheme, defaultProps, properties);
-    const { active, onClick, disableA11y, className, internalClassName, customComponent } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.overlay || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { active, onClick, disableA11y, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('overlay', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const styling = mergeStyles(props, defaultStyles);
     return (_jsx(CacheProvider, { children: _jsx("div", { onClick: (e) => onClick && active && onClick(e), ref: (e) => (!disableA11y ? useA11y(e, active ? 0 : -1) : null), className: classnames('ss__overlay', { 'ss__overlay--active': active }, className, internalClassName), ...styling }) }));

package/dist/esm/components/src/components/Atoms/PaginationInfo/PaginationInfo.d.ts

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

package/dist/esm/components/src/components/Atoms/PaginationInfo/PaginationInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationInfo.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/PaginationInfo/PaginationInfo.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAO7D,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA4DrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnC,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,sBAAsB,KAAK,MAAM,CAAC,CAAC;CAC/D,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;CACvC;AAED,UAAU,sBAAsB;IAC/B,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACnC"}
+{"version":3,"file":"PaginationInfo.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/PaginationInfo/PaginationInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAM3E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA0DrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnC,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,sBAAsB,KAAK,MAAM,CAAC,CAAC;CAC/D,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;CACvC;AAED,UAAU,sBAAsB;IAC/B,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACnC"}

package/dist/esm/components/src/components/Atoms/PaginationInfo/PaginationInfo.js

@@ -2,16 +2,15 @@ import { jsx as _jsx } 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 { mergeProps, mergeStyles } from '../../../utilities';
 import deepmerge from 'deepmerge';
-import { useLang, useComponent } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = ({}) => {
     return css({});
 };
 export const PaginationInfo = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const pagination = properties.controller?.store.pagination || properties.pagination;
     const defaultProps = {
@@ -19,12 +18,10 @@ export const PaginationInfo = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('paginationInfo', globalTheme, defaultProps, properties);
-    const { controller, infoText, className, internalClassName, customComponent } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.paginationInfo || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { controller, infoText, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('paginationInfo', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const store = pagination || controller?.store?.pagination;
     const styling = mergeStyles(props, defaultStyles);

package/dist/esm/components/src/components/Atoms/Price/Price.d.ts

@@ -1,6 +1,7 @@
+import { h } from 'preact';
 import { FormattedNumberProps } from '../FormattedNumber/FormattedNumber';
 import { ComponentProps } from '../../../types';
-export declare function Price(properties: PriceProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare function Price(properties: PriceProps): import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null;
 export type PriceProps = PriceTemplatesLegalProps & ComponentProps<PriceProps>;
 export interface PriceTemplatesLegalProps extends Omit<FormattedNumberProps, 'value' | 'themeStyleScript'> {
     value?: number;

package/dist/esm/components/src/components/Atoms/Price/Price.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Price/Price.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAe7D,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,2DAoE3C;AAED,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAC/E,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,kBAAkB,CAAC;IACzG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC"}
+{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Price/Price.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAc7D,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,2EAiE3C;AAED,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAC/E,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,kBAAkB,CAAC;IACzG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC"}

package/dist/esm/components/src/components/Atoms/Price/Price.js

@@ -1,10 +1,10 @@
-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 { filters } from '@athoscommerce/snap-toolbox';
 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 } from '../../../utilities';
-import { useComponent } from '../../../hooks';
+import { useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = ({ theme }) => {
     return css({
         color: theme?.variables?.colors?.primary,
@@ -16,7 +16,6 @@ const defaultStyles = ({ theme }) => {
 };
 export function Price(properties) {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         symbol: '$',
@@ -29,12 +28,10 @@ export function Price(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('price', globalTheme, defaultProps, properties);
-    const { lineThrough, value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, raw, className, internalClassName, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.price || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { lineThrough, value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, raw, className, internalClassName, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('price', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     let formattedPrice;
     if (value) {

package/dist/esm/components/src/components/Atoms/SearchHeader/SearchHeader.d.ts

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

package/dist/esm/components/src/components/Atoms/SearchHeader/SearchHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchHeader.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/SearchHeader/SearchHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGnH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAQ3C,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CA8JjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACjC,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IACjE,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IACvE,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IAClE,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IACnE,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACtC,kBAAkB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC/C,aAAa,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC1C,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC3C,kBAAkB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;CAC1C;AAED,UAAU,oBAAoB;IAC7B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC1B"}
+{"version":3,"file":"SearchHeader.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/SearchHeader/SearchHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGnH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAO3C,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CA2JjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACjC,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IACjE,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IACvE,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IAClE,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IACnE,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,CAAC,CAAC;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACtC,kBAAkB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC/C,aAAa,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC1C,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC3C,kBAAkB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;CAC1C;AAED,UAAU,oBAAoB;IAC7B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC1B"}

package/dist/esm/components/src/components/Atoms/SearchHeader/SearchHeader.js

@@ -1,17 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
 import classnames from 'classnames';
-import { useLang, useComponent } from '../../../hooks';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
 const defaultStyles = () => {
     return css({});
 };
 export const SearchHeader = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const landingPage = properties.controller?.store.merchandising.landingPage || properties.merchandising?.landingPage;
     const pagination = properties.controller?.store.pagination || properties.pagination;
@@ -29,12 +28,10 @@ export const SearchHeader = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('searchHeader', globalTheme, defaultProps, properties);
-    const { className, internalClassName, titleText, subtitleText, correctedQueryText, noResultsText, didYouMeanText, expandedSearchText, hideTitleText, hideSubtitleText, hideCorrectedQueryText, hideNoResultsText, hideExpandedSearchText, hideDidYouMeanText, customComponent, } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.searchHeader || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { className, internalClassName, titleText, subtitleText, correctedQueryText, noResultsText, didYouMeanText, expandedSearchText, hideTitleText, hideSubtitleText, hideCorrectedQueryText, hideNoResultsText, hideExpandedSearchText, hideDidYouMeanText, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('searchHeader', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const styling = mergeStyles(props, defaultStyles);
     //initialize lang

package/dist/esm/components/src/components/Atoms/Skeleton/Skeleton.d.ts

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

package/dist/esm/components/src/components/Atoms/Skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA4C7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA6BzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA2C7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA2BzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/esm/components/src/components/Atoms/Skeleton/Skeleton.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css, keyframes } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
-import { useComponent } from '../../../hooks';
+import { useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = ({ width, height, round, backgroundColor, animatedColor }) => {
     const animation = keyframes({
         from: {
@@ -41,7 +41,6 @@ const defaultStyles = ({ width, height, round, backgroundColor, animatedColor })
 };
 export const Skeleton = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         backgroundColor: '#ebebeb',
@@ -49,12 +48,10 @@ export const Skeleton = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('skeleton', globalTheme, defaultProps, properties);
-    const { className, internalClassName, customComponent } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.skeleton || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('skeleton', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const styling = mergeStyles(props, defaultStyles);
     return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__skeleton', className, internalClassName) }) }));

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

@@ -1,6 +1,7 @@
+import { h } from 'preact';
 import { ComponentProps, ComponentMap } from '../../../types';
 import type { Product } from '@athoscommerce/snap-store-mobx';
-export declare const CalloutBadge: ((properties: CalloutBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const CalloutBadge: ((properties: CalloutBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type CalloutBadgeProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"CalloutBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAY9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAiDjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;CAChB,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC"}
+{"version":3,"file":"CalloutBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAqB9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CA4CjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;CAChB,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/esm/components/src/components/Molecules/CalloutBadge/CalloutBadge.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 defaultStyles = () => {
     return css({
         display: 'flex',
@@ -13,6 +13,13 @@ const defaultStyles = () => {
         gap: '5px',
     });
 };
+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 CalloutBadge = observer((properties) => {
     const globalTheme = useTheme();
     const snap = useSnap();
@@ -24,12 +31,10 @@ export const CalloutBadge = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('calloutBadge', globalTheme, defaultProps, properties);
-    const { result, tag, renderEmpty, limit, className, internalClassName, treePath, customComponent } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.calloutBadge || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { result, tag, renderEmpty, limit, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('calloutBadge', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     const badgeComponentMap = {
         ...defaultBadgeComponentMap,
@@ -37,15 +42,9 @@ export const CalloutBadge = observer((properties) => {
         ...props.componentMap,
     };
     const styling = mergeStyles(props, defaultStyles);
-    const badges = result?.display.badges?.atLocation(tag).slice(0, limit);
+    const badges = result?.display?.badges?.atLocation(tag).slice(0, limit);
     if (renderEmpty || badges?.length) {
-        return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__callout-badge', `ss__callout-badge--${tag?.replace('/', '-')}`, className, internalClassName), children: badges.map((badge) => {
-                    const BadgeComponent = useComponent(badgeComponentMap, badge.component);
-                    if (!BadgeComponent) {
-                        return null;
-                    }
-                    return _jsx(BadgeComponent, { ...badge, ...badge.parameters, treePath: treePath });
-                }) }) }));
+        return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__callout-badge', `ss__callout-badge--${tag?.replace('/', '-')}`, className, internalClassName), children: badges.map((badge, badgeIndex) => (_jsx(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, `${badge.component}-${badgeIndex}`))) }) }));
     }
     return null;
 });

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

@@ -1,4 +1,4 @@
-import { ComponentChild } from 'preact';
+import { h, ComponentChild } from 'preact';
 import type { Swiper as SwiperTypes } from 'swiper';
 import type { SwiperOptions } from 'swiper/types';
 import type { PaginationOptions } from 'swiper/types/modules/pagination';
@@ -39,7 +39,7 @@ export declare const defaultVerticalCarouselBreakpoints: {
         spaceBetween: number;
     };
 };
-export declare const Carousel: ((properties: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const Carousel: ((properties: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type CarouselProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAW3C,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAmJ/E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAuRzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAW3C,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAkJ/E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAgSzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,CAAC"}

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

@@ -8,9 +8,9 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
 import { Icon } from '../../Atoms/Icon/Icon';
-import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
-import { useComponent } from '../../../hooks';
+import { useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = ({ vertical, theme }) => {
     return css({
         display: 'flex',
@@ -182,13 +182,13 @@ export const defaultVerticalCarouselBreakpoints = {
 };
 export const Carousel = observer((properties) => {
     const globalTheme = useTheme();
-    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         breakpoints: properties.vertical
             ? JSON.parse(JSON.stringify(defaultVerticalCarouselBreakpoints))
             : JSON.parse(JSON.stringify(defaultCarouselBreakpoints)),
         pagination: false,
+        navigation: true,
         slidesPerGroup: !properties.breakpoints || !Object.keys(properties.breakpoints).length ? 5 : undefined,
         slidesPerView: !properties.breakpoints || !Object.keys(properties.breakpoints).length ? 5 : undefined,
         spaceBetween: 10,
@@ -222,12 +222,10 @@ export const Carousel = observer((properties) => {
             };
         }
     }
-    const { children, loop, nextButton, prevButton, hideButtons, vertical, onInit, onBeforeInit, onAfterInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, customComponent, style: _, styleScript: __, themeStyleScript: ___, modules, className, internalClassName, treePath, ...additionalProps } = props;
-    if (customComponent) {
-        const ComponentOverride = useComponent(snap?.templates?.library.import.component.carousel || {}, customComponent);
-        if (ComponentOverride) {
-            return _jsx(ComponentOverride, { ...props });
-        }
+    const { children, loop, nextButton, prevButton, hideButtons, vertical, onInit, onBeforeInit, onAfterInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style: _, styleScript: __, themeStyleScript: ___, modules, className, internalClassName, treePath, ...additionalProps } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('carousel', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
     }
     let pagination = props.pagination;
     let navigation = props.navigation;
@@ -279,18 +277,20 @@ export const Carousel = observer((properties) => {
             };
         }
     }
-    if (navigation && typeof navigation == 'object') {
-        navigation = {
-            nextEl: '.ss_carousel_DNE',
-            prevEl: '.ss_carousel_DNE',
-            ...navigation,
-        };
-    }
-    else {
-        navigation = {
-            nextEl: '.ss_carousel_DNE',
-            prevEl: '.ss_carousel_DNE',
-        };
+    if (navigation) {
+        if (typeof navigation == 'object') {
+            navigation = {
+                nextEl: '.ss_carousel_DNE',
+                prevEl: '.ss_carousel_DNE',
+                ...navigation,
+            };
+        }
+        else {
+            navigation = {
+                nextEl: '.ss_carousel_DNE',
+                prevEl: '.ss_carousel_DNE',
+            };
+        }
     }
     if (scrollbar) {
         if (typeof scrollbar == 'object') {
@@ -318,11 +318,13 @@ export const Carousel = observer((properties) => {
         }
     };
     delete additionalProps.breakpoints;
-    return children?.length ? (_jsx(CacheProvider, { children: _jsxs("div", { ref: rootComponentRef, ...styling, className: classnames('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className, internalClassName), children: [_jsx("div", { className: classnames('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }), children: _jsx("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)), children: prevButton || _jsx(Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon, name: 'prev' }) }) }), _jsx(Swiper, { centerInsufficientSlides: true, onBeforeInit: (swiper) => {
-                        //@ts-ignore : someone should refactor this
-                        swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
-                        //@ts-ignore : someone should refactor this
-                        swiper.params.navigation.nextEl = navigationNextRef.current ? navigationNextRef.current : undefined;
+    return children?.length ? (_jsx(CacheProvider, { children: _jsxs("div", { ref: rootComponentRef, ...styling, className: classnames('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className, internalClassName), children: [navigation !== false && (_jsx("div", { className: classnames('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }), children: _jsx("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)), children: prevButton || _jsx(Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon, name: 'prev' }) }) })), _jsx(Swiper, { centerInsufficientSlides: true, onBeforeInit: (swiper) => {
+                        if (navigation && swiper.params.navigation) {
+                            //@ts-ignore : someone should refactor this
+                            swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
+                            //@ts-ignore : someone should refactor this
+                            swiper.params.navigation.nextEl = navigationNextRef.current ? navigationNextRef.current : undefined;
+                        }
                         if (onBeforeInit) {
                             onBeforeInit(swiper);
                         }
@@ -331,22 +333,24 @@ export const Carousel = observer((properties) => {
                             onInit(swiper);
                         }
                     }, onAfterInit: (swiper) => {
-                        //@ts-ignore : someone should refactor this
-                        swiper.navigation.onPrevClick = (e) => {
-                            e.preventDefault();
-                            if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind)
-                                return;
-                            swiper.slidePrev();
-                            swiper.emit('navigationPrev');
-                        };
-                        //@ts-ignore : someone should refactor this
-                        swiper.navigation.onNextClick = (e) => {
-                            e.preventDefault();
-                            if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind)
-                                return;
-                            swiper.slideNext();
-                            swiper.emit('navigationNext');
-                        };
+                        if (navigation && swiper.navigation) {
+                            //@ts-ignore : someone should refactor this
+                            swiper.navigation.onPrevClick = (e) => {
+                                e.preventDefault();
+                                if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind)
+                                    return;
+                                swiper.slidePrev();
+                                swiper.emit('navigationPrev');
+                            };
+                            //@ts-ignore : someone should refactor this
+                            swiper.navigation.onNextClick = (e) => {
+                                e.preventDefault();
+                                if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind)
+                                    return;
+                                swiper.slideNext();
+                                swiper.emit('navigationNext');
+                            };
+                        }
                         if (onAfterInit) {
                             onAfterInit(swiper);
                         }
@@ -370,5 +374,5 @@ export const Carousel = observer((properties) => {
                         else {
                             return null;
                         }
-                    }) }), _jsx("div", { className: classnames('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }), children: _jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)), children: nextButton || _jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon, name: 'next' }) }) })] }) })) : null;
+                    }) }), navigation !== false && (_jsx("div", { className: classnames('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }), children: _jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)), children: nextButton || _jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon, name: 'next' }) }) }))] }) })) : null;
 });

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

@@ -0,0 +1,20 @@
+import { ComponentProps } from '../../../types';
+export declare const ChatAttachmentContext: ((properties: ChatAttachmentContextProps) => JSX.Element) & {
+    displayName: string;
+};
+export type ChatAttachmentContextItem = {
+    id: string;
+    name: string;
+    imageUrl?: string;
+    isLoading?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    onClick?: () => void;
+    onRemove?: () => void;
+};
+export type ChatAttachmentContextProps = {
+    title: string;
+    items: ChatAttachmentContextItem[];
+    onClose?: () => void;
+} & ComponentProps<ChatAttachmentContextProps>;
+//# sourceMappingURL=ChatAttachmentContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAttachmentContext.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA6H7D,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,GAAG,CAAC,OAAO;;CAqHjG,CAAC;AAQH,MAAM,MAAM,yBAAyB,GAAG;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,cAAc,CAAC,0BAA0B,CAAC,CAAC"}