@searchspring/snap-preact-components 0.54.0 → 0.56.0

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

@@ -21,12 +21,13 @@ var mobx_react_1 = require("mobx-react");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
 var Image_1 = require("../../Atoms/Image");
-var Badge_1 = require("../../Atoms/Badge");
 var Price_1 = require("../../Atoms/Price");
 var providers_1 = require("../../../providers");
 var utilities_1 = require("../../../utilities");
 var snap_toolbox_1 = require("@searchspring/snap-toolbox");
 var types_1 = require("../../../types");
+var CalloutBadge_1 = require("../../Molecules/CalloutBadge");
+var OverlayBadge_1 = require("../../Molecules/OverlayBadge");
 var CSS = {
     result: function () {
         return (0, react_1.css)({
@@ -82,7 +83,7 @@ var CSS = {
     },
 };
 exports.Result = (0, mobx_react_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var globalTheme = (0, providers_1.useTheme)();
     var props = __assign(__assign(__assign({ 
         // default props
@@ -97,23 +98,31 @@ exports.Result = (0, mobx_react_1.observer)(function (properties) {
         })), { 
             // component theme overrides
             theme: props.theme }),
-        badge: __assign(__assign(__assign({ 
+        calloutBadge: __assign(__assign(__assign({ 
             // default props
-            className: 'ss__result__badge', content: 'Sale' }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.badge), (0, utilities_1.defined)({
+            className: 'ss__result__callout-badge' }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.calloutBadge), (0, utilities_1.defined)({
             disableStyles: disableStyles,
+            result: result,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        overlayBadge: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__result__overlay-badge' }, (_h = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _h === void 0 ? void 0 : _h.overlayBadge), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            result: result,
         })), { 
             // component theme overrides
             theme: props.theme }),
         image: __assign(__assign(__assign({ 
             // default props
-            className: 'ss__result__image', alt: core === null || core === void 0 ? void 0 : core.name, src: core === null || core === void 0 ? void 0 : core.imageUrl }, (_h = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _h === void 0 ? void 0 : _h.image), (0, utilities_1.defined)({
+            className: 'ss__result__image', alt: core === null || core === void 0 ? void 0 : core.name, src: core === null || core === void 0 ? void 0 : core.imageUrl }, (_j = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _j === void 0 ? void 0 : _j.image), (0, utilities_1.defined)({
             disableStyles: disableStyles,
             fallback: fallback,
         })), { 
             // component theme overrides
             theme: props === null || props === void 0 ? void 0 : props.theme }),
     };
-    var onSale = Boolean((core === null || core === void 0 ? void 0 : core.msrp) && core.price && (core === null || core === void 0 ? void 0 : core.msrp) * 1 > (core === null || core === void 0 ? void 0 : core.price) * 1);
     var displayName = core === null || core === void 0 ? void 0 : core.name;
     if (props.truncateTitle) {
         displayName = snap_toolbox_1.filters.truncate((core === null || core === void 0 ? void 0 : core.name) || '', props.truncateTitle.limit, props.truncateTitle.append);
@@ -132,10 +141,11 @@ exports.Result = (0, mobx_react_1.observer)(function (properties) {
                         var _a, _b;
                         onClick && onClick(e);
                         (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click(e, result);
-                    } },
-                    !hideBadge && onSale && (0, react_1.jsx)(Badge_1.Badge, __assign({}, subProps.badge)),
-                    !hideImage && (0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image)))),
+                    } }, !hideImage &&
+                    (!hideBadge ? ((0, react_1.jsx)(OverlayBadge_1.OverlayBadge, __assign({}, subProps.overlayBadge, { controller: controller }),
+                        (0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image)))) : ((0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image)))))),
             (0, react_1.jsx)("div", { className: "ss__result__details" },
+                !hideBadge && ((0, react_1.jsx)(CalloutBadge_1.CalloutBadge, __assign({}, subProps.calloutBadge, { controller: controller }))),
                 !hideTitle && ((0, react_1.jsx)("div", { className: "ss__result__details__title" },
                     (0, react_1.jsx)("a", { href: core.url, onClick: function (e) {
                             var _a, _b;

package/dist/cjs/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/cjs/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/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/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/cjs/components/Organisms/Autocomplete/Autocomplete.js

@@ -221,9 +221,6 @@ exports.Autocomplete = (0, mobx_react_1.observer)(function (properties) {
                 columns: 3,
                 onClick: facetClickEvent,
             },
-            result: {
-                hideBadge: true,
-            },
         },
     };
     var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(breakpoints) || {};

package/dist/cjs/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/cjs/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/cjs/hooks/index.js

@@ -21,3 +21,4 @@ __exportStar(require("./useIntersection"), exports);
 __exportStar(require("./useDisplaySettings"), exports);
 __exportStar(require("./useA11y"), exports);
 __exportStar(require("./useDeepCompareEffect"), exports);
+__exportStar(require("./useComponent"), exports);

package/dist/cjs/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/cjs/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/cjs/hooks/useComponent.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponent = void 0;
+var hooks_1 = require("preact/hooks");
+var useComponent = function (map, name) {
+    var _a = (0, hooks_1.useState)(undefined), importedComponent = _a[0], setImportedComponent = _a[1];
+    (0, hooks_1.useEffect)(function () {
+        var importFn = map[name];
+        if (importFn && typeof importFn === 'function') {
+            var componentFn_1 = importFn();
+            if (componentFn_1 instanceof Promise) {
+                componentFn_1.then(function (component) {
+                    setImportedComponent(function () { return component; });
+                });
+            }
+            else {
+                setImportedComponent(function () { return componentFn_1; });
+            }
+        }
+    }, []);
+    return importedComponent;
+};
+exports.useComponent = useComponent;

package/dist/cjs/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/cjs/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"}