@athoscommerce/snap-preact 1.5.1-beta.112 → 1.5.1

package/dist/cjs/components/src/themes/matterhorn/components/molecules/swatches.js

@@ -1,244 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.swatches = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
-var color_1 = __importDefault(require("color"));
-// Swatch carousel sizes and spacing
-var swatchSize = 30;
-var swatchSpacing = custom_1.custom.spacing.x1;
-// CSS in JS style script for the Swatches component
-var swatchesStyleScript = function (props) {
-    var _a, _b, _c, _d;
-    // 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;
-    var activeColor = new color_1.default(((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary) || undefined);
-    var fontColor = activeColor.isDark() || activeColor.hex().toLowerCase() == '#00aeef'
-        ? (0, color_1.default)(custom_1.custom.colors.white || undefined)
-        : (0, color_1.default)(custom_1.custom.colors.black || undefined);
-    var darkGray = custom_1.custom.utils.darkenColor(custom_1.custom.colors.gray02, 0.075);
-    // shared styles for swatches
-    var sharedStyles = (0, react_1.css)({
-        margin: 0,
-    });
-    // carousel styles
-    var carouselStyles = (0, react_1.css)([
-        sharedStyles,
-        {
-            margin: 0,
-            '.ss__carousel': {
-                '& > div': {
-                    minWidth: '1px',
-                    flex: '0 1 auto',
-                },
-                '.ss__carousel__prev-wrapper, .ss__carousel__next-wrapper': {
-                    position: 'static',
-                    bottom: 0,
-                    width: "".concat(swatchSize, "px"),
-                    height: "".concat(swatchSize, "px"),
-                },
-                '.ss__carousel__prev-wrapper': {
-                    margin: "0 ".concat(swatchSpacing, "px 0 0"),
-                },
-                '.ss__carousel__next-wrapper': {
-                    margin: "0 0 0 ".concat(swatchSpacing, "px"),
-                },
-                '.swiper-container': {
-                    maxWidth: "calc(100% - ".concat(swatchSize * 2 + swatchSpacing * 2, "px)"),
-                    '& > .swiper-wrapper': {
-                        '& > .swiper-slide': {
-                            overflow: 'hidden',
-                            width: "".concat(swatchSize, "px"),
-                            height: "".concat(swatchSize, "px"),
-                            '&:has(.ss__swatches__carousel__swatch.ss__swatches__carousel__swatch--unavailable)': {
-                                '&:before': {
-                                    content: '""',
-                                    display: 'block',
-                                    position: 'absolute',
-                                    top: 0,
-                                    bottom: 0,
-                                    margin: 'auto',
-                                    width: '100%',
-                                    height: '1px',
-                                    borderTop: "3px solid ".concat(darkGray),
-                                    transform: 'rotate(-45deg)',
-                                },
-                            },
-                        },
-                    },
-                },
-                '.swiper-container > .swiper-wrapper > .swiper-slide > *, .ss__swatches__carousel__swatch': {
-                    height: "".concat(swatchSize, "px"),
-                    lineHeight: 0,
-                    border: 0,
-                },
-                '.ss__swatches__carousel__swatch': {
-                    position: 'relative',
-                    aspectRatio: 1,
-                    color: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.text,
-                    overflow: 'hidden',
-                    '&, &:before, &:after, *': {
-                        boxSizing: 'border-box',
-                    },
-                    '&:before, &:after': {
-                        content: '""',
-                        display: 'block',
-                        width: 'auto',
-                        height: 'auto',
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        transform: 'none',
-                    },
-                    '&:before': {
-                        border: "3px solid ".concat(custom_1.custom.colors.white),
-                        margin: '1px',
-                        opacity: 0,
-                    },
-                    '&:after': {
-                        border: "1px solid ".concat(custom_1.custom.colors.black),
-                        opacity: 0.15,
-                    },
-                    '&.ss__swatches__carousel__swatch--dark, &:has(.ss__swatches__carousel__swatch__inner--grey)': {
-                        '.ss__swatches__carousel__swatch__inner': {
-                            '.ss__swatches__carousel__swatch__value': {
-                                color: fontColor.hex(),
-                            },
-                        },
-                    },
-                    '&.ss__swatches__carousel__swatch--selected': {
-                        '&:before': {
-                            opacity: 1,
-                        },
-                        '&:after': {
-                            opacity: 0.3,
-                        },
-                        '&:has(.ss__swatches__carousel__swatch__inner:not([style]))': {
-                            backgroundColor: activeColor.hex(),
-                            '&:after': {
-                                borderColor: activeColor.hex(),
-                                opacity: 1,
-                            },
-                            '.ss__swatches__carousel__swatch__inner': {
-                                '.ss__swatches__carousel__swatch__value': {
-                                    color: fontColor.hex(),
-                                },
-                            },
-                        },
-                        '&:has(.ss__swatches__carousel__swatch__inner .ss__image)': {
-                            backgroundColor: 'transparent',
-                            '&:after': {
-                                borderColor: custom_1.custom.colors.black,
-                                opacity: 0.3,
-                            },
-                            '.ss__swatches__carousel__swatch__inner': {
-                                '.ss__swatches__carousel__swatch__value': {
-                                    color: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.text,
-                                },
-                            },
-                        },
-                        '.ss__swatches__carousel__swatch__inner': {
-                            '.ss__swatches__carousel__swatch__value': {
-                                fontWeight: custom_1.custom.fonts.weight01,
-                            },
-                        },
-                    },
-                    '&.ss__swatches__carousel__swatch--disabled, &.ss__swatches__carousel__swatch--unavailable': {
-                        opacity: 1,
-                        cursor: 'not-allowed',
-                        pointerEvents: 'none',
-                        '.ss__swatches__carousel__swatch__inner:after': {
-                            content: '""',
-                            display: 'block',
-                            position: 'absolute',
-                            top: 0,
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                            zIndex: 3,
-                            margin: 'auto',
-                            backgroundColor: darkGray.replace('#', ''),
-                            backgroundRepeat: 'no-repeat',
-                            backgroundPosition: 'center center',
-                            backgroundImage: "url(\"data:image/svg+xml,%3Csvg style=%27transform: rotate%28-45deg%29%27 xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 56 56%27 preserveAspectRatio=%27xMinYMid%27%3E%3Cpath fill=%27%23".concat(darkGray.replace('#', ''), "%27 d=%27M0 23.297h56v9.406h-56v-9.406z%27 /%3E%3C/svg%3E\")"),
-                        },
-                    },
-                    '.ss__swatches__carousel__swatch__inner': {
-                        '&[style*="url"]': {
-                            backgroundRepeat: 'no-repeat !important',
-                            backgroundSize: 'cover !important',
-                            backgroundPosition: 'center !important',
-                        },
-                        '.ss__image': {
-                            img: {
-                                width: '100%',
-                                height: '100%',
-                                objectFit: 'cover',
-                                objectPosition: 'center center',
-                            },
-                        },
-                        '.ss__swatches__carousel__swatch__value': {
-                            display: 'block',
-                            position: 'absolute',
-                            zIndex: 2,
-                            maxWidth: "calc(100% - ".concat(custom_1.custom.spacing.x2, "px)"),
-                            maxHeight: "calc(100% - ".concat(custom_1.custom.spacing.x2, "px)"),
-                            overflow: 'hidden',
-                            textAlign: 'center',
-                            fontSize: custom_1.custom.utils.convertPxToEm(12),
-                            lineHeight: 1,
-                        },
-                    },
-                },
-            },
-        },
-    ]);
-    // grid styles
-    var gridStyles = (0, react_1.css)([
-        sharedStyles,
-        {
-            '.ss__grid': {
-                '.ss__grid__options': {
-                    '.ss__grid__option:not(.ss__grid__show-more-wrapper)': {
-                        width: "".concat(swatchSize, "px"),
-                        maxHeight: "".concat(swatchSize, "px"),
-                    },
-                },
-            },
-        },
-    ]);
-    // return swatch styles
-    if ((props === null || props === void 0 ? void 0 : props.type) == 'grid') {
-        return gridStyles;
-    }
-    else {
-        return carouselStyles;
-    }
-};
-// Swatches component props
-exports.swatches = {
-    default: {
-        swatches: {
-            themeStyleScript: swatchesStyleScript,
-        },
-        'swatches carousel': {
-            autoAdjustSlides: false,
-            centerInsufficientSlides: false,
-            slidesPerView: 'auto',
-            slidesPerGroup: 3,
-            spaceBetween: "".concat(swatchSpacing, "px"),
-        },
-    },
-    desktop: {
-        'swatches carousel': {
-            slidesPerView: 'auto',
-            slidesPerGroup: 2,
-            spaceBetween: "".concat(swatchSpacing, "px"),
-        },
-    },
-};

package/dist/cjs/components/src/themes/matterhorn/components/molecules/terms.d.ts

@@ -1,4 +0,0 @@
-import type { TermsProps, TermsTemplatesLegalProps } from '../../../../components/Molecules/Terms';
-import { ThemeComponent } from '../../../../providers';
-export declare const terms: ThemeComponent<'terms', TermsProps, TermsTemplatesLegalProps>;
-//# sourceMappingURL=terms.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/molecules/terms.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"terms.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/molecules/terms.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AA6EvD,eAAO,MAAM,KAAK,EAAE,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,wBAAwB,CAO/E,CAAC"}

package/dist/cjs/components/src/themes/matterhorn/components/molecules/terms.js

@@ -1,88 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.terms = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
-// CSS in JS style script for the Terms component
-var termsStyleScript = function (props) {
-    var _a;
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var variables = (_b = props === null || props === void 0 ? void 0 : props.theme) === null || _b === void 0 ? void 0 : _b.variables;
-    var tabletBp = ((_c = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _c === void 0 ? void 0 : _c.tablet) || custom_1.custom.breakpoints.tablet;
-    return (0, react_1.css)((_a = {
-            width: '100%',
-            textAlign: 'left',
-            'ul, ul li': {
-                padding: 0,
-                margin: 0,
-                listStyle: 'none',
-            },
-            '.ss__terms__title': {
-                '&, h5': {
-                    padding: 0,
-                },
-                h5: {
-                    margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
-                    fontSize: custom_1.custom.utils.convertPxToEm(16),
-                    fontWeight: custom_1.custom.fonts.weight02,
-                    textTransform: custom_1.custom.fonts.transform ? custom_1.custom.fonts.transform : 'none',
-                    color: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.secondary,
-                },
-            },
-            '.ss__terms__options': {
-                flexFlow: 'row wrap',
-                justifyContent: 'flex-start',
-                gap: "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x4, "px"),
-                '&, .ss__terms__option': {
-                    listStyle: 'none',
-                    padding: 0,
-                },
-                '.ss__terms__option': {
-                    flex: '0 1 auto',
-                    minWidth: '1px',
-                    color: (_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.primary,
-                    a: {
-                        padding: 0,
-                        fontSize: custom_1.custom.utils.convertPxToEm(14),
-                        color: (_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.primary,
-                        em: {
-                            color: (_g = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _g === void 0 ? void 0 : _g.text,
-                            fontStyle: 'normal',
-                            fontSize: 'inherit',
-                            fontWeight: 'inherit',
-                        },
-                    },
-                },
-                '.ss__terms__option--active': {
-                    'a, a em': {
-                        fontWeight: (_h = custom_1.custom === null || custom_1.custom === void 0 ? void 0 : custom_1.custom.fonts) === null || _h === void 0 ? void 0 : _h.weight01,
-                        color: (_j = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _j === void 0 ? void 0 : _j.primary,
-                    },
-                },
-            }
-        },
-        _a["@media (max-width: ".concat(tabletBp, "px)")] = {
-            '.ss__terms__title': {
-                h5: {
-                    fontSize: custom_1.custom.utils.convertPxToEm(14),
-                },
-            },
-            '.ss__terms__options': {
-                '.ss__terms__option': {
-                    a: {
-                        fontSize: custom_1.custom.utils.convertPxToEm(12),
-                    },
-                },
-            },
-        },
-        _a));
-};
-// Terms component props
-exports.terms = {
-    default: {
-        terms: {
-            themeStyleScript: termsStyleScript,
-            emIfy: true,
-        },
-    },
-};

package/dist/cjs/components/src/themes/matterhorn/components/molecules/variantSelection.d.ts

@@ -1,4 +0,0 @@
-import type { VariantSelectionProps, VariantSelectionTemplatesLegalProps } from '../../../../components/Molecules/VariantSelection';
-import { ThemeComponent } from '../../../../providers';
-export declare const variantSelection: ThemeComponent<'variantSelection', VariantSelectionProps, VariantSelectionTemplatesLegalProps>;
-//# sourceMappingURL=variantSelection.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/molecules/variantSelection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"variantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/molecules/variantSelection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,mCAAmC,EAAE,MAAM,mDAAmD,CAAC;AACpI,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAwIvD,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,EAAE,qBAAqB,EAAE,mCAAmC,CAU3H,CAAC"}

package/dist/cjs/components/src/themes/matterhorn/components/molecules/variantSelection.js

@@ -1,146 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.variantSelection = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
-// CSS in JS style script for the Swatches component
-var variantSelectionStyleScript = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
-    var lightGray = custom_1.custom.utils.lightenColor((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.text, 0.65);
-    // shared styles for variant selections
-    var sharedStyles = (0, react_1.css)({
-        margin: "0 0 ".concat(custom_1.custom.spacing.x2, "px 0"),
-        '&:last-of-type': {
-            marginBottom: 0,
-        },
-    });
-    // dropdown styles
-    var dropdownStyles = (0, react_1.css)([
-        sharedStyles,
-        {
-            '.ss__dropdown': {
-                '.ss__dropdown__button, .ss__dropdown__content': {
-                    border: "1px solid ".concat(custom_1.custom.colors.gray02),
-                    color: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.text,
-                    backgroundColor: custom_1.custom.colors.gray01,
-                },
-                '.ss__dropdown__button': {
-                    width: 'auto',
-                    display: 'flex',
-                    padding: "0 ".concat(custom_1.custom.spacing.x2, "px"),
-                    textAlign: 'left',
-                    height: "".concat(custom_1.custom.sizes.height, "px"),
-                    lineHeight: "".concat(custom_1.custom.sizes.height, "px"),
-                    '& > *': {
-                        minWidth: '1px',
-                        flex: '0 1 auto',
-                    },
-                    '.ss__dropdown__button-wrapper': {
-                        flex: '1 1 0%',
-                        gap: "".concat(custom_1.custom.spacing.x1, "px"),
-                        paddingRight: "".concat(custom_1.custom.spacing.x1, "px"),
-                        fontWeight: 'normal',
-                        '.ss__dropdown__button-wrapper__label': {
-                            fontWeight: (_d = custom_1.custom === null || custom_1.custom === void 0 ? void 0 : custom_1.custom.fonts) === null || _d === void 0 ? void 0 : _d.weight01,
-                            textTransform: 'capitalize',
-                        },
-                    },
-                    '.ss__variant-selection__icon': {
-                        transition: 'transform ease 0.5s',
-                    },
-                },
-                '.ss__dropdown__content': {
-                    marginTop: "-1px",
-                    padding: "".concat(custom_1.custom.spacing.x2, "px"),
-                    '.ss__variant-selection__options': {
-                        '&, .ss__variant-selection__option': {
-                            listStyle: 'none',
-                            padding: 0,
-                            margin: 0,
-                        },
-                        '.ss__variant-selection__option': {
-                            margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
-                            '&:last-of-type': {
-                                marginBottom: '0',
-                            },
-                            '&:hover': {
-                                fontWeight: 'normal',
-                            },
-                        },
-                        '.ss__variant-selection__option--selected': {
-                            fontWeight: custom_1.custom.fonts.weight01,
-                            color: (_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.primary,
-                        },
-                        '.ss__variant-selection__option--unavailable': {
-                            color: lightGray,
-                            cursor: 'not-allowed',
-                        },
-                    },
-                },
-            },
-            '.ss__dropdown--open': {
-                '.ss__dropdown__button': {
-                    '.ss__variant-selection__icon': {
-                        transform: 'rotate(180deg)',
-                    },
-                },
-            },
-        },
-    ]);
-    // list styles
-    var listStyles = (0, react_1.css)([
-        sharedStyles,
-        {
-            '.ss__list': {
-                '.ss__list__title, .ss__list__options, .ss__list__options .ss__list__option': {
-                    width: '100%',
-                    color: (_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.text,
-                },
-                '.ss__list__title': {
-                    textTransform: 'capitalize',
-                },
-                '.ss__list__options': {
-                    '.ss__list__option': {
-                        label: {
-                            color: 'inherit',
-                        },
-                    },
-                    '.ss__list__option--selected': {
-                        fontWeight: custom_1.custom.fonts.weight01,
-                        color: (_g = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _g === void 0 ? void 0 : _g.primary,
-                    },
-                    '.ss__list__option--unavailable': {
-                        color: lightGray,
-                        cursor: 'not-allowed',
-                        textDecoration: 'line-through',
-                    },
-                },
-            },
-        },
-    ]);
-    // swatches syles
-    var swatchesStyles = (0, react_1.css)([sharedStyles]);
-    // return variant selection styles
-    if ((props === null || props === void 0 ? void 0 : props.type) == 'list') {
-        return listStyles;
-    }
-    else if ((props === null || props === void 0 ? void 0 : props.type) == 'swatches') {
-        return swatchesStyles;
-    }
-    else {
-        return dropdownStyles;
-    }
-};
-// VariantSelection component props
-exports.variantSelection = {
-    default: {
-        variantSelection: {
-            themeStyleScript: variantSelectionStyleScript,
-        },
-        'variantSelection dropdown icon': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
-            icon: custom_1.custom.icons.arrowDown,
-        },
-    },
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/organisms/autocomplete.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,+BAA+B,EAAE,MAAM,+CAA+C,CAAC;AACxH,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAuTvD,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,cAAc,EAAE,iBAAiB,EAAE,+BAA+B,CA8E3G,CAAC"}