@searchspring/snap-preact-components 0.27.8 → 0.30.0

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { jsx, css } from '@emotion/react';
@@ -6,7 +8,7 @@ import { useRanger } from 'react-ranger';
 import { useTheme, CacheProvider } from '../../../providers';
 import { sprintf } from '../../../utilities';
 const CSS = {
-    facetSlider: ({ railColor, trackColor, handleColor, valueTextColor, handleDraggingColor, showTicks, stickyHandleLabel, tickTextColor, theme }) => css({
+    facetSlider: ({ railColor, trackColor, handleColor, valueTextColor, handleDraggingColor, showTicks, stickyHandleLabel, tickTextColor, theme, }) => css({
         display: 'flex',
         flexDirection: 'column',
         marginTop: '5px',
@@ -39,18 +41,18 @@ const CSS = {
             },
         },
         '& .ss__facet-slider__rail': {
-            background: railColor || theme.colors?.primary || '#333',
+            background: railColor || theme?.colors?.primary || '#333',
             height: '100%',
         },
         '& .ss__facet-slider__segment': {
-            background: trackColor || theme.colors?.secondary || '#ccc',
+            background: trackColor || theme?.colors?.secondary || '#ccc',
             height: '100%',
         },
         '& .ss__facet-slider__handles': {
             textAlign: 'center',
             '& button': {
                 '& .ss__facet-slider__handle': {
-                    background: handleColor || theme.colors?.primary || '#333',
+                    background: handleColor || theme?.colors?.primary || '#333',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -80,7 +82,7 @@ const CSS = {
                         cursor: 'pointer',
                     },
                     '&.ss__facet-slider__handle--active': {
-                        background: handleDraggingColor || handleColor || theme.colors?.primary || '#000',
+                        background: handleDraggingColor || handleColor || theme?.colors?.primary || '#000',
                         '& label.ss__facet-slider__handle__label': {
                             background: '#fff',
                             padding: '0 5px',
@@ -124,7 +126,7 @@ export const FacetSlider = observer((properties) => {
     const theme = { ...globalTheme, ...properties.theme };
     const props = {
         // default props
-        tickSize: properties.facet?.step * 10 || 20,
+        tickSize: properties.facet?.step ? properties.facet?.step * 10 : 20,
         // global theme
         ...globalTheme?.components?.facetSlider,
         // props
@@ -135,14 +137,14 @@ export const FacetSlider = observer((properties) => {
     let { tickSize } = props;
     if (isNaN(Number(tickSize)) || Number(tickSize) <= 0) {
         // fallback to default (causes chrome to crash)
-        tickSize = properties.facet?.step * 10 || 20;
+        tickSize = properties.facet?.step ? properties.facet?.step * 10 : 20;
     }
     else {
         tickSize = Number(tickSize);
     }
     const [values, setValues] = useState([facet.active?.low, facet.active?.high]);
     const [active, setActive] = useState([facet.active?.low, facet.active?.high]);
-    if (values[0] != facet.active?.low || values[1] != facet.active?.high) {
+    if ((facet.active?.low && facet.active?.high && values[0] != facet.active?.low) || values[1] != facet.active?.high) {
         setActive([facet.active?.low, facet.active?.high]);
         setValues([facet.active?.low, facet.active?.high]);
     }
@@ -189,15 +191,13 @@ export const FacetSlider = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (facet.range &&
-        facet.active &&
-        facet.step && (jsx(CacheProvider, null,
+    return facet.range && facet.active && facet.step ? (jsx(CacheProvider, null,
         jsx("div", { className: classnames('ss__facet-slider', className), ...getTrackProps(), ...styling },
             jsx("div", { className: "ss__facet-slider__slider" },
                 showTicks &&
                     ticks.map(({ value, getTickProps }) => (jsx("div", { className: "ss__facet-slider__tick", ...getTickProps() },
                         jsx("div", { className: "ss__facet-slider__tick__label" }, value)))),
-                segments.map(({ getSegmentProps }, index) => (jsx("div", { className: `${index === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment'}`, ...getSegmentProps(), index: index }))),
+                segments.map(({ getSegmentProps }, idx) => (jsx("div", { className: `${idx === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment'}`, ...getSegmentProps() }))),
                 jsx("div", { className: 'ss__facet-slider__handles' }, handles.map(({ value, active, getHandleProps }, idx) => (jsx("button", { type: "button", ...getHandleProps({
                         style: {
                             appearance: 'none',
@@ -206,6 +206,6 @@ export const FacetSlider = observer((properties) => {
                             outline: 'none',
                         },
                     }) },
-                    jsx("div", { className: classnames('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && (jsx("label", { className: classnames('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', `ss__facet-slider__handle__label--${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 }) }, sprintf(facet.formatValue, value))))))))),
-            !stickyHandleLabel && (jsx("div", { className: 'ss__facet-slider__labels' }, handles.map(({ value }, idx) => (jsx("label", { className: classnames('ss__facet-slider__label', `ss__facet-slider__label--${idx}`) }, sprintf(facet.formatValue, value))))))))));
+                    jsx("div", { className: classnames('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && (jsx("label", { className: classnames('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', `ss__facet-slider__handle__label--${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 }) }, sprintf(facet.formatValue, value))))))))),
+            !stickyHandleLabel && (jsx("div", { className: 'ss__facet-slider__labels' }, handles.map(({ value }, idx) => (jsx("label", { className: classnames('ss__facet-slider__label', `ss__facet-slider__label--${idx}`) }, sprintf(facet.formatValue, value))))))))) : (jsx(Fragment, null));
 });

package/dist/esm/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/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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/esm/components/Molecules/FacetSlider/FacetSlider.stories.js

@@ -135,5 +135,4 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(FacetSlider, { ...args, facet: sliderFacetMock });
-export const Price = Template.bind({});
+export const Price = (args) => h(FacetSlider, { ...args, facet: sliderFacetMock });

package/dist/esm/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/esm/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/esm/components/Molecules/Filter/Filter.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { observer } from 'mobx-react-lite';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
@@ -32,7 +34,10 @@ export const Filter = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.filter,
     };
-    const { facetLabel, valueLabel, url, hideFacetLabel, onClick, icon, separator, disableStyles, className, style } = props;
+    const { filter, facetLabel, valueLabel, url, hideFacetLabel, onClick, icon, separator, disableStyles, className, style } = props;
+    const link = filter?.url?.link || url?.link;
+    const value = filter?.value.label || valueLabel;
+    const label = filter?.facet.label || facetLabel;
     const subProps = {
         button: {
             // default props
@@ -69,12 +74,15 @@ export const Filter = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (valueLabel && (jsx(CacheProvider, null,
-        jsx("a", { ...styling, className: classnames('ss__filter', className), onClick: (e) => onClick && onClick(e), ...url?.link },
+    return value ? (jsx(CacheProvider, null,
+        jsx("a", { ...styling, className: classnames('ss__filter', className), onClick: (e) => {
+                link?.onClick && link.onClick(e);
+                onClick && onClick(e);
+            }, href: link?.href },
             jsx(Button, { ...subProps.button },
                 jsx(Icon, { ...subProps.icon }),
                 !hideFacetLabel && (jsx("span", { className: "ss__filter__label" },
-                    facetLabel,
+                    label,
                     separator && jsx("span", { className: "ss__filter__label__separator" }, separator))),
-                jsx("span", { className: "ss__filter__value" }, valueLabel))))));
+                jsx("span", { className: "ss__filter__value" }, value))))) : (jsx(Fragment, null));
 });

package/dist/esm/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/esm/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/esm/components/Molecules/Filter/Filter.stories.js

@@ -17,6 +17,15 @@ export default {
         },
     },
     argTypes: {
+        filter: {
+            description: 'Filter store object',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: { type: 'object' },
+        },
         facetLabel: {
             description: 'Filter field',
             table: {
@@ -28,7 +37,6 @@ export default {
         },
         valueLabel: {
             description: 'Filter value',
-            type: { required: true },
             table: {
                 type: {
                     summary: 'string',
@@ -37,7 +45,7 @@ export default {
             control: { type: 'text' },
         },
         url: {
-            description: 'URL translator object',
+            description: 'URL manager object',
             table: {
                 type: {
                     summary: 'object',
@@ -104,11 +112,10 @@ const snapInstance = Snapify.search({
         ],
     },
 });
-const Template = (args, { loaded: { controller } }) => (h(Filter, { ...args, facetLabel: controller?.store?.facets.filter((facet) => facet.type === FacetType.VALUE).shift().label, valueLabel: controller?.store?.facets
+export const Default = (args, { loaded: { controller } }) => (h(Filter, { ...args, facetLabel: controller?.store?.facets.filter((facet) => facet.type === FacetType.VALUE).shift().label, valueLabel: controller?.store?.facets
         .filter((facet) => facet.type === FacetType.VALUE)
         .shift()
         .values.shift().value }));
-export const Default = Template.bind({});
 Default.loaders = [
     async () => {
         await snapInstance.search();
@@ -117,7 +124,10 @@ Default.loaders = [
         };
     },
 ];
-export const NoFacetLabel = Template.bind({});
+export const NoFacetLabel = (args, { loaded: { controller } }) => (h(Filter, { ...args, facetLabel: controller?.store?.facets.filter((facet) => facet.type === FacetType.VALUE).shift().label, valueLabel: controller?.store?.facets
+        .filter((facet) => facet.type === FacetType.VALUE)
+        .shift()
+        .values.shift().value }));
 NoFacetLabel.loaders = [
     async () => {
         await snapInstance.search();

package/dist/esm/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/esm/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/esm/components/Molecules/Pagination/Pagination.js

@@ -18,7 +18,7 @@ const CSS = {
                 fontWeight: 'bold',
             },
             '&:hover:not(.ss__pagination__page--active)': {
-                backgroundColor: theme.colors?.hover || '#f8f8f8',
+                backgroundColor: theme?.colors?.hover || '#f8f8f8',
             },
         },
     }),
@@ -48,7 +48,7 @@ export const Pagination = observer((properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
     };
     const store = pagination;
@@ -62,7 +62,7 @@ export const Pagination = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (store?.totalResults && (jsx(CacheProvider, null,
+    return store?.totalResults ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__pagination', className) },
             jsx(Fragment, null,
                 store.previous && !hidePrev && (jsx("a", { ...store.previous.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--previous'), "aria-label": 'previous page' }, prevButton ? prevButton : jsx(Icon, { ...subProps.icon, icon: 'angle-left' }))),
@@ -74,5 +74,5 @@ export const Pagination = observer((properties) => {
                 !pageNumbers.includes(store.last.number) && !hideLast && (jsx(Fragment, null,
                     !pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && jsx("span", null, "\u2026"),
                     jsx("a", { ...store.last.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--last'), "aria-label": 'last page' }, lastButton ? lastButton : store.last.number))),
-                store.next && !hideNext && (jsx("a", { ...store.next.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'next page' }, nextButton ? nextButton : jsx(Icon, { ...subProps.icon, icon: 'angle-right' }))))))));
+                store.next && !hideNext && (jsx("a", { ...store.next.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'next page' }, nextButton ? nextButton : jsx(Icon, { ...subProps.icon, icon: 'angle-right' }))))))) : (jsx(Fragment, null));
 });

package/dist/esm/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/esm/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/esm/components/Molecules/Pagination/Pagination.stories.js

@@ -148,10 +148,9 @@ const snapInstance = Snapify.search({ id: 'Pagination', globals: { siteId: '8uyt
 const ObservablePagination = observer(({ args, controller }) => {
     return h(Pagination, { ...args, pagination: controller?.store?.pagination });
 });
-const Template = (args, { loaded: { controller } }) => {
+export const Default = (args, { loaded: { controller } }) => {
     return h(ObservablePagination, { args: args, controller: controller });
 };
-export const Default = Template.bind({});
 Default.loaders = [
     async () => {
         await snapInstance.search();

package/dist/esm/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,gBAAgB,CAAC;AACpE,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"}
+{"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/esm/components/Molecules/Result/Result.js

@@ -113,13 +113,13 @@ export const Result = observer((properties) => {
                 fallback: fallback,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
     };
-    const onSale = Boolean(core?.msrp && core?.msrp * 1 > core?.price * 1);
-    let displayName = core.name;
+    const onSale = Boolean(core?.msrp && core.price && core?.msrp * 1 > core?.price * 1);
+    let displayName = core?.name;
     if (props.truncateTitle) {
-        displayName = filters.truncate(core.name, props.truncateTitle.limit, props.truncateTitle.append);
+        displayName = filters.truncate(core?.name || '', props.truncateTitle.limit, props.truncateTitle.append);
     }
     const styling = {};
     if (!disableStyles) {
@@ -128,7 +128,7 @@ export const Result = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (core && (jsx(CacheProvider, null,
+    return core ? (jsx(CacheProvider, null,
         jsx("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, className) },
             jsx("div", { className: "ss__result__image-wrapper" },
                 jsx("a", { href: core.url, onClick: (e) => {
@@ -143,11 +143,11 @@ export const Result = observer((properties) => {
                             onClick && onClick(e);
                             controller?.track?.product?.click(e, result);
                         }, dangerouslySetInnerHTML: {
-                            __html: displayName,
+                            __html: displayName || '',
                         } }))),
-                !hidePricing && (jsx("div", { className: "ss__result__details__pricing" }, core.price < core.msrp ? (jsx(Fragment, null,
+                !hidePricing && (jsx("div", { className: "ss__result__details__pricing" }, core.msrp && core.price && core.price < core.msrp ? (jsx(Fragment, null,
                     jsx(Price, { ...subProps.price, value: core.msrp, lineThrough: true }),
                     "\u00A0",
                     jsx(Price, { ...subProps.price, value: core.price }))) : (jsx(Price, { ...subProps.price, value: core.price })))),
-                cloneWithProps(detailSlot, { result }))))));
+                cloneWithProps(detailSlot, { result }))))) : (jsx(Fragment, null));
 });

package/dist/esm/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/esm/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"}

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

@@ -138,8 +138,7 @@ export default {
     },
 };
 const snapInstance = Snapify.search({ id: 'Result', globals: { siteId: '8uyt2m' } });
-const Template = (args, { loaded: { controller } }) => h(Result, { result: controller?.store?.results[0], ...args });
-export const Default = Template.bind({});
+export const Default = (args, { loaded: { controller } }) => (h(Result, { ...args, result: controller?.store?.results[0] }));
 Default.loaders = [
     async () => {
         await snapInstance.search();
@@ -148,7 +147,7 @@ Default.loaders = [
         };
     },
 ];
-export const hideSections = Template.bind({});
+export const hideSections = (args, { loaded: { controller } }) => (h(Result, { ...args, result: controller?.store?.results[0] }));
 hideSections.loaders = [
     async () => {
         await snapInstance.search();
@@ -162,7 +161,7 @@ hideSections.args = {
     hideTitle: true,
     hidePricing: true,
 };
-export const truncateTitle = Template.bind({});
+export const truncateTitle = (args, { loaded: { controller } }) => (h(Result, { ...args, result: controller?.store?.results[0] }));
 truncateTitle.loaders = [
     async () => {
         await snapInstance.search();

package/dist/esm/components/Molecules/SearchInput/SearchInput.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare const SearchInput: ((properties: SearchInputProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface SearchInputProps extends ComponentProps {
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    hideIcon?: boolean;
+}
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/SearchInput/SearchInput.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAuB5D,eAAO,MAAM,WAAW,gBAAyB,gBAAgB,KAAG,WAAW;;CAqD7E,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}

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

@@ -0,0 +1,65 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { defined } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    searchInput: ({ theme }) => css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: `1px solid ${theme?.colors?.primary || '#ccc'}`,
+        '& .ss__icon': {
+            padding: '5px',
+        },
+        '& .ss__search-input__input': {
+            width: '100%',
+            outline: 'none',
+            border: '0',
+            boxSizing: 'border-box',
+        },
+    }),
+};
+export const SearchInput = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    let props = {
+        // default props
+        placeholder: 'Search',
+        hideIcon: false,
+        // global theme
+        ...globalTheme?.components?.searchInput,
+        //props
+        ...properties,
+        ...properties.theme?.components?.searchInput,
+    };
+    const { placeholder, onChange, hideIcon, disableStyles, style, className } = props;
+    const subProps = {
+        icon: {
+            // default props
+            className: 'ss__search-input__icon',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.searchInput({ theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__search-input', className) },
+            !hideIcon && jsx(Icon, { ...subProps.icon, icon: "search" }),
+            jsx("input", { type: "text", className: "ss__search-input__input", onChange: (e) => {
+                    onChange && onChange(e);
+                }, placeholder: placeholder }))));
+});