@searchspring/snap-preact-components 0.27.8 → 0.30.0

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

@@ -109,7 +109,6 @@ exports.default = {
             control: { type: 'text' },
         } }, utilities_1.componentArgs),
 };
-var Template = function (props) { return (0, preact_1.h)(Icon_1.Icon, __assign({}, props)); };
 var Default = function (props) { return (0, preact_1.h)(Icon_1.Icon, __assign({}, props)); };
 exports.Default = Default;
 exports.Default.args = {
@@ -122,7 +121,8 @@ exports.Custom.args = {
     icon: 'cog',
     size: '60px',
 };
-exports.CustomPath = Template.bind({});
+var CustomPath = function (props) { return (0, preact_1.h)(Icon_1.Icon, __assign({}, props)); };
+exports.CustomPath = CustomPath;
 exports.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',
@@ -131,7 +131,7 @@ exports.CustomPath.args = {
 var Gallery = function () {
     return ((0, preact_1.h)("div", { style: 'display: flex; flex-wrap: wrap; font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 10px;' }, Object.keys(paths_1.iconPaths).map(function (icon, index) {
         return ((0, preact_1.h)("div", { style: "margin-bottom: 40px;" },
-            (0, preact_1.h)(Icon_1.Icon, { icon: icon, color: shiftColor('#3a23ad', (index + '111').padStart(6, '1')), size: "40px", style: { padding: '20px' } }),
+            (0, preact_1.h)(Icon_1.Icon, { icon: icon, color: (0, utilities_1.shiftColor)('#3a23ad', (index + '111').padStart(6, '1')), size: "40px", style: { padding: '20px' } }),
             (0, preact_1.h)("div", { style: "text-align: center" }, icon)));
     })));
 };
@@ -145,27 +145,3 @@ exports.Gallery.parameters = {
         showPanel: false,
     },
 };
-function shiftColor(base, change) {
-    var 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, '');
-    var newColor = '';
-    for (var i = 0; i < 3; i++) {
-        var basePiece = parseInt(base.substring(i * 2, i * 2 + 2), 16);
-        var changePiece = parseInt(change.substring(i * 2, i * 2 + 2), 16);
-        var newPiece = void 0;
-        newPiece = basePiece + changePiece;
-        newPiece = newPiece > 255 ? 255 : newPiece;
-        newPiece = newPiece.toString(16);
-        newPiece = newPiece.length < 2 ? '0' + newPiece : newPiece;
-        newColor += newPiece;
-    }
-    return "#".concat(newColor);
-}

package/dist/cjs/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/cjs/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/cjs/components/Atoms/Image/Image.js

@@ -67,7 +67,7 @@ function Image(properties) {
                     setVisibility('visible');
                     onLoad && onLoad(e);
                 }, onClick: function (e) { return onClick && onClick(e); }, onError: function (e) {
-                    e.target.src = fallback;
+                    e.target.src = fallback || '';
                     onError && onError(e);
                 }, onMouseOver: function (e) {
                     hoverSrc && setHover(true);

package/dist/cjs/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/cjs/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/cjs/components/Atoms/Image/Image.stories.js

@@ -125,24 +125,27 @@ exports.default = {
             action: 'onMouseOut',
         } }, utilities_1.componentArgs),
 };
-var Template = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
-exports.Default = Template.bind({});
+var Default = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
+exports.Default = Default;
 exports.Default.args = {
     src: searchResponse_1.searchResponse.results[6].mappings.core.imageUrl,
     alt: searchResponse_1.searchResponse.results[6].mappings.core.name,
 };
-exports.BrokenImg = Template.bind({});
+var BrokenImg = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
+exports.BrokenImg = BrokenImg;
 exports.BrokenImg.args = {
     src: 'intentionally_broken_image.jpg',
     alt: searchResponse_1.searchResponse.results[6].mappings.core.name,
 };
-exports.ManualFallBack = Template.bind({});
+var ManualFallBack = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
+exports.ManualFallBack = ManualFallBack;
 exports.ManualFallBack.args = {
     src: 'intentionally_broken_image.jpg',
     alt: searchResponse_1.searchResponse.results[5].mappings.core.name,
     fallback: searchResponse_1.searchResponse.results[5].mappings.core.imageUrl,
 };
-exports.onhover = Template.bind({});
+var onhover = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
+exports.onhover = onhover;
 exports.onhover.args = {
     src: searchResponse_1.searchResponse.results[6].mappings.core.imageUrl,
     alt: searchResponse_1.searchResponse.results[6].mappings.core.name,

package/dist/cjs/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/cjs/components/Atoms/Loading/LoadingBar.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingBar = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
 var providers_1 = require("../../../providers");
@@ -22,7 +24,6 @@ var CSS = {
     loadingBar: function (_a) {
         var _b, _c;
         var color = _a.color, height = _a.height, backgroundColor = _a.backgroundColor, theme = _a.theme, animation = _a.animation;
-        //@ts-ignore
         return (0, react_1.css)({
             height: height,
             position: 'fixed',
@@ -34,13 +35,13 @@ var CSS = {
             opacity: '1',
             visibility: 'visible',
             zIndex: '10000',
-            background: backgroundColor || ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.secondary) || '#f8f8f8',
+            background: backgroundColor || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.secondary) || '#f8f8f8',
             '& .ss__loading-bar__bar': {
                 position: 'absolute',
                 top: '0',
                 left: '-200px',
                 height: '100%',
-                background: "".concat(color || ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#ccc'),
+                background: "".concat(color || ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#ccc'),
                 animation: "".concat(animation, " 2s linear infinite"),
             },
         });
@@ -69,8 +70,8 @@ function LoadingBar(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (active && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    return active ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__loading-bar', className) }),
-            (0, react_1.jsx)("div", { className: "ss__loading-bar__bar" })))));
+            (0, react_1.jsx)("div", { className: "ss__loading-bar__bar" })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 }
 exports.LoadingBar = LoadingBar;

package/dist/cjs/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/cjs/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/cjs/components/Atoms/Loading/LoadingBar.stories.js

@@ -71,8 +71,8 @@ exports.default = {
             control: { type: 'text' },
         } }, utilities_1.componentArgs),
 };
-var Template = function (args) { return (0, preact_1.h)(LoadingBar_1.LoadingBar, __assign({}, args)); };
-exports.Active = Template.bind({});
+var Active = function (args) { return (0, preact_1.h)(LoadingBar_1.LoadingBar, __assign({}, args)); };
+exports.Active = Active;
 exports.Active.args = {
     active: true,
 };

package/dist/cjs/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/cjs/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/cjs/components/Atoms/Merchandising/Banner.js

@@ -15,10 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Banner = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
-var types_1 = require("../../../types");
 var providers_1 = require("../../../providers");
+var snap_store_mobx_1 = require("@searchspring/snap-store-mobx");
 var CSS = {
     banner: function () {
         return (0, react_1.css)({
@@ -30,15 +32,13 @@ var CSS = {
     },
 };
 function Banner(properties) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     var globalTheme = (0, providers_1.useTheme)();
-    var props = __assign(__assign(__assign({ 
-        // default props
-        content: [], type: '' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.banner), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.banner);
+    var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.banner), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.banner);
     var content = props.content, type = props.type, disableStyles = props.disableStyles, className = props.className, style = props.style;
-    if (type === types_1.BannerType.INLINE) {
-        console.warn("BannerType '".concat(types_1.BannerType.INLINE, "' is not supported in <Banner /> component"));
-        return;
+    if (type === snap_store_mobx_1.ContentType.INLINE) {
+        console.warn("BannerType '".concat(snap_store_mobx_1.ContentType.INLINE, "' is not supported in <Banner /> component"));
+        return (0, react_1.jsx)(preact_1.Fragment, null);
     }
     var styling = {};
     if (!disableStyles) {
@@ -47,10 +47,13 @@ function Banner(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (content &&
-        ((_d = content[type]) === null || _d === void 0 ? void 0 : _d.length) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    var bannerContent;
+    if (content && content[type]) {
+        bannerContent = content[type];
+    }
+    return bannerContent && bannerContent.length ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__banner', "ss__banner--".concat(type), className) }, styling, { dangerouslySetInnerHTML: {
-                __html: content[props.type].join(''),
-            } })))));
+                __html: bannerContent.join(''),
+            } })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 }
 exports.Banner = Banner;

package/dist/cjs/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/cjs/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/cjs/components/Atoms/Merchandising/Banner.stories.js

@@ -91,12 +91,12 @@ exports.default = {
         } }, utilities_1.componentArgs),
 };
 var snapInstance = snapify_1.Snapify.search({ id: 'Banner', globals: { siteId: '8uyt2m', search: { query: { string: 'glasses' } } } });
-var Template = function (args, _a) {
+var Header = function (args, _a) {
     var _b, _c;
     var controller = _a.loaded.controller;
-    return (0, preact_1.h)(Banner_1.Banner, __assign({}, args, { content: (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.merchandising) === null || _c === void 0 ? void 0 : _c.content }));
+    return ((0, preact_1.h)(Banner_1.Banner, __assign({}, args, { content: (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.merchandising) === null || _c === void 0 ? void 0 : _c.content })));
 };
-exports.Header = Template.bind({});
+exports.Header = Header;
 exports.Header.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -114,7 +114,12 @@ exports.Header.loaders = [
 exports.Header.args = {
     type: 'header',
 };
-exports.Footer = Template.bind({});
+var Footer = function (args, _a) {
+    var _b, _c;
+    var controller = _a.loaded.controller;
+    return ((0, preact_1.h)(Banner_1.Banner, __assign({}, args, { content: (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.merchandising) === null || _c === void 0 ? void 0 : _c.content })));
+};
+exports.Footer = Footer;
 exports.Footer.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -132,7 +137,12 @@ exports.Footer.loaders = [
 exports.Footer.args = {
     type: 'footer',
 };
-exports.Secondary = Template.bind({});
+var Secondary = function (args, _a) {
+    var _b, _c;
+    var controller = _a.loaded.controller;
+    return ((0, preact_1.h)(Banner_1.Banner, __assign({}, args, { content: (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.merchandising) === null || _c === void 0 ? void 0 : _c.content })));
+};
+exports.Secondary = Secondary;
 exports.Secondary.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -150,7 +160,12 @@ exports.Secondary.loaders = [
 exports.Secondary.args = {
     type: 'banner',
 };
-exports.Left = Template.bind({});
+var Left = function (args, _a) {
+    var _b, _c;
+    var controller = _a.loaded.controller;
+    return ((0, preact_1.h)(Banner_1.Banner, __assign({}, args, { content: (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.merchandising) === null || _c === void 0 ? void 0 : _c.content })));
+};
+exports.Left = Left;
 exports.Left.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {

package/dist/cjs/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/cjs/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/cjs/components/Atoms/Merchandising/InlineBanner.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineBanner = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
 var providers_1 = require("../../../providers");
@@ -28,7 +30,7 @@ var CSS = {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            width: width || 'auto',
+            width: width,
             '&.ss__inline-banner--grid': {
                 flexDirection: 'column',
             },
@@ -48,7 +50,7 @@ function InlineBanner(properties) {
     var globalTheme = (0, providers_1.useTheme)();
     var props = __assign(__assign(__assign({ 
         // default props
-        layout: types_1.Layout.GRID, banner: {} }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.inlineBanner), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.inlineBanner);
+        layout: types_1.Layout.GRID, width: 'auto' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.inlineBanner), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.inlineBanner);
     var banner = props.banner, disableStyles = props.disableStyles, className = props.className, width = props.width, layout = props.layout, onClick = props.onClick, style = props.style;
     var styling = {};
     if (!disableStyles) {
@@ -57,12 +59,11 @@ function InlineBanner(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (banner &&
-        banner.value && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    return banner && banner.value ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({ onClick: function (e) {
                 onClick && onClick(e);
             }, className: (0, classnames_1.default)('ss__inline-banner', "ss__inline-banner--".concat(layout), className) }, styling, { dangerouslySetInnerHTML: {
                 __html: banner.value,
-            } })))));
+            } })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 }
 exports.InlineBanner = InlineBanner;

package/dist/cjs/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/cjs/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/cjs/components/Atoms/Merchandising/InlineBanner.stories.js

@@ -69,11 +69,11 @@ exports.default = {
         },
     },
     argTypes: __assign({ 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' },
@@ -116,13 +116,13 @@ exports.default = {
     ],
 };
 var snapInstance = snapify_1.Snapify.search({ id: 'InlineBanner', globals: { siteId: '8uyt2m', search: { query: { string: 'glasses' } } } });
-var Template = function (args, _a) {
-    var _b, _c, _d;
+var Default = function (args, _a) {
+    var _b, _c;
     var controller = _a.loaded.controller;
-    var inlineBanners = (_d = (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.merchandising) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.inline;
-    return inlineBanners && (0, preact_1.h)(InlineBanner_1.InlineBanner, __assign({ banner: inlineBanners[0] }, args));
+    var inlineBanners = (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.filter(function (result) { return result.type === 'banner'; }).pop();
+    return inlineBanners && (0, preact_1.h)(InlineBanner_1.InlineBanner, __assign({}, args, { banner: inlineBanners }));
 };
-exports.Default = Template.bind({});
+exports.Default = Default;
 exports.Default.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {

package/dist/cjs/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/cjs/components/Atoms/Overlay/Overlay.js

@@ -21,7 +21,6 @@ var providers_1 = require("../../../providers");
 var CSS = {
     overlay: function (_a) {
         var color = _a.color, transitionSpeed = _a.transitionSpeed;
-        //@ts-ignore
         return (0, react_1.css)({
             transition: "background ".concat(transitionSpeed, " ease 0s, left 0s ease ").concat(transitionSpeed),
             position: 'fixed',

package/dist/cjs/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