@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/components/Molecules/Filter/Filter.js

@@ -0,0 +1,94 @@
+"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.Filter = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var Button_1 = require("../../Atoms/Button");
+var Icon_1 = require("../../Atoms/Icon");
+var hooks_1 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var defaultStyles = function (_a) {
+    return (0, react_1.css)({
+        textDecoration: 'none',
+        display: 'inline-flex',
+        '& .ss__filter__button': {
+            alignItems: 'center',
+            '& .ss__filter__button__icon': {
+                margin: '0 5px 0 0',
+            },
+        },
+        '& .ss__filter__label': {
+            marginRight: '5px',
+            marginLeft: '5px',
+            fontWeight: 'bold',
+        },
+    });
+};
+// TODO: look into urlManager and how it connects in this case, left the href out for the time being
+exports.Filter = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('filter', globalTheme, defaultProps, properties);
+    var filter = props.filter, facetLabel = props.facetLabel, valueLabel = props.valueLabel, url = props.url, hideFacetLabel = props.hideFacetLabel, onClick = props.onClick, icon = props.icon, separator = props.separator, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var link = ((_a = filter === null || filter === void 0 ? void 0 : filter.url) === null || _a === void 0 ? void 0 : _a.link) || (url === null || url === void 0 ? void 0 : url.link);
+    var value = (filter === null || filter === void 0 ? void 0 : filter.value.label) || valueLabel;
+    var label = (filter === null || filter === void 0 ? void 0 : filter.facet.label) || facetLabel;
+    var subProps = {
+        button: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__filter__button', disableA11y: true }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        icon: __assign(__assign({ 
+            // default props
+            icon: 'close-thin', internalClassName: 'ss__filter__button__icon', size: '10px' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            icon: icon,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    var defaultLang = {
+        filter: {
+            attributes: {
+                'aria-label': !label ? value : "remove selected ".concat(label, " filter ").concat(value),
+            },
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_1.useLang)(lang, {
+        label: label,
+        value: value,
+    });
+    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("a", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter', className, internalClassName), onClick: function (e) {
+                (link === null || link === void 0 ? void 0 : link.onClick) && link.onClick(e);
+                onClick && onClick(e);
+            }, href: link === null || link === void 0 ? void 0 : link.href, tabIndex: 0 }, (_b = mergedLang.filter) === null || _b === void 0 ? void 0 : _b.all, { children: (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({}, subProps.button, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon))), !hideFacetLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__filter__label", children: [label, separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__label__separator", children: separator })] })), (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__value", children: value })] })) })) })) : null;
+});

package/dist/cjs/components/src/components/Molecules/Filter/index.d.ts

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

package/dist/cjs/components/src/components/Molecules/Filter/index.d.ts.map

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

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

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

@@ -0,0 +1,37 @@
+import { ComponentProps, ListOption, SwatchOption } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare function Grid(properties: GridProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export type GridProps = {
+    lang?: Partial<GridLang>;
+} & GridTemplatesLegalProps & ComponentProps<GridProps>;
+export type GridTemplatesLegalProps = {
+    options: SwatchOption[];
+    hideLabels?: boolean;
+    multiSelect?: boolean;
+    onSelect?: (e: React.MouseEvent<HTMLElement>, option: ListOption, selected: ListOption[]) => void;
+    titleText?: string;
+    disabled?: boolean;
+    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;
+    disableA11y?: boolean;
+};
+export interface GridLang {
+    showMoreText: Lang<{
+        limited: boolean;
+        remainder: number;
+        overflowButtonInGrid: boolean;
+    }>;
+    showLessText: Lang<{
+        limited: boolean;
+        remainder: number;
+        overflowButtonInGrid: boolean;
+    }>;
+}
+//# sourceMappingURL=Grid.d.ts.map

package/dist/cjs/components/src/components/Molecules/Grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Grid/Grid.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AAyHxD,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAyMzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,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,QAAQ,CAAC,EAAE,OAAO,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;IACnH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;CACH"}

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

@@ -0,0 +1,252 @@
+"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 = Grid;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("@emotion/react");
+var hooks_1 = require("preact/hooks");
+var classnames_1 = __importDefault(require("classnames"));
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var providers_1 = require("../../../providers");
+var hooks_2 = require("../../../hooks");
+var Image_1 = require("../../Atoms/Image");
+var utilities_1 = require("../../../utilities");
+var color_1 = __importDefault(require("color"));
+var defaultStyles = function (_a) {
+    var _b;
+    var _c, _d, _e, _f;
+    var gapSize = _a.gapSize, columns = _a.columns, theme = _a.theme, 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(((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.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__inner': {
+                        aspectRatio: '1/1',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        margin: 'auto',
+                        height: '100%',
+                        '.ss__image': {
+                            aspectRatio: '1/1',
+                        },
+                    },
+                    '.ss__grid__option__label': {
+                        cursor: 'pointer',
+                    }
+                },
+                _b[":nth-of-type(".concat(columns, "n)")] = {
+                    marginRight: '0',
+                },
+                _b['&.ss__grid__option--selected'] = {
+                    border: "2px solid ".concat(((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _e === void 0 ? void 0 : _e.colors) === null || _f === void 0 ? void 0 : _f.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['&.ss__grid__option--dark'] = {
+                    color: '#fff',
+                },
+                _b['&:hover:not(.ss__grid__option--selected)'] = {
+                    cursor: 'pointer',
+                },
+                _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': {
+            '&:not(.ss__grid__option)': {
+                margin: '8px',
+            },
+            '&:hover': {
+                cursor: disableOverflowAction ? 'initial !important' : 'pointer !important',
+            },
+        },
+    });
+};
+function Grid(properties) {
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        // default props
+        multiSelect: false,
+        columns: 4,
+        gapSize: '8px',
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('grid', globalTheme, defaultProps, properties);
+    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, overflowButtonInGrid = props.overflowButtonInGrid, disabled = props.disabled, options = props.options, disableStyles = props.disableStyles, onOverflowButtonClick = props.onOverflowButtonClick, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, disableA11y = props.disableA11y;
+    var subProps = {
+        image: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__grid__image' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var selected = props.selected;
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    if (selected && !Array.isArray(selected)) {
+        selected = [selected];
+    }
+    // selection state
+    var _a = (0, hooks_1.useState)(selected || []), selection = _a[0], setSelection = _a[1];
+    // original selection state
+    var originalSelected = (0, hooks_1.useState)(selected || [])[0];
+    // reset selection if 'selected' prop changes
+    try {
+        if (selected) {
+            var originalSelectedstr = JSON.stringify(originalSelected);
+            var selectedstr = JSON.stringify(selected);
+            var selectionstr = JSON.stringify(selection);
+            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
+                setSelection(selected);
+            }
+        }
+    }
+    catch (e) {
+        // noop
+    }
+    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 _b = (0, hooks_1.useState)(!!remainder), limited = _b[0], setLimited = _b[1];
+    var OverflowButtonElem = function () {
+        var showButton = hideShowLess ? limited : true;
+        //initialize lang
+        var defaultLang = {
+            showMoreText: {
+                value: overflowButtonInGrid ? "+ ".concat(remainder) : 'Show More',
+            },
+            showLessText: {
+                value: overflowButtonInGrid ? "- ".concat(remainder) : 'Show Less',
+            },
+        };
+        //deep merge with props.lang
+        var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+        var mergedLang = (0, hooks_2.useLang)(lang, {
+            limited: limited,
+            remainder: remainder,
+        });
+        return showButton && remainder > 0 && options.length !== limit ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__grid__show-more-wrapper ".concat(overflowButtonInGrid ? 'ss__grid__option' : ''), onClick: function (e) {
+                !disableOverflowAction && setLimited(!limited);
+                onOverflowButtonClick && onOverflowButtonClick(e, Boolean(limited), remainder);
+            }, role: 'button', ref: function (e) { return (!disableA11y && !disableOverflowAction ? (0, hooks_2.useA11y)(e) : null); } }, (limited ? mergedLang.showMoreText.attributes : mergedLang.showLessText.attributes), { children: overflowButton ? ((0, utilities_1.cloneWithProps)(overflowButton, { limited: limited, remainder: remainder, treePath: treePath })) : limited ? ((0, jsx_runtime_1.jsx)("span", __assign({ className: 'ss__grid__show-more' }, mergedLang.showMoreText.value))) : remainder ? ((0, jsx_runtime_1.jsx)("span", __assign({ className: 'ss__grid__show-less' }, mergedLang.showLessText.value))) : null }))) : null;
+    };
+    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__grid', disabled ? 'ss__grid--disabled' : '', className, internalClassName), children: [titleText && (0, jsx_runtime_1.jsx)("h5", { className: "ss__grid__title", children: titleText }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__grid__options", children: [options.map(function (option, idx) {
+                            var selected = selection.some(function (select) { return select.value == option.value; });
+                            var isDark = false;
+                            try {
+                                var color = new color_1.default(option.background ? option.background.toLowerCase() : option.backgroundImageUrl ? "" : option.value.toString().toLowerCase());
+                                isDark = color.isDark();
+                            }
+                            catch (err) { }
+                            if (!limited || options.length == limit || idx < limit - (overflowButtonInGrid ? 1 : 0)) {
+                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("ss__grid__option", {
+                                        '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,
+                                        'ss__grid__option--dark': isDark,
+                                    }), onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_2.useA11y)(e); }, title: option.label || option.value.toString(), role: "option", "aria-selected": selected, "aria-disabled": option.disabled, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("ss__grid__option__inner", "ss__grid__option__inner--".concat(snap_toolbox_1.filters.handleize(option.value.toString()))), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : option.value }, children: [!option.background && option.backgroundImageUrl ? ((0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: option.backgroundImageUrl, alt: option.label || option.value.toString() }))) : null, !hideLabels ? (0, jsx_runtime_1.jsx)("label", { className: "ss__grid__option__label", children: option.label || option.value }) : null] }) }));
+                            }
+                        }), overflowButtonInGrid ? (0, jsx_runtime_1.jsx)(OverflowButtonElem, {}) : null] }), !overflowButtonInGrid ? (0, jsx_runtime_1.jsx)(OverflowButtonElem, {}) : null] })) })) : null;
+}

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

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

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

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

package/dist/cjs/components/src/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/src/components/Molecules/LayoutSelector/LayoutSelector.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ListOption } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const LayoutSelector: ((properties: LayoutSelectorProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type LayoutSelectorProps = {
+    lang?: Partial<LayoutSelectorLang>;
+    options?: ListOption[];
+    selected?: ListOption;
+} & LayoutSelectorTemplatesLegalProps & ComponentProps<LayoutSelectorProps>;
+export type LayoutSelectorTemplatesLegalProps = {
+    onSelect?: (e: React.MouseEvent<HTMLElement> | React.ChangeEvent<HTMLElement>, option?: ListOption) => void;
+    label?: string;
+    hideLabel?: boolean;
+    hideOptionLabels?: boolean;
+    type?: 'dropdown' | 'list' | 'radio';
+    showSingleOption?: boolean;
+};
+export interface LayoutSelectorLang {
+    label: Lang<{
+        options: ListOption[];
+        selectedOptions: ListOption[];
+    }>;
+}
+//# sourceMappingURL=LayoutSelector.d.ts.map

package/dist/cjs/components/src/components/Molecules/LayoutSelector/LayoutSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSelector.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LayoutSelector/LayoutSelector.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAIzE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAYtC,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAqIrE,CAAC;AAOH,MAAM,MAAM,mBAAmB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACtB,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

package/dist/cjs/components/src/components/Molecules/LayoutSelector/LayoutSelector.js

@@ -0,0 +1,99 @@
+"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.LayoutSelector = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Select_1 = require("../Select");
+var List_1 = require("../List");
+var RadioList_1 = require("../RadioList");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var defaultStyles = function (_a) {
+    return (0, react_1.css)({
+        '.ss__button__content': {
+            display: 'flex',
+            alignItems: 'center',
+        },
+    });
+};
+exports.LayoutSelector = (0, mobx_react_lite_1.observer)(function (properties) {
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        label: 'Layout',
+        type: 'dropdown',
+        showSingleOption: false,
+        selected: properties.options && properties.options.length ? properties.options[0] : undefined,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('layoutSelector', globalTheme, defaultProps, properties);
+    var options = props.options, selected = props.selected, type = props.type, onSelect = props.onSelect, showSingleOption = props.showSingleOption, hideLabel = props.hideLabel, hideOptionLabels = props.hideOptionLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var label = props.label;
+    var subProps = {
+        Select: __assign(__assign({ hideOptionLabels: hideOptionLabels }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        RadioList: __assign(__assign({ hideOptionLabels: hideOptionLabels }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        List: __assign(__assign({ multiSelect: false, horizontal: true, hideOptionCheckboxes: true, hideOptionLabels: hideOptionLabels, requireSelection: true }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    var defaultLang = {
+        label: {
+            value: label,
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    if (hideLabel) {
+        delete lang.label.value;
+        label = undefined;
+    }
+    if (hideOptionLabels) {
+        var optionsWithNoIcons = options === null || options === void 0 ? void 0 : options.filter(function (option) { return !option.icon; });
+        if (optionsWithNoIcons === null || optionsWithNoIcons === void 0 ? void 0 : optionsWithNoIcons.length) {
+            console.warn('Warning - found layout options with no visible label or icon', optionsWithNoIcons);
+        }
+    }
+    // options can be an Array or ObservableArray - but should have length
+    return (options && options.length > 1) || ((options === null || options === void 0 ? void 0 : options.length) === 1 && showSingleOption) ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [(type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, __assign({}, styling, { className: (0, classnames_1.default)('ss__layout__select', className, internalClassName) }, subProps.Select, { label: label, options: options, selected: selected, onSelect: function (e, option) {
+                    onSelect && onSelect(e, option);
+                }, lang: {
+                    buttonLabel: lang.label,
+                } }))), (type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'list' && ((0, jsx_runtime_1.jsx)(List_1.List, __assign({}, styling, { className: (0, classnames_1.default)('ss__layout__list', className, internalClassName) }, subProps.List, { onSelect: function (e, option) {
+                    onSelect && onSelect(e, option);
+                }, options: options, selected: selected, titleText: label, lang: {
+                    title: lang.label,
+                } }))), (type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'radio' && ((0, jsx_runtime_1.jsx)(RadioList_1.RadioList, __assign({}, styling, { className: (0, classnames_1.default)('ss__layout__radioList', className, internalClassName) }, subProps.RadioList, { onSelect: function (e, option) {
+                    onSelect && onSelect(e, option);
+                }, options: options, selected: selected, titleText: label, lang: {
+                    title: lang.label,
+                } })))] })) : null;
+});

package/dist/cjs/components/src/components/Molecules/LayoutSelector/index.d.ts

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

package/dist/cjs/components/src/components/Molecules/LayoutSelector/index.d.ts.map

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

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

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

@@ -0,0 +1,28 @@
+import { ComponentProps, ListOption } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare function List(properties: ListProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export type ListProps = {
+    lang?: Partial<ListLang>;
+} & ListTemplatesLegalProps & ComponentProps<ListProps>;
+export type ListTemplatesLegalProps = {
+    options: ListOption[];
+    multiSelect?: boolean;
+    hideOptionCheckboxes?: boolean;
+    hideOptionLabels?: boolean;
+    hideOptionIcons?: boolean;
+    onSelect?: (e: React.MouseEvent<HTMLElement>, option: ListOption, selected: ListOption[]) => void;
+    titleText?: string;
+    hideTitleText?: boolean;
+    disabled?: boolean;
+    horizontal?: boolean;
+    native?: boolean;
+    selected?: ListOption | ListOption[];
+    requireSelection?: boolean;
+};
+export interface ListLang {
+    title?: Lang<{
+        options: ListOption[];
+        selectedOptions: ListOption[];
+    }>;
+}
+//# sourceMappingURL=List.d.ts.map

package/dist/cjs/components/src/components/Molecules/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/List/List.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AAmDxD,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAyKzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,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,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,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,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}