@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/themes/pike/components/templates/searchCollapsible.js

@@ -0,0 +1,158 @@
+import { css } from '@emotion/react';
+import { searchCollapsibleThemeComponentProps } from '../../../themeComponents/searchCollapsible';
+import { custom } from '../../custom';
+// CSS in JS style script for the Search component
+const searchCollapsibleStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    const tabletBp = variables?.breakpoints?.tablet || custom.breakpoints.tablet;
+    // search collapsible styles
+    const searchCollapsibleStyles = css({
+        ...custom.styles.boxSizing('searchCollapsible', props?.treePath, props?.name),
+        '&:not(:has(.ss__no-results))': {
+            '.ss__search-collapsible__header-section': {
+                margin: `0 0 ${custom.spacing.x4}px 0`,
+                '.ss__toolbar': {
+                    '.ss__layout__row:has(.ss__search-header)': {
+                        margin: `0 0 ${custom.spacing.x4}px 0`,
+                        '.ss__search-header': {
+                            textAlign: 'center',
+                        },
+                    },
+                },
+            },
+        },
+        '.ss__search-collapsible__header-section, .ss__search-collapsible__main-section': {
+            margin: `0 0 ${custom.spacing.x6}px 0`,
+        },
+        '.ss__search-collapsible__main-section': {
+            gap: `${custom.spacing.x6}px`,
+            '.ss__search-collapsible__sidebar, .ss__search-collapsible__content': {
+                minWidth: '1px',
+            },
+            '.ss__search-collapsible__sidebar': {
+                flex: '0 1 auto',
+                '.ss__sidebar': {
+                    width: '250px',
+                },
+            },
+            '.ss__search-collapsible__content': {
+                flex: '1 1 0%',
+                gap: `${custom.spacing.x4}px`,
+            },
+        },
+        [`${custom.utils.getBp(tabletBp)}`]: {
+            '&:not(:has(.ss__no-results))': {
+                '.ss__search-collapsible__header-section': {
+                    margin: 0,
+                    '.ss__toolbar': {
+                        '.ss__layout__row:has(.ss__search-header)': {
+                            flexWrap: 'nowrap',
+                            '.ss__search-header': {
+                                textAlign: 'left',
+                                '&:has(.ss__search-header__subtitle)': {
+                                    '.ss__search-header__title': {
+                                        padding: `0 ${custom.spacing.x1}px 0 0`,
+                                        '&:after': {
+                                            content: '"."',
+                                        },
+                                    },
+                                },
+                                '.ss__search-header__title, .ss__search-header__subtitle': {
+                                    display: 'inline',
+                                },
+                                '.ss__search-header__title': {
+                                    fontSize: '16px',
+                                },
+                                '.ss__search-header__subtitle': {
+                                    fontSize: '14px',
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+            '&:not(.ss__search-collapsible--sidebar-open)': {
+                '&:has(.ss__list__option--selected[title*="2"])': {
+                    '.ss__results-grid': {
+                        gridTemplateColumns: 'repeat(3, 1fr)',
+                    },
+                },
+                '&:has(.ss__list__option--selected[title*="3"])': {
+                    '.ss__results-grid': {
+                        gridTemplateColumns: 'repeat(4, 1fr)',
+                    },
+                },
+                '&:has(.ss__list__option--selected[title*="4"])': {
+                    '.ss__results-grid': {
+                        gridTemplateColumns: 'repeat(5, 1fr)',
+                    },
+                },
+            },
+        },
+    });
+    return searchCollapsibleStyles;
+};
+export const searchCollapsible = {
+    default: {
+        ...searchCollapsibleThemeComponentProps.default,
+        searchCollapsible: {
+            ...(searchCollapsibleThemeComponentProps.default?.['searchCollapsible'] || {}),
+            themeStyleScript: searchCollapsibleStyleScript,
+        },
+        'searchCollapsible sidebar': {
+            hideTitleText: true,
+        },
+        'searchCollapsible button.sidebar-toggle': {
+            icon: custom.icons.filter,
+        },
+        'searchCollapsible filterSummary': {
+            type: 'list',
+        },
+    },
+    mobile: {
+        ...searchCollapsibleThemeComponentProps.mobile,
+        searchCollapsible: {
+            ...(searchCollapsibleThemeComponentProps.mobile?.['searchCollapsible'] || {}),
+        },
+    },
+    tablet: {
+        ...searchCollapsibleThemeComponentProps.tablet,
+        searchCollapsible: {
+            ...(searchCollapsibleThemeComponentProps.tablet?.['searchCollapsible'] || {}),
+        },
+    },
+    desktop: {
+        ...searchCollapsibleThemeComponentProps.desktop,
+        searchCollapsible: {
+            ...(searchCollapsibleThemeComponentProps.desktop?.['searchCollapsible'] || {}),
+            layoutOptions: [
+                {
+                    value: 1,
+                    label: '3 wide',
+                    default: true,
+                    icon: 'layout-grid-3',
+                    overrides: {
+                        components: {
+                            'searchCollapsible results': {
+                                columns: 3,
+                            },
+                        },
+                    },
+                },
+                {
+                    value: 2,
+                    label: '2 wide',
+                    icon: 'layout-grid-2',
+                    overrides: {
+                        components: {
+                            'searchCollapsible results': {
+                                columns: 2,
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};

package/dist/esm/components/src/themes/pike/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/esm/components/src/themes/pike/components/templates/searchHorizontal.d.ts.map

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

package/dist/esm/components/src/themes/pike/components/templates/searchHorizontal.js

@@ -0,0 +1,100 @@
+import { css } from '@emotion/react';
+import { searchHorizontalThemeComponentProps } from '../../../themeComponents/searchHorizontal';
+import { custom } from '../../custom';
+// CSS in JS style script for the Search component
+const searchHorizontalStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    const mobileBp = variables?.breakpoints?.mobile || custom.breakpoints.mobile;
+    // search horizontal styles
+    const searchHorizontalStyles = css({
+        ...custom.styles.boxSizing('searchHorizontal', props?.treePath, props?.name),
+        '.ss__search-horizontal__header-section, .ss__search-horizontal__main-section': {
+            margin: `0 0 ${custom.spacing.x6}px 0`,
+        },
+        '.ss__search-horizontal__main-section': {
+            gap: `${custom.spacing.x6}px`,
+            '.ss__search-horizontal__content': {
+                minWidth: '1px',
+                flex: '1 1 0%',
+                gap: `${custom.spacing.x4}px`,
+            },
+            '.ss__facets-horizontal': {
+                margin: `0 0 ${custom.spacing.x4}px 0`,
+            },
+            '.ss__toolbar': {
+                '.ss__layout__row': {
+                    '&:has(.ss__mobile-sidebar)': {
+                        '.ss__mobile-sidebar': {
+                            minWidth: '1px',
+                            '.ss__mobile-sidebar__slideout__button': {
+                                width: '100%',
+                            },
+                        },
+                    },
+                    '&:has(.ss__select)': {
+                        '.ss__select': {
+                            flex: '1 1 0%',
+                        },
+                    },
+                },
+            },
+        },
+        [`${custom.utils.getBp(custom.breakpoints.small)}`]: {
+            '.ss__search-horizontal__main-section': {
+                '.ss__toolbar': {
+                    '.ss__layout__row:has(.ss__mobile-sidebar)': {
+                        '.ss__mobile-sidebar': {
+                            minWidth: '200px',
+                        },
+                    },
+                },
+            },
+        },
+        [`${custom.utils.getBp(mobileBp)}`]: {
+            '.ss__search-horizontal__main-section': {
+                '.ss__toolbar': {
+                    '.ss__layout__row:has(.ss__select)': {
+                        '.ss__select': {
+                            flex: '0 1 auto',
+                        },
+                    },
+                },
+            },
+        },
+    });
+    return searchHorizontalStyles;
+};
+export const searchHorizontal = {
+    default: {
+        ...searchHorizontalThemeComponentProps.default,
+        searchHorizontal: {
+            ...(searchHorizontalThemeComponentProps.default?.['searchHorizontal'] || {}),
+            themeStyleScript: searchHorizontalStyleScript,
+        },
+        'searchHorizontal results': {
+            columns: 5,
+        },
+    },
+    mobile: {
+        ...searchHorizontalThemeComponentProps.mobile,
+        searchHorizontal: {
+            ...(searchHorizontalThemeComponentProps.mobile?.['searchHorizontal'] || {}),
+        },
+    },
+    tablet: {
+        ...searchHorizontalThemeComponentProps.tablet,
+        searchHorizontal: {
+            ...(searchHorizontalThemeComponentProps.tablet?.['searchHorizontal'] || {}),
+        },
+    },
+    desktop: {
+        ...searchHorizontalThemeComponentProps.desktop,
+        searchHorizontal: {
+            ...(searchHorizontalThemeComponentProps.desktop?.['searchHorizontal'] || {}),
+        },
+        'searchHorizontal results': {
+            columns: 4,
+        },
+    },
+};

package/dist/esm/components/src/themes/pike/custom.d.ts

@@ -0,0 +1,49 @@
+import { IconType } from '../../components/Atoms/Icon';
+export declare const custom: CustomThemeType;
+type ObjectAnyType = {
+    [key: string]: any;
+};
+type ObjectIconType = {
+    [key: string]: IconType;
+};
+type ObjectNestedType = {
+    [key: string]: ObjectNumberOrStringType | ObjectNestedType;
+};
+type ObjectNumberType = {
+    [key: string]: number;
+};
+type ObjectNumberOrStringType = {
+    [key: string]: number | string;
+};
+type ObjectStringType = {
+    [key: string]: string;
+};
+type CustomThemeType = {
+    breakpoints: ObjectNumberType;
+    colors: ObjectStringType;
+    fonts: ObjectAnyType;
+    icons: ObjectIconType;
+    sizes: ObjectNumberType;
+    spacing: ObjectNumberType;
+    styles: {
+        activeText: (color?: string) => ObjectNestedType;
+        badgeText: (fontSize: number) => ObjectNumberOrStringType;
+        borderRadius: (value?: number, unit?: string) => ObjectStringType | null;
+        box: (color?: string, padding?: number | string, radius?: boolean) => ObjectNumberOrStringType;
+        boxSizing: (component: string, treePath?: string, name?: string) => ObjectNestedType | null;
+        disabled: () => ObjectNumberOrStringType | ObjectNestedType;
+        headerText: (color?: string, fontSize?: string) => ObjectNumberOrStringType;
+        resultCompact: (layout?: string, imageWidth?: string, fontSize?: number) => ObjectNumberOrStringType | ObjectNestedType;
+        scrollbar: () => ObjectNestedType;
+        srOnly: () => ObjectNumberOrStringType;
+        textOverflow: () => ObjectNumberOrStringType;
+    };
+    utils: {
+        activeColors: (color?: string) => string[];
+        darkenColor: (color?: string, amount?: number) => string;
+        getBp: (bp: number, rule?: string) => string;
+        lightenColor: (color?: string, amount?: number) => string;
+    };
+};
+export {};
+//# sourceMappingURL=custom.d.ts.map

package/dist/esm/components/src/themes/pike/custom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/pike/custom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAWvD,eAAO,MAAM,MAAM,EAAE,eAgRpB,CAAC;AAGF,KAAK,aAAa,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB,CAAC;AAEF,KAAK,cAAc,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;CACxB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,wBAAwB,GAAG,gBAAgB,CAAC;CAC3D,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAC/B,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACtB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,MAAM,EAAE;QACP,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,gBAAgB,CAAC;QACjD,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,wBAAwB,CAAC;QAC1D,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,gBAAgB,GAAG,IAAI,CAAC;QACzE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,wBAAwB,CAAC;QAC/F,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,gBAAgB,GAAG,IAAI,CAAC;QAC5F,QAAQ,EAAE,MAAM,wBAAwB,GAAG,gBAAgB,CAAC;QAC5D,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,wBAAwB,CAAC;QAC5E,aAAa,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,wBAAwB,GAAG,gBAAgB,CAAC;QACxH,SAAS,EAAE,MAAM,gBAAgB,CAAC;QAClC,MAAM,EAAE,MAAM,wBAAwB,CAAC;QACvC,YAAY,EAAE,MAAM,wBAAwB,CAAC;KAC7C,CAAC;IACF,KAAK,EAAE;QACN,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;QAC3C,WAAW,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;QACzD,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;QAC7C,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;KAC1D,CAAC;CACF,CAAC"}

package/dist/esm/components/src/themes/pike/custom.js

@@ -0,0 +1,274 @@
+import Color from 'color';
+// calculate spacing
+const spacing = 5;
+const spacingCalc = (value) => {
+    return spacing * value;
+};
+// custom theme object
+// contains defaults, colors, utils, global styles, etc.
+export const custom = {
+    breakpoints: {
+        small: 540,
+        mobile: 767,
+        tablet: 991,
+        desktop: 1199,
+    },
+    colors: {
+        text: '#515151', // theme color
+        primary: '#00aeef', // theme color
+        secondary: '#1d4990', // theme color
+        accent: '#2154a5', // theme color
+        white: '#ffffff',
+        black: '#000000',
+        gray01: '#f8f8f8', // lighter gray: bg color under terms, dropdown, checkboxes
+        gray02: '#ebebeb', // light gray: borders for autocomplete, dropdown, checkboxes
+        overlay: 'rgba(0, 0, 0, 0.80)', // color used for overlays
+    },
+    fonts: {
+        weight01: 700, // main font weight
+        weight02: 700, // header font weight
+        style: false,
+        transform: 'none',
+    },
+    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',
+        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: 0, // 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),
+    },
+    styles: {
+        activeText: (color) => {
+            // active text styles
+            return {
+                '&, &:hover': {
+                    fontWeight: custom?.fonts?.weight01,
+                    color: color ? color : '',
+                },
+            };
+        },
+        badgeText: (fontSize) => {
+            // badge text styles
+            return {
+                display: 'block',
+                fontSize: fontSize,
+                lineHeight: 1.2,
+            };
+        },
+        borderRadius: (value, unit) => {
+            const hasValue = value || value === 0 ? true : false;
+            value = hasValue ? value : custom.sizes.radius;
+            unit = unit ? unit : value === 0 ? '' : 'px';
+            // sets border radius
+            return {
+                borderRadius: hasValue || custom.sizes.radius ? `${value}${unit}` : ``,
+            };
+        },
+        box: (color, padding, radius) => {
+            // styles for box designs
+            // define padding value
+            if (padding) {
+                padding = padding;
+            }
+            else if (padding === 0) {
+                padding = '';
+            }
+            else {
+                padding = `${custom.spacing.x2}px`;
+            }
+            // check if radius setting is available
+            const hasRadius = typeof radius == 'boolean' ? radius : true;
+            // radius style if available
+            const radiusStyle = hasRadius && custom.sizes.radius ? custom.styles.borderRadius() : null;
+            return {
+                border: `1px solid ${custom.colors.gray02}`,
+                ...radiusStyle,
+                backgroundColor: custom.colors.gray01,
+                color: color ? color : '',
+                padding: padding,
+            };
+        },
+        boxSizing: (component, treePath, name) => {
+            treePath = treePath ? treePath : component;
+            component = name ? `${component}.${name}` : component; // if name is present, add to component
+            component = treePath.includes('storybook') ? `storybook ${component}` : component; // or if component is in storybook, add it
+            // box-sizing rules for uniform sizing
+            // if path and component are same, apply box-sizing
+            // if they are not the same, this means some parent component will have the box sizing rules
+            if (treePath == component) {
+                return {
+                    '&, *, *:before, *:after': {
+                        boxSizing: 'border-box',
+                    },
+                };
+            }
+            else {
+                return null;
+            }
+        },
+        disabled: () => {
+            // disabled styles
+            return {
+                '&': {
+                    cursor: 'not-allowed !important',
+                    opacity: 0.65,
+                },
+                '*': {
+                    pointerEvents: 'none',
+                    opacity: 1,
+                },
+            };
+        },
+        headerText: (color, fontSize) => {
+            // header text styles
+            return {
+                fontSize: fontSize ? fontSize : '',
+                fontWeight: custom?.fonts?.weight02,
+                textTransform: custom?.fonts?.transform,
+                color: color ? color : '',
+            };
+        },
+        resultCompact: (layout, imageWidth, fontSize) => {
+            layout = (layout && layout == 'grid') || layout == 'list' ? layout : 'list';
+            fontSize = fontSize ? fontSize : 14;
+            // shared styles
+            const sharedStyles = {
+                '&': {
+                    gap: `${custom.spacing.x1}px`,
+                },
+                '.ss__result__details__title a, .ss__result__details__pricing .ss__price--strike, .ss__result__details__pricing .ss__price--strike span': {
+                    fontSize: `${fontSize}px`,
+                },
+                '.ss__result__details__pricing .ss__result__price': {
+                    fontSize: `${fontSize + 2}px`,
+                },
+                '.ss__result__details__title a': {
+                    display: '-webkit-box',
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    WebkitLineClamp: '2',
+                },
+                '.ss__result__add-to-cart-wrapper': {
+                    marginTop: '2.5px',
+                },
+            };
+            // compact grid styles
+            const gridStyles = {
+                '.ss__result__details': {
+                    ...sharedStyles,
+                },
+            };
+            // compact list styles
+            const listStyles = {
+                '&': {
+                    gap: `${custom.spacing.x2}px`,
+                },
+                '.ss__result__image-wrapper': {
+                    flex: imageWidth ? imageWidth : '',
+                },
+                '.ss__result__details': {
+                    '.ss__result__details__title, .ss__result__details__pricing': {
+                        flex: '1 1 100%',
+                    },
+                    ...sharedStyles,
+                    '.ss__result__details__variant-selection .ss__variant-selection': {
+                        width: '100%',
+                    },
+                },
+            };
+            return layout == 'grid' ? gridStyles : listStyles;
+        },
+        scrollbar: () => {
+            // scrollbar styles
+            return {
+                '&::-webkit-scrollbar': {
+                    width: '8px',
+                    height: '8px',
+                },
+                '&::-webkit-scrollbar-track': {
+                    backgroundColor: custom.colors.gray01,
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    backgroundColor: custom.colors.gray02,
+                },
+            };
+        },
+        srOnly: () => {
+            // screen reader only styles
+            return {
+                position: 'absolute',
+                width: '1px',
+                height: '1px',
+                padding: 0,
+                margin: '-1px',
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+            };
+        },
+        textOverflow: () => {
+            // text overflow styles
+            return {
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            };
+        },
+    },
+    utils: {
+        activeColors: (color) => {
+            // get active color and related font color
+            color = color ? color : custom.colors.primary;
+            const whiteColor = new Color(custom.colors.white);
+            const blackColor = new Color(custom.colors.black);
+            const activeColor = new Color(color);
+            const accentColor = activeColor.isDark() || activeColor.hex().toLowerCase() == custom.colors.primary ? whiteColor : blackColor;
+            return [activeColor.hex().toLowerCase(), accentColor.hex().toLowerCase()];
+        },
+        darkenColor: (color, amount) => {
+            // darken a color
+            amount = amount ? amount : 0.075;
+            color = color ? color : custom.colors.gray02;
+            const darkColor = new Color(color).darken(amount).hex().toLowerCase();
+            return darkColor;
+        },
+        getBp: (bp, rule) => {
+            // get breakpoint selector
+            rule = rule && (rule == 'min' || rule == 'max') ? rule : 'min';
+            return `@media (${rule}-width: ${rule == 'min' ? bp + 1 : bp}px)`;
+        },
+        lightenColor: (color, amount) => {
+            // lighten a color
+            amount = amount ? amount : 0.42;
+            color = color ? color : custom.colors.text;
+            const lightColor = new Color(color).lighten(amount).hex().toLowerCase();
+            return lightColor;
+        },
+    },
+};

package/dist/esm/components/src/themes/pike/pike.d.ts

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

package/dist/esm/components/src/themes/pike/pike.d.ts.map

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

package/dist/esm/components/src/themes/pike/pike.js

@@ -0,0 +1,22 @@
+import { components } from './components';
+import { responsive } from './responsive';
+import { custom } from './custom';
+const pikeVariables = {
+    breakpoints: {
+        mobile: custom.breakpoints.mobile,
+        tablet: custom.breakpoints.tablet,
+        desktop: custom.breakpoints.desktop,
+    },
+    colors: {
+        text: custom.colors.text,
+        primary: custom.colors.primary,
+        secondary: custom.colors.secondary,
+        accent: custom.colors.accent,
+    },
+};
+export const pike = {
+    name: 'pike',
+    variables: pikeVariables,
+    components,
+    responsive,
+};

package/dist/esm/components/src/themes/pike/responsive.d.ts

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

package/dist/esm/components/src/themes/pike/responsive.d.ts.map

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

package/dist/esm/components/src/themes/pike/responsive.js

@@ -0,0 +1,6 @@
+import { mobileComponents, tabletComponents, desktopComponents } from './components';
+export const responsive = {
+    mobile: mobileComponents,
+    tablet: tabletComponents,
+    desktop: desktopComponents,
+};

package/dist/esm/components/src/themes/snapnco/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/esm/components/src/themes/snapnco/components/atoms/button.d.ts.map

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