@searchspring/snap-preact-components 0.27.7 → 0.29.0

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

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FacetSlider = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
 var hooks_1 = require("preact/hooks");
 var mobx_react_lite_1 = require("mobx-react-lite");
 var react_1 = require("@emotion/react");
@@ -59,18 +61,18 @@ var CSS = {
                 },
             },
             '& .ss__facet-slider__rail': {
-                background: railColor || ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#333',
+                background: railColor || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#333',
                 height: '100%',
             },
             '& .ss__facet-slider__segment': {
-                background: trackColor || ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.secondary) || '#ccc',
+                background: trackColor || ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary) || '#ccc',
                 height: '100%',
             },
             '& .ss__facet-slider__handles': {
                 textAlign: 'center',
                 '& button': {
                     '& .ss__facet-slider__handle': {
-                        background: handleColor || ((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) || '#333',
+                        background: handleColor || ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) || '#333',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
@@ -100,7 +102,7 @@ var CSS = {
                             cursor: 'pointer',
                         },
                         '&.ss__facet-slider__handle--active': {
-                            background: handleDraggingColor || handleColor || ((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.primary) || '#000',
+                            background: handleDraggingColor || handleColor || ((_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.primary) || '#000',
                             '& label.ss__facet-slider__handle__label': {
                                 background: '#fff',
                                 padding: '0 5px',
@@ -141,28 +143,28 @@ var CSS = {
     },
 };
 exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var globalTheme = (0, providers_1.useTheme)();
     var theme = __assign(__assign({}, globalTheme), properties.theme);
     var props = __assign(__assign(__assign({ 
         // default props
-        tickSize: ((_a = properties.facet) === null || _a === void 0 ? void 0 : _a.step) * 10 || 20 }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.facetSlider), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.facetSlider);
+        tickSize: ((_a = properties.facet) === null || _a === void 0 ? void 0 : _a.step) ? ((_b = properties.facet) === null || _b === void 0 ? void 0 : _b.step) * 10 : 20 }, (_c = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _c === void 0 ? void 0 : _c.facetSlider), properties), (_e = (_d = properties.theme) === null || _d === void 0 ? void 0 : _d.components) === null || _e === void 0 ? void 0 : _e.facetSlider);
     var tickTextColor = props.tickTextColor, trackColor = props.trackColor, valueTextColor = props.valueTextColor, railColor = props.railColor, handleColor = props.handleColor, handleDraggingColor = props.handleDraggingColor, showTicks = props.showTicks, facet = props.facet, stickyHandleLabel = props.stickyHandleLabel, onChange = props.onChange, onDrag = props.onDrag, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var tickSize = props.tickSize;
     if (isNaN(Number(tickSize)) || Number(tickSize) <= 0) {
         // fallback to default (causes chrome to crash)
-        tickSize = ((_e = properties.facet) === null || _e === void 0 ? void 0 : _e.step) * 10 || 20;
+        tickSize = ((_f = properties.facet) === null || _f === void 0 ? void 0 : _f.step) ? ((_g = properties.facet) === null || _g === void 0 ? void 0 : _g.step) * 10 : 20;
     }
     else {
         tickSize = Number(tickSize);
     }
-    var _t = (0, hooks_1.useState)([(_f = facet.active) === null || _f === void 0 ? void 0 : _f.low, (_g = facet.active) === null || _g === void 0 ? void 0 : _g.high]), values = _t[0], setValues = _t[1];
-    var _u = (0, hooks_1.useState)([(_h = facet.active) === null || _h === void 0 ? void 0 : _h.low, (_j = facet.active) === null || _j === void 0 ? void 0 : _j.high]), active = _u[0], setActive = _u[1];
-    if (values[0] != ((_k = facet.active) === null || _k === void 0 ? void 0 : _k.low) || values[1] != ((_l = facet.active) === null || _l === void 0 ? void 0 : _l.high)) {
-        setActive([(_m = facet.active) === null || _m === void 0 ? void 0 : _m.low, (_o = facet.active) === null || _o === void 0 ? void 0 : _o.high]);
-        setValues([(_p = facet.active) === null || _p === void 0 ? void 0 : _p.low, (_q = facet.active) === null || _q === void 0 ? void 0 : _q.high]);
+    var _x = (0, hooks_1.useState)([(_h = facet.active) === null || _h === void 0 ? void 0 : _h.low, (_j = facet.active) === null || _j === void 0 ? void 0 : _j.high]), values = _x[0], setValues = _x[1];
+    var _y = (0, hooks_1.useState)([(_k = facet.active) === null || _k === void 0 ? void 0 : _k.low, (_l = facet.active) === null || _l === void 0 ? void 0 : _l.high]), active = _y[0], setActive = _y[1];
+    if ((((_m = facet.active) === null || _m === void 0 ? void 0 : _m.low) && ((_o = facet.active) === null || _o === void 0 ? void 0 : _o.high) && values[0] != ((_p = facet.active) === null || _p === void 0 ? void 0 : _p.low)) || values[1] != ((_q = facet.active) === null || _q === void 0 ? void 0 : _q.high)) {
+        setActive([(_r = facet.active) === null || _r === void 0 ? void 0 : _r.low, (_s = facet.active) === null || _s === void 0 ? void 0 : _s.high]);
+        setValues([(_t = facet.active) === null || _t === void 0 ? void 0 : _t.low, (_u = facet.active) === null || _u === void 0 ? void 0 : _u.high]);
     }
-    var _v = (0, react_ranger_1.useRanger)({
+    var _z = (0, react_ranger_1.useRanger)({
         values: active,
         onChange: function (val) {
             var _a;
@@ -181,11 +183,11 @@ exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
             setActive(val);
             onDrag && onDrag(val);
         },
-        min: (_r = facet.range) === null || _r === void 0 ? void 0 : _r.low,
-        max: (_s = facet.range) === null || _s === void 0 ? void 0 : _s.high,
+        min: (_v = facet.range) === null || _v === void 0 ? void 0 : _v.low,
+        max: (_w = facet.range) === null || _w === void 0 ? void 0 : _w.high,
         stepSize: facet.step,
         tickSize: tickSize,
-    }), getTrackProps = _v.getTrackProps, ticks = _v.ticks, segments = _v.segments, handles = _v.handles;
+    }), getTrackProps = _z.getTrackProps, ticks = _z.ticks, segments = _z.segments, handles = _z.handles;
     var styling = {};
     if (!disableStyles) {
         styling.css = [
@@ -206,9 +208,7 @@ exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (facet.range &&
-        facet.active &&
-        facet.step && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    return facet.range && facet.active && facet.step ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__facet-slider', className) }, getTrackProps(), styling),
             (0, react_1.jsx)("div", { className: "ss__facet-slider__slider" },
                 showTicks &&
@@ -217,11 +217,12 @@ exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
                         return ((0, react_1.jsx)("div", __assign({ className: "ss__facet-slider__tick" }, getTickProps()),
                             (0, react_1.jsx)("div", { className: "ss__facet-slider__tick__label" }, value)));
                     }),
-                segments.map(function (_a, index) {
+                segments.map(function (_a, idx) {
                     var getSegmentProps = _a.getSegmentProps;
-                    return ((0, react_1.jsx)("div", __assign({ className: "".concat(index === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment') }, getSegmentProps(), { index: index })));
+                    return ((0, react_1.jsx)("div", __assign({ className: "".concat(idx === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment') }, getSegmentProps())));
                 }),
                 (0, react_1.jsx)("div", { className: 'ss__facet-slider__handles' }, handles.map(function (_a, idx) {
+                    var _b, _c;
                     var value = _a.value, active = _a.active, getHandleProps = _a.getHandleProps;
                     return ((0, react_1.jsx)("button", __assign({ type: "button" }, getHandleProps({
                         style: {
@@ -231,10 +232,10 @@ exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
                             outline: 'none',
                         },
                     })),
-                        (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && ((0, react_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', "ss__facet-slider__handle__label--".concat(idx), { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == facet.range.low }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == facet.range.high }) }, (0, utilities_1.sprintf)(facet.formatValue, value))))));
+                        (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && ((0, react_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', "ss__facet-slider__handle__label--".concat(idx), { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == ((_b = facet === null || facet === void 0 ? void 0 : facet.range) === null || _b === void 0 ? void 0 : _b.low) }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == ((_c = facet === null || facet === void 0 ? void 0 : facet.range) === null || _c === void 0 ? void 0 : _c.high) }) }, (0, utilities_1.sprintf)(facet.formatValue, value))))));
                 }))),
             !stickyHandleLabel && ((0, react_1.jsx)("div", { className: 'ss__facet-slider__labels' }, handles.map(function (_a, idx) {
                 var value = _a.value;
                 return ((0, react_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__label', "ss__facet-slider__label--".concat(idx)) }, (0, utilities_1.sprintf)(facet.formatValue, value)));
-            })))))));
+            })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

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

@@ -208,5 +208,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Price: any;
+export declare const Price: (args: FacetSliderProps) => h.JSX.Element;
 //# sourceMappingURL=FacetSlider.stories.d.ts.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAwIE;AAIF,eAAO,MAAM,KAAK,KAAoB,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;;;;;;;;;;;yBAoBpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,CAAC"}

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

@@ -138,5 +138,5 @@ exports.default = {
             action: 'onChange',
         } }, utilities_1.componentArgs),
 };
-var Template = function (args) { return (0, preact_1.h)(FacetSlider_1.FacetSlider, __assign({}, args, { facet: searchResponse_1.sliderFacetMock })); };
-exports.Price = Template.bind({});
+var Price = function (args) { return (0, preact_1.h)(FacetSlider_1.FacetSlider, __assign({}, args, { facet: searchResponse_1.sliderFacetMock })); };
+exports.Price = Price;

package/dist/cjs/components/Molecules/Filter/Filter.d.ts

@@ -1,13 +1,17 @@
+/// <reference types="react" />
 import { ComponentProps } from '../../../types';
+import type { Filter as FilterType } from '@searchspring/snap-store-mobx';
+import type { UrlManager } from '@searchspring/snap-url-manager';
 export declare const Filter: ((properties: FilterProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FilterProps extends ComponentProps {
+    filter?: FilterType;
     facetLabel?: string;
-    valueLabel: string;
-    url?: any;
+    valueLabel?: string;
+    url?: UrlManager;
     hideFacetLabel?: boolean;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     icon?: string;
     separator?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Filter/Filter.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAuBhD,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAoEnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Filter/Filter.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAqBjE,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAgFnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB"}

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

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filter = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
 var mobx_react_lite_1 = require("mobx-react-lite");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
@@ -42,21 +44,24 @@ var CSS = {
 };
 // TODO: look into urlManager and how it connects in this case, left the href out for the time being
 exports.Filter = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     var globalTheme = (0, providers_1.useTheme)();
     var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.filter), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.filter);
-    var facetLabel = props.facetLabel, valueLabel = props.valueLabel, url = props.url, hideFacetLabel = props.hideFacetLabel, onClick = props.onClick, icon = props.icon, separator = props.separator, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var filter = props.filter, facetLabel = props.facetLabel, valueLabel = props.valueLabel, url = props.url, hideFacetLabel = props.hideFacetLabel, onClick = props.onClick, icon = props.icon, separator = props.separator, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var link = ((_d = filter === null || filter === void 0 ? void 0 : filter.url) === null || _d === void 0 ? void 0 : _d.link) || (url === null || url === void 0 ? void 0 : url.link);
+    var value = (filter === null || filter === void 0 ? void 0 : filter.value.label) || valueLabel;
+    var label = (filter === null || filter === void 0 ? void 0 : filter.facet.label) || facetLabel;
     var subProps = {
         button: __assign(__assign(__assign({ 
             // default props
-            className: 'ss__filter__button' }, (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.button), (0, utilities_1.defined)({
+            className: 'ss__filter__button' }, (_e = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _e === void 0 ? void 0 : _e.button), (0, utilities_1.defined)({
             disableStyles: disableStyles,
         })), { 
             // component theme overrides
             theme: props.theme }),
         icon: __assign(__assign(__assign({ 
             // default props
-            icon: 'close-thin', className: 'ss__filter__button__icon', size: '10px' }, (_e = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _e === void 0 ? void 0 : _e.icon), (0, utilities_1.defined)({
+            icon: 'close-thin', className: 'ss__filter__button__icon', size: '10px' }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.icon), (0, utilities_1.defined)({
             disableStyles: disableStyles,
             icon: icon,
         })), { 
@@ -70,12 +75,15 @@ exports.Filter = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (valueLabel && ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("a", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter', className), onClick: function (e) { return onClick && onClick(e); } }, url === null || url === void 0 ? void 0 : url.link),
+    return value ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("a", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter', className), onClick: function (e) {
+                (link === null || link === void 0 ? void 0 : link.onClick) && link.onClick(e);
+                onClick && onClick(e);
+            }, href: link === null || link === void 0 ? void 0 : link.href }),
             (0, react_1.jsx)(Button_1.Button, __assign({}, subProps.button),
                 (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon)),
                 !hideFacetLabel && ((0, react_1.jsx)("span", { className: "ss__filter__label" },
-                    facetLabel,
+                    label,
                     separator && (0, react_1.jsx)("span", { className: "ss__filter__label__separator" }, separator))),
-                (0, react_1.jsx)("span", { className: "ss__filter__value" }, valueLabel))))));
+                (0, react_1.jsx)("span", { className: "ss__filter__value" }, value))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

package/dist/cjs/components/Molecules/Filter/Filter.stories.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { h } from 'preact';
 import { FilterProps } from './Filter';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: FilterProps) => JSX.Element) & {
@@ -63,6 +64,17 @@ declare const _default: {
                 type: string;
             };
         };
+        filter: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         facetLabel: {
             description: string;
             table: {
@@ -76,9 +88,6 @@ declare const _default: {
         };
         valueLabel: {
             description: string;
-            type: {
-                required: boolean;
-            };
             table: {
                 type: {
                     summary: string;
@@ -151,6 +160,27 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const NoFacetLabel: any;
+export declare const Default: {
+    (args: FilterProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const NoFacetLabel: {
+    (args: FilterProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        hideFacetLabel: boolean;
+    };
+};
 //# sourceMappingURL=Filter.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Filter/Filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAS/C,wBAuFE;AA6BF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC"}
+{"version":3,"file":"Filter.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Filter/Filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEtE,wBA+FE;AAgBF,eAAO,MAAM,OAAO;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;CAW9G,CAAC;AAWF,eAAO,MAAM,YAAY;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;CAWnH,CAAC"}

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

@@ -78,7 +78,15 @@ exports.default = {
                 (0, preact_1.h)(blocks_1.ArgsTable, { story: blocks_1.PRIMARY_STORY }))); },
         },
     },
-    argTypes: __assign({ facetLabel: {
+    argTypes: __assign({ filter: {
+            description: 'Filter store object',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: { type: 'object' },
+        }, facetLabel: {
             description: 'Filter field',
             table: {
                 type: {
@@ -88,7 +96,6 @@ exports.default = {
             control: { type: 'text' },
         }, valueLabel: {
             description: 'Filter value',
-            type: { required: true },
             table: {
                 type: {
                     summary: 'string',
@@ -96,7 +103,7 @@ exports.default = {
             },
             control: { type: 'text' },
         }, url: {
-            description: 'URL translator object',
+            description: 'URL manager object',
             table: {
                 type: {
                     summary: 'object',
@@ -157,12 +164,12 @@ var snapInstance = snapify_1.Snapify.search({
         ],
     },
 });
-var Template = function (args, _a) {
+var Default = function (args, _a) {
     var _b, _c;
     var controller = _a.loaded.controller;
     return ((0, preact_1.h)(Filter_1.Filter, __assign({}, args, { facetLabel: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.type === types_1.FacetType.VALUE; }).shift().label, valueLabel: (_c = controller === null || controller === void 0 ? void 0 : controller.store) === null || _c === void 0 ? void 0 : _c.facets.filter(function (facet) { return facet.type === types_1.FacetType.VALUE; }).shift().values.shift().value })));
 };
-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) {
@@ -177,7 +184,12 @@ exports.Default.loaders = [
         });
     }); },
 ];
-exports.NoFacetLabel = Template.bind({});
+var NoFacetLabel = function (args, _a) {
+    var _b, _c;
+    var controller = _a.loaded.controller;
+    return ((0, preact_1.h)(Filter_1.Filter, __assign({}, args, { facetLabel: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.type === types_1.FacetType.VALUE; }).shift().label, valueLabel: (_c = controller === null || controller === void 0 ? void 0 : controller.store) === null || _c === void 0 ? void 0 : _c.facets.filter(function (facet) { return facet.type === types_1.FacetType.VALUE; }).shift().values.shift().value })));
+};
+exports.NoFacetLabel = NoFacetLabel;
 exports.NoFacetLabel.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {

package/dist/cjs/components/Molecules/Pagination/Pagination.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { ComponentProps } from '../../../types';
+import type { SearchPaginationStore } from '@searchspring/snap-store-mobx';
 export declare const Pagination: ((properties: PaginationProps) => JSX.Element) & {
     displayName: string;
 };
 export interface PaginationProps extends ComponentProps {
-    pagination: any;
+    pagination: SearchPaginationStore;
     pages?: number;
     pagesLeft?: number;
     pagesRight?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAsBhD,eAAO,MAAM,UAAU,gBAAyB,eAAe,KAAG,WAAW;;CAwH3E,CAAC;AAOH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,UAAU,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAClC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAE5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAqB3E,eAAO,MAAM,UAAU,gBAAyB,eAAe,KAAG,WAAW;;CAwH3E,CAAC;AAMH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAClC"}

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

@@ -38,7 +38,7 @@ var CSS = {
                     fontWeight: 'bold',
                 },
                 '&:hover:not(.ss__pagination__page--active)': {
-                    backgroundColor: ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.hover) || '#f8f8f8',
+                    backgroundColor: ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.hover) || '#f8f8f8',
                 },
             },
         });
@@ -59,7 +59,7 @@ exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
             disableStyles: disableStyles,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
     };
     var store = pagination;
     var getPagesParams = Number.isInteger(pagesLeft) && Number.isInteger(pagesRight) ? [pagesLeft, pagesRight] : [pages];
@@ -72,7 +72,7 @@ exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
-    return ((store === null || store === void 0 ? void 0 : store.totalResults) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    return (store === null || store === void 0 ? void 0 : store.totalResults) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__pagination', className) }),
             (0, react_1.jsx)(preact_1.Fragment, null,
                 store.previous && !hidePrev && ((0, react_1.jsx)("a", __assign({}, store.previous.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--previous'), "aria-label": 'previous page' }), prevButton ? prevButton : (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-left' })))),
@@ -86,5 +86,5 @@ exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
                 !pageNumbers.includes(store.last.number) && !hideLast && ((0, react_1.jsx)(preact_1.Fragment, null,
                     !pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && (0, react_1.jsx)("span", null, "\u2026"),
                     (0, react_1.jsx)("a", __assign({}, store.last.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--last'), "aria-label": 'last page' }), lastButton ? lastButton : store.last.number))),
-                store.next && !hideNext && ((0, react_1.jsx)("a", __assign({}, store.next.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'next page' }), nextButton ? nextButton : (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-right' })))))))));
+                store.next && !hideNext && ((0, react_1.jsx)("a", __assign({}, store.next.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'next page' }), nextButton ? nextButton : (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-right' })))))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

package/dist/cjs/components/Molecules/Pagination/Pagination.stories.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { h } from 'preact';
 import { PaginationProps } from './Pagination';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: PaginationProps) => JSX.Element) & {
@@ -231,5 +232,14 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    (args: PaginationProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
 //# sourceMappingURL=Pagination.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Pagination/Pagination.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK3D,wBA8IE;AAYF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Pagination/Pagination.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAI3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEtE,wBA8IE;AAQF,eAAO,MAAM,OAAO;WAAU,eAAe;;wBAAsD,gBAAgB;;;;;;CAElH,CAAC"}

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

@@ -188,11 +188,11 @@ var ObservablePagination = (0, mobx_react_1.observer)(function (_a) {
     var args = _a.args, controller = _a.controller;
     return (0, preact_1.h)(Pagination_1.Pagination, __assign({}, args, { pagination: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.pagination }));
 });
-var Template = function (args, _a) {
+var Default = function (args, _a) {
     var controller = _a.loaded.controller;
     return (0, preact_1.h)(ObservablePagination, { args: args, controller: controller });
 };
-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/Molecules/Result/Result.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { ComponentProps, LayoutType, Result as ResultType } from '../../../types';
+import { ComponentProps, LayoutType } from '../../../types';
 import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
+import type { Product } from '@searchspring/snap-store-mobx';
 export declare const Result: ((properties: ResultProps) => JSX.Element) & {
     displayName: string;
 };
@@ -9,7 +10,7 @@ interface TruncateTitleProps {
     append?: string;
 }
 export interface ResultProps extends ComponentProps {
-    result: ResultType;
+    result: Product;
     hideBadge?: boolean;
     hideTitle?: boolean;
     hideImage?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAU,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA4DxH,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CA2HnE,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
+{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAChF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CA2HnE,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

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

@@ -111,12 +111,12 @@ exports.Result = (0, mobx_react_lite_1.observer)(function (properties) {
             fallback: fallback,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
     };
-    var onSale = Boolean((core === null || core === void 0 ? void 0 : core.msrp) && (core === null || core === void 0 ? void 0 : core.msrp) * 1 > (core === null || core === void 0 ? void 0 : core.price) * 1);
-    var displayName = core.name;
+    var onSale = Boolean((core === null || core === void 0 ? void 0 : core.msrp) && core.price && (core === null || core === void 0 ? void 0 : core.msrp) * 1 > (core === null || core === void 0 ? void 0 : core.price) * 1);
+    var displayName = core === null || core === void 0 ? void 0 : core.name;
     if (props.truncateTitle) {
-        displayName = snap_toolbox_1.filters.truncate(core.name, props.truncateTitle.limit, props.truncateTitle.append);
+        displayName = snap_toolbox_1.filters.truncate((core === null || core === void 0 ? void 0 : core.name) || '', props.truncateTitle.limit, props.truncateTitle.append);
     }
     var styling = {};
     if (!disableStyles) {
@@ -125,7 +125,7 @@ exports.Result = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (core && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    return core ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("article", __assign({}, styling, { className: (0, classnames_1.default)('ss__result', "ss__result--".concat(layout), className) }),
             (0, react_1.jsx)("div", { className: "ss__result__image-wrapper" },
                 (0, react_1.jsx)("a", { href: core.url, onClick: function (e) {
@@ -142,11 +142,11 @@ exports.Result = (0, mobx_react_lite_1.observer)(function (properties) {
                             onClick && onClick(e);
                             (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click(e, result);
                         }, dangerouslySetInnerHTML: {
-                            __html: displayName,
+                            __html: displayName || '',
                         } }))),
-                !hidePricing && ((0, react_1.jsx)("div", { className: "ss__result__details__pricing" }, core.price < core.msrp ? ((0, react_1.jsx)(preact_1.Fragment, null,
+                !hidePricing && ((0, react_1.jsx)("div", { className: "ss__result__details__pricing" }, core.msrp && core.price && core.price < core.msrp ? ((0, react_1.jsx)(preact_1.Fragment, null,
                     (0, react_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.msrp, lineThrough: true })),
                     "\u00A0",
                     (0, react_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price })))) : ((0, react_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price }))))),
-                (0, utilities_1.cloneWithProps)(detailSlot, { result: result }))))));
+                (0, utilities_1.cloneWithProps)(detailSlot, { result: result }))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

package/dist/cjs/components/Molecules/Result/Result.stories.d.ts

@@ -2,6 +2,7 @@
 import { h } from 'preact';
 import { ResultProps } from './Result';
 import { Layout } from '../../../types';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: ResultProps) => JSX.Element) & {
@@ -209,7 +210,45 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const hideSections: any;
-export declare const truncateTitle: any;
+export declare const Default: {
+    (args: ResultProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const hideSections: {
+    (args: ResultProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        hideBadge: boolean;
+        hideTitle: boolean;
+        hidePricing: boolean;
+    };
+};
+export declare const truncateTitle: {
+    (args: ResultProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        truncateTitle: {
+            limit: number;
+            append: string;
+        };
+    };
+};
 //# sourceMappingURL=Result.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Result.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBAwIE;AAKF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC;AAe9C,eAAO,MAAM,aAAa,KAAoB,CAAC"}
+{"version":3,"file":"Result.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAIF,eAAO,MAAM,OAAO;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;CAE9G,CAAC;AAWF,eAAO,MAAM,YAAY;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;;;CAEnH,CAAC;AAgBF,eAAO,MAAM,aAAa;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;;;;CAEpH,CAAC"}