@searchspring/snap-preact-components 0.28.0 → 0.29.0

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { ComponentProps, ValueFacetValue } from '../../../types';
+import { ComponentProps } from '../../../types';
+import type { FacetValue } from '@searchspring/snap-store-mobx';
 export declare const FacetListOptions: ((properties: FacetListOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetListOptionsProps extends ComponentProps {
-    values: ValueFacetValue[];
+    values: FacetValue[];
     hideCheckbox?: boolean;
     hideCount?: boolean;
     onClick?: (e: React.MouseEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA+BjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA+DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA6BhE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA+DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -13,11 +15,11 @@ const CSS = {
             alignItems: 'center',
             '&:hover': {
                 cursor: 'pointer',
-                background: theme.colors?.hover,
+                background: theme?.colors?.hover,
             },
             '&.ss__facet-list-options__option--filtered': {
                 fontWeight: 'bold',
-                color: theme.colors?.primary,
+                color: theme?.colors?.primary,
             },
             '& .ss__facet-list-options__option__value': {
                 marginLeft: hideCheckbox ? '' : '8px',
@@ -52,7 +54,7 @@ export const FacetListOptions = observer((properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
     };
     const styling = {};
@@ -62,7 +64,7 @@ export const FacetListOptions = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (values?.length && (jsx(CacheProvider, null,
+    return values?.length ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__facet-list-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, href: value.url?.link?.href, onClick: (e) => {
                 value.url?.link?.onClick(e);
                 onClick && onClick(e);
@@ -70,8 +72,8 @@ export const FacetListOptions = observer((properties) => {
             !hideCheckbox && jsx(Checkbox, { ...subProps.checkbox, checked: value.filtered }),
             jsx("span", { className: "ss__facet-list-options__option__value" },
                 value.label,
-                !hideCount && value.count > 0 && jsx("span", { className: "ss__facet-list-options__option__value__count" },
+                !hideCount && value?.count > 0 && jsx("span", { className: "ss__facet-list-options__option__value__count" },
                     "(",
                     value.count,
-                    ")")))))))));
+                    ")")))))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.stories.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"FacetListOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK7E,wBAoFE;AAcF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"FacetListOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAoFE;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}

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

@@ -89,10 +89,9 @@ const ObservableFacetListOptions = observer(({ args, controller }) => {
     const brandFacet = controller?.store?.facets.filter((facet) => facet.field == 'brand').pop();
     return h(FacetListOptions, { ...args, values: brandFacet.values });
 });
-const Template = (args, { loaded: { controller } }) => {
+export const Default = (args, { loaded: { controller } }) => {
     return h(ObservableFacetListOptions, { args: args, controller: controller });
 };
-export const Default = Template.bind({});
 Default.loaders = [
     async () => {
         await snapInstance.search();

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { ValueFacetValue, ComponentProps } from '../../../types';
+import { ComponentProps } from '../../../types';
+import type { FacetValue } from '@searchspring/snap-store-mobx';
 export declare const FacetPaletteOptions: ((properties: FacetPaletteOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetPaletteOptionsProps extends ComponentProps {
-    values: ValueFacetValue[];
+    values: FacetValue[];
     hideLabel?: boolean;
     columns?: number;
     gapSize?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiFjE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;CA6E7F,CAAC;AAEH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC/D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA+EhE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;CA4E7F,CAAC;AAEH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC/D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -36,7 +38,7 @@ const CSS = {
             },
             '&.ss__facet-palette-options__option--filtered': {
                 '& .ss__facet-palette-options__option__wrapper': {
-                    borderColor: theme.colors?.primary || '#333',
+                    borderColor: theme?.colors?.primary || '#333',
                     padding: '0px',
                     borderWidth: '4px',
                 },
@@ -82,7 +84,6 @@ export const FacetPaletteOptions = observer((properties) => {
     const theme = { ...globalTheme, ...properties.theme };
     const props = {
         // default props
-        values: [],
         columns: 4,
         gapSize: '8px',
         // global theme
@@ -106,7 +107,7 @@ export const FacetPaletteOptions = observer((properties) => {
                 size: '40%',
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
     };
     const styling = {};
@@ -116,12 +117,12 @@ export const FacetPaletteOptions = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (values?.length && (jsx(CacheProvider, null,
+    return values?.length ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__facet-palette-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), "aria-label": value.value, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, href: value.url?.link?.href, onClick: (e) => {
                 value.url?.link?.onClick(e);
                 onClick && onClick(e);
             } },
             jsx("div", { className: "ss__facet-palette-options__option__wrapper" },
                 jsx("div", { className: classnames('ss__facet-palette-options__option__palette', `ss__facet-palette-options__option__palette--${filters.handleize(value.value)}`), css: { background: value.value } }, !hideIcon && value.filtered && jsx(Icon, { ...subProps.icon }))),
-            !hideLabel && jsx("span", { className: "ss__facet-palette-options__option__value" }, value.label))))))));
+            !hideLabel && jsx("span", { className: "ss__facet-palette-options__option__value" }, value.label))))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPaletteOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKtF,wBAwGE;AAcF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"FacetPaletteOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAItF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwGE;AAUF,eAAO,MAAM,OAAO;WAAU,wBAAwB;;wBAAsD,gBAAgB;;;;;;CAE3H,CAAC"}

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

@@ -109,10 +109,9 @@ const ObservableFacetPaletteOptions = observer(({ args, controller }) => {
     const sizeFacet = controller?.store?.facets.filter((facet) => facet.field == 'color_family').pop();
     return h(FacetPaletteOptions, { ...args, values: sizeFacet.values });
 });
-const Template = (args, { loaded: { controller } }) => {
+export const Default = (args, { loaded: { controller } }) => {
     return h(ObservableFacetPaletteOptions, { args: args, controller: controller });
 };
-export const Default = Template.bind({});
 Default.loaders = [
     async () => {
         await snapInstance.search();

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

@@ -1,4 +1,5 @@
-import { ComponentProps, RangeFacet } from '../../../types';
+import { ComponentProps } from '../../../types';
+import type { RangeFacet } from '@searchspring/snap-store-mobx';
 export declare const FacetSlider: ((properties: FacetSliderProps) => JSX.Element) & {
     displayName: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FacetSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA+H5D,eAAO,MAAM,WAAW,gBAAyB,gBAAgB,KAAG,WAAW;;CAwJ7E,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpC"}
+{"version":3,"file":"FacetSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAwIhE,eAAO,MAAM,WAAW,gBAAyB,gBAAgB,KAAG,WAAW;;CAoJ7E,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpC"}

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