@athoscommerce/snap-preact 1.1.4 → 1.2.0

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

@@ -1,11 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createPortal } from 'preact/compat';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
-import { useClickOutside } from '../../../hooks';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useClickOutside, useComponent } from '../../../hooks';
 import { cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
 import { useA11y } from '../../../hooks/useA11y';
 const defaultStyles = ({ disableOverlay }) => {
@@ -34,6 +34,7 @@ const defaultStyles = ({ disableOverlay }) => {
 };
 export const Dropdown = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         startOpen: false,
@@ -41,7 +42,13 @@ export const Dropdown = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('dropdown', globalTheme, defaultProps, properties);
-    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, } = props;
+    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, customComponent, } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.dropdown || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     let dropdownOpen, setDropdownOpen;
     const stateful = open === undefined;
     if (stateful) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAO7D,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,oDAuC/D;AAED,MAAM,MAAM,oBAAoB,GAAG,kCAAkC,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAE7G,MAAM,MAAM,kCAAkC,GAAG;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,CAAC"}
+{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAS7D,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,oDA0D/D;AAED,MAAM,MAAM,oBAAoB,GAAG,kCAAkC,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAE7G,MAAM,MAAM,kCAAkC,GAAG;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,CAAC"}

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

@@ -1,14 +1,16 @@
-import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import { filters } from '@athoscommerce/snap-toolbox';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = () => {
     return css({});
 };
 export function FormattedNumber(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         symbol: '',
@@ -20,7 +22,13 @@ export function FormattedNumber(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('formattedNumber', globalTheme, defaultProps, properties);
-    const { value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, className, internalClassName, raw } = props;
+    const { value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, className, internalClassName, raw, customComponent, } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.formattedNumber || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const formattedNumber = filters.formatNumber(value, {
         symbol,
         decimalPlaces,

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAa9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DA8DzC;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,iBAAiB,GACjB,uBAAuB,GACvB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,eAAe,GACf,eAAe,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAgB9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAuEzC;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,iBAAiB,GACjB,uBAAuB,GACvB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,eAAe,GACf,eAAe,CAAC"}

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { iconPaths } from './paths';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ color, fill, stroke, theme, width, height, size }) => {
     return css({
+        color: color || fill || theme?.variables?.colors?.primary,
         fill: fill || color || theme?.variables?.colors?.primary,
         stroke: stroke,
         width: isNaN(Number(width || size)) ? width || size : `${width || size}px`,
@@ -15,6 +17,7 @@ const defaultStyles = ({ color, fill, stroke, theme, width, height, size }) => {
 };
 export function Icon(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         size: '16px',
@@ -22,7 +25,13 @@ export function Icon(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('icon', globalTheme, defaultProps, properties);
-    const { color, icon, fill, path, children, size, width, title, height, viewBox, disableStyles, className, internalClassName, style: _, styleScript: __, themeStyleScript: ___, name: ____, treePath: _____, ...otherProps } = props;
+    const { color, icon, fill, path, children, size, width, title, height, viewBox, disableStyles, className, internalClassName, customComponent, style: _, styleScript: __, themeStyleScript: ___, name: ____, treePath: _____, ...otherProps } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.icon || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const iconPath = iconPaths[icon] || path;
     const pathType = typeof iconPath;
     const styling = mergeStyles(props, defaultStyles);

package/dist/esm/components/src/components/Atoms/Icon/paths.d.ts

@@ -23,9 +23,71 @@ export declare const iconPaths: {
     eye: string;
     'eye-thin': string;
     filter: string;
-    filters: string;
-    bullet: string;
-    'bullet-o': string;
+    filters: ({
+        type: string;
+        attributes: {
+            x1: string;
+            y1: string;
+            x2: string;
+            y2: string;
+            'stroke-width': string;
+            'stroke-linecap': string;
+            'stroke-linejoin': string;
+            stroke: string;
+            cx?: undefined;
+            cy?: undefined;
+            r?: undefined;
+            fill?: undefined;
+        };
+    } | {
+        type: string;
+        attributes: {
+            cx: string;
+            cy: string;
+            r: string;
+            fill: string;
+            'stroke-width': string;
+            stroke: string;
+            x1?: undefined;
+            y1?: undefined;
+            x2?: undefined;
+            y2?: undefined;
+            'stroke-linecap'?: undefined;
+            'stroke-linejoin'?: undefined;
+        };
+    })[];
+    bullet: ({
+        type: string;
+        attributes: {
+            cx: string;
+            cy: string;
+            r: string;
+            'stroke-width': string;
+            fill: string;
+            stroke: string;
+        };
+    } | {
+        type: string;
+        attributes: {
+            cx: string;
+            cy: string;
+            r: string;
+            'stroke-width': string;
+            fill?: undefined;
+            stroke?: undefined;
+        };
+    })[];
+    'bullet-o': {
+        type: string;
+        attributes: {
+            cx: string;
+            cy: string;
+            r: string;
+            'stroke-width': string;
+            fill: string;
+            stroke: string;
+        };
+    }[];
     heart: string;
     'heart-o': string;
     info: string;

package/dist/esm/components/src/components/Atoms/Icon/paths.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/paths.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAS9C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFrB,CAAC"}
+{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/paths.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAS9C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKrB,CAAC"}

package/dist/esm/components/src/components/Atoms/Icon/paths.js

@@ -26,9 +26,91 @@ export const iconPaths = {
     eye: 'M28 20.374q3.098 0 5.362 2.264t2.264 5.362-2.264 5.362-5.362 2.264-5.362-2.264-2.264-5.362 2.264-5.362 5.362-2.264zM28 40.749q5.243 0 8.996-3.753t3.753-8.996-3.753-8.996-8.996-3.753-8.996 3.753-3.753 8.996 3.753 8.996 8.996 3.753zM28 8.936q9.413 0 17.038 5.243t10.962 13.821q-3.336 8.579-10.962 13.821t-17.038 5.243-17.038-5.243-10.962-13.821q3.336-8.579 10.962-13.821t17.038-5.243z',
     'eye-thin': 'M52 28c-2.969-4.594-7.031-8.531-11.906-11.031 1.25 2.125 1.906 4.563 1.906 7.031 0 7.719-6.281 14-14 14s-14-6.281-14-14c0-2.469 0.656-4.906 1.906-7.031-4.875 2.5-8.938 6.437-11.906 11.031 5.344 8.25 13.969 14 24 14s18.656-5.75 24-14zM29.5 16c0-0.812-0.687-1.5-1.5-1.5-5.219 0-9.5 4.281-9.5 9.5 0 0.812 0.687 1.5 1.5 1.5s1.5-0.687 1.5-1.5c0-3.563 2.937-6.5 6.5-6.5 0.812 0 1.5-0.687 1.5-1.5zM56 28c0 0.781-0.25 1.5-0.625 2.156-5.75 9.469-16.281 15.844-27.375 15.844s-21.625-6.406-27.375-15.844c-0.375-0.656-0.625-1.375-0.625-2.156s0.25-1.5 0.625-2.156c5.75-9.437 16.281-15.844 27.375-15.844s21.625 6.406 27.375 15.844c0.375 0.656 0.625 1.375 0.625 2.156z',
     filter: 'M25.519 21.889c0 0-0.241-4.089-0.241-4.089s0-13.471 0-13.471c0.002-1.162-0.005-2.636 0.825-3.553 1.104-1.224 3.156-0.929 4.022 0.435 0.498 0.787 0.443 1.744 0.445 2.636 0 0 0 25.258 0 25.258s-5.052 0-5.052 0c0 0 0-7.217 0-7.217zM42.358 3.848c0.019-1.576 0.281-3.476 2.165-3.794 2.798-0.471 3.125 2.24 3.127 4.275 0 0 0 11.546 0 11.546s-2.646-0.233-2.646-0.233c0 0-2.646 0.233-2.646 0.233s0-12.028 0-12.028zM8.44 3.848c0.014-1.181 0.147-2.442 1.229-3.163 1.484-0.986 3.286-0.156 3.825 1.479 0.322 0.984 0.238 2.545 0.238 3.608 0 0 0 6.014 0 6.014s-2.646-0.197-2.646-0.197c0 0-2.646 0.197-2.646 0.197s0-7.938 0-7.938zM13.010 13.556c5.509 1.855 5.477 10.377-1.203 11.551-5.121 0.902-8.455-5.015-5.867-9.23 0.907-1.475 2.314-2.151 3.943-2.535 1.176-0.166 1.985-0.171 3.127 0.214zM46.207 28.993c-5.564 1.051-8.874-4.833-6.348-9.028 1.046-1.737 2.533-2.357 4.424-2.774 7.57-0.883 9.36 10.399 1.924 11.802zM13.732 26.46c0 0 0 24.536 0 24.536-0.002 1.215-0.067 3.079-0.844 4.063-1.066 1.352-3.094 1.222-3.984-0.226-0.496-0.808-0.462-1.958-0.464-2.875 0 0 0-25.499 0-25.499s5.292 0 5.292 0zM33.219 33.436c1.936 3.286-0.019 8.15-3.851 8.821-1.169 0.207-3.019 0.135-4.089-0.402-4.71-2.355-4.39-9.803 1.443-11.193 2.673-0.375 5.056 0.33 6.497 2.774zM45.004 30.77c0 0 2.646-0.221 2.646-0.221s0 21.409 0 21.409c-0.002 1.034 0.034 2.215-0.649 3.074-0.977 1.224-3.017 1.224-3.993 0-0.637-0.799-0.645-1.867-0.649-2.834 0 0 0-21.65 0-21.65s2.646 0.221 2.646 0.221zM27.684 43.998c0 0 2.887-0.219 2.887-0.219s0 8.66 0 8.66c-0.022 1.758-0.654 3.861-2.887 3.517-1.912-0.296-2.384-2.114-2.406-3.757 0 0 0-8.419 0-8.419s2.406 0.219 2.406 0.219z',
-    filters: 'M 1 15 L 8 15 L 8 19 L 1 19 Z M 28 15 L 55 15 L 55 19 L 28 19 Z M 1 37 L 28 37 L 28 41 L 1 41 Z M 48 37 L 55 37 L 55 41 L 48 41 Z M 8 17 A 10 10 0 1 1 28 17 A 10 10 0 1 1 8 17 Z M 13 17 A 5 5 0 1 0 23 17 A 5 5 0 1 0 13 17 Z M 28 39 A 10 10 0 1 1 48 39 A 10 10 0 1 1 28 39 Z M 33 39 A 5 5 0 1 0 43 39 A 5 5 0 1 0 33 39 Z',
-    bullet: 'M8 28 A20 20 0 1 1 48 28 A20 20 0 1 1 8 28 Z',
-    'bullet-o': 'M8 28 A20 20 0 1 1 48 28 A20 20 0 1 1 8 28 Z M15 28 A13 13 0 1 0 41 28 A13 13 0 1 0 15 28 Z',
+    filters: [
+        {
+            type: 'path',
+            attributes: {
+                x1: '1',
+                y1: '17',
+                x2: '55',
+                y2: '17',
+                'stroke-width': '4',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round',
+                stroke: 'currentColor',
+            },
+        },
+        {
+            type: 'line',
+            attributes: {
+                x1: '1',
+                y1: '39',
+                x2: '55',
+                y2: '39',
+                'stroke-width': '4',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round',
+                stroke: 'currentColor',
+            },
+        },
+        {
+            type: 'circle',
+            attributes: {
+                cx: '18',
+                cy: '17',
+                r: '8',
+                fill: 'white',
+                'stroke-width': '4',
+                stroke: 'currentColor',
+            },
+        },
+        {
+            type: 'circle',
+            attributes: {
+                cx: '38',
+                cy: '39',
+                r: '8',
+                fill: 'white',
+                stroke: 'currentColor',
+                'stroke-width': '4',
+            },
+        },
+    ],
+    bullet: [
+        {
+            type: 'circle',
+            attributes: {
+                cx: '28',
+                cy: '28',
+                r: '20',
+                'stroke-width': '3',
+                fill: 'white',
+                stroke: 'currentColor',
+            },
+        },
+        {
+            type: 'circle',
+            attributes: {
+                cx: '28',
+                cy: '28',
+                r: '13',
+                'stroke-width': '0',
+            },
+        },
+    ],
+    'bullet-o': [
+        {
+            type: 'circle',
+            attributes: {
+                cx: '28',
+                cy: '28',
+                r: '20',
+                'stroke-width': '3',
+                fill: 'white',
+                stroke: 'currentColor',
+            },
+        },
+    ],
     heart: 'M28 52c-0.5 0-1-0.188-1.375-0.563l-19.5-18.813c-0.25-0.219-7.125-6.5-7.125-14 0-9.156 5.594-14.625 14.938-14.625 5.469 0 10.594 4.312 13.062 6.75 2.469-2.437 7.594-6.75 13.062-6.75 9.344 0 14.938 5.469 14.938 14.625 0 7.5-6.875 13.781-7.156 14.063l-19.469 18.75c-0.375 0.375-0.875 0.563-1.375 0.563z',
     'heart-o': 'M52 18.625c0-8.781-5.937-10.625-10.938-10.625-4.656 0-9.906 5.031-11.531 6.969-0.75 0.906-2.313 0.906-3.063 0-1.625-1.938-6.875-6.969-11.531-6.969-5 0-10.938 1.844-10.938 10.625 0 5.719 5.781 11.031 5.844 11.094l18.156 17.5 18.125-17.469c0.094-0.094 5.875-5.406 5.875-11.125zM56 18.625c0 7.5-6.875 13.781-7.156 14.063l-19.469 18.75c-0.375 0.375-0.875 0.563-1.375 0.563s-1-0.188-1.375-0.563l-19.5-18.813c-0.25-0.219-7.125-6.5-7.125-14 0-9.156 5.594-14.625 14.938-14.625 5.469 0 10.594 4.312 13.062 6.75 2.469-2.437 7.594-6.75 13.062-6.75 9.344 0 14.938 5.469 14.938 14.625z',
     info: 'M56.1425 28.2143C56.1425 43.6783 43.6065 56.2143 28.1425 56.2143C12.6786 56.2143 0.142578 43.6783 0.142578 28.2143C0.142578 12.7504 12.6786 0.214325 28.1425 0.214325C43.6065 0.214325 56.1425 12.7504 56.1425 28.2143ZM32.2543 16.7406C33.1441 15.8361 33.587 14.7358 33.587 13.4469C33.587 12.1603 33.1441 11.0578 32.2543 10.1417C31.3665 9.22792 30.2961 8.76988 29.0452 8.76988C27.7901 8.76988 26.7156 9.22562 25.8194 10.1417C24.9232 11.0578 24.4741 12.1603 24.4741 13.4469C24.4741 14.7358 24.9232 15.8361 25.8194 16.7406C26.7177 17.6498 27.7901 18.1032 29.0452 18.1032C30.2961 18.1032 31.3665 17.6498 32.2543 16.7406ZM29.9419 45.5994C30.7373 45.2628 31.8057 44.7746 33.1417 44.1326C33.1417 44.1326 32.9859 42.1999 32.4746 42.3716C31.9633 42.5432 31.5033 42.6302 31.0983 42.6302C30.237 42.6302 29.6304 42.4585 29.2785 42.113C28.9285 41.7675 28.7544 41.1188 28.7544 40.1669C28.7544 39.7902 28.8076 39.2285 28.9175 38.4928C29.0238 37.7527 29.1466 37.0951 29.2822 36.52L30.9462 29.3555C31.1093 28.6979 31.2211 27.9756 31.2816 27.1865C31.342 26.3996 31.3714 25.849 31.3714 25.5369C31.3714 24.0255 30.9352 22.7995 30.0647 21.8543C29.1942 20.9091 27.9536 20.4365 26.3464 20.4365C25.4521 20.4365 24.5065 20.6305 23.5059 21.0161C22.5053 21.4018 21.4588 21.8654 20.3648 22.4071C20.3648 22.4071 20.6323 24.3198 21.0868 24.157C21.5395 23.9943 21.983 23.9096 22.4155 23.9096C23.2969 23.9096 23.8907 24.0924 24.2022 24.4535C24.5138 24.8146 24.6695 25.4566 24.6695 26.3751C24.6695 26.8833 24.6201 27.4473 24.5174 28.0603C24.4167 28.6778 24.2902 29.3309 24.1418 30.0198L22.4704 37.2111C22.322 37.9667 22.2139 38.6444 22.1461 39.2441C22.0783 39.8437 22.0453 40.4322 22.0453 41.0051C22.0453 42.483 22.4943 43.7024 23.3922 44.6632C24.2902 45.6217 25.5492 46.1032 27.1674 46.1032C28.2211 46.1032 29.1466 45.936 29.9419 45.5994Z',

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Image/Image.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,eAAO,MAAM,kBAAkB,qDAAqD,CAAC;AAuBrF,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,oDAwD3C;AAED,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC9D,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Image/Image.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAK7D,eAAO,MAAM,kBAAkB,qDAAqD,CAAC;AAuBrF,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,oDA+E3C;AAED,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC9D,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf,CAAC"}

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

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useState, useEffect, useRef } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 export const FALLBACK_IMAGE_URL = '//cdn.athoscommerce.net/snap/images/fallback.png';
 const defaultStyles = ({ height }) => {
     return css({
@@ -26,6 +27,7 @@ const defaultStyles = ({ height }) => {
 };
 export function Image(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         fallback: FALLBACK_IMAGE_URL,
@@ -33,7 +35,13 @@ export function Image(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('image', globalTheme, defaultProps, properties);
-    const { alt, src, fallback, title, hoverSrc, lazy, onMouseOver, onMouseOut, onError, onLoad, onClick, className, internalClassName } = props;
+    const { alt, src, fallback, title, hoverSrc, lazy, onMouseOver, onMouseOut, onError, onLoad, onClick, className, internalClassName, customComponent, } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.image || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const [visibile, setVisibile] = useState(false);
     const [isHovering, setHover] = useState(false);
     const prevSrcRef = useRef('');

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

@@ -1 +1 @@
-{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAe,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAwBpH,eAAO,MAAM,YAAY,KAwCxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,EAAE,MAAM,CAAC;CACf,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}
+{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAe,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AA0BpH,eAAO,MAAM,YAAY,KAgDxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,EAAE,MAAM,CAAC;CACf,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath, withController, withTracking } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, withController, withTracking, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
 import { useA11y } from '../../../hooks/useA11y';
 import { ResultsLayout } from '../../../types';
 import { observer } from 'mobx-react-lite';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ width }) => {
     return css({
         height: '100%',
@@ -29,6 +30,7 @@ const defaultStyles = ({ width }) => {
 };
 export const InlineBanner = withController(withTracking(observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         layout: ResultsLayout.grid,
@@ -36,7 +38,13 @@ export const InlineBanner = withController(withTracking(observer((properties) =>
         treePath: globalTreePath,
     };
     const props = mergeProps('inlineBanner', globalTheme, defaultProps, properties);
-    const { banner, className, internalClassName, disableA11y, layout, onClick } = props;
+    const { banner, className, internalClassName, disableA11y, layout, onClick, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.inlineBanner || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return banner && banner.value ? (_jsx(CacheProvider, { children: _jsx("div", { onClick: (e) => {
                 onClick && onClick(e, banner);

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/LoadingBar/LoadingBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuC7D,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CA8B7D,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,6BAA6B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE9F,MAAM,MAAM,6BAA6B,GAAG;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dist/esm/components/src/components/Atoms/{Loading → LoadingBar}/LoadingBar.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { observer } from 'mobx-react-lite';
 import { css, keyframes } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ color, height, backgroundColor, theme }) => {
     const animation = keyframes({
         from: { left: '-200px', width: '30%' },
@@ -37,13 +38,20 @@ const defaultStyles = ({ color, height, backgroundColor, theme }) => {
 };
 export const LoadingBar = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         height: '5px',
         treePath: globalTreePath,
     };
     const props = mergeProps('loadingBar', globalTheme, defaultProps, properties);
-    const { active, className, internalClassName } = props;
+    const { active, className, internalClassName, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.loadingBar || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return active ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__loading-bar', className, internalClassName), children: _jsx("div", { className: "ss__loading-bar__bar" }) }) })) : null;
 });

package/dist/esm/components/src/components/Atoms/LoadingBar/index.d.ts.map

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

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;AAqB7D,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,oDA0B/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":"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"}

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 import { useA11y } from '../../../hooks';
 const defaultStyles = ({ transitionSpeed, color }) => {
     return css({
@@ -22,6 +23,7 @@ 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)',
@@ -29,7 +31,13 @@ export function Overlay(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('overlay', globalTheme, defaultProps, properties);
-    const { active, onClick, disableA11y, className, internalClassName } = props;
+    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 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.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,EAAW,MAAM,gBAAgB,CAAC;AAM/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAoDrE,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":"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"}

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

@@ -2,15 +2,16 @@ 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 } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
 import deepmerge from 'deepmerge';
-import { useLang } from '../../../hooks';
+import { useLang, useComponent } 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 = {
@@ -18,7 +19,13 @@ export const PaginationInfo = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('paginationInfo', globalTheme, defaultProps, properties);
-    const { controller, infoText, className, internalClassName } = props;
+    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 store = pagination || controller?.store?.pagination;
     const styling = mergeStyles(props, defaultStyles);
     //initialize lang

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;AAa7D,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,2DA2D3C;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":"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"}

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

@@ -1,9 +1,10 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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 } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ theme }) => {
     return css({
         color: theme?.variables?.colors?.primary,
@@ -15,6 +16,7 @@ const defaultStyles = ({ theme }) => {
 };
 export function Price(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         symbol: '$',
@@ -27,7 +29,13 @@ 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, } = props;
+    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 });
+        }
+    }
     let formattedPrice;
     if (value) {
         formattedPrice = filters.currency(value, {

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;AAO3C,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAqJjE,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":"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"}

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

@@ -1,16 +1,17 @@
 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 } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
 import classnames from 'classnames';
-import { useLang } from '../../../hooks';
+import { useLang, useComponent } 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;
@@ -28,7 +29,13 @@ 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, } = props;
+    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 styling = mergeStyles(props, defaultStyles);
     //initialize lang
     const defaultLang = {

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;AA0C7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAqBzD,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":"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"}