@fast-simon/shopify-hydrogen 1.0.0

package/dist/esnext/components/Filters/MobileFilters/MobileFilters.client.js

@@ -0,0 +1,20 @@
+import React, { useRef, useState } from 'react';
+import { useClickOutside } from "../../../hooks/useClickOutside";
+export function MobileFiltersClient({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    const filtersRef = useRef(null);
+    const onClickOutside = () => {
+        setIsClosing(true);
+        setTimeout(() => {
+            setIsOpen(false);
+            setIsClosing(false);
+        }, 450);
+    };
+    useClickOutside(filtersRef, onClickOutside);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: 'fs-mobile-filters-button', onClick: () => setIsOpen(true) }, "Filters"),
+        isOpen ?
+            React.createElement("div", { className: `fs-mobile-filters-wrapper` },
+                React.createElement("span", { ref: filtersRef, className: isClosing ? 'fs-filters-slider-close' : 'fs-filters-slider-open' }, children)) : null));
+}

package/dist/esnext/components/Filters/RemovableTags/RemovableTag.client.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    name: string;
+    value: string;
+    onRemove: (name: string, value: string) => void;
+}
+export declare function RemovableTagClient({ name, value, onRemove }: Props): JSX.Element;
+export {};

package/dist/esnext/components/Filters/RemovableTags/RemovableTag.client.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RejectIcon } from "../../../icons/RejectIcon";
+export function RemovableTagClient({ name, value, onRemove }) {
+    const onRemoveClicked = () => {
+        onRemove(name, value);
+    };
+    return (React.createElement("div", { className: 'fs-removable-tag', onClick: onRemoveClicked },
+        React.createElement("span", { className: "removable-tag-text fs-removable-tag-text" }, value),
+        React.createElement("span", { className: "fs-removable-tag-remove-button", onClick: onRemoveClicked },
+            React.createElement(RejectIcon, { color: "gray" }))));
+}

package/dist/esnext/components/Filters/RemovableTags/RemovableTags.client.d.ts

@@ -0,0 +1,7 @@
+import { RemovableTagsSettings } from "../../../@types/editor";
+interface Props {
+    narrowString?: string;
+    removableTagsSettings: RemovableTagsSettings;
+}
+export declare function RemovableTagsClient({ narrowString, removableTagsSettings }: Props): JSX.Element;
+export {};

package/dist/esnext/components/Filters/RemovableTags/RemovableTags.client.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Narrow } from "@fast-simon/utilities";
+import { RemovableTagClient } from "./RemovableTag.client";
+import { useNavigate, useServerProps, useUrl } from "@shopify/hydrogen";
+import { Defaults } from "../../../utils/defaults";
+import { DynamicStyle } from "../../../utils/DynamicStyle";
+export function RemovableTagsClient({ narrowString, removableTagsSettings }) {
+    const [narrow, setNarrow] = useState(Narrow.parseNarrow(narrowString || ''));
+    const [items, setItems] = useState(Object.entries(narrow));
+    //const [size, setSize] = useState(items.reduce((p, [name, values]) => p + values.size, 0)); TODO: use size to show clear all button
+    const url = useUrl();
+    const { setServerProps, serverProps } = useServerProps();
+    const navigation = useNavigate();
+    useEffect(() => {
+        const newNarrow = Narrow.parseNarrow(narrowString || '');
+        setNarrow(narrow);
+        const newItems = Object.entries(newNarrow);
+        setItems(newItems);
+        //setSize(newItems.reduce((p, [name, values]) => p + values.size, 0)) TODO: use size to show clear all button
+    }, [narrowString]);
+    const onRemoveClick = (name, value) => {
+        const newNarrow = Narrow.updateNarrow(Narrow.parseNarrow(narrowString || ''), name, value);
+        setNarrow(newNarrow);
+        setItems(Object.entries(newNarrow));
+        let dumpedNarrow = Narrow.dumpNarrow(newNarrow);
+        url.searchParams.delete('page');
+        if (dumpedNarrow) {
+            url.searchParams.set('filters', dumpedNarrow);
+        }
+        else {
+            url.searchParams.delete('filters');
+        }
+        navigation(url.href);
+        setServerProps(Defaults.fastSimonProps, { ...serverProps?.[Defaults.fastSimonProps], page: 1, narrowString: dumpedNarrow });
+    };
+    const removeNarrow = useCallback(onRemoveClick, [items]);
+    const dynamicStyles = {
+        'border': removableTagsSettings?.border,
+        'box-shadow': removableTagsSettings?.shadow,
+        'border-radius': removableTagsSettings?.borderRadius,
+        'font-family': removableTagsSettings?.font.font,
+        'color': removableTagsSettings?.color,
+        'letter-spacing': removableTagsSettings?.font.letterSpacing,
+        'font-size': removableTagsSettings?.font.fontSize,
+        'font-weight': removableTagsSettings?.font.fontWeight,
+        'background-color': removableTagsSettings?.backgroundColor,
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DynamicStyle, { styles: dynamicStyles, className: 'fs-removable-tag' }),
+        React.createElement("div", { className: 'fs-removable-tags-container' }, items.map(([name, values]) => Array.from(values).map(value => (React.createElement(RemovableTagClient, { key: `removable_tag_${name}_${value}`, name: name, value: value, onRemove: removeNarrow })))))));
+}

package/dist/esnext/components/PageTitle/PageTitle.server.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    searchTerm?: string | null;
+    categoryName?: string;
+}
+export declare function PageTitleServer({ searchTerm, categoryName }: Props): JSX.Element;
+export {};

package/dist/esnext/components/PageTitle/PageTitle.server.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export function PageTitleServer({ searchTerm, categoryName }) {
+    return (React.createElement("div", { className: 'fs-page-title' }, searchTerm ? `Search results for ${searchTerm}` : categoryName));
+}

package/dist/esnext/components/Pagination/Pagination.client.d.ts

@@ -0,0 +1,8 @@
+import { Pagination as PaginationType } from "../../@types/editor";
+interface Props {
+    currentPage: number;
+    paginationSettings: PaginationType;
+    totalPages: number;
+}
+export declare function Pagination({ currentPage, paginationSettings, totalPages }: Props): JSX.Element;
+export {};

package/dist/esnext/components/Pagination/Pagination.client.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useNavigate, useServerProps, useUrl } from "@shopify/hydrogen";
+import { Defaults } from "../../utils/defaults";
+import { getPageURL } from "./utils";
+import { LeftArrowIcon } from "../../icons/LeftArrowIcon";
+import { RightArrowIcon } from "../../icons/RightArrowIcon";
+export function Pagination({ currentPage, paginationSettings, totalPages }) {
+    const { setServerProps, serverProps } = useServerProps();
+    const navigation = useNavigate();
+    const url = useUrl();
+    const goTo = (event, pageNum) => {
+        event.preventDefault();
+        url.searchParams.set('page', String(pageNum));
+        navigation(url.href);
+        setServerProps(Defaults.fastSimonProps, { ...serverProps?.[Defaults.fastSimonProps], page: pageNum });
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    const totalOfPagesArray = [...Array.from(Array(totalPages).keys())].map(i => i + 1);
+    return (React.createElement("div", { className: "pagination-wrapper" },
+        currentPage > 1 ?
+            React.createElement("span", { className: "arrow-button-wrapper", onClick: (event) => goTo(event, currentPage - 1) },
+                React.createElement("a", { className: "arrow-button", href: getPageURL(currentPage - 1, url) },
+                    React.createElement(LeftArrowIcon, null))) : null,
+        React.createElement("span", { className: "center-pages-wrapper" }, totalOfPagesArray.map(pageNumber => {
+            if (pageNumber === 2 && currentPage > 4) {
+                return React.createElement("span", { key: `three-dots-left`, className: "page-number-item three-dots-item" }, "...");
+            }
+            if (pageNumber === currentPage) {
+                return React.createElement("a", { key: `page_num_${pageNumber}`, className: "page-number-item page-number-item-selected", href: getPageURL(pageNumber, url), onClick: (event) => goTo(event, pageNumber) }, pageNumber);
+            }
+            else if (pageNumber === currentPage + 1 || pageNumber === currentPage + 2 || pageNumber === currentPage - 1 || pageNumber === currentPage - 2 || pageNumber === totalPages || pageNumber === 1) {
+                return React.createElement("a", { key: `page_num_${pageNumber}`, className: "page-number-item", href: getPageURL(pageNumber, url), onClick: (event) => goTo(event, pageNumber) }, pageNumber);
+            }
+            if (currentPage < totalPages - 3 && pageNumber === totalPages - 1) {
+                return React.createElement("span", { key: `three-dots-right`, className: "page-number-item three-dots-item" }, "...");
+            }
+            return React.createElement(React.Fragment, null);
+        })),
+        currentPage < totalPages ?
+            React.createElement("span", { className: "arrow-button-wrapper", onClick: (event) => goTo(event, currentPage + 1) },
+                React.createElement("a", { className: "arrow-button", href: getPageURL(currentPage + 1, url) },
+                    React.createElement(RightArrowIcon, null))) : null));
+}

package/dist/esnext/components/Pagination/utils.d.ts

@@ -0,0 +1 @@
+export declare function getPageURL(page: number, url: URL): string;

package/dist/esnext/components/Pagination/utils.js

@@ -0,0 +1,4 @@
+export function getPageURL(page, url) {
+    url.searchParams.set('page', String(page));
+    return url.href;
+}

package/dist/esnext/components/ProductCard/ProductCard.d.ts

@@ -0,0 +1,9 @@
+import { ProductSettings } from "../../@types/editor";
+import { ServerProduct } from "../../@types/product";
+interface Props {
+    productData: ServerProduct;
+    productSettings: ProductSettings;
+    index: number;
+}
+export declare function ProductCard({ productData, productSettings, index }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/ProductCard.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ProductImage } from "./components/ProductImage/ProductImage";
+import { AddToCartClient } from "./components/AddToCart/AddToCart.client";
+import { ProductInfo } from "./components/Info/ProductInfo";
+export function ProductCard({ productData, productSettings, index }) {
+    const shopifyVariantNodes = productData.vra.map(variant => {
+        return {
+            id: `gid://shopify/ProductVariant/${variant[0]}`,
+            priceV2: { amount: productData.p, currencyCode: 'USD' },
+            compareAtPriceV2: null,
+            image: {
+                url: productData.t
+            }
+        };
+    });
+    if (!shopifyVariantNodes.length) {
+        shopifyVariantNodes.push({
+            id: `gid://shopify/ProductVariant/${productData.id}`,
+            priceV2: { amount: productData.p, currencyCode: 'USD' },
+            compareAtPriceV2: null,
+            image: {
+                url: productData.t
+            }
+        });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "fs-product-card" },
+            React.createElement(ProductImage, { imageURL: productData.t, redirectURL: productData.u, index: index }),
+            React.createElement(ProductInfo, { productSettings: productSettings, productData: productData }),
+            React.createElement(AddToCartClient, { variantId: String(productData.id), variantNodes: shopifyVariantNodes, addToCartSettings: productSettings.addToCart }))));
+}

package/dist/esnext/components/ProductCard/components/AddToCart/AddToCart.client.d.ts

@@ -0,0 +1,9 @@
+import { ProductAddToCartSettings } from "../../../../@types/editor";
+interface Props {
+    variantId: string;
+    quantity?: number;
+    variantNodes?: any;
+    addToCartSettings: ProductAddToCartSettings;
+}
+export declare function AddToCartClient({ variantId, quantity, variantNodes, addToCartSettings }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/components/AddToCart/AddToCart.client.js

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+import { AddToCartButton, ProductOptionsProvider } from '@shopify/hydrogen';
+import { useCart } from "@shopify/hydrogen";
+import { Spinner } from "../../../../icons/Spinner";
+export function AddToCartClient({ variantId, quantity = 1, variantNodes, addToCartSettings }) {
+    const { status } = useCart();
+    const [addingProduct, setAddingProduct] = useState(false);
+    useEffect(() => {
+        if (status === 'idle') {
+            if (addingProduct) {
+                window.dispatchEvent(new CustomEvent('fs-custom-events-product-added'));
+            }
+            setAddingProduct(false);
+        }
+    }, [status]);
+    const onButtonClick = () => {
+        setAddingProduct(true);
+    };
+    return (React.createElement(ProductOptionsProvider, { data: variantNodes },
+        React.createElement(AddToCartButton, { variantId: variantNodes[0].id, quantity: quantity, accessibleAddingToCartLabel: "Adding item to your cart", onClick: onButtonClick, className: 'fs-product-add-to-cart' }, addingProduct ? React.createElement("div", { className: 'fs-adding-product' },
+            React.createElement(Spinner, { color: addToCartSettings.color }),
+            " Adding...") : React.createElement("div", null, addToCartSettings.text))));
+}

package/dist/esnext/components/ProductCard/components/Compare/Compare.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    compare: string;
+}
+export declare function Compare({ compare }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/components/Compare/Compare.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export function Compare({ compare }) {
+    return (React.createElement("div", { className: "fs-product-card-compare" },
+        "$",
+        compare));
+}

package/dist/esnext/components/ProductCard/components/Info/ProductInfo.d.ts

@@ -0,0 +1,8 @@
+import { ServerProduct } from "../../../../@types/product";
+import { ProductSettings } from "../../../../@types/editor";
+interface Props {
+    productData: ServerProduct;
+    productSettings: ProductSettings;
+}
+export declare function ProductInfo({ productData, productSettings }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/components/Info/ProductInfo.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Title } from "../Title/Title";
+import { Price } from "../Price/Price";
+import { Compare } from "../Compare/Compare";
+export function ProductInfo({ productData, productSettings }) {
+    const isCompare = productSettings.compare.isActive && Number(productData?.p_c) !== 0;
+    return (React.createElement("div", { className: `fs-product-card-info ${isCompare ? 'fs-info-areas-compare' : 'fs-info-areas'}` },
+        React.createElement(Title, { title: productData.l, redirectURL: productData.u }),
+        React.createElement(Price, { price: productData.p, isCompare: isCompare }),
+        isCompare ? React.createElement(Compare, { compare: productData.p_c }) : null));
+}

package/dist/esnext/components/ProductCard/components/Price/Price.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    price: string;
+    isCompare: boolean;
+}
+export declare function Price({ price, isCompare }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/components/Price/Price.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export function Price({ price, isCompare }) {
+    return (React.createElement("div", { className: `fs-product-card-price ${isCompare ? 'fs-price-with-compare' : 'fs-price-without-compare'}` },
+        "$",
+        price));
+}

package/dist/esnext/components/ProductCard/components/ProductImage/ProductImage.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    imageURL: string;
+    redirectURL: string;
+    index: number;
+}
+export declare function ProductImage({ imageURL, redirectURL, index }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/components/ProductImage/ProductImage.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Image, Link } from "@shopify/hydrogen";
+const MISSING_IMAGE_SRC = 'https://acp-magento.appspot.com/images/missing.gif';
+export function ProductImage({ imageURL, redirectURL, index }) {
+    return (React.createElement(Link, { to: redirectURL },
+        React.createElement(Image, { alt: "product image", src: imageURL || MISSING_IMAGE_SRC, width: 500, height: 500, className: 'fs-product-card-img', loading: index < 4 ? 'eager' : 'lazy' })));
+}

package/dist/esnext/components/ProductCard/components/Title/Title.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    title: string;
+    redirectURL: string;
+}
+export declare function Title({ title, redirectURL }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ProductCard/components/Title/Title.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export function Title({ title, redirectURL }) {
+    return (React.createElement("a", { href: redirectURL, className: "fs-product-card-title" }, title));
+}

package/dist/esnext/components/ProductGrid/ProductGrid.server.d.ts

@@ -0,0 +1,9 @@
+import { FullTextServerResponseAll } from "../../services/search";
+import { CategoryNavigationServerResponseAll } from "../../services/categories_navigation";
+import { ProductsGridSettings } from "../../@types/editor";
+interface Props {
+    data?: FullTextServerResponseAll | CategoryNavigationServerResponseAll;
+    gridSettings: ProductsGridSettings;
+}
+export declare function ProductGridServer({ data, gridSettings }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ProductGrid/ProductGrid.server.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ProductCard } from "../ProductCard/ProductCard";
+import { DynamicStyle } from "../../utils/DynamicStyle";
+import { StylesUtil } from "./stylesUtil";
+export function ProductGridServer({ data, gridSettings }) {
+    const dynamicStyles = StylesUtil.getDynamicStylesObject(gridSettings);
+    return (React.createElement(React.Fragment, null,
+        dynamicStyles.map(item => React.createElement(DynamicStyle, { key: item.className, styles: item.styles, className: item.className })),
+        React.createElement("div", { className: "fs-grid" }, data?.items?.map((product, index) => React.createElement(ProductCard, { key: product.id, productData: product, productSettings: gridSettings.product, index: index })))));
+}

package/dist/esnext/components/ProductGrid/stylesUtil.d.ts

@@ -0,0 +1,138 @@
+import { ProductAddToCartSettings, ProductComparePriceSettings, ProductPriceSettings, ProductSettings, ProductsGridSettings, ProductTitleSettings } from "../../@types/editor";
+export declare class StylesUtil {
+    static getDynamicStylesObject: (gridSettings: ProductsGridSettings) => ({
+        className: string;
+        styles: {
+            "grid-template-columns": string;
+            "grid-row-gap": string;
+            "grid-column-gap": string;
+            "margin-left": string;
+        };
+    } | {
+        className: string;
+        styles: {
+            'aspect-ratio': number;
+            'object-fit': string;
+        };
+    } | {
+        className: string;
+        styles: {
+            'background-color': string;
+            color: string;
+        };
+    } | {
+        className: string;
+        styles: {
+            'font-weight': string;
+            'font-family': string;
+            'font-size': string;
+            'letter-spacing': string;
+            'line-height': string;
+        };
+    } | {
+        className: string;
+        styles: {
+            'text-align': string;
+            color: string;
+        };
+    } | {
+        className: string;
+        styles: {
+            border: string | undefined;
+        };
+    } | {
+        className: string;
+        styles: {
+            padding: string;
+        };
+    } | {
+        className: string;
+        styles: {
+            'grid-template-areas': string | undefined;
+        };
+    })[];
+    static getGridCustomStyles: (gridSettings: ProductsGridSettings) => {
+        "grid-template-columns": string;
+        "grid-row-gap": string;
+        "grid-column-gap": string;
+        "margin-left": string;
+    };
+    static getProductImageCustomStyles: (productSettings: ProductSettings) => {
+        'aspect-ratio': number;
+        'object-fit': string;
+    };
+    static getAddToCartCustomStyles: (addToCart: ProductAddToCartSettings) => {
+        base: {
+            'font-weight': string;
+            'font-family': string;
+            'font-size': string;
+            'letter-spacing': string;
+            color: string;
+            'background-color': string;
+            border: string;
+            'border-radius': string;
+            opacity: number;
+        };
+        hover: {
+            'background-color': string;
+            color: string;
+        };
+    };
+    static getPriceCustomStyles: (priceSettings: ProductPriceSettings, comparePrice?: boolean) => {
+        base: {
+            'font-weight': string;
+            'font-family': string;
+            'font-size': string;
+            'letter-spacing': string;
+            'line-height': string;
+        };
+        withCompare: {
+            'text-align': "center" | "left" | "right";
+            color: string;
+        };
+        withoutCompare: {
+            'text-align': string;
+            color: string;
+        };
+    };
+    static getProductTitleCustomStyles: (titleSettings: ProductTitleSettings) => {
+        '-webkit-line-clamp': string;
+        'font-weight': string;
+        'text-align': string;
+        'font-family': string;
+        'font-size': string;
+        'letter-spacing': string;
+        'line-height': string;
+        color: string;
+    };
+    static getProductCardCustomStyles: (productSettings: ProductSettings) => {
+        base: {
+            padding: string;
+            border: string | undefined;
+            'border-radius': string;
+            shadow: string;
+            'justify-content': string;
+        };
+        hover: {
+            border: string | undefined;
+        };
+        gridAreasWithCompare: {
+            'grid-template-areas': string | undefined;
+        };
+        gridAreasWithoutCompare: {
+            'grid-template-areas': string | undefined;
+        };
+        productInfo: {
+            padding: string;
+        };
+    };
+    static getCompareStyles: (compareSettings: ProductComparePriceSettings) => {
+        'font-weight': string;
+        'text-align': string;
+        'font-family': string;
+        'font-size': string;
+        'letter-spacing': string;
+        'line-height': string;
+        color: string;
+    };
+}

package/dist/esnext/components/ProductGrid/stylesUtil.js

@@ -0,0 +1,122 @@
+import { GridAreaUtils } from "@fast-simon/utilities";
+export class StylesUtil {
+}
+StylesUtil.getDynamicStylesObject = (gridSettings) => {
+    const gridStyles = StylesUtil.getGridCustomStyles(gridSettings);
+    const imageCustomStyles = StylesUtil.getProductImageCustomStyles(gridSettings.product);
+    const addToCartCustomStyles = StylesUtil.getAddToCartCustomStyles(gridSettings.product.addToCart);
+    const priceCustomStyles = StylesUtil.getPriceCustomStyles(gridSettings.product.price);
+    const titleCustomStyles = StylesUtil.getProductTitleCustomStyles(gridSettings.product.title);
+    const productCardCustomStyles = StylesUtil.getProductCardCustomStyles(gridSettings.product);
+    const compareStyles = StylesUtil.getCompareStyles(gridSettings.product.compare);
+    return [
+        { className: 'fs-grid', styles: gridStyles },
+        { className: 'fs-product-card-img', styles: imageCustomStyles },
+        { className: 'fs-product-add-to-cart', styles: addToCartCustomStyles.base },
+        { className: 'fs-product-add-to-cart:hover', styles: addToCartCustomStyles.hover },
+        { className: 'fs-product-card-price', styles: priceCustomStyles.base },
+        { className: 'fs-price-with-compare', styles: priceCustomStyles.withCompare },
+        { className: 'fs-price-without-compare', styles: priceCustomStyles.withoutCompare },
+        { className: 'fs-product-card-title', styles: titleCustomStyles },
+        { className: 'fs-product-card', styles: productCardCustomStyles.base },
+        { className: 'fs-product-card:hover', styles: productCardCustomStyles.hover },
+        { className: 'fs-product-card-info', styles: productCardCustomStyles.productInfo },
+        { className: 'fs-info-areas-compare', styles: productCardCustomStyles.gridAreasWithCompare },
+        { className: 'fs-info-areas', styles: productCardCustomStyles.gridAreasWithoutCompare },
+        { className: 'fs-product-card-compare', styles: compareStyles }
+    ];
+};
+StylesUtil.getGridCustomStyles = (gridSettings) => {
+    return {
+        "grid-template-columns": `repeat(${gridSettings.numberOfColumns}, calc(${100 / Number(gridSettings.numberOfColumns)}% - ${gridSettings.gridColumnGap}))`,
+        "grid-row-gap": gridSettings.gridRowGap,
+        "grid-column-gap": gridSettings.gridColumnGap,
+        "margin-left": gridSettings.gridColumnGap
+    };
+};
+StylesUtil.getProductImageCustomStyles = (productSettings) => {
+    return {
+        'aspect-ratio': productSettings.imageRatio,
+        'object-fit': productSettings.imageFit
+    };
+};
+StylesUtil.getAddToCartCustomStyles = (addToCart) => {
+    return {
+        base: {
+            'font-weight': addToCart.font.fontWeight,
+            'font-family': addToCart.font.font,
+            'font-size': addToCart.font.fontSize,
+            'letter-spacing': addToCart.font.letterSpacing,
+            'color': addToCart.color,
+            'background-color': addToCart.backgroundColor,
+            'border': addToCart.border,
+            'border-radius': addToCart.borderRadius,
+            'opacity': addToCart.showOnHover ? 0 : 1
+        },
+        hover: {
+            'background-color': addToCart.changeColorsOnHover && addToCart.backgroundColorOnHover !== 'unset' ? addToCart.backgroundColorOnHover : addToCart.backgroundColor,
+            'color': addToCart.changeColorsOnHover && addToCart.backgroundColorOnHover !== 'unset' ? addToCart.textColorsOnHover : addToCart.color,
+        }
+    };
+};
+StylesUtil.getPriceCustomStyles = (priceSettings, comparePrice) => {
+    return {
+        base: {
+            'font-weight': priceSettings?.font.fontWeight,
+            'font-family': priceSettings?.font.font,
+            'font-size': priceSettings?.font.fontSize,
+            'letter-spacing': priceSettings?.font.letterSpacing,
+            'line-height': priceSettings?.font.lineHeight,
+        },
+        withCompare: {
+            'text-align': priceSettings.alignIfCompare,
+            'color': priceSettings.colorIfCompareEnable ? priceSettings?.colorIfCompareEnable : priceSettings.color
+        },
+        withoutCompare: {
+            'text-align': priceSettings?.font.textAlign,
+            'color': priceSettings.color
+        }
+    };
+};
+StylesUtil.getProductTitleCustomStyles = (titleSettings) => {
+    return {
+        '-webkit-line-clamp': titleSettings?.numberOfLines,
+        'font-weight': titleSettings?.font.fontWeight,
+        'text-align': titleSettings?.font.textAlign,
+        'font-family': titleSettings?.font.font,
+        'font-size': titleSettings?.font.fontSize,
+        'letter-spacing': titleSettings?.font.letterSpacing,
+        'line-height': titleSettings?.font.lineHeight,
+        'color': titleSettings?.color
+    };
+};
+StylesUtil.getProductCardCustomStyles = (productSettings) => {
+    return {
+        base: {
+            'padding': productSettings?.padding,
+            'border': productSettings?.showBorderOnHover ? undefined : productSettings?.border,
+            'border-radius': productSettings?.borderRadius + "%",
+            'shadow': productSettings?.shadow,
+            'justify-content': productSettings?.addToCart.isActive && productSettings?.addToCart.addToCartType === 'product level' ? 'space-between' : ''
+        },
+        hover: {
+            'border': productSettings?.showBorderOnHover ? productSettings?.border : undefined,
+        },
+        gridAreasWithCompare: { 'grid-template-areas': GridAreaUtils.arrangeGridAreas(productSettings?.info.gridAreas, true) },
+        gridAreasWithoutCompare: { 'grid-template-areas': GridAreaUtils.arrangeGridAreas(productSettings?.info.gridAreas, false) },
+        productInfo: {
+            padding: productSettings?.info.padding
+        }
+    };
+};
+StylesUtil.getCompareStyles = (compareSettings) => {
+    return {
+        'font-weight': compareSettings.font.fontWeight,
+        'text-align': compareSettings.font.textAlign,
+        'font-family': compareSettings.font.font,
+        'font-size': compareSettings.font.fontSize,
+        'letter-spacing': compareSettings.font.letterSpacing,
+        'line-height': compareSettings.font.lineHeight,
+        'color': compareSettings.color
+    };
+};

package/dist/esnext/components/ResultsSummary/ResultsSummary.server.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    totalResults: number;
+    term: string;
+}
+export declare function ResultsSummaryServer({ totalResults, term }: Props): JSX.Element;
+export {};

package/dist/esnext/components/ResultsSummary/ResultsSummary.server.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export function ResultsSummaryServer({ totalResults, term }) {
+    return (React.createElement("div", { className: 'fs-summary' },
+        React.createElement("div", null, term),
+        React.createElement("div", null,
+            totalResults,
+            " results")));
+}