@searchspring/snap-preact-components 0.27.8 → 0.30.0

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.stories.js

@@ -83,8 +83,8 @@ exports.default = {
             control: { type: 'boolean' },
         } }, utilities_1.componentArgs),
 };
-var Template = function (args) { return (0, preact_1.h)(BranchOverride_1.BranchOverride, __assign({}, args)); };
-exports.Auto = Template.bind({});
+var Auto = function (args) { return (0, preact_1.h)(BranchOverride_1.BranchOverride, __assign({}, args)); };
+exports.Auto = Auto;
 exports.Auto.args = {
     name: 'next',
     details: {
@@ -92,7 +92,8 @@ exports.Auto.args = {
         lastModified: '1 Feb 2022 1:02:03 GMT',
     },
 };
-exports.Dark = Template.bind({});
+var Dark = function (args) { return (0, preact_1.h)(BranchOverride_1.BranchOverride, __assign({}, args)); };
+exports.Dark = Dark;
 exports.Dark.args = {
     name: 'next',
     details: {
@@ -101,7 +102,8 @@ exports.Dark.args = {
     },
     darkMode: true,
 };
-exports.Error = Template.bind({});
+var Error = function (args) { return (0, preact_1.h)(BranchOverride_1.BranchOverride, __assign({}, args)); };
+exports.Error = Error;
 exports.Error.args = {
     name: 'testing',
     error: {
@@ -109,7 +111,8 @@ exports.Error.args = {
         description: 'Incorrect branch name or branch no longer exists.',
     },
 };
-exports.Light = Template.bind({});
+var Light = function (args) { return (0, preact_1.h)(BranchOverride_1.BranchOverride, __assign({}, args)); };
+exports.Light = Light;
 exports.Light.args = {
     name: 'next',
     details: {

package/dist/cjs/components/Organisms/Facet/Facet.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { IconType } from '../../Atoms/Icon';
-import { ComponentProps, ValueFacet, RangeFacet, RangeBucketFacet, BaseFacet, HierarchyFacet } from '../../../types';
+import { ComponentProps } from '../../../types';
+import type { ValueFacet, RangeFacet } from '@searchspring/snap-store-mobx';
 export declare const Facet: ((properties: FacetProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetProps extends OptionalFacetProps {
-    facet: ValueFacet | RangeFacet | RangeBucketFacet | BaseFacet | HierarchyFacet;
+    facet: ValueFacet | RangeFacet;
 }
 interface OptionalFacetProps extends ComponentProps {
     disableCollapse?: boolean;
@@ -24,6 +25,7 @@ interface OptionalFacetProps extends ComponentProps {
     iconOverflowMore?: string;
     iconOverflowLess?: string;
     fields?: FieldProps;
+    searchable?: boolean;
 }
 declare type FieldProps = {
     [variable: string]: FacetProps;

package/dist/cjs/components/Organisms/Facet/Facet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAgB,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAmCnI,eAAO,MAAM,KAAK,gBAAyB,UAAU,KAAG,WAAW;;CA0OjE,CAAC;AAaH,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACrD,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,GAAG,SAAS,GAAG,cAAc,CAAC;CAC/E;AAED,UAAU,kBAAmB,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,UAAU,GAAG;IACjB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAA4B,MAAM,gBAAgB,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAoD,MAAM,+BAA+B,CAAC;AAuC9H,eAAO,MAAM,KAAK,gBAAyB,UAAU,KAAG,WAAW;;CAwQjE,CAAC;AAcH,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACrD,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC;CAC/B;AAED,UAAU,kBAAmB,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,UAAU,GAAG;IACjB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC;CAC/B,CAAC"}

package/dist/cjs/components/Organisms/Facet/Facet.js

@@ -25,6 +25,7 @@ var FacetGridOptions_1 = require("../../Molecules/FacetGridOptions");
 var FacetPaletteOptions_1 = require("../../Molecules/FacetPaletteOptions");
 var FacetHierarchyOptions_1 = require("../../Molecules/FacetHierarchyOptions");
 var FacetSlider_1 = require("../../Molecules/FacetSlider");
+var SearchInput_1 = require("../../Molecules/SearchInput");
 var Icon_1 = require("../../Atoms/Icon");
 var Dropdown_1 = require("../../Atoms/Dropdown");
 var types_1 = require("../../../types");
@@ -43,7 +44,7 @@ var CSS = {
                 alignItems: 'center',
                 color: color,
                 border: 'none',
-                borderBottom: "2px solid ".concat(((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#ccc'),
+                borderBottom: "2px solid ".concat(((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#ccc'),
                 padding: '6px 0',
             },
             '& .ss__facet__options': {
@@ -60,21 +61,24 @@ var CSS = {
                     marginRight: '8px',
                 },
             },
+            '& .ss__search-input': {
+                margin: '16px 0 0 0',
+            },
         });
     },
 };
 exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var globalTheme = (0, providers_1.useTheme)();
     var theme = __assign(__assign({}, globalTheme), properties.theme);
     var props = __assign(__assign(__assign({ 
         // default props
-        limit: 12, disableOverflow: false, iconCollapse: 'angle-up', iconExpand: 'angle-down', showMoreText: 'Show More', showLessText: 'Show Less', iconOverflowMore: 'plus', iconOverflowLess: 'minus' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.facet), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.facet);
+        limit: 12, disableOverflow: false, iconCollapse: 'angle-up', iconExpand: 'angle-down', showMoreText: 'Show More', showLessText: 'Show Less', iconOverflowMore: 'plus', iconOverflowLess: 'minus', searchable: false }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.facet), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.facet);
     //manual props override on a per facet level using the fields prop
     if (props.fields && props.fields[(_d = props.facet) === null || _d === void 0 ? void 0 : _d.field]) {
         props = __assign(__assign({}, props), props.fields[(_e = props.facet) === null || _e === void 0 ? void 0 : _e.field]);
     }
-    var disableCollapse = props.disableCollapse, facet = props.facet, iconCollapse = props.iconCollapse, iconExpand = props.iconExpand, limit = props.limit, disableOverflow = props.disableOverflow, iconColor = props.iconColor, color = props.color, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, showMoreText = props.showMoreText, showLessText = props.showLessText, iconOverflowMore = props.iconOverflowMore, iconOverflowLess = props.iconOverflowLess, overflowSlot = props.overflowSlot, optionsSlot = props.optionsSlot, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var disableCollapse = props.disableCollapse, facet = props.facet, iconCollapse = props.iconCollapse, iconExpand = props.iconExpand, limit = props.limit, disableOverflow = props.disableOverflow, iconColor = props.iconColor, color = props.color, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, showMoreText = props.showMoreText, showLessText = props.showLessText, iconOverflowMore = props.iconOverflowMore, iconOverflowLess = props.iconOverflowLess, overflowSlot = props.overflowSlot, optionsSlot = props.optionsSlot, disableStyles = props.disableStyles, className = props.className, style = props.style, searchable = props.searchable;
     var subProps = {
         dropdown: __assign(__assign(__assign({ 
             // default props
@@ -82,21 +86,21 @@ exports.Facet = (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 }),
         icon: __assign(__assign(__assign({ 
             // default props
             className: 'ss__facet__dropdown__icon', size: '12px', color: iconColor || color }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.icon), (0, utilities_1.defined)({
             disableStyles: disableStyles,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
         showMoreLessIcon: __assign(__assign(__assign({ 
             // default props
             className: 'ss__facet__show-more-less__icon', size: '10px', color: iconColor || color }, (_h = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _h === void 0 ? void 0 : _h.icon), (0, utilities_1.defined)({
             disableStyles: disableStyles,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
         facetHierarchyOptions: __assign(__assign(__assign({ 
             // default props
             className: 'ss__facet__facet-hierarchy-options' }, (_j = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _j === void 0 ? void 0 : _j.facetHierarchyOptions), (0, utilities_1.defined)({
@@ -105,7 +109,7 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
             valueProps: valueProps,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
         facetListOptions: __assign(__assign(__assign({ 
             // default props
             className: 'ss__facet__facet-list-options' }, (_k = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _k === void 0 ? void 0 : _k.facetListOptions), (0, utilities_1.defined)({
@@ -114,7 +118,7 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
             valueProps: valueProps,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
         facetGridOptions: __assign(__assign(__assign({ 
             // default props
             className: 'ss__facet__facet-grid-options' }, (_l = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _l === void 0 ? void 0 : _l.facetGridOptions), (0, utilities_1.defined)({
@@ -123,7 +127,7 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
             valueProps: valueProps,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
         facetPaletteOptions: __assign(__assign(__assign({ 
             // default props
             className: 'ss__facet__facet-palette-options' }, (_m = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _m === void 0 ? void 0 : _m.facetPaletteOptions), (0, utilities_1.defined)({
@@ -132,18 +136,25 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
             valueProps: valueProps,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
         facetSlider: __assign(__assign(__assign({ 
             // default props
             className: 'ss__facet__facet-slider' }, (_o = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _o === void 0 ? void 0 : _o.facetSlider), (0, utilities_1.defined)({
             disableStyles: disableStyles,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+        searchInput: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__search-input' }, (_p = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _p === void 0 ? void 0 : _p.searchInput), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
     };
     var limitedValues;
-    if ((facet === null || facet === void 0 ? void 0 : facet.overflow) && Number.isInteger(limit) && !disableOverflow) {
-        facet.overflow.setLimit(limit);
+    if ((facet === null || facet === void 0 ? void 0 : facet.overflow) && limit && Number.isInteger(limit) && !disableOverflow) {
+        (_q = facet.overflow) === null || _q === void 0 ? void 0 : _q.setLimit(limit);
         limitedValues = facet === null || facet === void 0 ? void 0 : facet.refinedValues;
     }
     else if ((facet === null || facet === void 0 ? void 0 : facet.overflow) && Number.isInteger(limit)) {
@@ -159,11 +170,21 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
+    // Search within facet
+    var searchableFacet = {
+        allowableTypes: ['list', 'grid', 'palette'],
+        searchFilter: function (e) {
+            if (facet === null || facet === void 0 ? void 0 : facet.search) {
+                facet.search.input = e.target.value;
+            }
+        },
+    };
     return (facet && ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet', "ss__facet--".concat(facet.display), "ss__facet--".concat(facet.field), className) }),
-            (0, react_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function (e) { return !disableCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, button: (0, react_1.jsx)("div", { className: "ss__facet__header" }, facet === null || facet === void 0 ? void 0 :
+            (0, react_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function (e) { return !disableCollapse && facet.toggleCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, button: (0, react_1.jsx)("div", { className: "ss__facet__header" }, facet === null || facet === void 0 ? void 0 :
                     facet.label,
                     !disableCollapse && (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: (facet === null || facet === void 0 ? void 0 : facet.collapsed) ? iconExpand : iconCollapse }))) }),
+                searchable && searchableFacet.allowableTypes.includes(facet.display) && ((0, react_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { onChange: searchableFacet.searchFilter, placeholder: "Search ".concat(facet.label) }))),
                 (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet__options', className) }, (function () {
                     //manual options component
                     if (optionsSlot) {
@@ -184,7 +205,7 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
                         }
                     }
                 })()),
-                !disableOverflow && (facet === null || facet === void 0 ? void 0 : facet.overflow) && facet.overflow.enabled && ((0, react_1.jsx)("div", { className: "ss__facet__show-more-less", onClick: function () { return facet.overflow.toggle(); } }, overflowSlot ? ((0, utilities_1.cloneWithProps)(overflowSlot, { facet: facet })) : ((0, react_1.jsx)(preact_1.Fragment, null,
-                    (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.showMoreLessIcon, { icon: facet.overflow.remaining > 0 ? iconOverflowMore : iconOverflowLess })),
-                    (0, react_1.jsx)("span", null, facet.overflow.remaining > 0 ? showMoreText : showLessText))))))))));
+                !disableOverflow && ((_r = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _r === void 0 ? void 0 : _r.enabled) && ((0, react_1.jsx)("div", { className: "ss__facet__show-more-less", onClick: function () { var _a; return (_a = facet.overflow) === null || _a === void 0 ? void 0 : _a.toggle(); } }, overflowSlot ? ((0, utilities_1.cloneWithProps)(overflowSlot, { facet: facet })) : ((0, react_1.jsx)(preact_1.Fragment, null,
+                    (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.showMoreLessIcon, { icon: (((_s = facet.overflow) === null || _s === void 0 ? void 0 : _s.remaining) || 0) > 0 ? iconOverflowMore : iconOverflowLess })),
+                    (0, react_1.jsx)("span", null, (((_t = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _t === void 0 ? void 0 : _t.remaining) || 0) > 0 ? showMoreText : showLessText))))))))));
 });

package/dist/cjs/components/Organisms/Facet/Facet.stories.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { h } from 'preact';
 import { FacetProps } from './Facet';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: FacetProps) => JSX.Element) & {
@@ -108,6 +109,21 @@ declare const _default: {
                 type: string;
             };
         };
+        searchable: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         color: {
             description: string;
             table: {
@@ -272,9 +288,54 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const List: any;
-export declare const Slider: any;
-export declare const Palette: any;
-export declare const Grid: any;
-export declare const Hierarchy: any;
+export declare const List: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const Slider: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const Palette: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const Grid: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const Hierarchy: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
 //# sourceMappingURL=Facet.stories.d.ts.map

package/dist/cjs/components/Organisms/Facet/Facet.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO5C,wBA8LE;AAYF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAkB1C,eAAO,MAAM,MAAM,KAA0B,CAAC;AAoB9C,eAAO,MAAM,OAAO,KAA2B,CAAC;AAiBhD,eAAO,MAAM,IAAI,KAAwB,CAAC;AAkB1C,eAAO,MAAM,SAAS,KAA6B,CAAC"}
+{"version":3,"file":"Facet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAM5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAyME;AAUF,eAAO,MAAM,IAAI;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE1G,CAAC;AAiBF,eAAO,MAAM,MAAM;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE5G,CAAC;AAiBF,eAAO,MAAM,OAAO;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE7G,CAAC;AAiBF,eAAO,MAAM,IAAI;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE1G,CAAC;AAiBF,eAAO,MAAM,SAAS;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE/G,CAAC"}

package/dist/cjs/components/Organisms/Facet/Facet.stories.js

@@ -112,6 +112,16 @@ exports.default = {
                 defaultValue: { summary: false },
             },
             control: { type: 'boolean' },
+        }, searchable: {
+            defaultValue: false,
+            description: 'Enables facet search within functionality',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
         }, color: {
             description: 'Select color',
             table: {
@@ -244,11 +254,11 @@ var ObservableListFacet = (0, mobx_react_1.observer)(function (_a) {
     var args = _a.args, controller = _a.controller;
     return (0, preact_1.h)(Facet_1.Facet, __assign({}, args, { facet: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.display === types_1.FacetDisplay.LIST; }).shift() }));
 });
-var ListTemplate = function (args, _a) {
+var List = function (args, _a) {
     var controller = _a.loaded.controller;
-    return (0, preact_1.h)(ObservableListFacet, { args: args, controller: controller });
+    return ((0, preact_1.h)(ObservableListFacet, { args: args, controller: controller }));
 };
-exports.List = ListTemplate.bind({});
+exports.List = List;
 exports.List.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -269,11 +279,11 @@ var ObservableSliderFacet = (0, mobx_react_1.observer)(function (_a) {
     var args = _a.args, controller = _a.controller;
     return (0, preact_1.h)(Facet_1.Facet, __assign({}, args, { facet: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.display === types_1.FacetDisplay.SLIDER; }).shift() }));
 });
-var SliderTemplate = function (args, _a) {
+var Slider = function (args, _a) {
     var controller = _a.loaded.controller;
-    return (0, preact_1.h)(ObservableSliderFacet, { args: args, controller: controller });
+    return ((0, preact_1.h)(ObservableSliderFacet, { args: args, controller: controller }));
 };
-exports.Slider = SliderTemplate.bind({});
+exports.Slider = Slider;
 exports.Slider.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -290,16 +300,15 @@ exports.Slider.loaders = [
 ];
 // Palette Facet
 var ObservablePaletteFacet = (0, mobx_react_1.observer)(function (_a) {
-    var args = _a.args, facet = _a.facet;
-    return (0, preact_1.h)(Facet_1.Facet, __assign({}, args, { facet: facet }));
-});
-var PaletteTemplate = function (args, _a) {
     var _b;
+    var args = _a.args, controller = _a.controller;
+    return (0, preact_1.h)(Facet_1.Facet, __assign({}, args, { facet: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.display === types_1.FacetDisplay.PALETTE; }).shift() }));
+});
+var Palette = function (args, _a) {
     var controller = _a.loaded.controller;
-    var facet = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.display === types_1.FacetDisplay.PALETTE; }).shift();
-    return (0, preact_1.h)(ObservablePaletteFacet, { args: args, facet: facet });
+    return ((0, preact_1.h)(ObservablePaletteFacet, { args: args, controller: controller }));
 };
-exports.Palette = PaletteTemplate.bind({});
+exports.Palette = Palette;
 exports.Palette.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -320,11 +329,11 @@ var ObservableGridFacet = (0, mobx_react_1.observer)(function (_a) {
     var args = _a.args, controller = _a.controller;
     return (0, preact_1.h)(Facet_1.Facet, __assign({}, args, { facet: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.field === 'size_dress'; }).pop() }));
 });
-var GridTemplate = function (args, _a) {
+var Grid = function (args, _a) {
     var controller = _a.loaded.controller;
-    return (0, preact_1.h)(ObservableGridFacet, { args: args, controller: controller });
+    return ((0, preact_1.h)(ObservableGridFacet, { args: args, controller: controller }));
 };
-exports.Grid = GridTemplate.bind({});
+exports.Grid = Grid;
 exports.Grid.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -346,11 +355,11 @@ var ObservableHierarchyFacet = (0, mobx_react_1.observer)(function (_a) {
     var facet = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.display === types_1.FacetDisplay.HIERARCHY; }).shift();
     return (0, preact_1.h)(Facet_1.Facet, __assign({}, args, { facet: facet }));
 });
-var HierarchyTemplate = function (args, _a) {
+var Hierarchy = function (args, _a) {
     var controller = _a.loaded.controller;
-    return (0, preact_1.h)(ObservableHierarchyFacet, { args: args, controller: controller });
+    return ((0, preact_1.h)(ObservableHierarchyFacet, { args: args, controller: controller }));
 };
-exports.Hierarchy = HierarchyTemplate.bind({});
+exports.Hierarchy = Hierarchy;
 exports.Hierarchy.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {

package/dist/cjs/components/Organisms/Facets/Facets.d.ts

@@ -1,10 +1,12 @@
 import { ComponentProps } from '../../../types';
 import type { SearchController, AutocompleteController } from '@searchspring/snap-controller';
+import type { ValueFacet, RangeFacet } from '@searchspring/snap-store-mobx';
 export declare const Facets: ((properties: FacetsProps) => JSX.Element) & {
     displayName: string;
 };
+export declare type IndividualFacetType = ValueFacet | RangeFacet;
 export interface FacetsProps extends ComponentProps {
-    facets?: any;
+    facets?: IndividualFacetType[];
     limit?: number;
     controller?: SearchController | AutocompleteController;
 }

package/dist/cjs/components/Organisms/Facets/Facets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facets.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAM9F,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAmDnE,CAAC;AAMH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}
+{"version":3,"file":"Facets.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAE9F,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAM5E,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAmDnE,CAAC;AAMH,oBAAY,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}

package/dist/cjs/components/Organisms/Facets/Facets.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Facets = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
 var mobx_react_lite_1 = require("mobx-react-lite");
@@ -32,7 +34,7 @@ exports.Facets = (0, mobx_react_lite_1.observer)(function (properties) {
         facets: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.facets }, (_c = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _c === void 0 ? void 0 : _c.facets), properties), (_e = (_d = properties.theme) === null || _d === void 0 ? void 0 : _d.components) === null || _e === void 0 ? void 0 : _e.facets);
     var limit = props.limit, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var facets = props.facets;
-    if (limit > 0) {
+    if (limit && facets && limit > 0) {
         facets = facets.slice(0, +limit);
     }
     var subProps = {
@@ -51,6 +53,6 @@ exports.Facets = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
-    return ((facets === null || facets === void 0 ? void 0 : facets.length) > 0 && ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__facets', className) }, styling), facets.map(function (facet) { return ((0, react_1.jsx)(Facet_1.Facet, __assign({}, subProps.facet, { facet: facet }))); })))));
+    return facets && (facets === null || facets === void 0 ? void 0 : facets.length) > 0 ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__facets', className) }, styling), facets.map(function (facet) { return ((0, react_1.jsx)(Facet_1.Facet, __assign({}, subProps.facet, { facet: facet }))); })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

package/dist/cjs/components/Organisms/Facets/Facets.stories.d.ts

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

package/dist/cjs/components/Organisms/Facets/Facets.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facets.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/C,wBA2CE;AAQF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Facets.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA2CE;AAIF,eAAO,MAAM,OAAO;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;CAE9G,CAAC"}

package/dist/cjs/components/Organisms/Facets/Facets.stories.js

@@ -92,11 +92,11 @@ exports.default = {
         } }, utilities_1.componentArgs),
 };
 var snapInstance = snapify_1.Snapify.search({ id: 'Facets', globals: { siteId: '8uyt2m' } });
-var Template = function (args, _a) {
+var Default = function (args, _a) {
     var controller = _a.loaded.controller;
     return (0, preact_1.h)(Facets_1.Facets, __assign({}, 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/Organisms/FilterSummary/FilterSummary.d.ts

@@ -1,5 +1,7 @@
-import { ComponentProps, Filter as FilterType } from '../../../types';
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
 import type { SearchController, AutocompleteController } from '@searchspring/snap-controller';
+import type { Filter as FilterType } from '@searchspring/snap-store-mobx';
 export declare const FilterSummary: ((properties: FilterSummaryProps) => JSX.Element) & {
     displayName: string;
 };
@@ -12,8 +14,8 @@ export interface FilterSummaryProps extends ComponentProps {
     hideFacetLabel?: boolean;
     clearAllLabel?: string;
     hideClearAll?: boolean;
-    onClick?: (e: Event, filterFilter: any) => void;
-    onClearAllClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, filterFilter: FilterType) => void;
+    onClearAllClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     controller?: SearchController | AutocompleteController;
 }
 //# sourceMappingURL=FilterSummary.d.ts.map

package/dist/cjs/components/Organisms/FilterSummary/FilterSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSummary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/FilterSummary/FilterSummary.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAc9F,eAAO,MAAM,aAAa,gBAAyB,kBAAkB,KAAG,WAAW;;CAwFjF,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,KAAA,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}
+{"version":3,"file":"FilterSummary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/FilterSummary/FilterSummary.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC9F,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAc1E,eAAO,MAAM,aAAa,gBAAyB,kBAAkB,KAAG,WAAW;;CAqFjF,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,UAAU,KAAK,IAAI,CAAC;IACjG,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC/E,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}

package/dist/cjs/components/Organisms/FilterSummary/FilterSummary.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterSummary = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
 var mobx_react_lite_1 = require("mobx-react-lite");
@@ -43,7 +45,7 @@ exports.FilterSummary = (0, mobx_react_lite_1.observer)(function (properties) {
     var subProps = {
         filter: __assign(__assign(__assign({ 
             // default props
-            className: 'ss__filter-summary__filter' }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.filter), (0, utilities_1.defined)({
+            clearAllLabel: '', className: 'ss__filter-summary__filter' }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.filter), (0, utilities_1.defined)({
             disableStyles: disableStyles,
             separator: separator,
             hideFacetLabel: hideFacetLabel,
@@ -62,9 +64,6 @@ exports.FilterSummary = (0, mobx_react_lite_1.observer)(function (properties) {
     return (filters === null || filters === void 0 ? void 0 : filters.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter-summary', className) }),
             (0, react_1.jsx)("div", { className: "ss__filter-summary__title" }, title),
-            filters.map(function (filter) {
-                var _a, _b;
-                return ((0, react_1.jsx)(Filter_1.Filter, __assign({}, subProps.filter, { url: filter === null || filter === void 0 ? void 0 : filter.url, facetLabel: (_a = filter === null || filter === void 0 ? void 0 : filter.facet) === null || _a === void 0 ? void 0 : _a.label, valueLabel: (_b = filter === null || filter === void 0 ? void 0 : filter.value) === null || _b === void 0 ? void 0 : _b.label, onClick: function (e) { return onClick && onClick(e, filter); } })));
-            }),
-            !hideClearAll && ((0, react_1.jsx)(Filter_1.Filter, __assign({}, subProps.filter, { icon: clearAllIcon, className: "".concat((_g = subProps === null || subProps === void 0 ? void 0 : subProps.filter) === null || _g === void 0 ? void 0 : _g.className, " ss__filter-summary__clear-all"), hideFacetLabel: true, valueLabel: clearAllLabel, onClick: function (e) { return onClearAllClick && onClearAllClick(e); } })))))) : null;
+            filters.map(function (filter) { return ((0, react_1.jsx)(Filter_1.Filter, __assign({}, subProps.filter, { filter: filter, onClick: function (e) { return onClick && onClick(e, filter); } }))); }),
+            !hideClearAll && ((0, react_1.jsx)(Filter_1.Filter, __assign({}, subProps.filter, { icon: clearAllIcon, className: "".concat((_g = subProps === null || subProps === void 0 ? void 0 : subProps.filter) === null || _g === void 0 ? void 0 : _g.className, " ss__filter-summary__clear-all"), hideFacetLabel: true, valueLabel: clearAllLabel, onClick: function (e) { return onClearAllClick && onClearAllClick(e); } })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });