@searchspring/snap-preact-components 0.37.1 → 0.38.1

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,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"}
+{"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;;;;;;;;;yBA+BtD,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

@@ -19,7 +19,16 @@ var preact_1 = require("preact");
 var blocks_1 = require("@storybook/addon-docs/blocks");
 var Image_1 = require("./Image");
 var utilities_1 = require("../../../utilities");
-var searchResponse_1 = require("../../../mocks/searchResponse");
+var searchResponse = {
+    product1: {
+        image: 'https://searchspring-demo-content.s3.amazonaws.com/demo/fashion/product_images_thumb_med/12_14_reddress11531_thumb_med.jpg',
+        name: 'Elevated Classic White Shirt Dress',
+    },
+    product2: {
+        image: 'https://searchspring-demo-content.s3.amazonaws.com/demo/fashion/product_images_thumb_med/110_lcp_9262_copyright_loganpotterf_2016_thumb_med.jpg',
+        name: 'Cambridge Classic White Shirt Dress',
+    },
+};
 var readme_md_1 = __importDefault(require("../Image/readme.md"));
 exports.default = {
     title: "Atoms/Image",
@@ -128,26 +137,26 @@ exports.default = {
 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,
+    src: searchResponse.product1.image,
+    alt: searchResponse.product1.name,
 };
 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,
+    alt: searchResponse.product1.name,
 };
 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,
+    alt: searchResponse.product1.name,
+    fallback: searchResponse.product1.image,
 };
 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,
-    hoverSrc: searchResponse_1.searchResponse.results[7].mappings.core.imageUrl,
+    src: searchResponse.product1.image,
+    alt: searchResponse.product1.name,
+    hoverSrc: searchResponse.product2.image,
 };

package/dist/cjs/components/Atoms/Merchandising/{Banner.d.ts → Banner/Banner.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { 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 {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/Banner/Banner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAE/D,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 → Banner/Banner.js}

@@ -19,7 +19,7 @@ exports.Banner = void 0;
 var preact_1 = require("preact");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
+var providers_1 = require("../../../../providers");
 var snap_store_mobx_1 = require("@searchspring/snap-store-mobx");
 var CSS = {
     banner: function () {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/Banner/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 → Banner/Banner.stories.js}

@@ -54,9 +54,9 @@ exports.Left = exports.Secondary = exports.Footer = exports.Header = void 0;
 var preact_1 = require("preact");
 var blocks_1 = require("@storybook/addon-docs/blocks");
 var Banner_1 = require("./Banner");
-var utilities_1 = require("../../../utilities");
-var snapify_1 = require("../../../utilities/snapify");
-var readme_md_1 = __importDefault(require("../Merchandising/readme.md"));
+var utilities_1 = require("../../../../utilities");
+var snapify_1 = require("../../../../utilities/snapify");
+var readme_md_1 = __importDefault(require("./readme.md"));
 exports.default = {
     title: "Atoms/Banner",
     component: Banner_1.Banner,

package/dist/cjs/components/Atoms/Merchandising/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Banner';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/Atoms/Merchandising/Banner/index.d.ts.map

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

package/dist/cjs/components/Atoms/Merchandising/Banner/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Banner"), exports);

package/dist/cjs/components/Atoms/Merchandising/{InlineBanner.d.ts → InlineBanner/InlineBanner.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { 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 {

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAU,UAAU,EAAc,MAAM,mBAAmB,CAAC;AAEnF,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,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD"}

package/dist/cjs/components/Atoms/Merchandising/{InlineBanner.js → InlineBanner/InlineBanner.js}

@@ -19,8 +19,8 @@ exports.InlineBanner = void 0;
 var preact_1 = require("preact");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var types_1 = require("../../../types");
+var providers_1 = require("../../../../providers");
+var types_1 = require("../../../../types");
 var CSS = {
     inlineBanner: function (_a) {
         var width = _a.width;

package/dist/cjs/components/Atoms/Merchandising/{InlineBanner.stories.d.ts → InlineBanner/InlineBanner.stories.d.ts}

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { InlineBanner, InlineBannerProps } from './InlineBanner';
-import { Layout } from '../../../types';
+import { Layout } from '../../../../types';
 import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBanner.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/InlineBanner/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,mBAAmB,CAAC;AAG3C,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 → InlineBanner/InlineBanner.stories.js}

@@ -54,10 +54,10 @@ exports.Default = void 0;
 var preact_1 = require("preact");
 var blocks_1 = require("@storybook/addon-docs/blocks");
 var InlineBanner_1 = require("./InlineBanner");
-var utilities_1 = require("../../../utilities");
-var snapify_1 = require("../../../utilities/snapify");
-var readme_md_1 = __importDefault(require("../Merchandising/readme.md"));
-var types_1 = require("../../../types");
+var utilities_1 = require("../../../../utilities");
+var snapify_1 = require("../../../../utilities/snapify");
+var readme_md_1 = __importDefault(require("./readme.md"));
+var types_1 = require("../../../../types");
 exports.default = {
     title: "Atoms/InlineBanner",
     component: InlineBanner_1.InlineBanner,

package/dist/cjs/components/Atoms/Merchandising/InlineBanner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InlineBanner';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/Atoms/Merchandising/InlineBanner/index.d.ts.map

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

package/dist/cjs/components/Atoms/Merchandising/InlineBanner/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InlineBanner"), exports);

package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;yBAoBpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,CAAC"}
+{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;yBAwCpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,CAAC"}

package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.js

@@ -19,8 +19,27 @@ var preact_1 = require("preact");
 var blocks_1 = require("@storybook/addon-docs/blocks");
 var FacetSlider_1 = require("./FacetSlider");
 var utilities_1 = require("../../../utilities");
-var searchResponse_1 = require("../../../mocks/searchResponse");
 var readme_md_1 = __importDefault(require("../FacetSlider/readme.md"));
+// unfortunatley we have to hardcode the searchresponse data here rather than use the Snap-Shared
+// mockdata due to issues with storybook being unable to bundle MockData due to it using fs
+var sliderFacetMock = {
+    field: 'price',
+    label: 'Price',
+    type: 'range',
+    display: 'slider',
+    filtered: false,
+    collapsed: false,
+    range: {
+        low: 0,
+        high: 120,
+    },
+    active: {
+        low: 0,
+        high: 120,
+    },
+    step: 1,
+    formatValue: '$%01.2f',
+};
 exports.default = {
     title: "Molecules/FacetSlider",
     component: FacetSlider_1.FacetSlider,
@@ -138,5 +157,5 @@ exports.default = {
             action: 'onChange',
         } }, utilities_1.componentArgs),
 };
-var Price = function (args) { return (0, preact_1.h)(FacetSlider_1.FacetSlider, __assign({}, args, { facet: searchResponse_1.sliderFacetMock })); };
+var Price = function (args) { return (0, preact_1.h)(FacetSlider_1.FacetSlider, __assign({}, args, { facet: sliderFacetMock })); };
 exports.Price = Price;

package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyB5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA0E/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA2B5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAqE/D;AAiCD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

package/dist/cjs/components/Molecules/Slideout/Slideout.js

@@ -46,13 +46,14 @@ var CSS = {
         });
     },
 };
+var buttonClass = 'ss__slideout__button';
 function Slideout(properties) {
     var _a, _b, _c, _d;
     var globalTheme = (0, providers_1.useTheme)();
     var props = __assign(__assign(__assign({ 
         // default props
-        active: false, displayAt: '', slideDirection: 'left', width: '300px', buttonContent: 'click me', overlayColor: 'rgba(0,0,0,0.8)', transitionSpeed: '0.25s' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.slideout), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.slideout);
-    var children = props.children, active = props.active, buttonContent = props.buttonContent, width = props.width, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, slideDirection = props.slideDirection, disableStyles = props.disableStyles, className = props.className, style = props.style;
+        active: false, displayAt: '', slideDirection: 'left', width: '300px', buttonContent: (0, react_1.jsx)("div", { className: buttonClass }, "click me"), overlayColor: 'rgba(0,0,0,0.8)', transitionSpeed: '0.25s' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.slideout), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.slideout);
+    var children = props.children, active = props.active, width = props.width, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, slideDirection = props.slideDirection, buttonContent = props.buttonContent, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var subProps = {
         overlay: __assign(__assign(__assign({ 
             // default props
@@ -82,8 +83,35 @@ function Slideout(properties) {
         styling.css = [style];
     }
     return isVisible ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        buttonContent && ((0, react_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); } }, buttonContent)),
+        (0, react_1.jsx)(ButtonContent, { content: buttonContent, toggleActive: toggleActive }),
         (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, { 'ss__slideout--active': isActive }) }, styling), (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive })),
         (0, react_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 }
 exports.Slideout = Slideout;
+var ButtonContent = function (props) {
+    var content = props.content, toggleActive = props.toggleActive;
+    if (content && typeof content == 'string') {
+        return ((0, react_1.jsx)("div", { className: buttonClass, onClick: function () { return toggleActive(); } }, content));
+    }
+    else if (content && typeof content == 'object') {
+        var clone = (0, utilities_1.cloneWithProps)(content, {
+            onClick: function () { return toggleActive(); },
+        });
+        if (clone.props.class || clone.props.className) {
+            // check if class
+            if (clone.props.class && clone.props.class.indexOf(buttonClass) < 0) {
+                clone.props.class = "".concat(clone.props.class, " ").concat(buttonClass);
+            }
+            // check if classname
+            if (clone.props.className && clone.props.className.indexOf(buttonClass) < 0) {
+                clone.props.className = "".concat(clone.props.className, " ").concat(buttonClass);
+            }
+        }
+        else {
+            clone.props.className = clone.props.class = buttonClass;
+        }
+        return clone;
+    }
+    else
+        return (0, react_1.jsx)(preact_1.Fragment, null);
+};

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,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"}
+{"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;;;;;;;;;yBA+BtD,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

@@ -2,7 +2,16 @@ import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
 import { Image, FALLBACK_IMAGE_URL } from './Image';
 import { componentArgs } from '../../../utilities';
-import { searchResponse } from '../../../mocks/searchResponse';
+const searchResponse = {
+    product1: {
+        image: 'https://searchspring-demo-content.s3.amazonaws.com/demo/fashion/product_images_thumb_med/12_14_reddress11531_thumb_med.jpg',
+        name: 'Elevated Classic White Shirt Dress',
+    },
+    product2: {
+        image: 'https://searchspring-demo-content.s3.amazonaws.com/demo/fashion/product_images_thumb_med/110_lcp_9262_copyright_loganpotterf_2016_thumb_med.jpg',
+        name: 'Cambridge Classic White Shirt Dress',
+    },
+};
 import Readme from '../Image/readme.md';
 export default {
     title: `Atoms/Image`,
@@ -122,23 +131,23 @@ export default {
 };
 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,
+    src: searchResponse.product1.image,
+    alt: searchResponse.product1.name,
 };
 export const BrokenImg = (args) => h(Image, { ...args, style: { width: '100%' } });
 BrokenImg.args = {
     src: 'intentionally_broken_image.jpg',
-    alt: searchResponse.results[6].mappings.core.name,
+    alt: searchResponse.product1.name,
 };
 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,
+    alt: searchResponse.product1.name,
+    fallback: searchResponse.product1.image,
 };
 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,
-    hoverSrc: searchResponse.results[7].mappings.core.imageUrl,
+    src: searchResponse.product1.image,
+    alt: searchResponse.product1.name,
+    hoverSrc: searchResponse.product2.image,
 };

package/dist/esm/components/Atoms/Merchandising/{Banner.d.ts → Banner/Banner.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { 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 {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/Banner/Banner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAE/D,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 → Banner/Banner.js}

@@ -2,7 +2,7 @@
 import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider } from '../../../providers';
+import { useTheme, CacheProvider } from '../../../../providers';
 import { ContentType } from '@searchspring/snap-store-mobx';
 const CSS = {
     banner: () => css({

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/Banner/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 → Banner/Banner.stories.js}

@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
 import { Banner } from './Banner';
-import { componentArgs } from '../../../utilities';
-import { Snapify } from '../../../utilities/snapify';
-import Readme from '../Merchandising/readme.md';
+import { componentArgs } from '../../../../utilities';
+import { Snapify } from '../../../../utilities/snapify';
+import Readme from './readme.md';
 export default {
     title: `Atoms/Banner`,
     component: Banner,

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

@@ -0,0 +1,2 @@
+export * from './Banner';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+export * from './Banner';

package/dist/esm/components/Atoms/Merchandising/{InlineBanner.d.ts → InlineBanner/InlineBanner.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { 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 {

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAU,UAAU,EAAc,MAAM,mBAAmB,CAAC;AAEnF,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,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD"}

package/dist/esm/components/Atoms/Merchandising/{InlineBanner.js → InlineBanner/InlineBanner.js}

@@ -2,8 +2,8 @@
 import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider } from '../../../providers';
-import { Layout } from '../../../types';
+import { useTheme, CacheProvider } from '../../../../providers';
+import { Layout } from '../../../../types';
 const CSS = {
     inlineBanner: ({ width }) => css({
         height: '100%',

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { InlineBanner, InlineBannerProps } from './InlineBanner';
-import { Layout } from '../../../types';
+import { Layout } from '../../../../types';
 import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBanner.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Atoms/Merchandising/InlineBanner/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,mBAAmB,CAAC;AAG3C,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 → InlineBanner/InlineBanner.stories.js}

@@ -1,10 +1,10 @@
 import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
 import { InlineBanner } from './InlineBanner';
-import { componentArgs } from '../../../utilities';
-import { Snapify } from '../../../utilities/snapify';
-import Readme from '../Merchandising/readme.md';
-import { Layout } from '../../../types';
+import { componentArgs } from '../../../../utilities';
+import { Snapify } from '../../../../utilities/snapify';
+import Readme from './readme.md';
+import { Layout } from '../../../../types';
 export default {
     title: `Atoms/InlineBanner`,
     component: InlineBanner,

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

@@ -0,0 +1,2 @@
+export * from './InlineBanner';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+export * from './InlineBanner';

package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;yBAoBpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,CAAC"}
+{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;yBAwCpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,CAAC"}

package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.js

@@ -2,8 +2,27 @@ import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
 import { FacetSlider } from './FacetSlider';
 import { componentArgs } from '../../../utilities';
-import { sliderFacetMock } from '../../../mocks/searchResponse';
 import Readme from '../FacetSlider/readme.md';
+// unfortunatley we have to hardcode the searchresponse data here rather than use the Snap-Shared
+// mockdata due to issues with storybook being unable to bundle MockData due to it using fs
+const sliderFacetMock = {
+    field: 'price',
+    label: 'Price',
+    type: 'range',
+    display: 'slider',
+    filtered: false,
+    collapsed: false,
+    range: {
+        low: 0,
+        high: 120,
+    },
+    active: {
+        low: 0,
+        high: 120,
+    },
+    step: 1,
+    formatValue: '$%01.2f',
+};
 export default {
     title: `Molecules/FacetSlider`,
     component: FacetSlider,

package/dist/esm/components/Molecules/Slideout/Slideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyB5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA0E/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA2B5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAqE/D;AAiCD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

package/dist/esm/components/Molecules/Slideout/Slideout.js

@@ -26,6 +26,7 @@ const CSS = {
         overflowY: 'auto',
     }),
 };
+const buttonClass = 'ss__slideout__button';
 export function Slideout(properties) {
     const globalTheme = useTheme();
     const props = {
@@ -34,7 +35,7 @@ export function Slideout(properties) {
         displayAt: '',
         slideDirection: 'left',
         width: '300px',
-        buttonContent: 'click me',
+        buttonContent: jsx("div", { className: buttonClass }, "click me"),
         overlayColor: 'rgba(0,0,0,0.8)',
         transitionSpeed: '0.25s',
         // global theme
@@ -43,7 +44,7 @@ export function Slideout(properties) {
         ...properties,
         ...properties.theme?.components?.slideout,
     };
-    const { children, active, buttonContent, width, displayAt, transitionSpeed, overlayColor, slideDirection, disableStyles, className, style } = props;
+    const { children, active, width, displayAt, transitionSpeed, overlayColor, slideDirection, buttonContent, disableStyles, className, style } = props;
     const subProps = {
         overlay: {
             // default props
@@ -78,7 +79,34 @@ export function Slideout(properties) {
         styling.css = [style];
     }
     return isVisible ? (jsx(CacheProvider, null,
-        buttonContent && (jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive() }, buttonContent)),
+        jsx(ButtonContent, { content: buttonContent, toggleActive: toggleActive }),
         jsx("div", { className: classnames('ss__slideout', className, { 'ss__slideout--active': isActive }), ...styling }, cloneWithProps(children, { toggleActive, active: isActive })),
         jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive }))) : (jsx(Fragment, null));
 }
+const ButtonContent = (props) => {
+    const { content, toggleActive } = props;
+    if (content && typeof content == 'string') {
+        return (jsx("div", { className: buttonClass, onClick: () => toggleActive() }, content));
+    }
+    else if (content && typeof content == 'object') {
+        let clone = cloneWithProps(content, {
+            onClick: () => toggleActive(),
+        });
+        if (clone.props.class || clone.props.className) {
+            // check if class
+            if (clone.props.class && clone.props.class.indexOf(buttonClass) < 0) {
+                clone.props.class = `${clone.props.class} ${buttonClass}`;
+            }
+            // check if classname
+            if (clone.props.className && clone.props.className.indexOf(buttonClass) < 0) {
+                clone.props.className = `${clone.props.className} ${buttonClass}`;
+            }
+        }
+        else {
+            clone.props.className = clone.props.class = buttonClass;
+        }
+        return clone;
+    }
+    else
+        return jsx(Fragment, null);
+};