@searchspring/snap-preact-components 0.55.0 → 0.56.1

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

@@ -0,0 +1,168 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Swatches = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var react_2 = require("react");
+var hooks_1 = require("../../../hooks");
+var Carousel_1 = require("../Carousel");
+var utilities_1 = require("../../../utilities");
+var Grid_1 = require("../Grid");
+var Image_1 = require("../../Atoms/Image");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var snap_toolbox_1 = require("@searchspring/snap-toolbox");
+var CSS = {
+    Swatches: function (_a) {
+        var _b, _c;
+        var theme = _a.theme;
+        return (0, react_1.css)({
+            marginTop: '10px',
+            '.ss__swatches__carousel__swatch': {
+                boxSizing: 'content-box',
+                cursor: 'pointer',
+                backgroundRepeat: 'no-repeat',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: "1px solid ".concat(((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#333'),
+                aspectRatio: '1/1',
+                margin: 'auto',
+                flexDirection: 'column',
+                '&.ss__swatches__carousel__swatch--selected': {
+                    border: "2px solid ".concat(((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.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,
+                },
+            },
+        });
+    },
+};
+function Swatches(properties) {
+    var _a, _b, _c, _d, _e, _f;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var 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,
+            },
+        },
+    };
+    var props = __assign(__assign(__assign({ 
+        // default props
+        type: 'carousel', hideLabels: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.swatches), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.swatches);
+    var breakpoints = props.breakpoints || (props.type == 'carousel' ? defaultCarouselBreakpoints : {});
+    var displaySettings = (0, hooks_1.useDisplaySettings)(breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        var theme_1 = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
+        props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme_1 });
+    }
+    var onSelect = props.onSelect, disabled = props.disabled, options = props.options, hideLabels = props.hideLabels, disableStyles = props.disableStyles, className = props.className, style = props.style, type = props.type, carousel = props.carousel, grid = props.grid;
+    var subProps = {
+        carousel: __assign(__assign(__assign(__assign({ 
+            // default props
+            className: 'ss__swatches__carousel', loop: false }, carousel), (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.carousel), (0, utilities_1.defined)({
+            breakpoints: breakpoints,
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+        grid: __assign(__assign(__assign(__assign({ 
+            // default props
+            className: 'ss__swatches__grid', hideLabels: hideLabels, overflowButtonInGrid: true, disableOverflowAction: true, rows: 1, columns: 6 }, grid), (_e = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _e === void 0 ? void 0 : _e.grid), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+        image: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__swatches__image' }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.image), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+    };
+    var selected = props.selected;
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.Swatches({ theme: theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    // selection state
+    var _g = (0, react_2.useState)(selected || undefined), selection = _g[0], setSelection = _g[1];
+    var makeSelection = function (e, option) {
+        if (onSelect) {
+            onSelect(e, option);
+        }
+        setSelection(option);
+    };
+    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__swatches', className) }), type == 'carousel' ? ((0, react_1.jsx)(Carousel_1.Carousel, __assign({}, subProps.carousel), options.map(function (option) {
+            var label = option.label;
+            var selected = (selection === null || selection === void 0 ? void 0 : selection.value) == option.value;
+            return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)("ss__swatches__carousel__swatch ss__swatches__carousel__swatch--".concat(snap_toolbox_1.filters.handleize(option.value.toString())), {
+                    'ss__swatches__carousel__swatch--selected': selected,
+                    'ss__swatches__carousel__swatch--disabled': option === null || option === void 0 ? void 0 : option.disabled,
+                    'ss__swatches__carousel__swatch--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
+                }), title: label, style: { background: option.background ? option.background : option.backgroundImageUrl ? "" : option.value }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_1.useA11y)(e); }, role: "option", "aria-selected": selected },
+                !option.background && option.backgroundImageUrl ? ((0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: option.backgroundImageUrl, alt: option.label || option.value.toString() }))) : ((0, react_1.jsx)(preact_1.Fragment, null)),
+                !hideLabels && (0, react_1.jsx)("span", { className: "ss__swatches__carousel__swatch__value" }, label || option.value)));
+        }))) : ((0, react_1.jsx)(Grid_1.Grid, __assign({}, subProps.grid, { options: options, onSelect: function (e, option) {
+                !disabled && makeSelection(e, option);
+            }, selected: selected })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
+}
+exports.Swatches = Swatches;

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

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

package/dist/cjs/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/cjs/components/Molecules/Swatches/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Swatches"), exports);

package/dist/cjs/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/cjs/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/cjs/components/Molecules/VariantSelection/VariantSelection.js

@@ -0,0 +1,146 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariantSelection = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
+var mobx_react_1 = require("mobx-react");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var List_1 = require("../List");
+var Swatches_1 = require("../Swatches");
+var Dropdown_1 = require("../../Atoms/Dropdown");
+var Icon_1 = require("../../Atoms/Icon");
+var CSS = {
+    variantSelection: function () {
+        return (0, react_1.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,
+                    },
+                },
+            },
+        });
+    },
+};
+exports.VariantSelection = (0, mobx_react_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var globalTheme = (0, providers_1.useTheme)();
+    var props = __assign(__assign(__assign({ 
+        // default props
+        type: 'dropdown' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.variantSelection), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.variantSelection);
+    var type = props.type, selection = props.selection, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var subProps = {
+        dropdown: __assign(__assign(__assign({ name: "ss__variant-selection__dropdown--".concat(selection.field), className: 'ss__variant-selection__dropdown', label: selection.label || selection.field }, (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.dropdown), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+        icon: __assign(__assign(__assign({ 
+            // default props
+            name: "ss__variant-selection__icon--".concat(selection.field), className: 'ss__variant-selection__icon', size: '12px' }, (_e = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _e === void 0 ? void 0 : _e.icon), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+        list: __assign(__assign(__assign({ name: "ss__variant-selection__list--".concat(selection.field), titleText: selection.field, className: 'ss__variant-selection__list', multiSelect: false, hideOptionCheckboxes: true, onSelect: function (e, option) { return selection.select(option.value); }, selected: selection.selected }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.list), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+        swatches: __assign(__assign(__assign({ name: "ss__variant-selection__swatches--".concat(selection.field), className: 'ss__variant-selection__swatches', onSelect: function (e, option) { return selection.select(option.value); }, selected: selection.selected }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.swatches), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+    };
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.variantSelection(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return selection.values.length ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__variant-selection', "ss__variant-selection--".concat(type), "ss__variant-selection--".concat(selection.field), className) }), (function () {
+            switch (type) {
+                case 'dropdown':
+                    return ((0, react_1.jsx)(preact_1.Fragment, null, (function () {
+                        //todo prettify the button
+                        var Button = function (props) {
+                            var open = props.open;
+                            return ((0, react_1.jsx)(preact_1.Fragment, null,
+                                (0, react_1.jsx)("div", { className: "ss__dropdown__button-wrapper" },
+                                    (0, react_1.jsx)("span", { className: "ss__dropdown__button-wrapper__label" }, selection.label),
+                                    selection.selected ? ((0, react_1.jsx)("span", { className: "ss__dropdown__button-wrapper__selection" },
+                                        "(",
+                                        selection.selected.value,
+                                        ")")) : ((0, react_1.jsx)(preact_1.Fragment, null))),
+                                (0, react_1.jsx)(Icon_1.Icon, __assign({ icon: open ? 'angle-up' : 'angle-down' }, subProps.icon))));
+                        };
+                        return ((0, react_1.jsx)(Dropdown_1.Dropdown, __assign({ button: (0, react_1.jsx)(Button, null) }, subProps.dropdown),
+                            (0, react_1.jsx)("div", { className: "ss__variant-selection__options" }, selection.values.map(function (val) {
+                                var _a;
+                                var selected = ((_a = selection.selected) === null || _a === void 0 ? void 0 : _a.value) == val.value;
+                                return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)("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: function () { return !val.disabled && selection.select(val.value); } }, val.label));
+                            }))));
+                    })()));
+                case 'list':
+                    return ((0, react_1.jsx)(preact_1.Fragment, null, (function () {
+                        return (0, react_1.jsx)(List_1.List, __assign({}, subProps.list, { options: selection.values }));
+                    })()));
+                case 'swatches':
+                    return ((0, react_1.jsx)(preact_1.Fragment, null, (function () {
+                        return (0, react_1.jsx)(Swatches_1.Swatches, __assign({}, subProps.swatches, { options: selection.values }));
+                    })()));
+            }
+        })()))) : ((0, react_1.jsx)(preact_1.Fragment, null));
+});

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

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

package/dist/cjs/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/cjs/components/Molecules/VariantSelection/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./VariantSelection"), exports);

package/dist/cjs/index.d.ts

@@ -23,13 +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/cjs/index.d.ts.map

@@ -1 +1 @@
-{"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,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,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/cjs/index.js

@@ -41,13 +41,17 @@ __exportStar(require("./components/Molecules/FacetGridOptions"), exports);
 __exportStar(require("./components/Molecules/FacetHierarchyOptions"), exports);
 __exportStar(require("./components/Molecules/FacetListOptions"), exports);
 __exportStar(require("./components/Molecules/FacetPaletteOptions"), exports);
+__exportStar(require("./components/Molecules/FacetSlider"), exports);
 __exportStar(require("./components/Molecules/Filter"), exports);
+__exportStar(require("./components/Molecules/Grid"), exports);
+__exportStar(require("./components/Molecules/List"), exports);
 __exportStar(require("./components/Molecules/OverlayBadge"), exports);
 __exportStar(require("./components/Molecules/Pagination"), exports);
 __exportStar(require("./components/Molecules/Result"), exports);
 __exportStar(require("./components/Molecules/Select"), exports);
 __exportStar(require("./components/Molecules/Slideout"), exports);
-__exportStar(require("./components/Molecules/FacetSlider"), exports);
+__exportStar(require("./components/Molecules/Swatches"), exports);
+__exportStar(require("./components/Molecules/VariantSelection"), exports);
 // ORGANISMS
 __exportStar(require("./components/Organisms/Autocomplete"), exports);
 __exportStar(require("./components/Organisms/BranchOverride"), exports);

package/dist/cjs/types.d.ts

@@ -2,12 +2,27 @@
 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>;
 };

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

@@ -1 +1 @@
-{"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;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,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"}
+{"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/cjs/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/cjs/utilities/snapify.js

@@ -37,6 +37,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Snapify = void 0;
+var mobx_1 = require("mobx");
 var snap_controller_1 = require("@searchspring/snap-controller");
 var snap_client_1 = require("@searchspring/snap-client");
 var snap_store_mobx_1 = require("@searchspring/snap-store-mobx");
@@ -45,6 +46,8 @@ var snap_event_manager_1 = require("@searchspring/snap-event-manager");
 var snap_profiler_1 = require("@searchspring/snap-profiler");
 var snap_logger_1 = require("@searchspring/snap-logger");
 var snap_tracker_1 = require("@searchspring/snap-tracker");
+// configure MobX
+(0, mobx_1.configure)({ useProxies: 'never', isolateGlobalState: true, enforceActions: 'never' });
 var controllers = {};
 var client = {
     globals: { siteId: '8uyt2m' },

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ComponentProps, ListOption, SwatchOption } from '../../../types';
+export declare function Grid(properties: GridProps): JSX.Element;
+export interface GridProps extends ComponentProps {
+    options: SwatchOption[];
+    hideLabels?: boolean;
+    multiSelect?: boolean;
+    onSelect?: (e: React.MouseEvent<HTMLElement>, option: ListOption, selected: ListOption[]) => void;
+    titleText?: string;
+    hideShowLess?: boolean;
+    selected?: ListOption | ListOption[];
+    columns?: number;
+    rows?: number;
+    gapSize?: string;
+    disableOverflowAction?: boolean;
+    overflowButton?: JSX.Element;
+    overflowButtonInGrid?: boolean;
+    onOverflowButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, status: boolean, remainder: number) => void;
+}
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Grid/Grid.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAyGtF,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAuKvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACnH"}