@searchspring/snap-preact-components 0.55.0 → 0.56.0

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

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/Molecules/Grid/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("./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/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"}