@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/themes/everest/components/templates/searchCollapsible.js

@@ -0,0 +1,86 @@
+"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 _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchCollapsible = void 0;
+var react_1 = require("@emotion/react");
+var searchCollapsible_1 = require("../../../themeComponents/searchCollapsible");
+var custom_1 = require("../../custom");
+// CSS in JS style script for the Search component
+var searchCollapsibleStyleScript = function (props) {
+    var _a;
+    var _b;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var variables = (_b = props === null || props === void 0 ? void 0 : props.theme) === null || _b === void 0 ? void 0 : _b.variables;
+    return (0, react_1.css)((_a = {
+            '&.ss__search-collapsible--sidebar-open': {
+                '.ss__button': {
+                    '.ss__icon--filter': {
+                        transform: 'rotate(-180deg)',
+                    },
+                    '.ss__icon--filters': {
+                        circle: {
+                            '&:last-child': {
+                                transform: 'translateX(-35%)',
+                            },
+                            transform: 'translateX(35%)',
+                        },
+                    },
+                },
+            },
+            '.ss__search-collapsible__header-section, .ss__search-collapsible__main-section': {
+                margin: "0 0 ".concat(custom_1.custom.spacing.x6, "px 0"),
+                '.ss__toolbar .ss__layout': {
+                    gap: "".concat(custom_1.custom.spacing.x4, "px"),
+                },
+            },
+            '.ss__search-collapsible__header-section': {
+                '.ss__search-header': {
+                    textAlign: 'center',
+                },
+            },
+            '.ss__search-collapsible__main-section': {
+                gap: "".concat(custom_1.custom.spacing.x6, "px"),
+                '.ss__search-collapsible__sidebar, .ss__search-collapsible__content': {
+                    minWidth: '1px',
+                },
+                '.ss__search-collapsible__sidebar': {
+                    flex: '0 1 auto',
+                },
+                '.ss__search-collapsible__content': {
+                    flex: '1 1 0%',
+                    gap: "".concat(custom_1.custom.spacing.x4, "px"),
+                },
+            }
+        },
+        _a["@media (max-width: ".concat(custom_1.custom.breakpoints.small, "px)")] = {
+            '.ss__toolbar': {
+                '.ss__pagination-info': {
+                    fontSize: custom_1.custom.utils.convertPxToEm(16),
+                },
+            },
+        },
+        _a));
+};
+exports.searchCollapsible = {
+    default: __assign(__assign({}, searchCollapsible_1.searchCollapsibleThemeComponentProps.default), { searchCollapsible: __assign(__assign({}, (((_a = searchCollapsible_1.searchCollapsibleThemeComponentProps.default) === null || _a === void 0 ? void 0 : _a['searchCollapsible']) || {})), { themeStyleScript: searchCollapsibleStyleScript }), 'searchCollapsible sidebar': {
+            hideTitleText: true,
+        }, 'searchCollapsible button.sidebar-toggle': {
+            icon: custom_1.custom.icons.filter,
+        }, 'searchCollapsible filterSummary': {
+            type: 'list',
+        } }),
+    mobile: __assign({}, searchCollapsible_1.searchCollapsibleThemeComponentProps.mobile),
+    tablet: __assign({}, searchCollapsible_1.searchCollapsibleThemeComponentProps.tablet),
+    desktop: __assign({}, searchCollapsible_1.searchCollapsibleThemeComponentProps.desktop),
+};

package/dist/cjs/components/src/themes/everest/components/templates/searchHorizontal.d.ts

@@ -0,0 +1,4 @@
+import type { SearchHorizontalProps } from '../../../../components/Templates/SearchHorizontal';
+import { ThemeComponent } from '../../../../providers';
+export declare const searchHorizontal: ThemeComponent<'searchHorizontal', SearchHorizontalProps>;
+//# sourceMappingURL=searchHorizontal.d.ts.map

package/dist/cjs/components/src/themes/everest/components/templates/searchHorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/everest/components/templates/searchHorizontal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAE/F,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAyDvD,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,EAAE,qBAAqB,CAiBtF,CAAC"}

package/dist/cjs/components/src/themes/everest/components/templates/searchHorizontal.js

@@ -0,0 +1,79 @@
+"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 _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchHorizontal = void 0;
+var react_1 = require("@emotion/react");
+var searchHorizontal_1 = require("../../../themeComponents/searchHorizontal");
+var custom_1 = require("../../custom");
+// CSS in JS style script for the Search component
+var searchHorizontalStyleScript = function (props) {
+    var _a;
+    var _b, _c;
+    var variables = (_b = props === null || props === void 0 ? void 0 : props.theme) === null || _b === void 0 ? void 0 : _b.variables;
+    var mobileBp = ((_c = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _c === void 0 ? void 0 : _c.mobile) || custom_1.custom.breakpoints.mobile;
+    return (0, react_1.css)((_a = {
+            '.ss__search-horizontal__header-section, .ss__search-horizontal__main-section': {
+                margin: "0 0 ".concat(custom_1.custom.spacing.x6, "px 0"),
+                '.ss__toolbar .ss__layout': {
+                    gap: "".concat(custom_1.custom.spacing.x4, "px"),
+                    '.ss__layout__row': {
+                        '&:has(.ss__facets-horizontal)': {
+                            alignItems: 'flex-start',
+                            '& > *': {
+                                minWidth: '1px',
+                                flex: '0 1 auto',
+                            },
+                            '.ss__facets-horizontal': {
+                                flex: '1 1 0%',
+                            },
+                        },
+                    },
+                },
+            },
+            '.ss__search-horizontal__header-section': {
+                '.ss__search-header': {
+                    textAlign: 'center',
+                },
+            },
+            '.ss__search-horizontal__main-section': {
+                gap: "".concat(custom_1.custom.spacing.x6, "px"),
+                '.ss__search-horizontal__sidebar, .ss__search-horizontal__content': {
+                    minWidth: '1px',
+                },
+                '.ss__search-horizontal__sidebar': {
+                    flex: '0 1 auto',
+                },
+                '.ss__search-horizontal__content': {
+                    flex: '1 1 0%',
+                    gap: "".concat(custom_1.custom.spacing.x4, "px"),
+                },
+            }
+        },
+        _a["@media (max-width: ".concat(mobileBp, "px)")] = {
+            '.ss__search-horizontal__main-section': {
+                '.ss__toolbar': {
+                    '.ss__select': {
+                        flex: '1 1 0%',
+                    },
+                },
+            },
+        },
+        _a));
+};
+exports.searchHorizontal = {
+    default: __assign(__assign({}, searchHorizontal_1.searchHorizontalThemeComponentProps.default), { searchHorizontal: __assign(__assign({}, (((_a = searchHorizontal_1.searchHorizontalThemeComponentProps.default) === null || _a === void 0 ? void 0 : _a['searchHorizontal']) || {})), { themeStyleScript: searchHorizontalStyleScript }) }),
+    mobile: __assign({}, searchHorizontal_1.searchHorizontalThemeComponentProps.mobile),
+    tablet: __assign({}, searchHorizontal_1.searchHorizontalThemeComponentProps.tablet),
+    desktop: __assign({}, searchHorizontal_1.searchHorizontalThemeComponentProps.desktop),
+};

package/dist/cjs/components/src/themes/everest/custom.d.ts

@@ -0,0 +1,27 @@
+import { IconType } from '../../components/Atoms/Icon';
+export declare const custom: {
+    breakpoints: {
+        [key: string]: number;
+    };
+    colors: {
+        [key: string]: string;
+    };
+    fonts: {
+        [key: string]: any;
+    };
+    icons: {
+        [key: string]: IconType;
+    };
+    sizes: {
+        [key: string]: number;
+    };
+    spacing: {
+        [key: string]: number;
+    };
+    utils: {
+        convertPxToEm: (value: number) => string;
+        lightenColor: (color: string | undefined, amount: number) => string;
+        darkenColor: (color: string | undefined, amount: number) => string;
+    };
+};
+//# sourceMappingURL=custom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"custom.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/everest/custom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AASvD,eAAO,MAAM,MAAM,EAAE;IACpB,WAAW,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACtB,CAAC;IACF,MAAM,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACtB,CAAC;IACF,KAAK,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACnB,CAAC;IACF,KAAK,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;KACxB,CAAC;IACF,KAAK,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACtB,CAAC;IACF,OAAO,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACtB,CAAC;IACF,KAAK,EAAE;QACN,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QACzC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;QACpE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;KACnE,CAAC;CA2EF,CAAC"}

package/dist/cjs/components/src/themes/everest/custom.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.custom = void 0;
+var color_1 = __importDefault(require("color"));
+// calculate spacing
+var spacing = 5;
+var spacingCalc = function (value) {
+    return spacing * value;
+};
+exports.custom = {
+    breakpoints: {
+        small: 540,
+        mobile: 767,
+        tablet: 1024,
+        desktop: 1280,
+    },
+    colors: {
+        white: '#ffffff',
+        black: '#000000',
+        gray01: '#f8f8f8', // lighter gray: bg color under terms, dropdown, checkboxes
+        gray02: '#ebebeb', // light gray: borders for autocomplete, dropdown, checkboxes
+        brown: '#845329', // for color palette
+        purple: '#7c368e', // for color palette
+        rainbow: 'linear-gradient(rgb(40, 87, 218) 20%, rgb(40, 218, 70) 20%, rgb(40, 218, 70) 40%, rgb(245, 228, 24) 40%, rgb(245, 228, 24) 60%, rgb(242, 133, 0) 60%, rgb(242, 133, 0) 80%, rgb(218, 40, 72) 80%, rgb(218, 40, 72))', // for color palette
+    },
+    fonts: {
+        weight01: 700, // main font weight
+        weight02: 700, // header font weight
+        style: false,
+        transform: 'uppercase',
+    },
+    icons: {
+        arrowLeft: 'chevron-left',
+        arrowRight: 'chevron-right',
+        arrowDown: 'chevron-down',
+        arrowUp: 'chevron-up',
+        bag: 'bag',
+        check: 'square',
+        close: 'close',
+        minus: 'minus',
+        plus: 'plus',
+        filter: 'filter',
+        filters: 'filters',
+        search: 'search',
+        sort: 'sort',
+    },
+    sizes: {
+        font: 16, // base font size
+        height: 35, // refers to height for button and dropdown sizes
+        icon08: 8,
+        icon10: 10,
+        icon12: 12,
+        icon14: 14,
+        icon16: 16,
+        radius: 3, // global border radius value
+    },
+    spacing: {
+        x1: spacing,
+        x2: spacingCalc(2),
+        x3: spacingCalc(3),
+        x4: spacingCalc(4),
+        x5: spacingCalc(5),
+        x6: spacingCalc(6),
+        x7: spacingCalc(7),
+        x8: spacingCalc(8),
+    },
+    utils: {
+        convertPxToEm: function (value) {
+            // translates px to rem
+            return "".concat(value / exports.custom.sizes.font, "rem");
+        },
+        lightenColor: function (color, amount) {
+            // lighten a color
+            var lightColor = new color_1.default(color || '#515151').lighten(amount).hex().toLowerCase();
+            return lightColor;
+        },
+        darkenColor: function (color, amount) {
+            // darken a color
+            var darkColor = new color_1.default(color || '#515151').darken(amount).hex().toLowerCase();
+            return darkColor;
+        },
+    },
+};

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

@@ -0,0 +1,3 @@
+import { ThemeComplete } from '../../providers';
+export declare const everest: ThemeComplete;
+//# sourceMappingURL=everest.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"everest.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/everest/everest.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,iBAAiB,CAAC;AAkBhE,eAAO,MAAM,OAAO,EAAE,aAKrB,CAAC"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.everest = void 0;
+var components_1 = require("./components");
+var responsive_1 = require("./responsive");
+var everestVariables = {
+    breakpoints: {
+        mobile: 767,
+        tablet: 991,
+        desktop: 1199,
+    },
+    colors: {
+        text: '#515151',
+        primary: '#d15120',
+        secondary: '#94280b',
+        accent: '#a8391c',
+    },
+};
+exports.everest = {
+    name: 'everest',
+    variables: everestVariables,
+    components: components_1.components,
+    responsive: responsive_1.responsive,
+};

package/dist/cjs/components/src/themes/everest/responsive.d.ts

@@ -0,0 +1,3 @@
+import { ThemeResponsive } from '../../providers/theme';
+export declare const responsive: ThemeResponsive;
+//# sourceMappingURL=responsive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/everest/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,eAAO,MAAM,UAAU,EAAE,eAIxB,CAAC"}

package/dist/cjs/components/src/themes/everest/responsive.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.responsive = void 0;
+var components_1 = require("./components");
+exports.responsive = {
+    mobile: components_1.mobileComponents,
+    tablet: components_1.tabletComponents,
+    desktop: components_1.desktopComponents,
+};

package/dist/cjs/components/src/themes/index.d.ts

@@ -0,0 +1,8 @@
+export * from './base/base';
+export * from './bocachica/bocachica';
+export * from './everest/everest';
+export * from './matterhorn/matterhorn';
+export * from './pike/pike';
+export * from './snapnco/snapnco';
+export * from './snappy/snappy';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/src/themes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/src/themes/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/dist/cjs/components/src/themes/index.js

@@ -0,0 +1,23 @@
+"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("./base/base"), exports);
+__exportStar(require("./bocachica/bocachica"), exports);
+__exportStar(require("./everest/everest"), exports);
+__exportStar(require("./matterhorn/matterhorn"), exports);
+__exportStar(require("./pike/pike"), exports);
+__exportStar(require("./snapnco/snapnco"), exports);
+__exportStar(require("./snappy/snappy"), exports);

package/dist/cjs/components/src/themes/matterhorn/components/atoms/breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbsProps } from '../../../../components/Atoms/Breadcrumbs';
+import { ThemeComponent } from '../../../../providers';
+export declare const breadcrumbs: ThemeComponent<'breadcrumbs', BreadcrumbsProps>;
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/atoms/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/atoms/breadcrumbs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAmCvD,eAAO,MAAM,WAAW,EAAE,cAAc,CAAC,aAAa,EAAE,gBAAgB,CAQvE,CAAC"}

package/dist/cjs/components/src/themes/matterhorn/components/atoms/breadcrumbs.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbs = void 0;
+var react_1 = require("@emotion/react");
+var custom_1 = require("../../custom");
+// CSS in JS style script for the Breadcrumbs component
+var breadcrumbsStyleScript = 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__breadcrumbs__crumbs': {
+            margin: "0 -".concat(custom_1.custom.spacing.x1, "px"),
+            '&, li': {
+                listStyle: 'none',
+            },
+            '&, a': {
+                color: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.text,
+            },
+            li: {
+                display: 'block',
+                padding: "0 ".concat(custom_1.custom.spacing.x1, "px"),
+                '&:last-of-type': {
+                    color: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.primary,
+                    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,
+                },
+            },
+            '.ss__breadcrumbs__crumbs__separator': {
+                '.ss__icon': {
+                    width: "".concat(custom_1.custom.sizes.icon10, "px"),
+                    height: "".concat(custom_1.custom.sizes.icon10, "px"),
+                },
+            },
+        },
+    });
+};
+// Breadcrumbs component props
+exports.breadcrumbs = {
+    default: {
+        breadcrumbs: {
+            themeStyleScript: breadcrumbsStyleScript,
+            separator: false,
+            separatorIcon: custom_1.custom.icons.arrowRight,
+        },
+    },
+};

package/dist/cjs/components/src/themes/matterhorn/components/atoms/button.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from '../../../../components/Atoms/Button';
+import { ThemeComponent } from '../../../../providers';
+export declare const button: ThemeComponent<'button', ButtonProps>;
+//# sourceMappingURL=button.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/atoms/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/atoms/button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAiEvD,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,QAAQ,EAAE,WAAW,CAOxD,CAAC"}

package/dist/cjs/components/src/themes/matterhorn/components/atoms/button.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.button = 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 Button component
+var buttonStyleScript = function (props) {
+    var _a, _b;
+    var _c, _d;
+    var variables = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.variables;
+    var buttonDisabledSelectors = '&.ss__button--disabled';
+    var buttonSelector = "&, &:hover, &:not(.ss__button--disabled):hover, ".concat(buttonDisabledSelectors);
+    var buttonColor = new color_1.default((props === null || props === void 0 ? void 0 : props.backgroundColor) || ((_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.primary) || undefined);
+    var fontColor = buttonColor.isDark() || buttonColor.hex().toLowerCase() == '#00aeef' ? (0, color_1.default)(custom_1.custom.colors.white) : (0, color_1.default)(custom_1.custom.colors.black);
+    // shared button styles
+    var disabledStyles = (0, react_1.css)((_a = {},
+        _a[buttonDisabledSelectors] = {
+            opacity: 0.65,
+            '&, & *': {
+                cursor: 'not-allowed',
+            },
+        },
+        _a));
+    // default styles
+    var defaultStyles = (0, react_1.css)([
+        (_b = {
+                boxSizing: 'border-box',
+                cursor: 'pointer',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: "".concat(custom_1.custom.spacing.x1, "px"),
+                position: 'relative',
+                padding: "0 ".concat(custom_1.custom.spacing.x4, "px"),
+                color: fontColor.hex(),
+                fontSize: custom_1.custom.utils.convertPxToEm(14),
+                fontWeight: custom_1.custom.fonts.weight01,
+                textAlign: 'center',
+                textTransform: custom_1.custom.fonts.transform,
+                height: "".concat(custom_1.custom.sizes.height, "px"),
+                lineHeight: "".concat(custom_1.custom.sizes.height, "px"),
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+            },
+            _b[buttonSelector] = {
+                border: "1px solid ".concat(buttonColor.hex()),
+                borderRadius: "".concat(custom_1.custom.sizes.radius, "px"),
+                backgroundColor: buttonColor.hex(),
+            },
+            _b['.ss__icon'] = {
+                width: "".concat(custom_1.custom.sizes.icon12, "px"),
+                height: "".concat(custom_1.custom.sizes.icon12, "px"),
+                flex: "0 0 ".concat(custom_1.custom.sizes.icon12, "px"),
+            },
+            _b['.ss__icon--filters'] = {
+                circle: {
+                    fill: buttonColor.hex(),
+                },
+            },
+            _b),
+        disabledStyles,
+    ]);
+    return defaultStyles;
+};
+// Button component props
+exports.button = {
+    default: {
+        button: {
+            themeStyleScript: buttonStyleScript,
+            native: false,
+        },
+    },
+};

package/dist/cjs/components/src/themes/matterhorn/components/atoms/dropdown.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownProps } from '../../../../components/Atoms/Dropdown';
+import { ThemeComponent } from '../../../../providers';
+export declare const dropdown: ThemeComponent<'dropdown', DropdownProps>;
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/atoms/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/atoms/dropdown.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AA+BvD,eAAO,MAAM,QAAQ,EAAE,cAAc,CAAC,UAAU,EAAE,aAAa,CAM9D,CAAC"}

package/dist/cjs/components/src/themes/matterhorn/components/atoms/dropdown.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdown = void 0;
+var react_1 = require("@emotion/react");
+// CSS in JS style script for the Dropdown component
+var dropdownStyleScript = function (_a) {
+    var theme = _a.theme;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+    return (0, react_1.css)({
+        width: 'auto',
+        '&:not(.ss__facet__dropdown)': {
+            '&.ss__dropdown--open': {
+                '.ss__dropdown__content': {
+                    zIndex: 200,
+                },
+            },
+        },
+        '&.ss__dropdown--open': {
+            '.ss__dropdown__content': {
+                zIndex: 5,
+            },
+        },
+        '.ss__dropdown__content': {
+            minWidth: '1px',
+            left: 0,
+            right: 0,
+            zIndex: -1,
+        },
+    });
+};
+// Dropdown component props
+exports.dropdown = {
+    default: {
+        dropdown: {
+            themeStyleScript: dropdownStyleScript,
+        },
+    },
+};

package/dist/cjs/components/src/themes/matterhorn/components/atoms/icon.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from '../../../../components/Atoms/Icon';
+import { ThemeComponent } from '../../../../providers';
+export declare const icon: ThemeComponent<'icon', IconProps>;
+//# sourceMappingURL=icon.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/atoms/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/atoms/icon.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAevD,eAAO,MAAM,IAAI,EAAE,cAAc,CAAC,MAAM,EAAE,SAAS,CAOlD,CAAC"}

package/dist/cjs/components/src/themes/matterhorn/components/atoms/icon.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.icon = void 0;
+var react_1 = require("@emotion/react");
+var custom_1 = require("../../custom");
+// CSS in JS style script for the Icon component
+var iconStyleScript = 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)({
+        fill: 'currentColor',
+        stroke: 'currentColor',
+    });
+};
+// Icon component props
+exports.icon = {
+    default: {
+        icon: {
+            themeStyleScript: iconStyleScript,
+            size: "".concat(custom_1.custom.sizes.icon16, "px"),
+        },
+    },
+};

package/dist/cjs/components/src/themes/matterhorn/components/atoms/image.d.ts

@@ -0,0 +1,4 @@
+import type { ImageProps } from '../../../../components/Atoms/Image';
+import { ThemeComponent } from '../../../../providers';
+export declare const image: ThemeComponent<'image', ImageProps>;
+//# sourceMappingURL=image.d.ts.map

package/dist/cjs/components/src/themes/matterhorn/components/atoms/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/matterhorn/components/atoms/image.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAqCvD,eAAO,MAAM,KAAK,EAAE,cAAc,CAAC,OAAO,EAAE,UAAU,CAMrD,CAAC"}