@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/themes/matterhorn/components/organisms/autocompleteLayout.js

@@ -0,0 +1,441 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.autocompleteLayout = void 0;
+var react_1 = require("@emotion/react");
+var custom_1 = require("../../custom");
+// CSS in JS style script for the Autocomplete Layout component
+var autocompleteLayoutStyleScript = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var _g, _h, _j, _k, _l;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var variables = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.variables;
+    var tabletBp = ((_h = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _h === void 0 ? void 0 : _h.tablet) || custom_1.custom.breakpoints.tablet;
+    var textSelectors = 'a, div, p';
+    var headerSelectors = '.ss__terms-list .ss__terms .ss__terms__title h5, .ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__header, .ss__autocomplete__content .ss__autocomplete__content__results .ss__autocomplete__title h5, .ss__autocomplete__button--see-more .ss__button__content, .ss__autocomplete__content__no-results .ss__autocomplete__content__no-results__recommendations .ss__recommendation-grid__title';
+    var activeSelectors = '.ss__terms-list .ss__terms .ss__terms__options .ss__terms__option.ss__terms__option--active a, .ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__options .ss__facet-list-options .ss__facet-list-options__option--filtered, .ss__autocomplete__content .ss__autocomplete__content__results .ss__results .ss__result:hover .ss__result__details .ss__result__details__title a, .ss__autocomplete__button--see-more:hover .ss__button__content';
+    // get autocomplete layout
+    var acLayout = (props === null || props === void 0 ? void 0 : props.layout) ? props.layout : 'standard';
+    // shared autocomplete styles
+    var sharedStyles = (0, react_1.css)((_a = {
+            alignContent: acLayout == 'standard' ? 'normal' : 'flex-start',
+            border: "1px solid ".concat(custom_1.custom.colors.gray02),
+            backgroundColor: custom_1.custom.colors.white
+        },
+        _a[textSelectors] = {
+            fontSize: custom_1.custom.utils.convertPxToEm(acLayout == 'terms' ? 15 : 12),
+            lineHeight: 1.5,
+            color: (_j = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _j === void 0 ? void 0 : _j.text,
+        },
+        _a.a = {
+            display: 'block',
+        },
+        _a['ul, ul li'] = {
+            padding: 0,
+            margin: 0,
+            listStyle: 'none',
+        },
+        _a['.ss__banner'] = {
+            img: {
+                maxWidth: '100%',
+                maxHeight: '150px',
+                height: 'auto',
+            },
+        },
+        _a[headerSelectors] = {
+            margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
+            padding: 0,
+            fontSize: custom_1.custom.utils.convertPxToEm(acLayout == 'terms' ? 17 : 16),
+            fontWeight: custom_1.custom.fonts.weight02,
+            lineHeight: 1.2,
+            color: (_k = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _k === void 0 ? void 0 : _k.secondary,
+        },
+        _a[activeSelectors] = {
+            fontWeight: custom_1.custom.fonts.weight01,
+            color: (_l = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _l === void 0 ? void 0 : _l.primary,
+        },
+        _a['.ss__autocomplete__row, .ss__autocomplete__column'] = {
+            '.ss__search-input': {
+                background: 'transparent',
+                width: 'auto',
+                height: '30px',
+                margin: "0 0 ".concat(custom_1.custom.spacing.x2, "px 0"),
+            },
+        },
+        _a['.ss__autocomplete__column'] = {
+            alignContent: 'flex-start',
+            minWidth: '1px',
+        },
+        _a));
+    var sharedTabletStyles = (0, react_1.css)((_b = {
+            alignContent: 'flex-start'
+        },
+        _b[textSelectors] = {
+            fontSize: acLayout == 'terms' ? custom_1.custom.utils.convertPxToEm(12) : '',
+        },
+        _b[headerSelectors] = {
+            fontSize: custom_1.custom.utils.convertPxToEm(14),
+        },
+        _b));
+    // terms wrapper styles
+    var termsWrapperStyles = (0, react_1.css)({
+        '.ss__autocomplete__terms-wrapper': {
+            backgroundColor: 'transparent',
+            padding: "".concat(custom_1.custom.spacing.x4, "px"),
+        },
+    });
+    // facets styles
+    var facetsStyles = (0, react_1.css)({
+        '.ss__autocomplete__facets-wrapper': {
+            padding: "".concat(custom_1.custom.spacing.x4, "px"),
+        },
+        '.ss__autocomplete__facets': {
+            padding: 0,
+            '.ss__facets': {
+                '.ss__facet': {
+                    margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
+                    '&:last-of-type': {
+                        marginBottom: 0,
+                    },
+                    '&.ss__facet--showing-all': {
+                        '.ss__facet__options': {
+                            maxHeight: 'none',
+                            overflow: 'visible',
+                            padding: 0,
+                        },
+                    },
+                    '.ss__facet__header': {
+                        borderBottom: 0,
+                        '.ss__facet__header__inner': {
+                            fontSize: 'inherit',
+                            fontWeight: 'inherit',
+                            color: 'inherit',
+                        },
+                    },
+                    '.ss__facet__options': {
+                        '.ss__facet-hierarchy-options .ss__facet-hierarchy-options__option, .ss__facet-list-options .ss__facet-list-options__option': {
+                            padding: 0,
+                            margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
+                            '&:last-of-type': {
+                                marginBottom: 0,
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    });
+    // content styles
+    var contentStyles = (0, react_1.css)({
+        '.ss__autocomplete__column:has(.ss__autocomplete__content)': {
+            alignContent: 'flex-start',
+        },
+        '.ss__autocomplete__content': {
+            overflow: 'visible',
+            justifyContent: 'flex-start',
+            padding: "".concat(custom_1.custom.spacing.x4, "px"),
+            borderTop: "1px solid ".concat(custom_1.custom.colors.gray02),
+            '.ss__autocomplete__content-inner': {
+                padding: 0,
+            },
+        },
+    });
+    // results layout styles
+    var resultsLayoutStyles = (0, react_1.css)({
+        gap: "".concat(custom_1.custom.spacing.x4, "px"),
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        maxHeight: '75vh',
+        '&::-webkit-scrollbar': {
+            width: '8px',
+            height: '8px',
+        },
+        '&::-webkit-scrollbar-track': {
+            backgroundColor: custom_1.custom.colors.gray01,
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: custom_1.custom.colors.gray02,
+        },
+        '.ss__result': {
+            '.ss__result__details': {
+                gap: "".concat(custom_1.custom.spacing.x1, "px"),
+                '.ss__result__details__pricing': {
+                    '.ss__result__price': {
+                        fontSize: custom_1.custom.utils.convertPxToEm(14),
+                    },
+                    '.ss__price--strike': {
+                        fontSize: custom_1.custom.utils.convertPxToEm(12),
+                    },
+                },
+            },
+        },
+    });
+    // results styles
+    var resultsStyles = (0, react_1.css)({
+        '.ss__autocomplete__content__results': {
+            '.ss__results': __assign({}, resultsLayoutStyles),
+        },
+    });
+    // no results styles
+    var noResultsStyles = (0, react_1.css)({
+        '.ss__autocomplete__content__no-results': {
+            '.ss__autocomplete__content__no-results__text': {
+                p: {
+                    display: 'inline',
+                    margin: 0,
+                    padding: 0,
+                    '& ~ p': {
+                        paddingLeft: '4px',
+                    },
+                },
+            },
+            '.ss__autocomplete__content__no-results__recommendations': {
+                '.ss__recommendation-grid': {
+                    margin: "".concat(custom_1.custom.spacing.x4, "px 0 0 0"),
+                },
+                '.ss__recommendation-grid__title': {
+                    textAlign: 'left',
+                },
+                '.ss__recommendation-grid__results': __assign({}, resultsLayoutStyles),
+            },
+        },
+    });
+    // see more styles
+    var seeMoreStyles = (0, react_1.css)({
+        '.ss__autocomplete__button--see-more': {
+            padding: "".concat(custom_1.custom.spacing.x4, "px"),
+            paddingTop: 0,
+            height: 'auto',
+            '&, &:hover': {
+                backgroundColor: 'transparent',
+                border: 0,
+            },
+            '.ss__button__content': {
+                margin: 0,
+                '.ss__icon': {
+                    position: 'relative',
+                    top: '0.5px',
+                    margin: "0 0 0 ".concat(custom_1.custom.spacing.x1, "px"),
+                },
+            },
+        },
+    });
+    var seeMoreTabletStyles = (0, react_1.css)({
+        order: -1,
+        textAlign: 'left',
+        '.ss__button__content': {
+            '.ss__icon': {
+                top: '1.5px',
+            },
+        },
+    });
+    // standard styles
+    var standardStyles = (0, react_1.css)([
+        sharedStyles,
+        {
+            '.ss__autocomplete__column': {
+                '&:has(.ss__autocomplete__terms-wrapper)': {
+                    flex: '1 0 200px',
+                    maxWidth: '200px',
+                },
+                '&:has(.ss__autocomplete__facets-wrapper)': {
+                    flex: '1 0 200px',
+                    maxWidth: '200px',
+                    marginRight: "-".concat(custom_1.custom.spacing.x4, "px"),
+                },
+            },
+            '.ss__autocomplete__terms-wrapper': {
+                backgroundColor: custom_1.custom.colors.gray01,
+                height: '100%',
+            },
+            '.ss__terms-list': {
+                display: 'block',
+                '.ss__terms-list__row': {
+                    '&:first-of-type .ss__terms .ss__terms__title': {
+                        marginTop: "".concat(custom_1.custom.spacing.x2, "px"),
+                    },
+                    '&:last-of-type .ss__terms .ss__terms__options': {
+                        marginBottom: "".concat(custom_1.custom.spacing.x2, "px"),
+                    },
+                },
+                '.ss__terms': {
+                    '.ss__terms__title': {
+                        h5: {
+                            margin: 0,
+                            padding: "".concat(custom_1.custom.spacing.x2, "px ").concat(custom_1.custom.spacing.x4, "px"),
+                        },
+                    },
+                    '.ss__terms__options': {
+                        display: 'block',
+                        margin: 0,
+                        '.ss__terms__option': {
+                            a: {
+                                padding: "".concat(custom_1.custom.spacing.x2, "px ").concat(custom_1.custom.spacing.x4, "px"),
+                            },
+                        },
+                        '.ss__terms__option--active': {
+                            backgroundColor: custom_1.custom.colors.white,
+                        },
+                    },
+                },
+            },
+        },
+        facetsStyles,
+        contentStyles,
+        resultsStyles,
+        noResultsStyles,
+        seeMoreStyles,
+        (_c = {},
+            _c["@media (max-width: ".concat(tabletBp, "px)")] = {
+                '&': sharedTabletStyles,
+                '.ss__autocomplete__row:has(.ss__autocomplete__column)': {
+                    display: 'block',
+                    '.ss__autocomplete__column': {
+                        width: '100%',
+                        maxWidth: 'none',
+                    },
+                },
+                '.ss__autocomplete__column': {
+                    '&:has(.ss__autocomplete__facets-wrapper)': {
+                        marginRight: 0,
+                    },
+                },
+                '.ss__autocomplete__terms-wrapper': {
+                    backgroundColor: 'transparent',
+                    padding: "".concat(custom_1.custom.spacing.x4, "px"),
+                },
+                '.ss__terms-list': {
+                    display: 'flex',
+                    '.ss__terms-list__row': {
+                        '&:first-of-type .ss__terms .ss__terms__title': {
+                            marginTop: 0,
+                        },
+                        '&:last-of-type .ss__terms .ss__terms__options': {
+                            marginBottom: 0,
+                        },
+                    },
+                    '.ss__terms': {
+                        '.ss__terms__title': {
+                            h5: {
+                                padding: 0,
+                                margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
+                            },
+                        },
+                        '.ss__terms__options': {
+                            display: 'flex',
+                            '.ss__terms__option': {
+                                a: {
+                                    padding: 0,
+                                },
+                            },
+                        },
+                    },
+                },
+                '.ss__autocomplete__facets-wrapper': {
+                    borderTop: "1px solid ".concat(custom_1.custom.colors.gray02),
+                },
+                '.ss__autocomplete__facets': {
+                    '.ss__facets': {
+                        gap: "0 ".concat(custom_1.custom.spacing.x4, "px"),
+                        flexFlow: 'row nowrap',
+                        minWidth: '1px',
+                        '.ss__facet': {
+                            flex: '1 1 0%',
+                            minWidth: '1px',
+                            '&, &:last-of-type': {
+                                margin: 0,
+                            },
+                        },
+                    },
+                },
+                '.ss__autocomplete__button--see-more': __assign({}, seeMoreTabletStyles),
+            },
+            _c),
+    ]);
+    // mini styles
+    var miniStyles = (0, react_1.css)([
+        sharedStyles,
+        termsWrapperStyles,
+        contentStyles,
+        resultsStyles,
+        noResultsStyles,
+        seeMoreStyles,
+        (_d = {},
+            _d["@media (max-width: ".concat(tabletBp, "px)")] = {
+                '&': sharedTabletStyles,
+                '.ss__autocomplete__button--see-more': __assign({}, seeMoreTabletStyles),
+            },
+            _d),
+        (_e = {},
+            _e["@media (max-width: ".concat(custom_1.custom.breakpoints.small, "px)")] = {
+                '.ss__autocomplete__content__results .ss__results, .ss__autocomplete__content__no-results .ss__autocomplete__content__no-results__recommendations .ss__recommendation-grid__results': {
+                    gridTemplateColumns: "repeat(2, 1fr)",
+                },
+            },
+            _e),
+    ]);
+    // terms styles
+    var termsStyles = (0, react_1.css)([
+        sharedStyles,
+        termsWrapperStyles,
+        contentStyles,
+        {
+            '.ss__autocomplete__content__no-results': {
+                '.ss__autocomplete__content__no-results__text': {
+                    p: {
+                        display: 'inline',
+                        margin: 0,
+                        padding: 0,
+                        fontSize: custom_1.custom.utils.convertPxToEm(14),
+                        '& ~ p': {
+                            paddingLeft: '4px',
+                        },
+                    },
+                },
+            },
+        },
+        seeMoreStyles,
+        (_f = {},
+            _f["@media (max-width: ".concat(tabletBp, "px)")] = {
+                '&': sharedTabletStyles,
+                '.ss__autocomplete__content__no-results': {
+                    '.ss__autocomplete__content__no-results__text': {
+                        p: {
+                            fontSize: custom_1.custom.utils.convertPxToEm(12),
+                        },
+                    },
+                },
+                '.ss__autocomplete__button--see-more': __assign({}, seeMoreTabletStyles),
+            },
+            _f),
+    ]);
+    // return autocomplete styles
+    if (acLayout == 'terms') {
+        return termsStyles;
+    }
+    else if (acLayout == 'mini') {
+        return miniStyles;
+    }
+    else {
+        return standardStyles;
+    }
+};
+// Autocomplete Layout component props
+exports.autocompleteLayout = {
+    default: {
+        autocompleteLayout: {
+            themeStyleScript: autocompleteLayoutStyleScript,
+            contentTitle: 'Product Suggestions',
+        },
+    },
+};

package/dist/cjs/components/src/themes/matterhorn/components/organisms/facet.d.ts

@@ -0,0 +1,4 @@
+import type { FacetProps } from '../../../../components/Organisms/Facet';
+import { ThemeComponent } from '../../../../providers';
+export declare const facet: ThemeComponent<'facet', FacetProps>;
+//# sourceMappingURL=facet.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/organisms/facet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facet.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/organisms/facet.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAmEvD,eAAO,MAAM,KAAK,EAAE,cAAc,CAAC,OAAO,EAAE,UAAU,CAUrD,CAAC"}

package/dist/cjs/components/src/themes/matterhorn/components/organisms/facet.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.facet = void 0;
+var react_1 = require("@emotion/react");
+var custom_1 = require("../../custom");
+// CSS in JS style script for the Facet component
+var facetStyleScript = function (props) {
+    var _a, _b, _c, _d;
+    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
+    return (0, react_1.css)({
+        '&.ss__facet--collapsed': {
+            '.ss__facet__header': {
+                '.ss__icon': {
+                    transform: 'rotate(0deg)',
+                },
+            },
+        },
+        '&.ss__facet--showing-all': {
+            '.ss__facet__options': {
+                maxHeight: "490px",
+                overflowY: 'auto',
+                overflowX: 'hidden',
+                paddingRight: "".concat(custom_1.custom.spacing.x2, "px"),
+            },
+        },
+        '.ss__facet__header': {
+            gap: "".concat(custom_1.custom.spacing.x2, "px"),
+            fontSize: custom_1.custom.utils.convertPxToEm(16),
+            fontWeight: custom_1.custom.fonts.weight02,
+            '.ss__icon': {
+                transition: 'transform ease 0.5s',
+                transform: 'rotate(180deg)',
+                width: "".concat(custom_1.custom.sizes.icon12, "px"),
+                height: "".concat(custom_1.custom.sizes.icon12, "px"),
+                fill: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary,
+                stroke: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.primary,
+            },
+        },
+        '.ss__facet__options': {
+            marginTop: 0,
+            maxHeight: 'none',
+            overflow: 'visible',
+            '&::-webkit-scrollbar': {
+                width: '8px',
+                height: '8px',
+            },
+            '&::-webkit-scrollbar-track': {
+                backgroundColor: custom_1.custom.colors.gray01,
+            },
+            '&::-webkit-scrollbar-thumb': {
+                backgroundColor: custom_1.custom.colors.gray02,
+            },
+        },
+        '.ss__facet__show-more-less': {
+            margin: "".concat(custom_1.custom.spacing.x2, "px 0 0 0"),
+            fontWeight: custom_1.custom.fonts.weight01,
+            color: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.primary,
+            '.ss__icon': {
+                position: 'relative',
+                top: '-0.5px',
+                marginRight: "".concat(custom_1.custom.spacing.x1, "px"),
+                width: "".concat(custom_1.custom.sizes.icon10, "px"),
+                height: "".concat(custom_1.custom.sizes.icon10, "px"),
+            },
+        },
+    });
+};
+// Facet component props
+exports.facet = {
+    default: {
+        facet: {
+            themeStyleScript: facetStyleScript,
+            iconCollapse: custom_1.custom.icons.arrowDown,
+            iconExpand: custom_1.custom.icons.arrowDown,
+            iconOverflowMore: custom_1.custom.icons.plus,
+            iconOverflowLess: custom_1.custom.icons.minus,
+        },
+    },
+};

package/dist/cjs/components/src/themes/matterhorn/components/organisms/facets.d.ts

@@ -0,0 +1,4 @@
+import type { FacetsProps } from '../../../../components/Organisms/Facets';
+import { ThemeComponent } from '../../../../providers';
+export declare const facets: ThemeComponent<'facets', FacetsProps>;
+//# sourceMappingURL=facets.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/organisms/facets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facets.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/organisms/facets.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAgBvD,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,QAAQ,EAAE,WAAW,CAMxD,CAAC"}

package/dist/cjs/components/src/themes/matterhorn/components/organisms/facets.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.facets = void 0;
+var react_1 = require("@emotion/react");
+// CSS in JS style script for the Facets component
+var facetsStyleScript = function (props) {
+    var _a;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
+    return (0, react_1.css)({
+        '&.ss__facets': {
+            display: 'block',
+            width: 'auto',
+        },
+    });
+};
+// Facets component props
+exports.facets = {
+    default: {
+        facets: {
+            themeStyleScript: facetsStyleScript,
+        },
+    },
+};

package/dist/cjs/components/src/themes/matterhorn/components/organisms/facetsHorizontal.d.ts

@@ -0,0 +1,4 @@
+import type { FacetsHorizontalProps } from '../../../../components/Organisms/FacetsHorizontal';
+import { ThemeComponent } from '../../../../providers';
+export declare const facetsHorizontal: ThemeComponent<'facetsHorizontal', FacetsHorizontalProps>;
+//# sourceMappingURL=facetsHorizontal.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/organisms/facetsHorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facetsHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/organisms/facetsHorizontal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAkLvD,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,EAAE,qBAAqB,CA0DtF,CAAC"}