@searchspring/snap-preact-components 0.20.4 → 0.20.5

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

@@ -160,6 +160,21 @@ declare const _default: {
                 type: string;
             };
         };
+        autoAdjustSlides: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         onNextButtonClick: {
             description: string;
             table: {

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASrC,wBAyIE;AAGF,eAAO,MAAM,MAAM;;;;;;;CAQlB,CAAC;AAOF,eAAO,MAAM,KAAK,+BAajB,CAAC"}
+{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASrC,wBAqJE;AAGF,eAAO,MAAM,MAAM;;;;;;;CAQlB,CAAC;AAOF,eAAO,MAAM,KAAK,+BAajB,CAAC"}

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

@@ -95,6 +95,17 @@ export default {
             },
             control: { type: 'object' },
         },
+        autoAdjustSlides: {
+            defaultValue: true,
+            description: 'If true and children length is less than the current breakpoint slidesPerView value, slidesPerView and slidesPerGroup will be set to the children length and loop to false',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: true },
+            },
+            control: { type: 'boolean' },
+        },
         onNextButtonClick: {
             description: 'Carousel next button click event handler',
             table: {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps, ValueFacetValue } from '../../../types';
 export declare const FacetGridOptions: ((properties: FacetGridOptionsProps) => JSX.Element) & {
     displayName: string;
@@ -6,7 +7,7 @@ export interface FacetGridOptionsProps extends ComponentProps {
     values: ValueFacetValue[];
     columns?: number;
     gapSize?: string;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiEjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAiDvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiEjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAoDvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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/FacetGridOptions/FacetGridOptions.js

@@ -81,7 +81,10 @@ export const FacetGridOptions = observer((properties) => {
         styling.css = [style];
     }
     return (values?.length && (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-grid-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), onClick: onClick, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+        jsx("div", { ...styling, className: classnames('ss__facet-grid-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-grid-options__option', { 'ss__facet-grid-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);
+            } },
             jsx("span", { className: classnames('ss__facet-grid-options__option__value', {
                     'ss__facet-grid-options__option__value--smaller': value.label.length > 3,
                 }) }, value.label))))))));

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps, HierarchyFacetValue } from '../../../types';
 export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsProps) => JSX.Element) & {
     displayName: string;
@@ -5,7 +6,7 @@ export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsP
 export interface FacetHierarchyOptionsProps extends ComponentProps {
     values: HierarchyFacetValue[];
     hideCount?: boolean;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2CrE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CAkDjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2CrE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CAqDjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,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/FacetHierarchyOptions/FacetHierarchyOptions.js

@@ -61,7 +61,10 @@ export const FacetHierarchyOptions = observer((properties) => {
         styling.css = [style];
     }
     return (values?.length && (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-hierarchy-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), onClick: onClick, ...value.url?.link, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps },
+        jsx("div", { ...styling, className: classnames('ss__facet-hierarchy-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), href: value.url?.link?.href, onClick: (e) => {
+                value.url?.link?.onClick(e);
+                onClick && onClick(e);
+            }, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps },
             jsx("span", { className: "ss__facet-hierarchy-options__option__value" },
                 value.label,
                 !hideCount && value.count > 0 && !value.filtered && (jsx("span", { className: "ss__facet-hierarchy-options__option__value__count" },

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps, ValueFacetValue } from '../../../types';
 export declare const FacetListOptions: ((properties: FacetListOptionsProps) => JSX.Element) & {
     displayName: string;
@@ -6,7 +7,7 @@ export interface FacetListOptionsProps extends ComponentProps {
     values: ValueFacetValue[];
     hideCheckbox?: boolean;
     hideCount?: boolean;
-    onClick?: (e: any) => void;
+    onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

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;;CA2DvF,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,GAAG,KAAK,IAAI,CAAC;IAC3B,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,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"}

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

@@ -63,7 +63,10 @@ export const FacetListOptions = observer((properties) => {
         styling.css = [style];
     }
     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 }), onClick: onClick, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+        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);
+            } },
             !hideCheckbox && jsx(Checkbox, { ...subProps.checkbox, checked: value.filtered }),
             jsx("span", { className: "ss__facet-list-options__option__value" },
                 value.label,

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ValueFacetValue, ComponentProps } from '../../../types';
 export declare const FacetPaletteOptions: ((properties: FacetPaletteOptionsProps) => JSX.Element) & {
     displayName: string;
@@ -8,7 +9,7 @@ export interface FacetPaletteOptionsProps extends ComponentProps {
     columns?: number;
     gapSize?: string;
     hideIcon?: boolean;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

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;;CA0E7F,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,KAAK,IAAI,CAAC;IAC7B,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,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"}

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

@@ -117,7 +117,10 @@ export const FacetPaletteOptions = observer((properties) => {
         styling.css = [style];
     }
     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 }), onClick: onClick, "aria-label": value.value, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+        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))))))));

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

@@ -18,6 +18,7 @@ export interface ResultProps extends ComponentProps {
     fallback?: string;
     layout?: LayoutType;
     truncateTitle?: TruncateTitleProps;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, Event>) => void;
     controller?: SearchController | AutocompleteController | RecommendationController;
 }
 export {};

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,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA4DxH,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAwHnE,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,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,EAAU,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA4DxH,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CA2HnE,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

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

@@ -73,7 +73,7 @@ export const Result = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.result,
     };
-    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, style, controller } = props;
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, onClick, style, controller } = props;
     const core = result?.mappings?.core;
     const subProps = {
         price: {
@@ -131,14 +131,16 @@ export const Result = observer((properties) => {
     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, onMouseDown: (e) => {
+                jsx("a", { href: core.url, onClick: (e) => {
+                        onClick && onClick(e);
                         controller?.track?.product?.click(e, result);
                     } },
                     !hideBadge && onSale && jsx(Badge, { ...subProps.badge }),
                     !hideImage && jsx(Image, { ...subProps.image }))),
             jsx("div", { className: "ss__result__details" },
                 !hideTitle && (jsx("div", { className: "ss__result__details__title" },
-                    jsx("a", { href: core.url, onMouseDown: (e) => {
+                    jsx("a", { href: core.url, onClick: (e) => {
+                            onClick && onClick(e);
                             controller?.track?.product?.click(e, result);
                         }, dangerouslySetInnerHTML: {
                             __html: displayName,

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

@@ -186,6 +186,15 @@ declare const _default: {
                 options: Layout[];
             };
         };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
         controller: {
             description: string;
             table: {

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,wBA+HE;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBAwIE;AAKF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC;AAe9C,eAAO,MAAM,aAAa,KAAoB,CAAC"}

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

@@ -116,6 +116,15 @@ export default {
                 options: [Layout.GRID, Layout.LIST],
             },
         },
+        onClick: {
+            description: 'Custom onClick event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
         controller: {
             description: 'Controller reference',
             table: {

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { AutocompleteController } from '@searchspring/snap-controller';
-import { BreakpointsProps } from '../../Organisms/Results';
-import { ComponentProps } from '../../../types';
+import { ComponentProps, BreakpointsProps } from '../../../types';
 export declare const Autocomplete: ((properties: AutocompleteProps) => JSX.Element) & {
     displayName: string;
 };
@@ -28,5 +27,7 @@ export interface AutocompleteProps extends ComponentProps {
     breakpoints?: BreakpointsProps;
     controller: AutocompleteController;
     width?: string;
+    onFacetOptionClick?: (e: any) => void;
+    onTermClick?: (e: any) => void;
 }
 //# sourceMappingURL=Autocomplete.d.ts.map

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAG5E,OAAO,EAAwB,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAKjF,OAAO,EAAc,cAAc,EAAgB,MAAM,gBAAgB,CAAC;AA2J1E,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAkX/E,CAAC;AAkCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAQ5E,OAAO,EAAc,cAAc,EAAgB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA2J5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CA8X/E,CAAC;AAkCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;CAC1B"}

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js

@@ -169,16 +169,61 @@ export const Autocomplete = observer((properties) => {
             rows: 3,
         },
     };
+    const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, horizontalTerms, vertical, termsTitle, trendingTitle, facetsTitle, contentTitle, viewportMaxHeight, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, onFacetOptionClick, onTermClick, disableStyles, className, width, style, controller, } = props;
+    let delayTimeout;
+    const delayTime = 333;
+    const valueProps = {
+        onMouseEnter: (e) => {
+            clearTimeout(delayTimeout);
+            delayTimeout = setTimeout(() => {
+                e.target.focus();
+            }, delayTime);
+        },
+        onMouseLeave: () => {
+            clearTimeout(delayTimeout);
+        },
+    };
+    const themeOverride = {
+        components: {
+            facet: {
+                limit: 6,
+                disableOverflow: true,
+                disableCollapse: true,
+                previewOnFocus: true,
+                valueProps,
+            },
+            facetGridOptions: {
+                columns: 3,
+                onClick: onFacetOptionClick,
+            },
+            facetHierarchyOptions: {
+                hideCount: true,
+                onClick: onFacetOptionClick,
+            },
+            facetListOptions: {
+                hideCheckbox: true,
+                hideCount: true,
+                onClick: onFacetOptionClick,
+            },
+            facetPaletteOptions: {
+                hideLabel: true,
+                columns: 3,
+                onClick: onFacetOptionClick,
+            },
+            result: {
+                hideBadge: true,
+            },
+        },
+    };
     const displaySettings = useDisplaySettings(breakpoints);
     if (displaySettings && Object.keys(displaySettings).length) {
-        const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {});
+        const theme = deepmerge(themeOverride, props?.theme || {}, displaySettings?.theme || {});
         props = {
             ...props,
             ...displaySettings,
             theme,
         };
     }
-    const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, horizontalTerms, vertical, termsTitle, trendingTitle, facetsTitle, contentTitle, viewportMaxHeight, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, disableStyles, className, width, style, controller, } = props;
     let { input } = props;
     let inputViewportOffsetBottom;
     if (input) {
@@ -188,19 +233,6 @@ export const Autocomplete = observer((properties) => {
         const rect = input?.getBoundingClientRect();
         inputViewportOffsetBottom = rect?.bottom || 0;
     }
-    let delayTimeout;
-    const delayTime = 333;
-    const valueProps = {
-        onMouseEnter: (e) => {
-            clearTimeout(delayTimeout);
-            delayTimeout = setTimeout(() => {
-                e.target.focus();
-            }, delayTime);
-        },
-        onMouseLeave: () => {
-            clearTimeout(delayTimeout);
-        },
-    };
     const subProps = {
         facets: {
             // default props
@@ -211,32 +243,7 @@ export const Autocomplete = observer((properties) => {
             ...defined({
                 disableStyles,
             }),
-            // component theme overrides
-            theme: deepmerge({
-                components: {
-                    facet: {
-                        limit: 6,
-                        disableOverflow: true,
-                        disableCollapse: true,
-                        previewOnFocus: true,
-                        valueProps,
-                    },
-                    facetGridOptions: {
-                        columns: 3,
-                    },
-                    facetHierarchyOptions: {
-                        hideCount: true,
-                    },
-                    facetListOptions: {
-                        hideCheckbox: true,
-                        hideCount: true,
-                    },
-                    facetPaletteOptions: {
-                        hideLabel: true,
-                        columns: 3,
-                    },
-                },
-            }, { ...props.theme }),
+            theme: props.theme,
         },
         banner: {
             // default props
@@ -261,13 +268,7 @@ export const Autocomplete = observer((properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: deepmerge({
-                components: {
-                    result: {
-                        hideBadge: true,
-                    },
-                },
-            }, { ...props.theme }),
+            theme: props.theme,
         },
         icon: {
             // default props
@@ -321,21 +322,21 @@ export const Autocomplete = observer((properties) => {
     }
     return (visible && (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__autocomplete', className, { 'ss__autocomplete--only-terms': onlyTerms }), onClick: (e) => e.stopPropagation() },
-            !hideTerms && (jsx("div", { className: classnames('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? (cloneWithProps(termsSlot, { terms, trending, termsTitle, trendingTitle, showTrending, valueProps, emIfy, controller })) : (jsx(Fragment, null,
+            !hideTerms && (jsx("div", { className: classnames('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? (cloneWithProps(termsSlot, { terms, trending, termsTitle, trendingTitle, showTrending, valueProps, emIfy, onTermClick, controller })) : (jsx(Fragment, null,
                 terms.length > 0 ? (jsx(Fragment, null,
                     termsTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms" },
                         jsx("h5", null, termsTitle))) : null,
                     jsx("div", { className: "ss__autocomplete__terms__options" }, terms.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input)))))))) : null,
+                        jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input)))))))) : null,
                 showTrending ? (jsx(Fragment, null,
                     trendingTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
                         jsx("h5", null, trendingTitle))) : null,
                     jsx("div", { className: "ss__autocomplete__terms__options" }, trending.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input)))))))) : null)))),
+                        jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input)))))))) : null)))),
             !hideFacets &&
                 (facetsSlot ? (jsx("div", { className: "ss__autocomplete__facets" }, cloneWithProps(facetsSlot, { facets: facetsToShow, merchandising, facetsTitle, hideBanners, controller, valueProps }))) : (facetsToShow.length > 0 && (jsx(Fragment, null,
                     facetsTitle && vertical ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--facets') },

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts

@@ -316,6 +316,24 @@ declare const _default: {
                 type: string;
             };
         };
+        onFacetOptionClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onTermClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
     };
 };
 export default _default;

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKjE,wBA4OE;AAuBF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKjE,wBA8PE;AAuBF,eAAO,MAAM,OAAO,KAAoB,CAAC"}

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.js

@@ -224,6 +224,24 @@ export default {
                 type: 'object',
             },
         },
+        onFacetOptionClick: {
+            description: 'Custom onClick event handler for facet options.',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onFacetOptionClick',
+        },
+        onTermClick: {
+            description: 'Custom onClick event handler for Suggested & Trending Terms',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onTermClick',
+        },
         ...componentArgs,
     },
 };

package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import type { RecommendationController } from '@searchspring/snap-controller';
-import { ComponentProps } from '../../../types';
+import { ComponentProps, BreakpointsProps } from '../../../types';
 export declare const Recommendation: ((properties: RecommendationProps) => JSX.Element) & {
     displayName: string;
 };
 export interface RecommendationProps extends ComponentProps {
     title?: JSX.Element | string;
-    breakpoints?: any;
+    breakpoints?: BreakpointsProps;
     prevButton?: JSX.Element | string;
     nextButton?: JSX.Element | string;
     hideButtons?: boolean;

package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiDhD,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAyJnF,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAclE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAoKnF,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/esm/components/Organisms/Recommendation/Recommendation.js

@@ -2,11 +2,13 @@ import { useState, useRef } from 'preact/hooks';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { Carousel } from '../../Molecules/Carousel';
+import deepmerge from 'deepmerge';
+import { Carousel, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoints } from '../../Molecules/Carousel';
 import { Result } from '../../Molecules/Result';
 import { defined } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
 import { useIntersection } from '../../../hooks';
+import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
 const CSS = {
     recommendation: ({ vertical }) => css({
         height: vertical ? '100%' : null,
@@ -15,45 +17,11 @@ const CSS = {
         },
     }),
 };
-const defaultRecommendationBreakpoints = {
-    0: {
-        slidesPerView: 1,
-        slidesPerGroup: 1,
-        spaceBetween: 0,
-    },
-    480: {
-        slidesPerView: 2,
-        slidesPerGroup: 2,
-        spaceBetween: 10,
-    },
-    768: {
-        slidesPerView: 3,
-        slidesPerGroup: 3,
-        spaceBetween: 10,
-    },
-    1024: {
-        slidesPerView: 4,
-        slidesPerGroup: 4,
-        spaceBetween: 10,
-    },
-    1200: {
-        slidesPerView: 5,
-        slidesPerGroup: 5,
-        spaceBetween: 10,
-    },
-};
-const defaultVerticalRecommendationBreakpoints = {
-    0: {
-        slidesPerView: 1,
-        slidesPerGroup: 1,
-        spaceBetween: 0,
-    },
-};
 export const Recommendation = observer((properties) => {
     const globalTheme = useTheme();
-    const props = {
+    let props = {
         // default props
-        breakpoints: properties.vertical ? defaultVerticalRecommendationBreakpoints : defaultRecommendationBreakpoints,
+        breakpoints: properties.vertical ? defaultVerticalCarouselBreakpoints : defaultCarouselBreakpoints,
         pagination: false,
         loop: true,
         // global theme
@@ -62,6 +30,15 @@ export const Recommendation = observer((properties) => {
         // props
         ...properties.theme?.components?.recommendation,
     };
+    const displaySettings = useDisplaySettings(props.breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {});
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
+    }
     const { title, controller, children, breakpoints, loop, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, vertical, ...additionalProps } = props;
     if (!controller || controller.type !== 'recommendation') {
         throw new Error(`<Recommendation> Component requires 'controller' prop with an instance of RecommendationController`);
@@ -148,7 +125,7 @@ export const Recommendation = observer((properties) => {
                     if (!Number.isNaN(clickedIndex)) {
                         controller.track.product.click(e, results[clickedIndex]);
                     }
-                }, loop: loop, breakpoints: breakpoints, pagination: pagination, ...subProps.carousel, ...additionalProps }, children
+                }, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, children
                 ? children.map((child) => child)
                 : results.map((result) => jsx(Result, { controller: controller, result: result, ...subProps.result })))))));
 });