@searchspring/snap-preact-components 0.54.0 → 0.56.0

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

@@ -0,0 +1,210 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = 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 Image_1 = require("../../Atoms/Image");
+var utilities_1 = require("../../../utilities");
+var snap_toolbox_1 = require("@searchspring/snap-toolbox");
+var CSS = {
+    Grid: function (_a) {
+        var _b;
+        var _c, _d, _e;
+        var theme = _a.theme, columns = _a.columns, gapSize = _a.gapSize, disableOverflowAction = _a.disableOverflowAction;
+        return (0, react_1.css)({
+            '.ss__grid__options': {
+                display: 'flex',
+                flexFlow: 'row wrap',
+                gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+                gap: gapSize,
+                gridAutoRows: "1fr",
+                '& .ss__grid__option': (_b = {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxSizing: 'content-box',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundSize: "calc(100% / ".concat(columns, " - ").concat(2 * Math.round((columns + 2) / 2), "px)"),
+                        backgroundPosition: 'center !important',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        flex: '0 1 auto',
+                        border: "1px solid ".concat(((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#333'),
+                        textAlign: 'center',
+                        wordBreak: 'break-all',
+                        padding: '1em 0',
+                        width: "calc(100% / ".concat(columns, " - ").concat(2 * Math.round((columns + 2) / 2), "px)"),
+                        margin: "0 ".concat(gapSize, " ").concat(gapSize, " 0"),
+                        '.ss__grid__option__label': {
+                            cursor: 'pointer',
+                        }
+                    },
+                    _b[":nth-of-type(".concat(columns, "n)")] = {
+                        marginRight: '0',
+                    },
+                    _b['&.ss__grid__option--selected'] = {
+                        border: "2px solid ".concat(((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) || '#333'),
+                    },
+                    _b['&.ss__grid__option--disabled'] = {
+                        position: 'relative',
+                        opacity: '.5',
+                        cursor: 'none',
+                        pointerEvents: 'none',
+                    },
+                    _b['&.ss__grid__option--unavailable'] = {
+                        position: 'relative',
+                        opacity: '.5',
+                    },
+                    _b['&.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)',
+                    },
+                    _b['&:hover:not(.ss__grid__option--selected)'] = {
+                        cursor: 'pointer',
+                        background: ((_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.hover) || '#f8f8f8',
+                    },
+                    _b),
+                '@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',
+                },
+            },
+        });
+    },
+};
+function Grid(properties) {
+    var _a, _b, _c, _d;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var props = __assign(__assign(__assign({ 
+        // default props
+        multiSelect: false, columns: 4, gapSize: '8px' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.grid), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.grid);
+    var titleText = props.titleText, onSelect = props.onSelect, hideLabels = props.hideLabels, disableOverflowAction = props.disableOverflowAction, multiSelect = props.multiSelect, overflowButton = props.overflowButton, columns = props.columns, rows = props.rows, hideShowLess = props.hideShowLess, gapSize = props.gapSize, overflowButtonInGrid = props.overflowButtonInGrid, disabled = props.disabled, options = props.options, disableStyles = props.disableStyles, onOverflowButtonClick = props.onOverflowButtonClick, className = props.className, style = props.style;
+    var subProps = {
+        image: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__swatches__Image' }, (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.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.Grid({ theme: theme, columns: columns, gapSize: gapSize, disableOverflowAction: disableOverflowAction }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    if (selected && !Array.isArray(selected)) {
+        selected = [selected];
+    }
+    // selection state
+    var _e = (0, react_2.useState)(selected || []), selection = _e[0], setSelection = _e[1];
+    var makeSelection = function (e, option) {
+        if (multiSelect) {
+            var newArray = void 0;
+            if (selection.find(function (select) { return select.value === option.value; })) {
+                newArray = __spreadArray([], selection, true);
+                newArray.splice(newArray.findIndex(function (select) { return select.value === option.value; }), 1);
+            }
+            else {
+                newArray = __spreadArray(__spreadArray([], selection, true), [option], false);
+            }
+            if (onSelect) {
+                onSelect(e, option, newArray);
+            }
+            setSelection(newArray);
+        }
+        else {
+            if (onSelect) {
+                onSelect(e, option, [option]);
+            }
+            setSelection([option]);
+        }
+    };
+    var limit = rows && columns ? columns * rows : options.length;
+    var remainder = Math.max(0, options.length - (limit - (overflowButtonInGrid ? 1 : 0)));
+    var _f = (0, react_2.useState)(remainder), limited = _f[0], setLimited = _f[1];
+    var OverflowButtonElem = function () {
+        var showButton = hideShowLess ? (!limited ? false : true) : true;
+        return showButton && remainder > 0 && options.length !== limit ? ((0, react_1.jsx)("div", { className: "ss__grid__show-more-wrapper ".concat(overflowButtonInGrid ? 'ss__grid__option' : ''), onClick: function (e) {
+                !disableOverflowAction && setLimited(!limited);
+                onOverflowButtonClick && onOverflowButtonClick(e, Boolean(limited), remainder);
+            } }, overflowButton ? ((0, utilities_1.cloneWithProps)(overflowButton, { limited: limited, remainder: remainder })) : limited ? ((0, react_1.jsx)("span", { className: 'ss__grid__show-more' }, "+ ".concat(remainder))) : remainder ? ((0, react_1.jsx)("span", { className: 'ss__grid__show-less' }, "Less")) : ((0, react_1.jsx)(preact_1.Fragment, null)))) : ((0, react_1.jsx)(preact_1.Fragment, null));
+    };
+    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__grid', disabled ? 'ss__grid--disabled' : '', className) }),
+            titleText && (0, react_1.jsx)("h5", { className: "ss__grid__title" }, titleText),
+            (0, react_1.jsx)("div", { className: "ss__grid__options" },
+                options.map(function (option, idx) {
+                    var selected = selection.some(function (select) { return select.value == option.value; });
+                    if (!limited || options.length == limit || idx < limit - (overflowButtonInGrid ? 1 : 0)) {
+                        return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)("ss__grid__option ss__grid__option--".concat(snap_toolbox_1.filters.handleize(option.value.toString())), {
+                                'ss__grid__option--selected': selected,
+                                'ss__grid__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
+                                'ss__grid__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
+                            }), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : 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); }, title: option.label, 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)("label", { className: "ss__grid__option__label" }, option.label || option.value) : (0, react_1.jsx)(preact_1.Fragment, null)));
+                    }
+                }),
+                overflowButtonInGrid ? (0, react_1.jsx)(OverflowButtonElem, null) : (0, react_1.jsx)(preact_1.Fragment, null)),
+            !overflowButtonInGrid ? (0, react_1.jsx)(OverflowButtonElem, null) : (0, react_1.jsx)(preact_1.Fragment, null)))) : ((0, react_1.jsx)(preact_1.Fragment, null));
+}
+exports.Grid = Grid;

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

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

package/dist/cjs/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/cjs/components/{Atoms/Badge → Molecules/Grid}/index.js

@@ -14,4 +14,4 @@ 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("./Badge"), exports);
+__exportStar(require("./Grid"), exports);

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

@@ -0,0 +1,158 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = 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 utilities_1 = require("../../../utilities");
+var react_2 = require("react");
+var Checkbox_1 = require("../Checkbox");
+var hooks_1 = require("../../../hooks");
+var Icon_1 = require("../../Atoms/Icon");
+var snap_toolbox_1 = require("@searchspring/snap-toolbox");
+var CSS = {
+    List: function (_a) {
+        var horizontal = _a.horizontal;
+        return (0, react_1.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',
+            },
+        });
+    },
+};
+function List(properties) {
+    var _a, _b, _c;
+    var globalTheme = (0, providers_1.useTheme)();
+    var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.list), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.list);
+    var titleText = props.titleText, onSelect = props.onSelect, native = props.native, multiSelect = props.multiSelect, hideOptionLabels = props.hideOptionLabels, hideOptionIcons = props.hideOptionIcons, hideOptionCheckboxes = props.hideOptionCheckboxes, disabled = props.disabled, options = props.options, requireSelection = props.requireSelection, disableStyles = props.disableStyles, className = props.className, style = props.style, horizontal = props.horizontal;
+    var selected = props.selected;
+    var subProps = {
+        checkbox: __assign(__assign({ 
+            // default props
+            native: native }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+        icon: __assign(__assign({ 
+            // default props
+            className: 'ss__list__option__icon' }, (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.List({ horizontal: horizontal }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    if (selected && !Array.isArray(selected)) {
+        selected = [selected];
+    }
+    // selection state
+    var _d = (0, react_2.useState)(selected || []), selection = _d[0], setSelection = _d[1];
+    var makeSelection = function (e, option) {
+        var newArray;
+        if (multiSelect) {
+            if (selection.find(function (select) { return select.value === option.value; })) {
+                newArray = __spreadArray([], selection, true);
+                newArray.splice(newArray.findIndex(function (select) { return select.value === option.value; }), 1);
+                if (newArray.length == 0 && requireSelection) {
+                    newArray = [option];
+                }
+            }
+            else {
+                newArray = __spreadArray(__spreadArray([], selection, true), [option], false);
+            }
+        }
+        else {
+            if (!requireSelection && selection.find(function (select) { return select.value === option.value; })) {
+                newArray = [];
+            }
+            else {
+                newArray = [option];
+            }
+        }
+        if (onSelect) {
+            onSelect(e, option, newArray);
+        }
+        setSelection(newArray);
+    };
+    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__list', disabled ? 'ss__list--disabled' : '', className) }),
+            titleText && (0, react_1.jsx)("h5", { className: "ss__list__title" }, titleText),
+            (0, react_1.jsx)("ul", { className: "ss__list__options", role: "listbox", "aria-label": titleText }, options.map(function (option) {
+                var selected = selection.some(function (select) { return select.value == option.value; });
+                return ((0, react_1.jsx)("li", { className: (0, classnames_1.default)("ss__list__option ss__list__option--".concat(snap_toolbox_1.filters.handleize(option.value.toString())), {
+                        'ss__list__option--selected': selected,
+                        'ss__list__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
+                        'ss__list__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
+                    }), ref: function (e) { return (0, hooks_1.useA11y)(e); }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, title: option.label, role: "option", "aria-selected": selected },
+                    !hideOptionCheckboxes && (0, react_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: selected, disableA11y: true })),
+                    option.icon && !hideOptionIcons && ((0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof option.icon == 'string' ? { icon: option.icon } : option.icon)))),
+                    !hideOptionLabels && (option.label || !option.icon) && ((0, react_1.jsx)("label", { className: "ss__list__option__label" }, option.label || option.value))));
+            }))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
+}
+exports.List = List;

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

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

package/dist/cjs/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/cjs/components/Molecules/List/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("./List"), exports);

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

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

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

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

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

@@ -0,0 +1,118 @@
+"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.OverlayBadge = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var hooks_1 = require("../../../hooks");
+var CSS = {
+    OverlayBadge: function (_a) {
+        var _b;
+        var grid = _a.grid;
+        var gridProperties = {};
+        if ((grid === null || grid === void 0 ? void 0 : grid.length) && ((_b = grid[0]) === null || _b === void 0 ? void 0 : _b.length)) {
+            var gridTemplateAreas = grid.map(function (row) { return "\"".concat(row.join(' '), "\""); }).join(' ');
+            var columns = grid[0].length;
+            gridProperties = {
+                gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+                gridTemplateAreas: gridTemplateAreas,
+            };
+        }
+        return (0, react_1.css)({
+            position: 'relative',
+            '& .ss__overlay-badge__grid-wrapper': __assign({ display: 'grid', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, gridProperties),
+        });
+    },
+    BadgePositioning: function (_a) {
+        var index = _a.index, section = _a.section, tag = _a.tag;
+        return (0, react_1.css)({
+            position: 'absolute',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: section == 'right' ? 'flex-end' : 'flex-start',
+            right: section == 'right' ? 0 : undefined,
+            gap: '0.5em',
+            gridArea: tag,
+            boxSizing: 'border-box',
+            zIndex: Math.max(100 - index, 1),
+            width: '100%',
+            height: '100%',
+        });
+    },
+};
+exports.OverlayBadge = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var globalTheme = (0, providers_1.useTheme)();
+    var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.overlayBadge), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.overlayBadge);
+    var result = props.result, children = props.children, controller = props.controller, renderEmpty = props.renderEmpty, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var styling = {};
+    if (!children) {
+        (_d = controller === null || controller === void 0 ? void 0 : controller.log) === null || _d === void 0 ? void 0 : _d.warn('OverlayBadge component must have children');
+        return (0, react_1.jsx)(preact_1.Fragment, null);
+    }
+    var limit = 1;
+    var meta = (_e = controller === null || controller === void 0 ? void 0 : controller.store) === null || _e === void 0 ? void 0 : _e.meta;
+    var group = 'overlay';
+    var grid = (_h = (_g = (_f = meta === null || meta === void 0 ? void 0 : meta.badges) === null || _f === void 0 ? void 0 : _f.groups) === null || _g === void 0 ? void 0 : _g[group]) === null || _h === void 0 ? void 0 : _h.grid;
+    var badgeComponentMap = __assign(__assign({}, utilities_1.defaultBadgeComponentMap), props.componentMap);
+    var sections = (_l = (_k = (_j = meta === null || meta === void 0 ? void 0 : meta.badges) === null || _j === void 0 ? void 0 : _j.groups) === null || _k === void 0 ? void 0 : _k[group]) === null || _l === void 0 ? void 0 : _l.sections;
+    // build locations and filter out the locations that have no badges in them to prevent rendering
+    var locations = sections === null || sections === void 0 ? void 0 : sections.map(function (section) {
+        var _a, _b;
+        var sectionSlots = (_b = (_a = meta === null || meta === void 0 ? void 0 : meta.data) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.locations[section];
+        var slots = sectionSlots === null || sectionSlots === void 0 ? void 0 : sectionSlots.map(function (slot) {
+            var _a;
+            return ({
+                tag: slot.tag,
+                name: slot.name,
+                badges: (_a = result === null || result === void 0 ? void 0 : result.badges) === null || _a === void 0 ? void 0 : _a.atLocation("".concat(section, "/").concat(slot.tag)).slice(0, limit),
+            });
+        }).filter(function (slot) { return slot.badges.length; });
+        return {
+            section: section,
+            slots: slots,
+        };
+    }).filter(function (location) { var _a; return (_a = location.slots) === null || _a === void 0 ? void 0 : _a.length; });
+    if (!disableStyles) {
+        styling.css = [CSS.OverlayBadge(__assign(__assign({}, props), { grid: grid })), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    if (renderEmpty || (locations === null || locations === void 0 ? void 0 : locations.length)) {
+        return ((0, react_1.jsx)(providers_1.CacheProvider, null,
+            (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__overlay-badge', className) }),
+                (0, react_1.jsx)("div", { className: "ss__overlay-badge__grid-wrapper" }, locations.map(function (location, index) {
+                    var _a;
+                    return (_a = location.slots) === null || _a === void 0 ? void 0 : _a.map(function (slot) {
+                        return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__overlay-badge__grid-wrapper__slot', "ss__overlay-badge__grid-wrapper__slot--".concat(slot.tag)), css: [CSS.BadgePositioning({ tag: slot.tag, section: location.section, index: index })] }, slot.badges.map(function (badge) {
+                            var BadgeComponent = (0, hooks_1.useComponent)(badgeComponentMap, badge.component);
+                            if (!BadgeComponent) {
+                                return (0, react_1.jsx)(preact_1.Fragment, null);
+                            }
+                            return (0, react_1.jsx)(BadgeComponent, __assign({}, badge, badge.parameters));
+                        })));
+                    });
+                })),
+                children)));
+    }
+    return (0, react_1.jsx)(preact_1.Fragment, null, children);
+});

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

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

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

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

package/dist/cjs/components/Molecules/OverlayBadge/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("./OverlayBadge"), exports);

package/dist/cjs/components/Molecules/Result/Result.d.ts.map

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