@searchspring/snap-preact-components 0.55.0 → 0.56.1

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/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"}

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"}