@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,97 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// static variables
+const buttonDisabledSelectors = '&.ss__button--disabled';
+// CSS in JS style script for the Button component
+const buttonStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    const activeColors = custom.utils.activeColors(props?.backgroundColor);
+    const buttonColor = activeColors[0];
+    const borderColor = props?.borderColor ? props.borderColor : activeColors[0];
+    const fontColor = props?.color ? props.color : activeColors[1];
+    // shared styles
+    const sharedStyles = css([
+        {
+            cursor: 'pointer',
+            padding: `0 ${custom.spacing.x4}px`,
+            justifyContent: 'center',
+            fontSize: '14px',
+            fontWeight: custom.fonts.weight01,
+            textAlign: 'center',
+            textTransform: custom.fonts.transform,
+            color: fontColor,
+            height: `${custom.sizes.height}px`,
+            lineHeight: `${custom.sizes.height}px`,
+            ...custom.styles.borderRadius(),
+            ...custom.styles.boxSizing('button', props?.treePath, props?.name),
+            '&[active="true"], &:has([active="true"])': {
+                '.ss__icon': {
+                    '&.ss__icon--filter': {
+                        transform: 'rotate(-180deg)',
+                    },
+                    '&.ss__icon--filters': {
+                        circle: {
+                            '&:last-child': {
+                                transform: 'translateX(-35%)',
+                            },
+                            transform: 'translateX(35%)',
+                        },
+                    },
+                },
+            },
+            [buttonDisabledSelectors]: {
+                ...custom.styles.disabled(),
+            },
+            '.ss__button__content': {
+                '&:has(span)': {
+                    display: 'inline-flex',
+                    flexFlow: 'row nowrap',
+                    alignItems: 'center',
+                    gap: `${custom.spacing.x1}px`,
+                    span: {
+                        ...custom.styles.textOverflow(),
+                    },
+                },
+                '&:not(:has(span))': {
+                    ...custom.styles.textOverflow(),
+                },
+                '&, *': {
+                    minWidth: '1px',
+                },
+            },
+            [`&, &:hover, &:not(.ss__button--disabled):hover, ${buttonDisabledSelectors}`]: {
+                border: `1px solid ${borderColor}`,
+                backgroundColor: buttonColor,
+            },
+            '.ss__icon.ss__icon--filters': {
+                fill: buttonColor,
+            },
+        },
+    ]);
+    // default button styles
+    const defaultButtonStyles = sharedStyles;
+    // native button styles
+    const nativeButtonStyles = css([
+        {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: `${custom.spacing.x1}px`,
+            position: 'relative',
+            outline: 0,
+        },
+        sharedStyles,
+    ]);
+    return props?.native ? nativeButtonStyles : defaultButtonStyles;
+};
+// Button component props
+export const button = {
+    default: {
+        button: {
+            themeStyleScript: buttonStyleScript,
+        },
+        'button icon': {
+            size: `${custom.sizes.icon12}px`,
+        },
+    },
+};

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

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

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

@@ -0,0 +1,78 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the Dropdown component
+const dropdownStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // disabled styles
+    const disabled = props?.disabled
+        ? {
+            ...custom.styles.disabled(),
+        }
+        : {};
+    // dropdown styles
+    const dropdownStyles = css({
+        width: 'auto',
+        ...disabled,
+        ...custom.styles.boxSizing('dropdown', props?.treePath, props?.name),
+        '&.ss__dropdown__portal': {
+            '.ss__dropdown__content': {
+                marginTop: `${custom.spacing.x1}px`,
+                ...custom.styles.box(variables?.colors?.text),
+                'ul, ul li': {
+                    listStyle: 'none',
+                },
+                '.ss__select__select, .ss__variant-selection__options': {
+                    margin: 0,
+                    padding: 0,
+                    border: 0,
+                    backgroundColor: 'transparent',
+                },
+                '.ss__select__select .ss__select__select__option, .ss__variant-selection__options .ss__variant-selection__option': {
+                    color: 'inherit',
+                    lineHeight: 1.5,
+                    gap: `${custom.spacing.x2}px`,
+                    padding: 0,
+                    margin: `0 0 ${custom.spacing.x1}px 0`,
+                    '&:last-child': {
+                        marginBottom: '0',
+                    },
+                    '&:hover': {
+                        backgroundColor: 'transparent',
+                        fontWeight: 'normal',
+                    },
+                    'a, span': {
+                        cursor: 'pointer',
+                    },
+                },
+                '.ss__select__select .ss__select__select__option--selected, .ss__variant-selection__options .ss__variant-selection__option--selected': {
+                    ...custom.styles.activeText(variables?.colors?.primary),
+                },
+                '.ss__select__select .ss__select__select__option----unavailable, .ss__select__select .ss__select__select__option--disabled, .ss__variant-selection__options .ss__variant-selection__option--unavailable, .ss__variant-selection__options .ss__variant-selection__option--disabled': {
+                    color: 'inherit',
+                    ...custom.styles.disabled(),
+                },
+            },
+        },
+        '&.ss__dropdown--open': {
+            '.ss__dropdown__content': {
+                zIndex: 5,
+            },
+        },
+        '.ss__dropdown__content': {
+            minWidth: '1px',
+            left: 0,
+            right: 0,
+            zIndex: -1,
+        },
+    });
+    return dropdownStyles;
+};
+// Dropdown component props
+export const dropdown = {
+    default: {
+        dropdown: {
+            themeStyleScript: dropdownStyleScript,
+        },
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"formattedNumber.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/pike/components/atoms/formattedNumber.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAiBvD,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,iBAAiB,EAAE,oBAAoB,CAMnF,CAAC"}

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

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the FormattedNumber component
+const formattedNumberStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // formatted number styles
+    const formattedNumberStyles = css({
+        ...custom.styles.boxSizing('formattedNumber', props?.treePath, props?.name),
+    });
+    return formattedNumberStyles;
+};
+// FormattedNumber component props
+export const formattedNumber = {
+    default: {
+        formattedNumber: {
+            themeStyleScript: formattedNumberStyleScript,
+        },
+    },
+};

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

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

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

@@ -0,0 +1,41 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the Icon component
+const iconStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // set flex size for icons that are flex children
+    let flexSize = '';
+    if (props?.width) {
+        flexSize = `0 0 ${props.width}`;
+    }
+    else if (props?.size) {
+        flexSize = `0 0 ${props.size}`;
+    }
+    // icon styles
+    const iconStyles = css({
+        minWidth: '1px',
+        flex: flexSize,
+        lineHeight: 1,
+        color: props?.treePath == 'storybook icon' ? variables?.colors?.text : '',
+        ...custom.styles.boxSizing('icon', props?.treePath, props?.name),
+        '&.ss__icon--filters': {
+            fill: custom.colors.white,
+            stroke: 'currentColor',
+            circle: {
+                fill: 'inherit',
+            },
+        },
+    });
+    return iconStyles;
+};
+// Icon component props
+export const icon = {
+    default: {
+        icon: {
+            themeStyleScript: iconStyleScript,
+            size: `${custom.sizes.icon16}px`,
+            color: 'currentColor',
+        },
+    },
+};

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

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

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

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the Image component
+const imageStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // image styles
+    const imageStyles = css({
+        ...custom.styles.boxSizing('image', props?.treePath, props?.name),
+        '&, img': {
+            lineHeight: 0,
+        },
+        img: {
+            border: 0,
+        },
+    });
+    return imageStyles;
+};
+// Image component props
+export const image = {
+    default: {
+        image: {
+            themeStyleScript: imageStyleScript,
+        },
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/pike/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAsBhE,eAAO,MAAM,KAAK,EAAE,uBAiFnB,CAAC"}

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

@@ -0,0 +1,101 @@
+// ATOMS Imports
+import { badgeImage } from './badgeImage';
+import { badgePill } from './badgePill';
+import { badgeRectangle } from './badgeRectangle';
+import { badgeText } from './badgeText';
+import { banner } from './banner';
+import { breadcrumbs } from './breadcrumbs';
+import { button } from './button';
+import { dropdown } from './dropdown';
+import { formattedNumber } from './formattedNumber';
+import { icon } from './icon';
+import { image } from './image';
+import { inlineBanner } from './inlineBanner';
+import { loadingBar } from './loadingBar';
+import { overlay } from './overlay';
+import { paginationInfo } from './paginationInfo';
+import { price } from './price';
+import { searchHeader } from './searchHeader';
+import { skeleton } from './skeleton';
+export const atoms = {
+    default: {
+        ...badgeImage.default,
+        ...badgePill.default,
+        ...badgeRectangle.default,
+        ...badgeText.default,
+        ...banner.default,
+        ...breadcrumbs.default,
+        ...button.default,
+        ...dropdown.default,
+        ...formattedNumber.default,
+        ...icon.default,
+        ...image.default,
+        ...inlineBanner.default,
+        ...loadingBar.default,
+        ...overlay.default,
+        ...paginationInfo.default,
+        ...price.default,
+        ...searchHeader.default,
+        ...skeleton.default,
+    },
+    mobile: {
+        ...badgeImage.mobile,
+        ...badgePill.mobile,
+        ...badgeRectangle.mobile,
+        ...badgeText.mobile,
+        ...banner.mobile,
+        ...breadcrumbs.mobile,
+        ...button.mobile,
+        ...dropdown.mobile,
+        ...formattedNumber.mobile,
+        ...icon.mobile,
+        ...image.mobile,
+        ...inlineBanner.mobile,
+        ...loadingBar.mobile,
+        ...overlay.mobile,
+        ...paginationInfo.mobile,
+        ...price.mobile,
+        ...searchHeader.mobile,
+        ...skeleton.mobile,
+    },
+    tablet: {
+        ...badgeImage.tablet,
+        ...badgePill.tablet,
+        ...badgeRectangle.tablet,
+        ...badgeText.tablet,
+        ...banner.tablet,
+        ...breadcrumbs.tablet,
+        ...button.tablet,
+        ...dropdown.tablet,
+        ...formattedNumber.tablet,
+        ...icon.tablet,
+        ...image.tablet,
+        ...inlineBanner.tablet,
+        ...loadingBar.tablet,
+        ...overlay.tablet,
+        ...paginationInfo.tablet,
+        ...price.tablet,
+        ...searchHeader.tablet,
+        ...skeleton.tablet,
+    },
+    desktop: {
+        ...badgeImage.desktop,
+        ...badgePill.desktop,
+        ...badgeRectangle.desktop,
+        ...badgeText.desktop,
+        ...banner.desktop,
+        ...breadcrumbs.desktop,
+        ...button.desktop,
+        ...dropdown.desktop,
+        ...formattedNumber.desktop,
+        ...icon.desktop,
+        ...image.desktop,
+        ...inlineBanner.desktop,
+        ...loadingBar.desktop,
+        ...overlay.desktop,
+        ...paginationInfo.desktop,
+        ...price.desktop,
+        ...searchHeader.desktop,
+        ...skeleton.desktop,
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"inlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/pike/components/atoms/inlineBanner.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAyBvD,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,cAAc,EAAE,iBAAiB,CAM1E,CAAC"}

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

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the InlineBanner component
+const inlineBannerStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    const isAutocomplete = props?.treePath?.includes('autocomplete') ? true : false;
+    // inline banner styles
+    const inlineBannerStyles = css({
+        overflow: isAutocomplete ? 'hidden' : '',
+        ...custom.styles.boxSizing('inlineBanner', props?.treePath, props?.name),
+        '&.ss__inline-banner--grid': {
+            maxHeight: isAutocomplete ? '212px' : '',
+        },
+        '&.ss__inline-banner--list': {
+            maxHeight: isAutocomplete ? '100px' : '',
+        },
+    });
+    return inlineBannerStyles;
+};
+// InlineBanner component props
+export const inlineBanner = {
+    default: {
+        inlineBanner: {
+            themeStyleScript: inlineBannerStyleScript,
+        },
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadingBar.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/pike/components/atoms/loadingBar.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAiBvD,eAAO,MAAM,UAAU,EAAE,cAAc,CAAC,YAAY,EAAE,eAAe,CAMpE,CAAC"}

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

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the LoadingBar component
+const loadingBarStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // loading bar styles
+    const loadingBarStyles = css({
+        ...custom.styles.boxSizing('loadingBar', props?.treePath, props?.name),
+    });
+    return loadingBarStyles;
+};
+// LoadingBar component props
+export const loadingBar = {
+    default: {
+        loadingBar: {
+            themeStyleScript: loadingBarStyleScript,
+        },
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/pike/components/atoms/overlay.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAkBvD,eAAO,MAAM,OAAO,EAAE,cAAc,CAAC,SAAS,EAAE,YAAY,CAO3D,CAAC"}

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

@@ -0,0 +1,22 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the Overlay component
+const overlayStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // overlay styles
+    const overlayStyles = css({
+        cursor: 'pointer',
+        ...custom.styles.boxSizing('overlay', props?.treePath, props?.name),
+    });
+    return overlayStyles;
+};
+// Overlay component props
+export const overlay = {
+    default: {
+        overlay: {
+            themeStyleScript: overlayStyleScript,
+            color: custom.colors.overlay,
+        },
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"paginationInfo.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/pike/components/atoms/paginationInfo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAkBvD,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,gBAAgB,EAAE,mBAAmB,CAMhF,CAAC"}

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

@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the Pagination component
+const paginationInfoStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // pagination info styles
+    const paginationInfoStyles = css({
+        ...custom.styles.headerText(variables?.colors?.secondary, '16px'),
+        ...custom.styles.boxSizing('paginationInfo', props?.treePath, props?.name),
+    });
+    return paginationInfoStyles;
+};
+// PaginationInfo component props
+export const paginationInfo = {
+    default: {
+        paginationInfo: {
+            themeStyleScript: paginationInfoStyleScript,
+        },
+    },
+};

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the Price component
+const priceStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // price styles
+    const priceStyles = css({
+        ...custom.styles.boxSizing('price', props?.treePath, props?.name),
+        '&, span, &.ss__price, &.ss__price--strike': {
+            color: variables?.colors?.text,
+        },
+        '& ~ .ss__result__price': {
+            paddingLeft: `${custom.spacing.x1 / 2}px`,
+        },
+    });
+    return priceStyles;
+};
+// Price component props
+export const price = {
+    default: {
+        price: {
+            themeStyleScript: priceStyleScript,
+        },
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchHeader.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/pike/components/atoms/searchHeader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAuCvD,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,cAAc,EAAE,iBAAiB,CAM1E,CAAC"}

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

@@ -0,0 +1,42 @@
+import { css } from '@emotion/react';
+import { custom } from '../../custom';
+// CSS in JS style script for the SearchHeader component
+const searchHeaderStyleScript = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = props?.theme?.variables;
+    // search header styles
+    const searchHeaderStyles = css({
+        ...custom.styles.boxSizing('searchHeader', props?.treePath, props?.name),
+        em: {
+            fontStyle: 'normal',
+        },
+        '.ss__search-header__title': {
+            margin: 0,
+            ...custom.styles.headerText(variables?.colors?.secondary, '22px'),
+            '& ~ .ss__search-header__subtitle': {
+                marginTop: `${custom.spacing.x2}px`,
+            },
+        },
+        '.ss__search-header__subtitle': {
+            margin: 0,
+            fontSize: '16px',
+            fontWeight: 400,
+            color: variables?.colors?.text,
+            a: {
+                color: variables?.colors?.primary,
+            },
+        },
+        '.ss__search-header__results-query': {
+            color: variables?.colors?.primary,
+        },
+    });
+    return searchHeaderStyles;
+};
+// SearchHeader component props
+export const searchHeader = {
+    default: {
+        searchHeader: {
+            themeStyleScript: searchHeaderStyleScript,
+        },
+    },
+};

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

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

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

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