@athoscommerce/snap-preact 1.5.1-beta.116 → 1.6.0

package/dist/cjs/components/src/themes/everest/components/molecules/facetPaletteOptions.js

@@ -1,204 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.facetPaletteOptions = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
-// CSS in JS style script for the FacetPaletteOptions component
-var facetPaletteStyleScript = function (props) {
-    var _a, _b, _c;
-    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);
-    var hasCheckbox = !(props === null || props === void 0 ? void 0 : props.hideCheckbox) ? true : false;
-    // set details for radius
-    var radius = 0;
-    var radiusUnit = 'px';
-    var paletteRadius = radius ? "".concat(radius).concat(radiusUnit) : "0";
-    // determine inner border width
-    var innerBorder = 5;
-    if ((props === null || props === void 0 ? void 0 : props.layout) == 'list') {
-        innerBorder = hasCheckbox ? 2 : 3;
-    }
-    // shared palette styles
-    var sharedStyles = (0, react_1.css)({
-        '.ss__facet-palette-options__option': {
-            display: 'block',
-            color: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.text,
-            '&, &.ss__facet-palette-options__option--filtered': {
-                '.ss__facet-palette-options__option__wrapper': {
-                    border: 0,
-                    borderRadius: 0,
-                    padding: 0,
-                },
-            },
-            '&.ss__facet-palette-options__option--filtered': {
-                '.ss__facet-palette-options__option__wrapper .ss__facet-palette-options__option__palette': {
-                    '&:before': {
-                        opacity: 1,
-                    },
-                    '&:after': {
-                        opacity: 0.3,
-                    },
-                },
-            },
-            '.ss__facet-palette-options__option__wrapper': {
-                overflow: 'hidden',
-                '.ss__facet-palette-options__option__palette': {
-                    border: 0,
-                    padding: 0,
-                    '&, &:before, &:after': {
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        borderRadius: paletteRadius,
-                        boxSizing: 'border-box',
-                    },
-                    '&:before, &:after': {
-                        content: '""',
-                        display: 'block',
-                    },
-                    '&:before': {
-                        border: "".concat(innerBorder, "px solid ").concat(custom_1.custom.colors.white),
-                        margin: '1px',
-                        opacity: 0,
-                    },
-                    '&:after': {
-                        border: "1px solid ".concat(custom_1.custom.colors.black),
-                        opacity: 0.15,
-                    },
-                    '&[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__facet-palette-options__option__value__count': {
-                position: 'relative',
-                top: (props === null || props === void 0 ? void 0 : props.layout) == 'list' ? '-1px' : '',
-                padding: (props === null || props === void 0 ? void 0 : props.layout) == 'list' ? "0 ".concat(custom_1.custom.spacing.x1, "px") : "",
-                fontSize: custom_1.custom.utils.convertPxToEm(10),
-                color: lightGray,
-            },
-        },
-    });
-    // grid palette styles
-    var gridStyles = (0, react_1.css)([
-        sharedStyles,
-        {
-            gridTemplateColumns: "repeat(auto-fill, minmax(".concat((props === null || props === void 0 ? void 0 : props.gridSize) ? props.gridSize : '52px', ", 1fr))"),
-            gap: (props === null || props === void 0 ? void 0 : props.gapSize) ? props.gapSize : custom_1.custom.spacing.x1,
-            alignItems: 'center',
-            '.ss__facet-palette-options__option': {
-                textAlign: 'center',
-                '&, &.ss__facet-palette-options__option--filtered': {
-                    '.ss__facet-palette-options__option__wrapper': {
-                        position: 'relative',
-                        height: 0,
-                        padding: '0 0 100% 0',
-                    },
-                },
-                '.ss__checkbox, .ss__radio': {
-                    display: 'none',
-                },
-                '.ss__facet-palette-options__option__value, .ss__facet-palette-options__option__value__count': {
-                    display: 'block',
-                    lineHeight: '0.85rem',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                },
-                '.ss__facet-palette-options__option__value': {
-                    fontSize: custom_1.custom.utils.convertPxToEm(12),
-                    overflow: 'hidden',
-                    margin: "".concat(custom_1.custom.spacing.x1, "px 0 0 0"),
-                },
-                '.ss__facet-palette-options__option__value__count': {
-                    margin: "".concat(custom_1.custom.spacing.x1 / 2, "px 0 0 0"),
-                },
-            },
-        },
-    ]);
-    // list variables
-    var listSize = hasCheckbox ? 16 : 22;
-    var listCheckboxSize = 16;
-    var listPadding = hasCheckbox ? custom_1.custom.spacing.x4 + listSize + listCheckboxSize : custom_1.custom.spacing.x2 + listSize;
-    // list palette styles
-    var listStyles = (0, react_1.css)([
-        sharedStyles,
-        {
-            '&.ss__facet-palette-options--list': {
-                display: 'block',
-            },
-            '.ss__facet-palette-options__option': {
-                position: 'relative',
-                padding: "".concat(hasCheckbox ? 0 : '2px', " 0 0 ").concat(listPadding, "px"),
-                margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
-                minHeight: hasCheckbox ? '' : "".concat(listSize + 2, "px"),
-                '&:last-of-type': {
-                    marginBottom: 0,
-                },
-                '.ss__checkbox, .ss__radio, .ss__facet-palette-options__option__wrapper': {
-                    position: 'absolute',
-                    top: "".concat(hasCheckbox ? 2 : 0.5, "px"),
-                },
-                '.ss__checkbox, .ss__radio': {
-                    left: 0,
-                },
-                '.ss__facet-palette-options__option__wrapper': {
-                    left: hasCheckbox ? "".concat(listCheckboxSize + custom_1.custom.spacing.x2, "px") : 0,
-                    width: "".concat(listSize, "px"),
-                    height: "".concat(listSize, "px"),
-                    lineHeight: "".concat(listSize, "px"),
-                },
-                '.ss__facet-palette-options__option__value, .ss__facet-palette-options__option__value__count': {
-                    display: 'inline',
-                    overflow: 'visible',
-                    textOverflow: 'unset',
-                    textAlign: 'left',
-                    whiteSpace: 'unset',
-                },
-                '.ss__facet-palette-options__option__value__count': {
-                    margin: 0,
-                },
-            },
-        },
-    ]);
-    return (props === null || props === void 0 ? void 0 : props.layout) == 'list' ? listStyles : gridStyles;
-};
-// FacetPaletteOptions component props
-exports.facetPaletteOptions = {
-    default: {
-        facetPaletteOptions: {
-            themeStyleScript: facetPaletteStyleScript,
-            hideIcon: true,
-            gridSize: '52px',
-            gapSize: "".concat(custom_1.custom.spacing.x1, "px"),
-            colorMapping: {
-                brown: {
-                    background: custom_1.custom.colors.brown,
-                },
-                multi: {
-                    background: custom_1.custom.colors.rainbow,
-                },
-                'multi-color': {
-                    background: custom_1.custom.colors.rainbow,
-                },
-                purple: {
-                    background: custom_1.custom.colors.purple,
-                },
-                rainbow: {
-                    background: custom_1.custom.colors.rainbow,
-                },
-            },
-        },
-    },
-};

package/dist/cjs/components/src/themes/everest/components/molecules/facetSlider.d.ts

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

package/dist/cjs/components/src/themes/everest/components/molecules/facetSlider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"facetSlider.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/everest/components/molecules/facetSlider.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,8BAA8B,EAAE,MAAM,8CAA8C,CAAC;AACrH,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AA+LvD,eAAO,MAAM,WAAW,EAAE,cAAc,CAAC,aAAa,EAAE,gBAAgB,EAAE,8BAA8B,CAMvG,CAAC"}

package/dist/cjs/components/src/themes/everest/components/molecules/facetSlider.js

@@ -1,205 +0,0 @@
-"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.facetSlider = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
-var color_1 = __importDefault(require("color"));
-// CSS in JS style script for the FacetSlider component
-var facetSliderStyleScript = function (props) {
-    var _a, _b, _c, _d, _e, _f;
-    // slider options
-    var slider = {
-        handles: 20, // handle size
-        values: 14, // values size
-        bar: 6, // bar size
-        ticks: 17, // size of ticks
-        valuesPosition: 'top', // position of slider values (top or bottom)
-        valuesAlign: 'sides', // alignment of slider values (sides or center)
-    };
-    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
-    var fontColor = (props === null || props === void 0 ? void 0 : props.valueTextColor) || ((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.text);
-    var darkGray = custom_1.custom.utils.darkenColor(custom_1.custom.colors.gray02, 0.075);
-    var valuesTop = slider.valuesPosition == 'top' ? true : false;
-    var valuesSides = slider.valuesAlign == 'sides' ? true : false;
-    var hasTicks = (props === null || props === void 0 ? void 0 : props.showTicks) ? true : false;
-    var hasStickyHandles = (props === null || props === void 0 ? void 0 : props.stickyHandleLabel) ? true : false;
-    var handleColor = new color_1.default((props === null || props === void 0 ? void 0 : props.handleColor) || ((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.primary) || undefined);
-    var handleInnerColor = handleColor.isDark() || handleColor.hex().toLowerCase() == '#d15120'
-        ? (0, color_1.default)(custom_1.custom.colors.white || undefined)
-        : (0, color_1.default)(custom_1.custom.colors.black || undefined);
-    // values font styles
-    var valuesStyles = (0, react_1.css)({
-        fontSize: custom_1.custom.utils.convertPxToEm(slider.values),
-        lineHeight: "".concat(slider.values, "px"),
-        color: fontColor,
-    });
-    // shared slider styles
-    var sharedStyles = (0, react_1.css)({
-        '&, *': {
-            boxSizing: 'border-box',
-        },
-        '&, .ss__facet-slider__slider': {
-            margin: 'auto',
-        },
-        '.ss__facet-slider__slider button, .ss__facet-slider__labels label': {
-            margin: 0,
-            padding: 0,
-            '&:focus': {
-                outline: 0,
-            },
-        },
-        '.ss__facet-slider__slider': {
-            display: 'block',
-            top: 0,
-            width: '100%',
-            height: "".concat(slider.bar, "px"),
-            '.ss__facet-slider__segment, .ss__facet-slider__rail, .ss__facet-slider__handles': {
-                height: '100%',
-            },
-            '.ss__facet-slider__tick': {
-                '&:before, .ss__facet-slider__tick__label': {
-                    transform: 'translate(-50%, 0)',
-                },
-                '&:before': {
-                    top: "".concat(slider.ticks / 2, "px"),
-                    backgroundColor: darkGray,
-                },
-                '.ss__facet-slider__tick__label': {
-                    top: "".concat(slider.ticks, "px"),
-                    color: (props === null || props === void 0 ? void 0 : props.tickTextColor) || ((_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.text),
-                    lineHeight: 1,
-                },
-            },
-            '.ss__facet-slider__segment': {
-                backgroundColor: (props === null || props === void 0 ? void 0 : props.trackColor) || custom_1.custom.colors.gray01,
-                border: "1px solid ".concat((props === null || props === void 0 ? void 0 : props.trackColor) || custom_1.custom.colors.gray02),
-                borderRadius: "".concat(slider.bar, "px"),
-            },
-            '.ss__facet-slider__rail': {
-                backgroundColor: (props === null || props === void 0 ? void 0 : props.railColor) || ((_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.secondary),
-                border: "1px solid ".concat((props === null || props === void 0 ? void 0 : props.railColor) || ((_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.secondary)),
-            },
-            '.ss__facet-slider__handles': {
-                position: 'relative',
-                margin: "0 ".concat(slider.handles / 2 - 2, "px"),
-                button: {
-                    '.ss__facet-slider__handle': {
-                        transform: 'none',
-                        width: "".concat(slider.handles, "px"),
-                        height: "".concat(slider.handles, "px"),
-                        lineHeight: "".concat(slider.handles, "px"),
-                        backgroundColor: handleColor.hex(),
-                        border: "1px solid ".concat(handleColor.hex()),
-                        '&:after': {
-                            width: "".concat(slider.handles / 4, "px"),
-                            height: "".concat(slider.handles / 4, "px"),
-                            backgroundColor: handleInnerColor.hex(),
-                            border: "1px solid ".concat(handleInnerColor.hex()),
-                        },
-                        '.ss__facet-slider__handle__label.ss__facet-slider__handle__label--sticky': {
-                            backgroundColor: 'transparent',
-                            '&': __assign({}, valuesStyles),
-                        },
-                    },
-                },
-            },
-        },
-        '.ss__facet-slider__labels': {
-            display: 'flex',
-            flexFlow: 'row nowrap',
-            alignItems: 'center',
-            justifyContent: valuesSides ? '' : 'center',
-            '.ss__facet-slider__label': {
-                '&': __assign({}, valuesStyles),
-                '&:after': {
-                    display: valuesSides ? 'none' : '',
-                    padding: "0 ".concat(custom_1.custom.spacing.x1, "px"),
-                },
-                '& ~ .ss__facet-slider__label': {
-                    marginLeft: valuesSides ? 'auto' : '',
-                },
-            },
-        },
-    });
-    // spacing and size calculations
-    var handlesSizeHalf = (slider.handles - slider.bar) / 2;
-    var handlesSpacing = slider.handles + custom_1.custom.spacing.x2;
-    var ticksSpacing = slider.ticks + custom_1.custom.spacing.x1;
-    var stickySpacing = slider.values + custom_1.custom.spacing.x2;
-    var handlesPlusSticky = handlesSizeHalf + stickySpacing;
-    var ticksPlusSticky = ticksSpacing + stickySpacing;
-    // spacing styles for different configurations
-    // note: default for facet slider is no ticks, no stick handles, values bottom
-    var spacingStyles = (0, react_1.css)({});
-    if (hasTicks && hasStickyHandles) {
-        spacingStyles = (0, react_1.css)({
-            '.ss__facet-slider__slider': {
-                margin: "".concat(valuesTop ? handlesPlusSticky : handlesSizeHalf, "px auto ").concat(valuesTop ? ticksSpacing : ticksPlusSticky, "px auto"),
-                '.ss__facet-slider__handles button .ss__facet-slider__handle': {
-                    '.ss__facet-slider__handle__label.ss__facet-slider__handle__label--sticky': {
-                        top: valuesTop ? "auto" : "".concat(handlesSizeHalf + ticksPlusSticky - slider.bar, "px"),
-                        bottom: valuesTop ? "".concat(handlesSpacing, "px") : "",
-                    },
-                },
-            },
-        });
-    }
-    else if (hasTicks && !hasStickyHandles) {
-        spacingStyles = (0, react_1.css)({
-            '.ss__facet-slider__slider': {
-                margin: "".concat(handlesSizeHalf, "px auto ").concat(ticksSpacing, "px auto"),
-            },
-            '.ss__facet-slider__labels': {
-                order: valuesTop ? -1 : '',
-                margin: "".concat(valuesTop ? 0 : custom_1.custom.spacing.x2, "px 0 ").concat(valuesTop ? custom_1.custom.spacing.x2 : 0, "px 0"),
-            },
-        });
-    }
-    else if (!hasTicks && hasStickyHandles) {
-        spacingStyles = (0, react_1.css)({
-            '.ss__facet-slider__slider': {
-                margin: "".concat(valuesTop ? handlesPlusSticky : handlesSizeHalf, "px auto ").concat(valuesTop ? handlesSizeHalf : handlesPlusSticky, "px auto"),
-                '.ss__facet-slider__handles button .ss__facet-slider__handle': {
-                    '.ss__facet-slider__handle__label.ss__facet-slider__handle__label--sticky': {
-                        top: valuesTop ? 'auto' : "".concat(handlesSpacing, "px"),
-                        bottom: valuesTop ? "".concat(handlesSpacing, "px") : "",
-                    },
-                },
-            },
-        });
-    }
-    else {
-        spacingStyles = (0, react_1.css)({
-            '.ss__facet-slider__slider': {
-                margin: "".concat(handlesSizeHalf, "px auto"),
-            },
-            '.ss__facet-slider__labels': {
-                order: valuesTop ? -1 : '',
-                margin: "".concat(valuesTop ? 0 : custom_1.custom.spacing.x2, "px 0 ").concat(valuesTop ? custom_1.custom.spacing.x2 : 0, "px 0"),
-            },
-        });
-    }
-    return (0, react_1.css)([sharedStyles, spacingStyles]);
-};
-// FacetSlider component props
-exports.facetSlider = {
-    default: {
-        facetSlider: {
-            themeStyleScript: facetSliderStyleScript,
-        },
-    },
-};

package/dist/cjs/components/src/themes/everest/components/molecules/filter.d.ts

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

package/dist/cjs/components/src/themes/everest/components/molecules/filter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/everest/components/molecules/filter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACtG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AA+BvD,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,QAAQ,EAAE,WAAW,EAAE,yBAAyB,CAUnF,CAAC"}

package/dist/cjs/components/src/themes/everest/components/molecules/filter.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.filter = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
-// CSS in JS style script for the Filter component
-var filterStyleScript = function (props) {
-    var _a, _b;
-    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)({
-        display: 'block',
-        padding: 0,
-        '.ss__filter__button': {
-            position: 'relative',
-            height: 'auto',
-            lineHeight: 1.5,
-            padding: "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x2, "px"),
-            fontWeight: 'normal',
-            color: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.text,
-            '&, &:hover, &:not(.ss__button--disabled):hover, &.ss__button--disabled': {
-                backgroundColor: custom_1.custom.colors.gray01,
-                border: "1px solid ".concat(custom_1.custom.colors.gray02),
-            },
-            '.ss__button__content': {
-                '.ss__filter__label': {
-                    fontWeight: custom_1.custom.fonts.weight01,
-                },
-            },
-        },
-    });
-};
-// Filter component props
-exports.filter = {
-    default: {
-        filter: {
-            themeStyleScript: filterStyleScript,
-            icon: custom_1.custom.icons.close,
-        },
-        'filter icon': {
-            size: "".concat(custom_1.custom.sizes.icon10, "px"),
-        },
-    },
-};

package/dist/cjs/components/src/themes/everest/components/molecules/grid.d.ts

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

package/dist/cjs/components/src/themes/everest/components/molecules/grid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/everest/components/molecules/grid.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAChG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAiLvD,eAAO,MAAM,IAAI,EAAE,cAAc,CAAC,MAAM,EAAE,SAAS,EAAE,uBAAuB,CAQ3E,CAAC"}

package/dist/cjs/components/src/themes/everest/components/molecules/grid.js

@@ -1,185 +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.grid = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
-var color_1 = __importDefault(require("color"));
-// grid size
-var gridSize = 42;
-// CSS in JS style script for the Grid component
-var gridStyleScript = function (props) {
-    var _a, _b, _c, _d, _e;
-    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() == '#d15120'
-        ? (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);
-    return (0, react_1.css)({
-        '.ss__grid__title': {
-            margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
-            fontSize: custom_1.custom.utils.convertPxToEm(14),
-            fontWeight: custom_1.custom.fonts.weight02,
-            lineHeight: 1,
-        },
-        '.ss__grid__options': {
-            display: 'flex',
-            flexFlow: 'row wrap',
-            gap: (props === null || props === void 0 ? void 0 : props.gapSize) ? props.gapSize : custom_1.custom.spacing.x1,
-            alignItems: 'center',
-            '&:before, &:after': {
-                display: 'none',
-            },
-            '.ss__grid__option': {
-                flex: '0 1 auto',
-                minWidth: '1px',
-                '&, &.ss__grid__option--selected': {
-                    border: 0,
-                },
-                '.ss__grid__option__inner .ss__grid__option__label, .ss__grid__show-more-wrapper': {
-                    fontSize: custom_1.custom.utils.convertPxToEm(12),
-                    lineHeight: 1,
-                },
-            },
-            '.ss__grid__option:not(.ss__grid__show-more-wrapper)': {
-                position: 'relative',
-                width: "".concat(gridSize, "px"),
-                maxHeight: "".concat(gridSize, "px"),
-                aspectRatio: 1,
-                color: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.text,
-                overflow: 'hidden',
-                '&, &:after, *': {
-                    boxSizing: 'border-box',
-                },
-                '&:before': {
-                    display: 'none',
-                },
-                '&:after': {
-                    content: '""',
-                    position: 'absolute',
-                    top: 0,
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    zIndex: 1,
-                    border: "1px solid ".concat(custom_1.custom.colors.black),
-                    opacity: 0.15,
-                },
-                '&.ss__grid__option--dark, &:has(.ss__grid__option__inner--grey)': {
-                    '.ss__grid__option__inner': {
-                        '.ss__grid__option__label': {
-                            color: fontColor.hex(),
-                        },
-                    },
-                },
-                '&.ss__grid__option--selected': {
-                    '&:after': {
-                        opacity: 0.3,
-                    },
-                    '&:has(.ss__grid__option__inner:not([style]))': {
-                        backgroundColor: activeColor.hex(),
-                        '&:after': {
-                            borderColor: activeColor.hex(),
-                            opacity: 1,
-                        },
-                        '.ss__grid__option__inner': {
-                            '.ss__grid__option__label': {
-                                color: fontColor.hex(),
-                            },
-                        },
-                    },
-                    '&:has(.ss__grid__option__inner .ss__image)': {
-                        backgroundColor: 'transparent',
-                        '&:after': {
-                            borderColor: custom_1.custom.colors.black,
-                            opacity: 0.3,
-                        },
-                        '.ss__grid__option__inner': {
-                            '.ss__grid__option__label': {
-                                color: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.text,
-                            },
-                        },
-                    },
-                    '.ss__grid__option__inner': {
-                        '.ss__grid__option__label': {
-                            fontWeight: custom_1.custom.fonts.weight01,
-                        },
-                    },
-                },
-                '&.ss__grid__option--disabled, &.ss__grid__option--unavailable': {
-                    opacity: 1,
-                    cursor: 'not-allowed',
-                    pointerEvents: 'none',
-                    '.ss__grid__option__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__grid__option__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__grid__option__label': {
-                        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',
-                    },
-                },
-            },
-            '.ss__grid__show-more-wrapper': {
-                maxHeight: 'none',
-            },
-        },
-        '.ss__grid__show-more-wrapper': {
-            '&:not(.ss__grid__option)': {
-                margin: "".concat(custom_1.custom.spacing.x2, "px 0 0 0"),
-            },
-            '&, .ss__grid__show-more': {
-                cursor: 'pointer',
-            },
-            '.ss__grid__show-more': {
-                fontSize: custom_1.custom.utils.convertPxToEm(12),
-                fontWeight: custom_1.custom.fonts.weight01,
-                lineHeight: 1,
-                color: (_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.primary,
-            },
-        },
-    });
-};
-// Grid component props
-exports.grid = {
-    default: {
-        grid: {
-            themeStyleScript: gridStyleScript,
-            gapSize: "".concat(custom_1.custom.spacing.x1, "px"),
-            hideLabels: false,
-        },
-    },
-};