@searchspring/snap-preact-components 0.28.0 → 0.30.1

package/dist/esm/components/Atoms/Image/Image.stories.d.ts

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { Image } from './Image';
+import { Image, ImageProps } from './Image';
 declare const _default: {
     title: string;
     component: typeof Image;
@@ -178,8 +178,34 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const BrokenImg: any;
-export declare const ManualFallBack: any;
-export declare const onhover: any;
+export declare const Default: {
+    (args: ImageProps): h.JSX.Element;
+    args: {
+        src: string;
+        alt: string;
+    };
+};
+export declare const BrokenImg: {
+    (args: ImageProps): h.JSX.Element;
+    args: {
+        src: string;
+        alt: string;
+    };
+};
+export declare const ManualFallBack: {
+    (args: ImageProps): h.JSX.Element;
+    args: {
+        src: string;
+        alt: string;
+        fallback: string;
+    };
+};
+export declare const onhover: {
+    (args: ImageProps): h.JSX.Element;
+    args: {
+        src: string;
+        alt: string;
+        hoverSrc: string;
+    };
+};
 //# sourceMappingURL=Image.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKpD,wBA2HE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAMzC,eAAO,MAAM,SAAS,KAAoB,CAAC;AAM3C,eAAO,MAAM,cAAc,KAAoB,CAAC;AAOhD,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;yBAmBtD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA2HE;AAEF,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;CAAkD,CAAC;AAM3F,eAAO,MAAM,SAAS;WAAU,UAAU;;;;;CAAkD,CAAC;AAM7F,eAAO,MAAM,cAAc;WAAU,UAAU;;;;;;CAAkD,CAAC;AAOlG,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;;CAAkD,CAAC"}

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

@@ -120,24 +120,23 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Image, { ...args, style: { width: '100%' } });
-export const Default = Template.bind({});
+export const Default = (args) => h(Image, { ...args, style: { width: '100%' } });
 Default.args = {
     src: searchResponse.results[6].mappings.core.imageUrl,
     alt: searchResponse.results[6].mappings.core.name,
 };
-export const BrokenImg = Template.bind({});
+export const BrokenImg = (args) => h(Image, { ...args, style: { width: '100%' } });
 BrokenImg.args = {
     src: 'intentionally_broken_image.jpg',
     alt: searchResponse.results[6].mappings.core.name,
 };
-export const ManualFallBack = Template.bind({});
+export const ManualFallBack = (args) => h(Image, { ...args, style: { width: '100%' } });
 ManualFallBack.args = {
     src: 'intentionally_broken_image.jpg',
     alt: searchResponse.results[5].mappings.core.name,
     fallback: searchResponse.results[5].mappings.core.imageUrl,
 };
-export const onhover = Template.bind({});
+export const onhover = (args) => h(Image, { ...args, style: { width: '100%' } });
 onhover.args = {
     src: searchResponse.results[6].mappings.core.imageUrl,
     alt: searchResponse.results[6].mappings.core.name,

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Loading/LoadingBar.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqChD,wBAAgB,UAAU,CAAC,UAAU,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA+BnE;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Loading/LoadingBar.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAoC5D,wBAAgB,UAAU,CAAC,UAAU,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA+BnE;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/esm/components/Atoms/Loading/LoadingBar.js

@@ -1,10 +1,10 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css, keyframes } from '@emotion/react';
 import classnames from 'classnames';
 import { useTheme, CacheProvider } from '../../../providers';
 const CSS = {
-    loadingBar: ({ color, height, backgroundColor, theme, animation }) => 
-    //@ts-ignore
-    css({
+    loadingBar: ({ color, height, backgroundColor, theme, animation }) => css({
         height: height,
         position: 'fixed',
         top: '0',
@@ -15,13 +15,13 @@ const CSS = {
         opacity: '1',
         visibility: 'visible',
         zIndex: '10000',
-        background: backgroundColor || theme.colors?.secondary || '#f8f8f8',
+        background: backgroundColor || theme?.colors?.secondary || '#f8f8f8',
         '& .ss__loading-bar__bar': {
             position: 'absolute',
             top: '0',
             left: '-200px',
             height: '100%',
-            background: `${color || theme.colors?.primary || '#ccc'}`,
+            background: `${color || theme?.colors?.primary || '#ccc'}`,
             animation: `${animation} 2s linear infinite`,
         },
     }),
@@ -54,7 +54,7 @@ export function LoadingBar(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (active && (jsx(CacheProvider, null,
+    return active ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__loading-bar', className) },
-            jsx("div", { className: "ss__loading-bar__bar" })))));
+            jsx("div", { className: "ss__loading-bar__bar" })))) : (jsx(Fragment, null));
 }

package/dist/esm/components/Atoms/Loading/LoadingBar.stories.d.ts

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { LoadingBar } from './LoadingBar';
+import { LoadingBar, LoadingBarProps } from './LoadingBar';
 declare const _default: {
     title: string;
     component: typeof LoadingBar;
@@ -124,5 +124,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Active: any;
+export declare const Active: {
+    (args: LoadingBarProps): h.JSX.Element;
+    args: {
+        active: boolean;
+    };
+};
 //# sourceMappingURL=LoadingBar.stories.d.ts.map

package/dist/esm/components/Atoms/Loading/LoadingBar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Loading/LoadingBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM1C,wBA2DE;AAIF,eAAO,MAAM,MAAM,KAAoB,CAAC"}
+{"version":3,"file":"LoadingBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Loading/LoadingBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3D,wBA2DE;AAEF,eAAO,MAAM,MAAM;WAAU,eAAe;;;;CAA6B,CAAC"}

package/dist/esm/components/Atoms/Loading/LoadingBar.stories.js

@@ -60,8 +60,7 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(LoadingBar, { ...args });
-export const Active = Template.bind({});
+export const Active = (args) => h(LoadingBar, { ...args });
 Active.args = {
     active: true,
 };

package/dist/esm/components/Atoms/Merchandising/Banner.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { BannerContent, BannerType, ComponentProps } from '../../../types';
+import { ComponentProps } from '../../../types';
+import { BannerContent, ContentType } from '@searchspring/snap-store-mobx';
 export declare function Banner(properties: BannerProps): JSX.Element;
 export interface BannerProps extends ComponentProps {
-    content: BannerContent | [];
-    type: BannerType;
+    content: BannerContent;
+    type: ContentType;
 }
 //# sourceMappingURL=Banner.d.ts.map

package/dist/esm/components/Atoms/Merchandising/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/Banner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAa3E,wBAAgB,MAAM,CAAC,UAAU,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwC3D;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,aAAa,GAAG,EAAE,CAAC;IAC5B,IAAI,EAAE,UAAU,CAAC;CACjB"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/Banner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAY3E,wBAAgB,MAAM,CAAC,UAAU,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0C3D;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,WAAW,CAAC;CAClB"}

package/dist/esm/components/Atoms/Merchandising/Banner.js

@@ -1,7 +1,9 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { BannerType } from '../../../types';
 import { useTheme, CacheProvider } from '../../../providers';
+import { ContentType } from '@searchspring/snap-store-mobx';
 const CSS = {
     banner: () => css({
         '& iframe, img': {
@@ -13,9 +15,6 @@ const CSS = {
 export function Banner(properties) {
     const globalTheme = useTheme();
     const props = {
-        // default props
-        content: [],
-        type: '',
         // global theme
         ...globalTheme?.components?.banner,
         // props
@@ -23,9 +22,9 @@ export function Banner(properties) {
         ...properties.theme?.components?.banner,
     };
     const { content, type, disableStyles, className, style } = props;
-    if (type === BannerType.INLINE) {
-        console.warn(`BannerType '${BannerType.INLINE}' is not supported in <Banner /> component`);
-        return;
+    if (type === ContentType.INLINE) {
+        console.warn(`BannerType '${ContentType.INLINE}' is not supported in <Banner /> component`);
+        return jsx(Fragment, null);
     }
     const styling = {};
     if (!disableStyles) {
@@ -34,9 +33,12 @@ export function Banner(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (content &&
-        content[type]?.length && (jsx(CacheProvider, null,
+    let bannerContent;
+    if (content && content[type]) {
+        bannerContent = content[type];
+    }
+    return bannerContent && bannerContent.length ? (jsx(CacheProvider, null,
         jsx("div", { className: classnames('ss__banner', `ss__banner--${type}`, className), ...styling, dangerouslySetInnerHTML: {
-                __html: content[props.type].join(''),
-            } }))));
+                __html: bannerContent.join(''),
+            } }))) : (jsx(Fragment, null));
 }

package/dist/esm/components/Atoms/Merchandising/Banner.stories.d.ts

@@ -1,5 +1,6 @@
 import { h } from 'preact';
-import { Banner } from './Banner';
+import { Banner, BannerProps } from './Banner';
+import { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: typeof Banner;
@@ -92,8 +93,56 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Header: any;
-export declare const Footer: any;
-export declare const Secondary: any;
-export declare const Left: any;
+export declare const Header: {
+    (args: BannerProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        type: string;
+    };
+};
+export declare const Footer: {
+    (args: BannerProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        type: string;
+    };
+};
+export declare const Secondary: {
+    (args: BannerProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        type: string;
+    };
+};
+export declare const Left: {
+    (args: BannerProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        type: string;
+    };
+};
 //# sourceMappingURL=Banner.stories.d.ts.map

package/dist/esm/components/Atoms/Merchandising/Banner.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK/C,wBAuCE;AAMF,eAAO,MAAM,MAAM,KAAoB,CAAC;AAaxC,eAAO,MAAM,MAAM,KAAoB,CAAC;AAaxC,eAAO,MAAM,SAAS,KAAoB,CAAC;AAa3C,eAAO,MAAM,IAAI,KAAoB,CAAC"}
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEjE,wBAuCE;AAIF,eAAO,MAAM,MAAM;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;CAE7G,CAAC;AAaF,eAAO,MAAM,MAAM;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;CAE7G,CAAC;AAaF,eAAO,MAAM,SAAS;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;CAEhH,CAAC;AAaF,eAAO,MAAM,IAAI;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;CAE3G,CAAC"}

package/dist/esm/components/Atoms/Merchandising/Banner.stories.js

@@ -42,8 +42,7 @@ export default {
     },
 };
 const snapInstance = Snapify.search({ id: 'Banner', globals: { siteId: '8uyt2m', search: { query: { string: 'glasses' } } } });
-const Template = (args, { loaded: { controller } }) => h(Banner, { ...args, content: controller?.store?.merchandising?.content });
-export const Header = Template.bind({});
+export const Header = (args, { loaded: { controller } }) => (h(Banner, { ...args, content: controller?.store?.merchandising?.content }));
 Header.loaders = [
     async () => {
         await snapInstance.search();
@@ -55,7 +54,7 @@ Header.loaders = [
 Header.args = {
     type: 'header',
 };
-export const Footer = Template.bind({});
+export const Footer = (args, { loaded: { controller } }) => (h(Banner, { ...args, content: controller?.store?.merchandising?.content }));
 Footer.loaders = [
     async () => {
         await snapInstance.search();
@@ -67,7 +66,7 @@ Footer.loaders = [
 Footer.args = {
     type: 'footer',
 };
-export const Secondary = Template.bind({});
+export const Secondary = (args, { loaded: { controller } }) => (h(Banner, { ...args, content: controller?.store?.merchandising?.content }));
 Secondary.loaders = [
     async () => {
         await snapInstance.search();
@@ -79,7 +78,7 @@ Secondary.loaders = [
 Secondary.args = {
     type: 'banner',
 };
-export const Left = Template.bind({});
+export const Left = (args, { loaded: { controller } }) => (h(Banner, { ...args, content: controller?.store?.merchandising?.content }));
 Left.loaders = [
     async () => {
         await snapInstance.search();

package/dist/esm/components/Atoms/Merchandising/InlineBanner.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { InlineBannerContent, ComponentProps, LayoutType } from '../../../types';
+import { ComponentProps, LayoutType } from '../../../types';
+import type { Banner } from '@searchspring/snap-store-mobx';
 export declare function InlineBanner(properties: InlineBannerProps): JSX.Element;
 export interface InlineBannerProps extends ComponentProps {
-    banner: InlineBannerContent;
+    banner: Banner;
     width?: string;
     layout?: LayoutType;
     onClick?: (e: React.MouseEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAU,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAyBzF,wBAAgB,YAAY,CAAC,UAAU,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAwCvE;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC"}
+{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAU,UAAU,EAAc,MAAM,gBAAgB,CAAC;AAEhF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAyB5D,wBAAgB,YAAY,CAAC,UAAU,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAuCvE;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC"}

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { useTheme, CacheProvider } from '../../../providers';
@@ -9,7 +11,7 @@ const CSS = {
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
-        width: width || 'auto',
+        width: width,
         '&.ss__inline-banner--grid': {
             flexDirection: 'column',
         },
@@ -28,7 +30,7 @@ export function InlineBanner(properties) {
     const props = {
         // default props
         layout: Layout.GRID,
-        banner: {},
+        width: 'auto',
         // global theme
         ...globalTheme?.components?.inlineBanner,
         // props
@@ -43,11 +45,10 @@ export function InlineBanner(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (banner &&
-        banner.value && (jsx(CacheProvider, null,
+    return banner && banner.value ? (jsx(CacheProvider, null,
         jsx("div", { onClick: (e) => {
                 onClick && onClick(e);
             }, className: classnames('ss__inline-banner', `ss__inline-banner--${layout}`, className), ...styling, dangerouslySetInnerHTML: {
                 __html: banner.value,
-            } }))));
+            } }))) : (jsx(Fragment, null));
 }

package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.d.ts

@@ -1,6 +1,7 @@
 import { h } from 'preact';
-import { InlineBanner } from './InlineBanner';
+import { InlineBanner, InlineBannerProps } from './InlineBanner';
 import { Layout } from '../../../types';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: typeof InlineBanner;
@@ -112,5 +113,14 @@ declare const _default: {
     decorators: ((Story: any) => h.JSX.Element)[];
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    (args: InlineBannerProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
 //# sourceMappingURL=InlineBanner.stories.d.ts.map

package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineBanner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAIjE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBAsEE;AASF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"InlineBanner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA4D5D,GAAG;;AA1Db,wBAsEE;AAIF,eAAO,MAAM,OAAO;WAAU,iBAAiB;;wBAAsD,gBAAgB;;;;;;CAIpH,CAAC"}

package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.js

@@ -17,11 +17,11 @@ export default {
     },
     argTypes: {
         banner: {
-            description: 'InlineBanner content store reference',
+            description: 'Banner object reference',
             type: { required: true },
             table: {
                 type: {
-                    summary: 'inline banner content store object',
+                    summary: 'inline banner store object',
                 },
             },
             control: { type: 'none' },
@@ -69,11 +69,10 @@ export default {
     ],
 };
 const snapInstance = Snapify.search({ id: 'InlineBanner', globals: { siteId: '8uyt2m', search: { query: { string: 'glasses' } } } });
-const Template = (args, { loaded: { controller } }) => {
-    const inlineBanners = controller?.store?.merchandising?.content?.inline;
-    return inlineBanners && h(InlineBanner, { banner: inlineBanners[0], ...args });
+export const Default = (args, { loaded: { controller } }) => {
+    const inlineBanners = controller?.store?.results?.filter((result) => result.type === 'banner').pop();
+    return inlineBanners && h(InlineBanner, { ...args, banner: inlineBanners });
 };
-export const Default = Template.bind({});
 Default.loaders = [
     async () => {
         await snapInstance.search();

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqBhD,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CA+B7D;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc;IACnD,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;CAC/D"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAoB5D,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CA+B7D;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc;IACnD,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;CAC/D"}

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

@@ -2,9 +2,7 @@ import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { useTheme, CacheProvider } from '../../../providers';
 const CSS = {
-    overlay: ({ color, transitionSpeed }) => 
-    //@ts-ignore
-    css({
+    overlay: ({ color, transitionSpeed }) => css({
         transition: `background ${transitionSpeed} ease 0s, left 0s ease ${transitionSpeed}`,
         position: 'fixed',
         zIndex: '10003',

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

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { Overlay } from './Overlay';
+import { Overlay, OverlayProps } from './Overlay';
 declare const _default: {
     title: string;
     component: typeof Overlay;
@@ -119,5 +119,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    (args: OverlayProps): h.JSX.Element;
+    args: {
+        active: boolean;
+    };
+};
 //# sourceMappingURL=Overlay.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpC,wBA4DE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIlD,wBA4DE;AAEF,eAAO,MAAM,OAAO;WAAU,YAAY;;;;CAA0B,CAAC"}

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

@@ -61,8 +61,7 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Overlay, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(Overlay, { ...args });
 Default.args = {
     active: true,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAa1E,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA4DzD;AAED,MAAM,WAAW,UAAW,SAAQ,oBAAoB;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAc1E,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA4DzD;AAED,MAAM,WAAW,UAAW,SAAQ,oBAAoB;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { useTheme, CacheProvider } from '../../../providers';
 const CSS = {
     price: ({ theme }) => css({
-        color: theme.colors?.primary,
+        color: theme?.colors?.primary,
         '&.ss__price--strike': {
             textDecoration: 'line-through',
             color: 'initial',

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

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { Price } from './Price';
+import { Price, PriceProps } from './Price';
 declare const _default: {
     title: string;
     component: typeof Price;
@@ -197,7 +197,27 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const lineThrough: any;
-export declare const CustomCurrency: any;
+export declare const Default: {
+    (args: PriceProps): h.JSX.Element;
+    args: {
+        value: number;
+    };
+};
+export declare const lineThrough: {
+    (args: PriceProps): h.JSX.Element;
+    args: {
+        value: number;
+        lineThrough: boolean;
+    };
+};
+export declare const CustomCurrency: {
+    (args: PriceProps): h.JSX.Element;
+    args: {
+        value: number;
+        symbol: string;
+        thousandsSeparator: string;
+        decimalSeparator: string;
+        symbolAfter: boolean;
+    };
+};
 //# sourceMappingURL=Price.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Price.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIhC,wBAoHE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAM7C,eAAO,MAAM,cAAc,KAAoB,CAAC"}
+{"version":3,"file":"Price.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI5C,wBAoHE;AAEF,eAAO,MAAM,OAAO;WAAU,UAAU;;;;CAAwB,CAAC;AAKjE,eAAO,MAAM,WAAW;WAAU,UAAU;;;;;CAAwB,CAAC;AAMrE,eAAO,MAAM,cAAc;WAAU,UAAU;;;;;;;;CAAwB,CAAC"}

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

@@ -117,17 +117,16 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Price, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(Price, { ...args });
 Default.args = {
     value: 1099.99,
 };
-export const lineThrough = Template.bind({});
+export const lineThrough = (args) => h(Price, { ...args });
 lineThrough.args = {
     value: 1199.99,
     lineThrough: true,
 };
-export const CustomCurrency = Template.bind({});
+export const CustomCurrency = (args) => h(Price, { ...args });
 CustomCurrency.args = {
     value: 999.99,
     symbol: ' €',

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0ChD,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA0BvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,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"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyC5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA0BvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,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"}

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 /** @jsx h */
 import { h } from 'preact';
+import { SkeletonProps } from './Skeleton';
 declare const _default: {
     title: string;
-    component: ((properties: import("./Skeleton").SkeletonProps) => JSX.Element) & {
+    component: ((properties: SkeletonProps) => JSX.Element) & {
         displayName: string;
     };
     parameters: {
@@ -137,9 +138,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    (args: SkeletonProps): h.JSX.Element;
+    args: {
+        width: string;
+        height: string;
+    };
+};
 export declare const Circle: {
-    (args: any): h.JSX.Element;
+    (args: SkeletonProps): h.JSX.Element;
     args: {
         width: string;
         height: string;