@searchspring/snap-preact-components 0.54.0 → 0.56.0

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

@@ -0,0 +1,179 @@
+/** @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, useDisplaySettings } from '../../../hooks';
+import { Carousel } from '../Carousel';
+import { defined } from '../../../utilities';
+import { Grid } from '../Grid';
+import { Image } from '../../Atoms/Image';
+import deepmerge from 'deepmerge';
+import { filters } from '@searchspring/snap-toolbox';
+const CSS = {
+    Swatches: ({ theme }) => css({
+        marginTop: '10px',
+        '.ss__swatches__carousel__swatch': {
+            boxSizing: 'content-box',
+            cursor: 'pointer',
+            backgroundRepeat: 'no-repeat',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: `1px solid ${theme?.colors?.primary || '#333'}`,
+            aspectRatio: '1/1',
+            margin: 'auto',
+            flexDirection: 'column',
+            '&.ss__swatches__carousel__swatch--selected': {
+                border: `2px solid ${theme?.colors?.primary || '#333'}`,
+            },
+            '&.ss__swatches__carousel__swatch--disabled:before, &.ss__swatches__carousel__swatch--unavailable:before': {
+                content: '""',
+                display: 'block',
+                position: 'absolute',
+                top: '50%',
+                width: '90%',
+                height: '1px',
+                borderTop: '3px solid #eee',
+                outline: '1px solid #ffff',
+                transform: 'rotate(-45deg)',
+            },
+            '&.ss__swatches__carousel__swatch--disabled': {
+                position: 'relative',
+                cursor: 'none',
+                pointerEvents: 'none',
+                opacity: 0.5,
+            },
+            '&.ss__swatches__carousel__swatch--unavailable': {
+                cursor: 'pointer',
+                opacity: 0.5,
+            },
+        },
+    }),
+};
+export function Swatches(properties) {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const defaultCarouselBreakpoints = {
+        0: {
+            carousel: {
+                slidesPerView: 3,
+                slidesPerGroup: 3,
+                spaceBetween: 10,
+            },
+        },
+        768: {
+            carousel: {
+                slidesPerView: 4,
+                slidesPerGroup: 4,
+                spaceBetween: 10,
+            },
+        },
+        1200: {
+            carousel: {
+                slidesPerView: 5,
+                slidesPerGroup: 5,
+                spaceBetween: 10,
+            },
+        },
+    };
+    let props = {
+        // default props
+        type: 'carousel',
+        hideLabels: true,
+        // global theme
+        ...globalTheme?.components?.swatches,
+        // props
+        ...properties,
+        ...properties.theme?.components?.swatches,
+    };
+    const breakpoints = props.breakpoints || (props.type == 'carousel' ? defaultCarouselBreakpoints : {});
+    const displaySettings = useDisplaySettings(breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
+    }
+    const { onSelect, disabled, options, hideLabels, disableStyles, className, style, type, carousel, grid } = props;
+    const subProps = {
+        carousel: {
+            // default props
+            className: 'ss__swatches__carousel',
+            loop: false,
+            ...carousel,
+            // global theme
+            ...globalTheme?.components?.carousel,
+            // inherited props
+            ...defined({
+                breakpoints,
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+        grid: {
+            // default props
+            className: 'ss__swatches__grid',
+            hideLabels: hideLabels,
+            overflowButtonInGrid: true,
+            disableOverflowAction: true,
+            rows: 1,
+            columns: 6,
+            ...grid,
+            // global theme
+            ...globalTheme?.components?.grid,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+        image: {
+            // default props
+            className: 'ss__swatches__image',
+            // global theme
+            ...globalTheme?.components?.image,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+    };
+    const selected = props.selected;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.Swatches({ theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    // selection state
+    const [selection, setSelection] = useState(selected || undefined);
+    const makeSelection = (e, option) => {
+        if (onSelect) {
+            onSelect(e, option);
+        }
+        setSelection(option);
+    };
+    return typeof options == 'object' && options?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__swatches', className) }, type == 'carousel' ? (jsx(Carousel, { ...subProps.carousel }, options.map((option) => {
+            const label = option.label;
+            const selected = selection?.value == option.value;
+            return (jsx("div", { className: classnames(`ss__swatches__carousel__swatch ss__swatches__carousel__swatch--${filters.handleize(option.value.toString())}`, {
+                    'ss__swatches__carousel__swatch--selected': selected,
+                    'ss__swatches__carousel__swatch--disabled': option?.disabled,
+                    'ss__swatches__carousel__swatch--unavailable': option?.available === false,
+                }), title: label, style: { background: option.background ? option.background : option.backgroundImageUrl ? `` : option.value }, onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option), ref: (e) => useA11y(e), 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("span", { className: "ss__swatches__carousel__swatch__value" }, label || option.value)));
+        }))) : (jsx(Grid, { ...subProps.grid, options: options, onSelect: (e, option) => {
+                !disabled && makeSelection(e, option);
+            }, selected: selected }))))) : (jsx(Fragment, null));
+}

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+import type { VariantSelection as VariantSelectionType } from '@searchspring/snap-store-mobx';
+export declare const VariantSelection: (properties: VariantSelectionProps) => JSX.Element;
+export interface VariantSelectionProps extends ComponentProps {
+    selection: VariantSelectionType;
+    type?: 'dropdown' | 'swatches' | 'list';
+}
+//# sourceMappingURL=VariantSelection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAqD9F,eAAO,MAAM,gBAAgB,eAAyB,qBAAqB,KAAG,WAkK5E,CAAC;AASH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,SAAS,EAAE,oBAAoB,CAAC;IAChC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;CACxC"}

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

@@ -0,0 +1,167 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { observer } from 'mobx-react';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+import { defined } from '../../../utilities';
+import { List } from '../List';
+import { Swatches } from '../Swatches';
+import { Dropdown } from '../../Atoms/Dropdown';
+import { Icon } from '../../Atoms/Icon';
+const CSS = {
+    variantSelection: () => css({
+        '.ss__variant-selection__dropdown': {
+            '.ss__dropdown__button': {
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                '.ss__dropdown__button-wrapper': {
+                    display: 'flex',
+                    gap: '5px',
+                },
+            },
+            '.ss__dropdown__content': {
+                minWidth: 'auto',
+                left: '0',
+                right: '0',
+                '.ss__variant-selection__option': {
+                    cursor: 'pointer',
+                    position: 'relative',
+                },
+                '.ss__variant-selection__option:hover': {
+                    fontWeight: 'bold',
+                },
+                '.ss__variant-selection__option--selected': {
+                    fontWeight: 'bold',
+                },
+                '.ss__variant-selection__option--disabled': {
+                    pointerEvents: 'none',
+                    cursor: 'initial',
+                },
+                '.ss__variant-selection__option--disabled, .ss__variant-selection__option--unavailable': {
+                    textDecoration: 'line-through',
+                    opacity: 0.5,
+                },
+            },
+        },
+    }),
+};
+export const VariantSelection = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        type: 'dropdown',
+        // global theme
+        ...globalTheme?.components?.variantSelection,
+        // props
+        ...properties,
+        ...properties.theme?.components?.variantSelection,
+    };
+    const { type, selection, disableStyles, className, style } = props;
+    const subProps = {
+        dropdown: {
+            name: `ss__variant-selection__dropdown--${selection.field}`,
+            className: 'ss__variant-selection__dropdown',
+            label: selection.label || selection.field,
+            // global theme
+            ...globalTheme?.components?.dropdown,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+        icon: {
+            // default props
+            name: `ss__variant-selection__icon--${selection.field}`,
+            className: 'ss__variant-selection__icon',
+            size: '12px',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+        list: {
+            name: `ss__variant-selection__list--${selection.field}`,
+            titleText: selection.field,
+            className: 'ss__variant-selection__list',
+            multiSelect: false,
+            hideOptionCheckboxes: true,
+            onSelect: (e, option) => selection.select(option.value),
+            selected: selection.selected,
+            // global theme
+            ...globalTheme?.components?.list,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+        swatches: {
+            name: `ss__variant-selection__swatches--${selection.field}`,
+            className: 'ss__variant-selection__swatches',
+            onSelect: (e, option) => selection.select(option.value),
+            selected: selection.selected,
+            // global theme
+            ...globalTheme?.components?.swatches,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.variantSelection(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return selection.values.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__variant-selection', `ss__variant-selection--${type}`, `ss__variant-selection--${selection.field}`, className) }, (() => {
+            switch (type) {
+                case 'dropdown':
+                    return (jsx(Fragment, null, (() => {
+                        //todo prettify the button
+                        const Button = (props) => {
+                            const { open } = props;
+                            return (jsx(Fragment, null,
+                                jsx("div", { className: "ss__dropdown__button-wrapper" },
+                                    jsx("span", { className: "ss__dropdown__button-wrapper__label" }, selection.label),
+                                    selection.selected ? (jsx("span", { className: "ss__dropdown__button-wrapper__selection" },
+                                        "(",
+                                        selection.selected.value,
+                                        ")")) : (jsx(Fragment, null))),
+                                jsx(Icon, { icon: open ? 'angle-up' : 'angle-down', ...subProps.icon })));
+                        };
+                        return (jsx(Dropdown, { button: jsx(Button, null), ...subProps.dropdown },
+                            jsx("div", { className: "ss__variant-selection__options" }, selection.values.map((val) => {
+                                const selected = selection.selected?.value == val.value;
+                                return (jsx("div", { className: classnames(`ss__variant-selection__option`, {
+                                        'ss__variant-selection__option--selected': selected,
+                                        'ss__variant-selection__option--disabled': val.disabled,
+                                        'ss__variant-selection__option--unavailable': val.available === false,
+                                    }), onClick: () => !val.disabled && selection.select(val.value) }, val.label));
+                            }))));
+                    })()));
+                case 'list':
+                    return (jsx(Fragment, null, (() => {
+                        return jsx(List, { ...subProps.list, options: selection.values });
+                    })()));
+                case 'swatches':
+                    return (jsx(Fragment, null, (() => {
+                        return jsx(Swatches, { ...subProps.swatches, options: selection.values });
+                    })()));
+            }
+        })()))) : (jsx(Fragment, null));
+});

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

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

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

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

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

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

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;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAsJ5F,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAodpE,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,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,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
+{"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;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAsJ5F,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAidpE,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,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,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}

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

@@ -210,9 +210,6 @@ export const Autocomplete = observer((properties) => {
                 columns: 3,
                 onClick: facetClickEvent,
             },
-            result: {
-                hideBadge: true,
-            },
         },
     };
     const displaySettings = useDisplaySettings(breakpoints) || {};

package/dist/esm/hooks/index.d.ts

@@ -5,4 +5,5 @@ export * from './useIntersection';
 export * from './useDisplaySettings';
 export * from './useA11y';
 export * from './useDeepCompareEffect';
+export * from './useComponent';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC"}

package/dist/esm/hooks/index.js

@@ -5,3 +5,4 @@ export * from './useIntersection';
 export * from './useDisplaySettings';
 export * from './useA11y';
 export * from './useDeepCompareEffect';
+export * from './useComponent';

package/dist/esm/hooks/useComponent.d.ts

@@ -0,0 +1,4 @@
+import type { FunctionalComponent } from 'preact';
+import { ComponentMap } from '../types';
+export declare const useComponent: (map: ComponentMap, name: string) => undefined | FunctionalComponent<any>;
+//# sourceMappingURL=useComponent.d.ts.map

package/dist/esm/hooks/useComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponent.d.ts","sourceRoot":"","sources":["../../../src/hooks/useComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,YAAY,QAAS,YAAY,QAAQ,MAAM,KAAG,SAAS,GAAG,oBAAoB,GAAG,CAkBjG,CAAC"}

package/dist/esm/hooks/useComponent.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'preact/hooks';
+export const useComponent = (map, name) => {
+    const [importedComponent, setImportedComponent] = useState(undefined);
+    useEffect(() => {
+        const importFn = map[name];
+        if (importFn && typeof importFn === 'function') {
+            const componentFn = importFn();
+            if (componentFn instanceof Promise) {
+                componentFn.then((component) => {
+                    setImportedComponent(() => component);
+                });
+            }
+            else {
+                setImportedComponent(() => componentFn);
+            }
+        }
+    }, []);
+    return importedComponent;
+};

package/dist/esm/index.d.ts

@@ -1,4 +1,7 @@
-export * from './components/Atoms/Badge';
+export * from './components/Atoms/BadgeImage';
+export * from './components/Atoms/BadgePill';
+export * from './components/Atoms/BadgeRectangle';
+export * from './components/Atoms/BadgeText';
 export * from './components/Atoms/Breadcrumbs';
 export * from './components/Atoms/Button';
 export * from './components/Atoms/Dropdown';
@@ -12,6 +15,7 @@ export * from './components/Atoms/Price';
 export * from './components/Atoms/Skeleton';
 export * from './components/Trackers/Recommendation/ResultTracker';
 export * from './components/Trackers/Recommendation/ProfileTracker';
+export * from './components/Molecules/CalloutBadge';
 export * from './components/Molecules/Carousel';
 export * from './components/Molecules/Checkbox';
 export * from './components/Molecules/ErrorHandler';
@@ -19,12 +23,17 @@ export * from './components/Molecules/FacetGridOptions';
 export * from './components/Molecules/FacetHierarchyOptions';
 export * from './components/Molecules/FacetListOptions';
 export * from './components/Molecules/FacetPaletteOptions';
+export * from './components/Molecules/FacetSlider';
 export * from './components/Molecules/Filter';
+export * from './components/Molecules/Grid';
+export * from './components/Molecules/List';
+export * from './components/Molecules/OverlayBadge';
 export * from './components/Molecules/Pagination';
 export * from './components/Molecules/Result';
 export * from './components/Molecules/Select';
 export * from './components/Molecules/Slideout';
-export * from './components/Molecules/FacetSlider';
+export * from './components/Molecules/Swatches';
+export * from './components/Molecules/VariantSelection';
 export * from './components/Organisms/Autocomplete';
 export * from './components/Organisms/BranchOverride';
 export * from './components/Organisms/Facet';

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AAGpE,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AAGpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC"}

package/dist/esm/index.js

@@ -1,5 +1,8 @@
 // ATOMS
-export * from './components/Atoms/Badge';
+export * from './components/Atoms/BadgeImage';
+export * from './components/Atoms/BadgePill';
+export * from './components/Atoms/BadgeRectangle';
+export * from './components/Atoms/BadgeText';
 export * from './components/Atoms/Breadcrumbs';
 export * from './components/Atoms/Button';
 export * from './components/Atoms/Dropdown';
@@ -14,6 +17,7 @@ export * from './components/Atoms/Skeleton';
 export * from './components/Trackers/Recommendation/ResultTracker';
 export * from './components/Trackers/Recommendation/ProfileTracker';
 // MOLECULES
+export * from './components/Molecules/CalloutBadge';
 export * from './components/Molecules/Carousel';
 export * from './components/Molecules/Checkbox';
 export * from './components/Molecules/ErrorHandler';
@@ -21,12 +25,17 @@ export * from './components/Molecules/FacetGridOptions';
 export * from './components/Molecules/FacetHierarchyOptions';
 export * from './components/Molecules/FacetListOptions';
 export * from './components/Molecules/FacetPaletteOptions';
+export * from './components/Molecules/FacetSlider';
 export * from './components/Molecules/Filter';
+export * from './components/Molecules/Grid';
+export * from './components/Molecules/List';
+export * from './components/Molecules/OverlayBadge';
 export * from './components/Molecules/Pagination';
 export * from './components/Molecules/Result';
 export * from './components/Molecules/Select';
 export * from './components/Molecules/Slideout';
-export * from './components/Molecules/FacetSlider';
+export * from './components/Molecules/Swatches';
+export * from './components/Molecules/VariantSelection';
 // ORGANISMS
 export * from './components/Organisms/Autocomplete';
 export * from './components/Organisms/BranchOverride';

package/dist/esm/types.d.ts

@@ -1,12 +1,31 @@
-import { RenderableProps } from 'preact';
+/// <reference types="react" />
+import { FunctionalComponent, RenderableProps } from 'preact';
 import { SerializedStyles } from '@emotion/react';
 import { Theme } from './providers/theme';
+import { IconProps } from './components/Atoms/Icon';
+import type { UrlManager } from '@searchspring/snap-url-manager';
 export interface ComponentProps extends RenderableProps<any> {
     className?: string;
     disableStyles?: boolean;
     style?: string | Record<string, any>;
     theme?: Theme;
 }
+export type ListOption = {
+    value: string | number;
+    label?: string;
+    disabled?: boolean;
+    available?: boolean;
+    default?: boolean;
+    icon?: string | Partial<IconProps>;
+    url?: UrlManager;
+};
+export type SwatchOption = ListOption & {
+    backgroundImageUrl?: string;
+    background?: string;
+};
+export type ComponentMap = {
+    [key: string]: (args?: any) => FunctionalComponent<RenderableProps<any>> | Promise<(args?: any) => React.ReactElement>;
+};
 export declare enum Layout {
     GRID = "grid",
     LIST = "list"

package/dist/esm/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,GAAG,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC;CACd;AAED,oBAAY,MAAM;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;CACb;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;AAGnD,oBAAY,SAAS;IACpB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,aAAa,kBAAkB;CAC/B;AAGD,oBAAY,YAAY;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,SAAS,cAAc;CACvB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEjE,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,GAAG,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC;CACd;AAED,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,UAAU,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,mBAAmB,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC;CACvH,CAAC;AAEF,oBAAY,MAAM;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;CACb;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;AAGnD,oBAAY,SAAS;IACpB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,aAAa,kBAAkB;CAC/B;AAGD,oBAAY,YAAY;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,SAAS,cAAc;CACvB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC"}

package/dist/esm/utilities/defaultBadgeComponentMap.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMap } from '../types';
+export declare const defaultBadgeComponentMap: ComponentMap;
+//# sourceMappingURL=defaultBadgeComponentMap.d.ts.map

package/dist/esm/utilities/defaultBadgeComponentMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultBadgeComponentMap.d.ts","sourceRoot":"","sources":["../../../src/utilities/defaultBadgeComponentMap.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,wBAAwB,EAAE,YAKtC,CAAC"}

package/dist/esm/utilities/defaultBadgeComponentMap.js

@@ -0,0 +1,10 @@
+import { BadgeText } from '../components/Atoms/BadgeText';
+import { BadgePill } from '../components/Atoms/BadgePill';
+import { BadgeRectangle } from '../components/Atoms/BadgeRectangle';
+import { BadgeImage } from '../components/Atoms/BadgeImage';
+export const defaultBadgeComponentMap = {
+    BadgeText: () => BadgeText,
+    BadgePill: () => BadgePill,
+    BadgeRectangle: () => BadgeRectangle,
+    BadgeImage: () => BadgeImage,
+};

package/dist/esm/utilities/index.d.ts

@@ -4,4 +4,5 @@ export * from './componentArgs';
 export * from './sprintf';
 export * from './LightenDarkenColor';
 export * from './shiftColor';
+export * from './defaultBadgeComponentMap';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/utilities/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC"}

package/dist/esm/utilities/index.js

@@ -4,3 +4,4 @@ export * from './componentArgs';
 export * from './sprintf';
 export * from './LightenDarkenColor';
 export * from './shiftColor';
+export * from './defaultBadgeComponentMap';

package/dist/esm/utilities/snapify.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapify.d.ts","sourceRoot":"","sources":["../../../src/utilities/snapify.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAUnH,OAAO,KAAK,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,+BAA+B,CAAC;AAkB1I,qBAAa,OAAO;IACnB,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,8BAA8B,GAAG,wBAAwB;IAkBvF,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,4BAA4B,GAAG,sBAAsB;IAmBjF,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,sBAAsB,GAAG,gBAAgB;CAkB/D"}
+{"version":3,"file":"snapify.d.ts","sourceRoot":"","sources":["../../../src/utilities/snapify.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAUnH,OAAO,KAAK,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,+BAA+B,CAAC;AAqB1I,qBAAa,OAAO;IACnB,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,8BAA8B,GAAG,wBAAwB;IAkBvF,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,4BAA4B,GAAG,sBAAsB;IAmBjF,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,sBAAsB,GAAG,gBAAgB;CAkB/D"}

package/dist/esm/utilities/snapify.js

@@ -1,3 +1,4 @@
+import { configure as configureMobx } from 'mobx';
 import { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
 import { Client } from '@searchspring/snap-client';
 import { SearchStore, AutocompleteStore, RecommendationStore } from '@searchspring/snap-store-mobx';
@@ -6,6 +7,8 @@ import { EventManager } from '@searchspring/snap-event-manager';
 import { Profiler } from '@searchspring/snap-profiler';
 import { Logger } from '@searchspring/snap-logger';
 import { Tracker } from '@searchspring/snap-tracker';
+// configure MobX
+configureMobx({ useProxies: 'never', isolateGlobalState: true, enforceActions: 'never' });
 const controllers = {};
 const client = {
     globals: { siteId: '8uyt2m' },