@searchspring/snap-preact-components 0.27.8 → 0.30.0

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

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { FormattedNumber } from './FormattedNumber';
+import { FormattedNumber, FormattedNumberProps } from './FormattedNumber';
 declare const _default: {
     title: string;
     component: typeof FormattedNumber;
@@ -179,7 +179,26 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const Temperature: any;
-export declare const Length: any;
+export declare const Default: {
+    (args: FormattedNumberProps): h.JSX.Element;
+    args: {
+        value: number;
+    };
+};
+export declare const Temperature: {
+    (args: FormattedNumberProps): h.JSX.Element;
+    args: {
+        value: number;
+        symbol: string;
+        decimalPlaces: number;
+    };
+};
+export declare const Length: {
+    (args: FormattedNumberProps): h.JSX.Element;
+    args: {
+        value: number;
+        symbol: string;
+        decimalPlaces: number;
+    };
+};
 //# sourceMappingURL=FormattedNumber.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormattedNumber.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpD,wBAsGE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
+{"version":3,"file":"FormattedNumber.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI1E,wBAsGE;AAEF,eAAO,MAAM,OAAO;WAAU,oBAAoB;;;;CAAkC,CAAC;AAKrF,eAAO,MAAM,WAAW;WAAU,oBAAoB;;;;;;CAAkC,CAAC;AAOzF,eAAO,MAAM,MAAM;WAAU,oBAAoB;;;;;;CAAkC,CAAC"}

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

@@ -103,18 +103,17 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(FormattedNumber, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(FormattedNumber, { ...args });
 Default.args = {
     value: 1099.99,
 };
-export const Temperature = Template.bind({});
+export const Temperature = (args) => h(FormattedNumber, { ...args });
 Temperature.args = {
     value: 100,
     symbol: ' °C',
     decimalPlaces: 2,
 };
-export const Length = Template.bind({});
+export const Length = (args) => h(FormattedNumber, { ...args });
 Length.args = {
     value: 100,
     symbol: ' mm',

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAY9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAyCvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAY9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAyCvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}

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

@@ -1,10 +1,12 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { useTheme, CacheProvider } from '../../../providers';
 import { iconPaths } from './paths';
 const CSS = {
     icon: ({ color, height, width, size, theme }) => css({
-        fill: color || theme.colors?.primary,
+        fill: color || theme?.colors?.primary,
         width: width || size,
         height: height || size,
         position: 'relative',
@@ -32,7 +34,7 @@ export function Icon(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (iconPath && (jsx(CacheProvider, null,
-        jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles && (width || size), height: disableStyles && (height || size) },
-            jsx("path", { fill: disableStyles && color, d: iconPath })))));
+    return iconPath ? (jsx(CacheProvider, null,
+        jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined },
+            jsx("path", { fill: disableStyles ? color : undefined, d: iconPath })))) : (jsx(Fragment, null));
 }

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

@@ -1,6 +1,5 @@
 import { h } from 'preact';
-import { Icon } from './Icon';
-import { IconProps } from '../../../types';
+import { Icon, IconProps } from './Icon';
 declare const _default: {
     title: string;
     component: typeof Icon;
@@ -170,7 +169,14 @@ export declare const Custom: {
         size: string;
     };
 };
-export declare const CustomPath: any;
+export declare const CustomPath: {
+    (props: IconProps): JSX.Element;
+    args: {
+        path: string;
+        size: string;
+        viewBox: string;
+    };
+};
 export declare const Gallery: {
     (): JSX.Element;
     parameters: {

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK3C,wBA0FE;AAIF,eAAO,MAAM,OAAO;YAAW,SAAS,GAAG,WAAW;;;;CAAuB,CAAC;AAK9E,eAAO,MAAM,MAAM;YAAW,SAAS,GAAG,WAAW;;;;;;CAAuB,CAAC;AAO7E,eAAO,MAAM,UAAU,KAAoB,CAAC;AAQ5C,eAAO,MAAM,OAAO;QAAO,WAAW;;;;;;;;;;CAarC,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKzC,wBA0FE;AAEF,eAAO,MAAM,OAAO;YAAW,SAAS,GAAG,WAAW;;;;CAAuB,CAAC;AAK9E,eAAO,MAAM,MAAM;YAAW,SAAS,GAAG,WAAW;;;;;;CAAuB,CAAC;AAO7E,eAAO,MAAM,UAAU;YAAW,SAAS,GAAG,WAAW;;;;;;CAAuB,CAAC;AAOjF,eAAO,MAAM,OAAO;QAAO,WAAW;;;;;;;;;;CAarC,CAAC"}

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

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
 import { Icon } from './Icon';
 import { iconPaths } from './paths';
-import { componentArgs } from '../../../utilities';
+import { componentArgs, shiftColor } from '../../../utilities';
 import Readme from '../Icon/readme.md';
 export default {
     title: `Atoms/Icon`,
@@ -92,7 +92,6 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (props) => h(Icon, { ...props });
 export const Default = (props) => h(Icon, { ...props });
 Default.args = {
     icon: 'cogs',
@@ -103,7 +102,7 @@ Custom.args = {
     icon: 'cog',
     size: '60px',
 };
-export const CustomPath = Template.bind({});
+export const CustomPath = (props) => h(Icon, { ...props });
 CustomPath.args = {
     path: 'M12.9,13.8C12.9,13.8,12.9,13.8,12.9,13.8c-0.1,0.1-0.3,0.2-0.5,0.2C4.5,17.9,1.9,28.8,6.6,38.5l28.6-13.8 c0,0,0,0,0,0c0.2-0.1,0.3-0.1,0.5-0.2C43.5,20.6,46.2,9.7,41.5,0L12.9,13.8zM8.6,42.1C8.6,42.1,8.6,42.1,8.6,42.1c-0.1,0.1-0.3,0.1-0.5,0.2C0.3,46.1-2.4,57,2.3,66.7l28.6-13.8 c0,0,0,0,0,0c0.2-0.1,0.3-0.1,0.5-0.2c7.9-3.8,10.5-14.8,5.8-24.4L8.6,42.1z',
     size: '70px',
@@ -125,27 +124,3 @@ Gallery.parameters = {
         showPanel: false,
     },
 };
-function shiftColor(base, change) {
-    const colorRegEx = /^\#?[A-Fa-f0-9]{6}$/;
-    if (!base || !change) {
-        return '#000000';
-    }
-    if (!base.match(colorRegEx) || !change.match(colorRegEx)) {
-        return '#000000';
-    }
-    // remove '#'s
-    base = base.replace(/\#/g, '');
-    change = change.replace(/\#/g, '');
-    let newColor = '';
-    for (let i = 0; i < 3; i++) {
-        const basePiece = parseInt(base.substring(i * 2, i * 2 + 2), 16);
-        const changePiece = parseInt(change.substring(i * 2, i * 2 + 2), 16);
-        let newPiece;
-        newPiece = basePiece + changePiece;
-        newPiece = newPiece > 255 ? 255 : newPiece;
-        newPiece = newPiece.toString(16);
-        newPiece = newPiece.length < 2 ? '0' + newPiece : newPiece;
-        newColor += newPiece;
-    }
-    return `#${newColor}`;
-}

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

@@ -7,11 +7,11 @@ export interface ImageProps extends ComponentProps {
     src: string;
     fallback?: string;
     hoverSrc?: string;
-    onMouseOver?: (e: MouseEvent) => void;
-    onMouseOut?: (e: MouseEvent) => void;
-    onError?: (e: Event) => void;
-    onLoad?: (e: Event) => void;
-    onClick?: (e: MouseEvent) => void;
+    onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void;
+    onMouseOut?: (e: React.MouseEvent<HTMLImageElement>) => void;
+    onError?: (e: React.MouseEvent<HTMLImageElement>) => void;
+    onLoad?: (e: React.MouseEvent<HTMLImageElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
     lazy?: boolean;
 }
 //# sourceMappingURL=Image.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,eAAO,MAAM,kBAAkB,6DAA6D,CAAC;AAmB7F,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA8DzD;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,eAAO,MAAM,kBAAkB,6DAA6D,CAAC;AAmB7F,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA8DzD;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,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"}

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

@@ -10,7 +10,7 @@ const CSS = {
         justifyContent: 'center',
         height: 'auto',
         '& img': {
-            visibility,
+            visibility: visibility,
             flexShrink: '0',
             objectFit: 'contain',
             maxWidth: '100%',
@@ -53,7 +53,7 @@ export function Image(properties) {
                     setVisibility('visible');
                     onLoad && onLoad(e);
                 }, onClick: (e) => onClick && onClick(e), onError: (e) => {
-                    e.target.src = fallback;
+                    e.target.src = fallback || '';
                     onError && onError(e);
                 }, onMouseOver: (e) => {
                     hoverSrc && setHover(true);

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));
 }