@searchspring/snap-preact-components 0.54.0 → 0.56.0

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

@@ -0,0 +1,189 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+import { useState } from 'react';
+import { useA11y } from '../../../hooks';
+import { Image } from '../../Atoms/Image';
+import { cloneWithProps, defined } from '../../../utilities';
+import { filters } from '@searchspring/snap-toolbox';
+const CSS = {
+    Grid: ({ theme, columns, gapSize, disableOverflowAction }) => css({
+        '.ss__grid__options': {
+            display: 'flex',
+            flexFlow: 'row wrap',
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            gap: gapSize,
+            gridAutoRows: `1fr`,
+            '& .ss__grid__option': {
+                display: 'flex',
+                flexDirection: 'column',
+                boxSizing: 'content-box',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+                backgroundPosition: 'center !important',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flex: '0 1 auto',
+                border: `1px solid ${theme?.colors?.primary || '#333'}`,
+                textAlign: 'center',
+                wordBreak: 'break-all',
+                padding: '1em 0',
+                width: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+                margin: `0 ${gapSize} ${gapSize} 0`,
+                '.ss__grid__option__label': {
+                    cursor: 'pointer',
+                },
+                [`:nth-of-type(${columns}n)`]: {
+                    marginRight: '0',
+                },
+                '&.ss__grid__option--selected': {
+                    border: `2px solid ${theme?.colors?.primary || '#333'}`,
+                },
+                '&.ss__grid__option--disabled': {
+                    position: 'relative',
+                    opacity: '.5',
+                    cursor: 'none',
+                    pointerEvents: 'none',
+                },
+                '&.ss__grid__option--unavailable': {
+                    position: 'relative',
+                    opacity: '.5',
+                },
+                '&.ss__grid__option--disabled:before, &.ss__grid__option--unavailable:before': {
+                    content: '""',
+                    display: 'block',
+                    position: 'absolute',
+                    top: '50%',
+                    width: '90%',
+                    height: '1px',
+                    borderTop: '3px solid #eee',
+                    outline: '1px solid #ffff',
+                    transform: 'rotate(-45deg)',
+                },
+                '&:hover:not(.ss__grid__option--selected)': {
+                    cursor: 'pointer',
+                    background: theme?.colors?.hover || '#f8f8f8',
+                },
+            },
+            '@supports (display: grid)': {
+                display: 'grid',
+                '& .ss__grid__option': {
+                    padding: '0',
+                    margin: '0',
+                    width: 'initial',
+                },
+                '&::before': {
+                    content: '""',
+                    width: 0,
+                    paddingBottom: '100%',
+                    gridRow: '1 / 1',
+                    gridColumn: '1 / 1',
+                },
+                '&> *:first-of-type': {
+                    gridRow: '1 / 1',
+                    gridColumn: '1 / 1',
+                },
+            },
+        },
+        '.ss__grid__show-more-wrapper': {
+            '&:hover': {
+                cursor: disableOverflowAction ? 'initial !important' : 'pointer !important',
+            },
+        },
+    }),
+};
+export function Grid(properties) {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        multiSelect: false,
+        columns: 4,
+        gapSize: '8px',
+        // global theme
+        ...globalTheme?.components?.grid,
+        // props
+        ...properties,
+        ...properties.theme?.components?.grid,
+    };
+    const { titleText, onSelect, hideLabels, disableOverflowAction, multiSelect, overflowButton, columns, rows, hideShowLess, gapSize, overflowButtonInGrid, disabled, options, disableStyles, onOverflowButtonClick, className, style, } = props;
+    const subProps = {
+        image: {
+            // default props
+            className: 'ss__swatches__Image',
+            // global theme
+            ...globalTheme?.components?.image,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+    };
+    let selected = props.selected;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.Grid({ theme, columns, gapSize, disableOverflowAction }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    if (selected && !Array.isArray(selected)) {
+        selected = [selected];
+    }
+    // selection state
+    const [selection, setSelection] = useState(selected || []);
+    const makeSelection = (e, option) => {
+        if (multiSelect) {
+            let newArray;
+            if (selection.find((select) => select.value === option.value)) {
+                newArray = [...selection];
+                newArray.splice(newArray.findIndex((select) => select.value === option.value), 1);
+            }
+            else {
+                newArray = [...selection, option];
+            }
+            if (onSelect) {
+                onSelect(e, option, newArray);
+            }
+            setSelection(newArray);
+        }
+        else {
+            if (onSelect) {
+                onSelect(e, option, [option]);
+            }
+            setSelection([option]);
+        }
+    };
+    const limit = rows && columns ? columns * rows : options.length;
+    const remainder = Math.max(0, options.length - (limit - (overflowButtonInGrid ? 1 : 0)));
+    const [limited, setLimited] = useState(remainder);
+    const OverflowButtonElem = () => {
+        const showButton = hideShowLess ? (!limited ? false : true) : true;
+        return showButton && remainder > 0 && options.length !== limit ? (jsx("div", { className: `ss__grid__show-more-wrapper ${overflowButtonInGrid ? 'ss__grid__option' : ''}`, onClick: (e) => {
+                !disableOverflowAction && setLimited(!limited);
+                onOverflowButtonClick && onOverflowButtonClick(e, Boolean(limited), remainder);
+            } }, overflowButton ? (cloneWithProps(overflowButton, { limited, remainder })) : limited ? (jsx("span", { className: 'ss__grid__show-more' }, `+ ${remainder}`)) : remainder ? (jsx("span", { className: 'ss__grid__show-less' }, "Less")) : (jsx(Fragment, null)))) : (jsx(Fragment, null));
+    };
+    return typeof options == 'object' && options?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__grid', disabled ? 'ss__grid--disabled' : '', className) },
+            titleText && jsx("h5", { className: "ss__grid__title" }, titleText),
+            jsx("div", { className: "ss__grid__options" },
+                options.map((option, idx) => {
+                    const selected = selection.some((select) => select.value == option.value);
+                    if (!limited || options.length == limit || idx < limit - (overflowButtonInGrid ? 1 : 0)) {
+                        return (jsx("div", { className: classnames(`ss__grid__option ss__grid__option--${filters.handleize(option.value.toString())}`, {
+                                'ss__grid__option--selected': selected,
+                                'ss__grid__option--disabled': option?.disabled,
+                                'ss__grid__option--unavailable': option?.available === false,
+                            }), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : option.value }, onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option), ref: (e) => useA11y(e), title: option.label, role: "option", "aria-selected": selected },
+                            !option.background && option.backgroundImageUrl ? (jsx(Image, { ...subProps.image, src: option.backgroundImageUrl, alt: option.label || option.value.toString() })) : (jsx(Fragment, null)),
+                            !hideLabels ? jsx("label", { className: "ss__grid__option__label" }, option.label || option.value) : jsx(Fragment, null)));
+                    }
+                }),
+                overflowButtonInGrid ? jsx(OverflowButtonElem, null) : jsx(Fragment, null)),
+            !overflowButtonInGrid ? jsx(OverflowButtonElem, null) : jsx(Fragment, null)))) : (jsx(Fragment, null));
+}

package/dist/esm/components/Molecules/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Grid';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Molecules/Grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/esm/components/Molecules/Grid/index.js

@@ -0,0 +1 @@
+export * from './Grid';

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ComponentProps, ListOption } from '../../../types';
+export declare function List(properties: ListProps): JSX.Element;
+export interface ListProps extends ComponentProps {
+    options: ListOption[];
+    multiSelect?: boolean;
+    hideOptionCheckboxes?: boolean;
+    hideOptionLabels?: boolean;
+    hideOptionIcons?: boolean;
+    onSelect?: (e: React.MouseEvent<HTMLElement>, option: ListOption, selected: ListOption[]) => void;
+    titleText?: string;
+    disabled?: boolean;
+    horizontal?: boolean;
+    native?: boolean;
+    selected?: ListOption | ListOption[];
+    requireSelection?: boolean;
+}
+//# sourceMappingURL=List.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/List/List.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAyDxE,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA+IvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B"}

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

@@ -0,0 +1,140 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+import { defined } from '../../../utilities';
+import { useState } from 'react';
+import { Checkbox } from '../Checkbox';
+import { useA11y } from '../../../hooks';
+import { Icon } from '../../Atoms/Icon';
+import { filters } from '@searchspring/snap-toolbox';
+const CSS = {
+    List: ({ horizontal }) => css({
+        display: 'flex',
+        flexDirection: horizontal ? 'row' : 'column',
+        alignItems: horizontal ? 'center' : undefined,
+        justifyItems: 'flex-start',
+        gap: '5px',
+        '& .ss__list__options': {
+            border: 'none',
+            listStyle: 'none',
+            padding: '0px',
+            margin: '0px',
+            display: 'flex',
+            flexDirection: horizontal ? 'row' : 'column',
+            alignItems: horizontal ? 'center' : undefined,
+            justifyItems: 'flex-start',
+            gap: '5px',
+        },
+        '.ss__list__option': {
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '5px',
+            '& .ss__list__option__label , .ss__list__option__icon': {
+                cursor: 'pointer',
+            },
+        },
+        '&.ss__list--disabled, .ss__list__option--disabled': {
+            cursor: 'none',
+            pointerEvents: 'none',
+            opacity: 0.5,
+        },
+        '&.ss__list--disabled, .ss__list__option--unavailable': {
+            cursor: 'pointer',
+            opacity: 0.5,
+        },
+        '.ss__list__option--selected': {
+            fontWeight: 'bold',
+        },
+    }),
+};
+export function List(properties) {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.list,
+        // props
+        ...properties,
+        ...properties.theme?.components?.list,
+    };
+    const { titleText, onSelect, native, multiSelect, hideOptionLabels, hideOptionIcons, hideOptionCheckboxes, disabled, options, requireSelection, disableStyles, className, style, horizontal, } = props;
+    let selected = props.selected;
+    const subProps = {
+        checkbox: {
+            // default props
+            native: native,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+        icon: {
+            // default props
+            className: 'ss__list__option__icon',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.List({ horizontal }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    if (selected && !Array.isArray(selected)) {
+        selected = [selected];
+    }
+    // selection state
+    const [selection, setSelection] = useState(selected || []);
+    const makeSelection = (e, option) => {
+        let newArray;
+        if (multiSelect) {
+            if (selection.find((select) => select.value === option.value)) {
+                newArray = [...selection];
+                newArray.splice(newArray.findIndex((select) => select.value === option.value), 1);
+                if (newArray.length == 0 && requireSelection) {
+                    newArray = [option];
+                }
+            }
+            else {
+                newArray = [...selection, option];
+            }
+        }
+        else {
+            if (!requireSelection && selection.find((select) => select.value === option.value)) {
+                newArray = [];
+            }
+            else {
+                newArray = [option];
+            }
+        }
+        if (onSelect) {
+            onSelect(e, option, newArray);
+        }
+        setSelection(newArray);
+    };
+    return typeof options == 'object' && options?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__list', disabled ? 'ss__list--disabled' : '', className) },
+            titleText && jsx("h5", { className: "ss__list__title" }, titleText),
+            jsx("ul", { className: `ss__list__options`, role: "listbox", "aria-label": titleText }, options.map((option) => {
+                const selected = selection.some((select) => select.value == option.value);
+                return (jsx("li", { className: classnames(`ss__list__option ss__list__option--${filters.handleize(option.value.toString())}`, {
+                        'ss__list__option--selected': selected,
+                        'ss__list__option--disabled': option?.disabled,
+                        'ss__list__option--unavailable': option?.available === false,
+                    }), ref: (e) => useA11y(e), onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option), title: option.label, role: "option", "aria-selected": selected },
+                    !hideOptionCheckboxes && jsx(Checkbox, { ...subProps.checkbox, checked: selected, disableA11y: true }),
+                    option.icon && !hideOptionIcons && (jsx(Icon, { ...subProps.icon, ...(typeof option.icon == 'string' ? { icon: option.icon } : option.icon) })),
+                    !hideOptionLabels && (option.label || !option.icon) && (jsx("label", { className: "ss__list__option__label" }, option.label || option.value))));
+            }))))) : (jsx(Fragment, null));
+}

package/dist/esm/components/Molecules/List/index.d.ts

@@ -0,0 +1,2 @@
+export * from './List';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Molecules/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/List/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/esm/components/Molecules/List/index.js

@@ -0,0 +1 @@
+export * from './List';

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { ComponentChildren } from 'preact';
+import { ComponentProps, ComponentMap } from '../../../types';
+import type { AutocompleteController, RecommendationController, SearchController } from '@searchspring/snap-controller';
+import type { Product } from '@searchspring/snap-store-mobx';
+export declare const OverlayBadge: ((properties: OverlayBadgeProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface OverlayBadgeProps extends ComponentProps {
+    result: Product;
+    controller: SearchController | AutocompleteController | RecommendationController;
+    children: ComponentChildren;
+    renderEmpty?: boolean;
+    componentMap?: ComponentMap;
+}
+//# sourceMappingURL=OverlayBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA6C7D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAqF/E,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B"}

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

@@ -0,0 +1,111 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+import { defaultBadgeComponentMap } from '../../../utilities';
+import { useComponent } from '../../../hooks';
+const CSS = {
+    OverlayBadge: ({ grid }) => {
+        let gridProperties = {};
+        if (grid?.length && grid[0]?.length) {
+            const gridTemplateAreas = grid.map((row) => `"${row.join(' ')}"`).join(' ');
+            const columns = grid[0].length;
+            gridProperties = {
+                gridTemplateColumns: `repeat(${columns}, 1fr)`,
+                gridTemplateAreas,
+            };
+        }
+        return css({
+            position: 'relative',
+            '& .ss__overlay-badge__grid-wrapper': {
+                display: 'grid',
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                ...gridProperties,
+            },
+        });
+    },
+    BadgePositioning: ({ index, section, tag }) => {
+        return css({
+            position: 'absolute',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: section == 'right' ? 'flex-end' : 'flex-start',
+            right: section == 'right' ? 0 : undefined,
+            gap: '0.5em',
+            gridArea: tag,
+            boxSizing: 'border-box',
+            zIndex: Math.max(100 - index, 1),
+            width: '100%',
+            height: '100%',
+        });
+    },
+};
+export const OverlayBadge = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.overlayBadge,
+        // props
+        ...properties,
+        ...properties.theme?.components?.overlayBadge,
+    };
+    const { result, children, controller, renderEmpty, disableStyles, className, style } = props;
+    const styling = {};
+    if (!children) {
+        controller?.log?.warn('OverlayBadge component must have children');
+        return jsx(Fragment, null);
+    }
+    const limit = 1;
+    const meta = controller?.store?.meta;
+    const group = 'overlay';
+    const grid = meta?.badges?.groups?.[group]?.grid;
+    const badgeComponentMap = { ...defaultBadgeComponentMap, ...props.componentMap };
+    const sections = meta?.badges?.groups?.[group]?.sections;
+    // build locations and filter out the locations that have no badges in them to prevent rendering
+    const locations = sections
+        ?.map((section) => {
+        const sectionSlots = meta?.data?.badges?.locations[section];
+        const slots = sectionSlots
+            ?.map((slot) => ({
+            tag: slot.tag,
+            name: slot.name,
+            badges: result?.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
+        }))
+            .filter((slot) => slot.badges.length);
+        return {
+            section,
+            slots,
+        };
+    })
+        .filter((location) => location.slots?.length);
+    if (!disableStyles) {
+        styling.css = [CSS.OverlayBadge({ ...props, grid }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    if (renderEmpty || locations?.length) {
+        return (jsx(CacheProvider, null,
+            jsx("div", { ...styling, className: classnames('ss__overlay-badge', className) },
+                jsx("div", { className: "ss__overlay-badge__grid-wrapper" }, locations.map((location, index) => {
+                    return location.slots?.map((slot) => {
+                        return (jsx("div", { className: classnames('ss__overlay-badge__grid-wrapper__slot', `ss__overlay-badge__grid-wrapper__slot--${slot.tag}`), css: [CSS.BadgePositioning({ tag: slot.tag, section: location.section, index })] }, slot.badges.map((badge) => {
+                            const BadgeComponent = useComponent(badgeComponentMap, badge.component);
+                            if (!BadgeComponent) {
+                                return jsx(Fragment, null);
+                            }
+                            return jsx(BadgeComponent, { ...badge, ...badge.parameters });
+                        })));
+                    });
+                })),
+                children)));
+    }
+    return jsx(Fragment, null, children);
+});

package/dist/esm/components/Molecules/OverlayBadge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OverlayBadge';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Molecules/OverlayBadge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/Molecules/OverlayBadge/index.js

@@ -0,0 +1 @@
+export * from './OverlayBadge';

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,EAAsB,MAAM,gBAAgB,CAAC;AAChF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,eAAyB,WAAW,KAAG,WA2HxD,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
+{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,eAAyB,WAAW,KAAG,WAuJxD,CAAC;AAQH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

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

@@ -4,12 +4,13 @@ import { observer } from 'mobx-react';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { Image } from '../../Atoms/Image';
-import { Badge } from '../../Atoms/Badge';
 import { Price } from '../../Atoms/Price';
 import { useTheme, CacheProvider } from '../../../providers';
 import { defined, cloneWithProps } from '../../../utilities';
 import { filters } from '@searchspring/snap-toolbox';
 import { Layout } from '../../../types';
+import { CalloutBadge } from '../../Molecules/CalloutBadge';
+import { OverlayBadge } from '../../Molecules/OverlayBadge';
 const CSS = {
     result: () => css({
         '&.ss__result--grid': {
@@ -87,15 +88,28 @@ export const Result = observer((properties) => {
             // component theme overrides
             theme: props.theme,
         },
-        badge: {
+        calloutBadge: {
             // default props
-            className: 'ss__result__badge',
-            content: 'Sale',
+            className: 'ss__result__callout-badge',
             // global theme
-            ...globalTheme?.components?.badge,
+            ...globalTheme?.components?.calloutBadge,
             // inherited props
             ...defined({
                 disableStyles,
+                result,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        overlayBadge: {
+            // default props
+            className: 'ss__result__overlay-badge',
+            // global theme
+            ...globalTheme?.components?.overlayBadge,
+            // inherited props
+            ...defined({
+                disableStyles,
+                result,
             }),
             // component theme overrides
             theme: props.theme,
@@ -116,7 +130,6 @@ export const Result = observer((properties) => {
             theme: props?.theme,
         },
     };
-    const onSale = Boolean(core?.msrp && core.price && core?.msrp * 1 > core?.price * 1);
     let displayName = core?.name;
     if (props.truncateTitle) {
         displayName = filters.truncate(core?.name || '', props.truncateTitle.limit, props.truncateTitle.append);
@@ -134,10 +147,11 @@ export const Result = observer((properties) => {
                 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 }))),
+                    } }, !hideImage &&
+                    (!hideBadge ? (jsx(OverlayBadge, { ...subProps.overlayBadge, controller: controller },
+                        jsx(Image, { ...subProps.image }))) : (jsx(Image, { ...subProps.image }))))),
             jsx("div", { className: "ss__result__details" },
+                !hideBadge && (jsx(CalloutBadge, { ...subProps.calloutBadge, controller: controller })),
                 !hideTitle && (jsx("div", { className: "ss__result__details__title" },
                     jsx("a", { href: core.url, onClick: (e) => {
                             onClick && onClick(e);

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ComponentProps, SwatchOption, BreakpointsProps } from '../../../types';
+import { CarouselProps } from '../Carousel';
+import { GridProps } from '../Grid';
+export declare function Swatches(properties: SwatchesProps): JSX.Element;
+export type SwatchesProps = {
+    options: SwatchOption[];
+    onSelect?: (e: React.MouseEvent<HTMLElement>, option: SwatchOption) => void;
+    selected?: SwatchOption;
+    hideLabels?: boolean;
+    breakpoints?: BreakpointsProps;
+} & ({
+    type?: 'carousel';
+    carousel?: Partial<CarouselProps>;
+} | {
+    type?: 'grid';
+    grid?: Partial<GridProps>;
+}) & ComponentProps;
+//# sourceMappingURL=Swatches.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swatches.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Swatches/Swatches.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG5F,OAAO,EAAY,aAAa,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAoD1C,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA2K/D;AAED,MAAM,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,CACD;IACA,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACjC,GACD;IACA,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CACzB,CACH,GACA,cAAc,CAAC"}