@gem-sdk/pages 1.0.0

package/dist/esm/libs/get-storefront-api.js

@@ -0,0 +1,10 @@
+const getStorefrontApi = (handle, provider) => {
+    switch (provider) {
+        case 'BIGCOMMERCE':
+            return `https://${handle}.bigcommerce.com`;
+        default:
+            return `https://${handle}.myshopify.com/api/2022-07/graphql.json`;
+    }
+};
+
+export { getStorefrontApi };

package/dist/esm/libs/getStaticPaths.js

@@ -0,0 +1,8 @@
+const getStaticPaths = async () => {
+    return {
+        paths: [],
+        fallback: true,
+    };
+};
+
+export { getStaticPaths };

package/dist/esm/libs/google-fonts.js

@@ -0,0 +1,64 @@
+const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
+const IE_UA = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
+async function getFontForUA(url, UA) {
+    return fetch(url, {
+        headers: {
+            'User-Agent': UA,
+        },
+    }).then((res) => res.text());
+}
+const createFontUrl = (fonts, option) => {
+    const params = new URLSearchParams();
+    const display = option?.display || 'swap';
+    const family = fonts
+        .filter((font, index, arr) => {
+        return index === arr.findIndex((t) => t.family === font.family);
+    })
+        .map((font) => {
+        return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
+    })
+        .join('|');
+    params.append('family', family);
+    params.append('display', display);
+    if (option?.subset) {
+        params.append('subset', option.subset);
+    }
+    if (option?.effect) {
+        params.append('effect', option.effect);
+    }
+    return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+};
+async function getFonts(fonts, option) {
+    /**
+     * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
+     * CSS cascading 🤷‍♂️.
+     */
+    const url = createFontUrl(fonts, option);
+    try {
+        const [ie, chrome] = await Promise.all([
+            getFontForUA(url, IE_UA),
+            getFontForUA(url, CHROME_UA),
+        ]);
+        return ie + chrome;
+    }
+    catch (e) {
+        return '';
+    }
+}
+const getFontFromGlobalStyle = (data) => {
+    if (!data)
+        return '';
+    try {
+        const globalStyle = JSON.parse(data);
+        const fonts = globalStyle?.font ?? {};
+        const font = Object.entries(fonts).map(([, value]) => {
+            return value;
+        });
+        return getFonts(font);
+    }
+    catch {
+        return '';
+    }
+};
+
+export { createFontUrl, getFontFromGlobalStyle, getFonts };

package/dist/esm/libs/helpers/gen-css.js

@@ -0,0 +1,100 @@
+import { getShortName } from '@gem-sdk/core';
+import merge from 'deepmerge';
+
+const baseDevices = {
+    tablet: '1023px',
+    mobile: '767px',
+};
+const flattenObject = (obj, prefix) => {
+    return Object.keys(obj).reduce((acc, k) => {
+        const pre = prefix ? `${prefix}-` : '';
+        if (typeof obj[k] === 'object' && obj[k] !== null && Object.keys(obj[k]).length > 0)
+            Object.assign(acc, flattenObject(obj[k], pre + k));
+        else
+            acc[pre + k] = obj[k];
+        return acc;
+    }, {});
+};
+const devicesOrder = ['desktop', 'tablet', 'mobile'];
+const mapObject = (obj) => {
+    return Object.entries(obj ?? {}).reduce((acc, [k, v]) => {
+        return {
+            ...acc,
+            [getShortName(k)]: typeof v === 'object' ? mapObject(v) : v,
+        };
+    }, {});
+};
+const getValueByDevice = (data, device) => {
+    const deviceData = {
+        typography: Object.fromEntries(Object.entries(data?.typography ?? {}).map(([key, value]) => {
+            const typo = { ...value?.[device] };
+            if (!typo)
+                return [key, undefined];
+            if (typo.fontFamily) {
+                typo.fontFamily = `var(--g-font-${typo.fontFamily}, ${typo.fontFamily})`;
+            }
+            return [key, typo];
+        })),
+        spacing: Object.fromEntries(Object.entries(data?.spacing ?? {}).map(([key, value]) => {
+            return [key, value?.[device]];
+        })),
+        container: Object.fromEntries(Object.entries(data?.container ?? {}).map(([key, value]) => {
+            return [key, value?.[device]];
+        })),
+        font: Object.fromEntries(Object.entries(data?.font ?? {}).map(([key, value]) => {
+            return [key, value?.family];
+        })),
+    };
+    return deviceData;
+};
+const genCSSVariable = (deviceData) => {
+    return Object.entries(mapObject(flattenObject(deviceData)))
+        .map(([key, value]) => {
+        if (value === undefined)
+            return undefined;
+        return `--g-${key}:${value}`;
+    })
+        .filter((v) => v !== undefined)
+        .join(';');
+};
+const genCSS = (input, mobileOnly) => {
+    if (!input)
+        return '';
+    let data = {};
+    try {
+        if (typeof input === 'string') {
+            data = JSON.parse(input);
+        }
+        else {
+            data = input;
+        }
+        if (mobileOnly) {
+            const desktop = getValueByDevice(data, 'desktop');
+            const mobile = getValueByDevice(data, 'mobile');
+            const deviceData = merge(desktop, mobile);
+            deviceData.color = data.color;
+            deviceData.radius = data.radius;
+            const cssData = genCSSVariable(deviceData);
+            return `:root{${cssData}}`;
+        }
+        return devicesOrder
+            .map((device) => {
+            const deviceData = getValueByDevice(data, device);
+            if (device === 'desktop') {
+                deviceData.color = data.color;
+                deviceData.radius = data.radius;
+            }
+            const cssData = genCSSVariable(deviceData);
+            if (device === 'desktop') {
+                return `:root{${cssData}}`;
+            }
+            return `@media (max-width: ${baseDevices[device]}) {:root{${cssData}}}`;
+        })
+            .join('\n');
+    }
+    catch {
+        return '';
+    }
+};
+
+export { genCSS };

package/dist/esm/libs/helpers/generate-manifres.js

@@ -0,0 +1,3 @@
+const generateManifest = (data) => `data:application/manifest+json,${encodeURIComponent(JSON.stringify(data))}`;
+
+export { generateManifest };

package/dist/esm/libs/helpers/get-fallback.js

@@ -0,0 +1,27 @@
+import { prefetchQueries } from '@gem-sdk/core';
+
+const getFallbackV2 = async (fetcher, data) => {
+    const isSample = !process.env.NEXT_PUBLIC_STOREFRONT_TOKEN;
+    const queries = data.map((v) => prefetchQueries(v.data, isSample)).flat();
+    const datas = await Promise.allSettled(queries.map(({ query, variables, func }) => {
+        if (func) {
+            return func(fetcher, variables);
+        }
+        if (query)
+            return fetcher([query, variables]);
+        return {};
+    }));
+    const fallback = queries.reduce((acc, { key }, index) => {
+        const res = datas[index];
+        if (res?.status === 'fulfilled') {
+            return {
+                ...acc,
+                [key]: res.value,
+            };
+        }
+        return acc;
+    }, {});
+    return fallback;
+};
+
+export { getFallbackV2 };

package/dist/esm/libs/helpers/normalize.js

@@ -0,0 +1,83 @@
+const normalizeBuilderData = (data) => {
+    const result = {};
+    function compose(cData, currData = {}) {
+        if (cData) {
+            const { childrens, dateModified, editorConfigs, ...rest } = cData;
+            if (rest.type === 'section') {
+                currData[rest.uid] = rest;
+            }
+            else {
+                const items = childrens?.map((child) => child?.uid) ?? [];
+                currData[rest.uid] = { ...rest, childrens: items };
+                if (childrens) {
+                    childrens.map((child) => compose(child, currData));
+                }
+            }
+        }
+    }
+    compose(data, result);
+    return { ...result };
+};
+const orderSection = (sections, orders) => {
+    // Filter out sections that are not in the order list
+    const ids = orders?.filter((id) => sections?.some((v) => v?.id === id));
+    // Return the ordered sections
+    const orderedSections = ids?.map((id) => sections?.find((v) => v?.id === id)) ?? [];
+    // Return the sections that are not in the order list
+    const sectionsNotInOrder = sections?.filter((v) => !v?.id || !ids?.includes(v.id)) ?? [];
+    // Return the ordered sections + the sections that are not in the order list
+    return orderedSections.concat(sectionsNotInOrder);
+};
+function normalizePageSectionResponse(sections, orders) {
+    const sortedSections = orderSection(sections, orders);
+    const childrens = sortedSections
+        .map((item) => {
+        if (!item?.component)
+            return false;
+        try {
+            const data = JSON.parse(item.component);
+            return data;
+        }
+        catch {
+            return false;
+        }
+    })
+        .filter(Boolean);
+    return normalizeBuilderData({
+        uid: 'ROOT',
+        tag: 'Root',
+        childrens,
+    });
+}
+function normalizePageSectionResponseV2(sections, orders) {
+    const sortedSections = orderSection(sections, orders);
+    const childrens = sortedSections
+        .map((item) => {
+        if (!item?.component)
+            return false;
+        try {
+            const data = JSON.parse(item.component);
+            return data;
+        }
+        catch {
+            return false;
+        }
+    })
+        .filter(Boolean);
+    return childrens.map((v) => {
+        return {
+            uid: v.uid,
+            lazy: Boolean(v.settings?.lazy),
+            priority: Boolean(v.settings?.priority),
+            data: normalizeBuilderData(v),
+        };
+    });
+}
+const parseBuilderTemplateV2 = (data) => {
+    return normalizePageSectionResponseV2([...(data?.pageSections ?? []), ...(data?.themePageCustomSections ?? [])], data?.sectionPosition);
+};
+const parseBuilderTemplate = (data) => {
+    return normalizePageSectionResponse([...(data?.pageSections ?? []), ...(data?.themePageCustomSections ?? [])], data?.sectionPosition);
+};
+
+export { normalizeBuilderData, parseBuilderTemplate, parseBuilderTemplateV2 };

package/dist/esm/libs/helpers/parse-json.js

@@ -0,0 +1,15 @@
+const parseJson = (json) => {
+    if (!json)
+        return null;
+    try {
+        return JSON.parse(json);
+    }
+    catch (e) {
+        return null;
+    }
+};
+const serializableJson = (props) => {
+    return JSON.parse(JSON.stringify(props));
+};
+
+export { parseJson, serializableJson };

package/dist/esm/pages/404.js

@@ -0,0 +1,9 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { NextSeo } from 'next-seo';
+import Image from 'next/image';
+
+const Page404 = () => {
+    return (jsxs(Fragment, { children: [jsx(NextSeo, { title: "Page not found" }), jsxs("div", { className: "tablet:max-w-2xl container mx-auto flex min-h-screen max-w-4xl flex-col items-center justify-center gap-8 px-8", children: [jsx(Image, { sizes: "(max-width: 768px) 100vw, 50vw", src: "https://ucarecdn.com/27dfcf10-8fff-4341-90a0-dc97e4072acc/-/format/auto/", width: 802, height: 450, alt: "Not found", quality: 100, priority: true }), jsxs("div", { className: "flex flex-col items-center justify-center gap-2 pb-36", children: [jsx("h1", { className: "mobile:text-2xl text-4xl font-semibold", children: "Oops! Page not found" }), jsx("p", { children: "Your page URL is incorrect." })] })] })] }));
+};
+
+export { Page404 };

package/dist/esm/pages/500.js

@@ -0,0 +1,17 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { cls } from '@gem-sdk/core';
+import { NextSeo } from 'next-seo';
+import Image from 'next/image';
+import { useState } from 'react';
+
+const Page500 = () => {
+    const [loading, setLoading] = useState(false);
+    return (jsxs(Fragment, { children: [jsx(NextSeo, { title: "Service Unavailable" }), jsxs("div", { className: "tablet:max-w-2xl container mx-auto flex min-h-screen max-w-4xl flex-col items-center justify-center gap-8 px-8", children: [jsx(Image, { sizes: "(max-width: 768px) 100vw, 50vw", src: "https://ucarecdn.com/ea647025-54e3-4abb-87c4-859c5853ed56/-/format/auto/", width: 802, height: 450, alt: "Not found", quality: 100, priority: true }), jsxs("div", { className: "flex flex-col gap-8 pb-36", children: [jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center", children: [jsx("h1", { className: "mobile:text-2xl text-4xl font-semibold", children: "Service Unavailable" }), jsx("p", { className: "text-center", children: "The server is temporarily busy. Try again later." })] }), jsxs("button", { className: "mx-auto inline-flex h-10 items-center justify-center gap-2 rounded bg-[#3C67FF] px-6 text-white active:translate-y-1", onClick: () => {
+                                    setLoading(true);
+                                    window.location.reload();
+                                }, children: [jsx("svg", { className: cls('w-5', {
+                                            'animate-spin': loading,
+                                        }), viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12.3408 3.03528C10.6845 2.42235 8.86506 2.41356 7.20294 3.01045C5.54082 3.60734 4.14265 4.77163 3.25471 6.29822C2.36677 7.82482 2.04603 9.61579 2.34898 11.3557C2.65193 13.0955 3.55915 14.6727 4.91081 15.8093C6.26248 16.9459 7.97189 17.5691 9.73794 17.5691C10.0831 17.5691 10.3629 17.2893 10.3629 16.9441C10.3629 16.5989 10.0831 16.3191 9.73792 16.3191C8.26621 16.3191 6.8417 15.7998 5.71531 14.8526C4.58892 13.9054 3.83291 12.5911 3.58045 11.1412C3.32799 9.69134 3.59528 8.19886 4.33523 6.9267C5.07518 5.65454 6.24032 4.6843 7.62542 4.18689C9.01052 3.68948 10.5267 3.69681 11.9069 4.20758C13.2872 4.71835 14.4429 5.69981 15.1705 6.97906C15.8981 8.25832 16.151 9.75331 15.8845 11.2007C15.677 12.3276 15.1651 13.3694 14.4127 14.2174L14.4127 11.7856C14.4127 11.4405 14.1329 11.1606 13.7877 11.1606C13.4425 11.1606 13.1627 11.4405 13.1627 11.7856L13.1627 15.4106C13.1627 15.5764 13.2285 15.7354 13.3457 15.8526C13.4629 15.9698 13.6219 16.0356 13.7877 16.0356H17.2845C17.6297 16.0356 17.9095 15.7558 17.9095 15.4106C17.9095 15.0655 17.6297 14.7856 17.2845 14.7856H15.5691C16.3513 13.8186 16.8858 12.6657 17.1139 11.427C17.4336 9.69015 17.1302 7.89616 16.257 6.36106C15.3839 4.82595 13.9971 3.64821 12.3408 3.03528Z", fill: "currentColor" }) }), "Refresh"] })] })] })] }));
+};
+
+export { Page500 };

package/dist/esm/pages/builder.js

@@ -0,0 +1,24 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
+import { NextSeo } from 'next-seo';
+import Head from 'next/head';
+import { useState, useEffect } from 'react';
+import Toolbox from '../components/builder/Toolbox.js';
+
+const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, }) => {
+    const [loadSuccess, setLoadSuccess] = useState(false);
+    const initState = {
+        ROOT: {
+            uid: 'ROOT',
+            tag: 'Root',
+            label: 'Root',
+            childrens: [],
+        },
+    };
+    useEffect(() => {
+        setLoadSuccess(true);
+    }, []);
+    return (jsxs(Fragment, { children: [jsx(NextSeo, { ...seo }), jsxs(Head, { children: [themeStyle && (jsx("style", { type: "text/css", id: "global-style", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsx(BuilderComponentProvider, { components: components, children: jsx(SectionProvider, { data: sectionData, children: jsxs(BuilderPreviewProvider, { state: initState, children: [jsx(Toolbox, {}), loadSuccess && (jsxs("div", { className: "builder", children: [jsx("div", { id: "storefront", children: jsx(RenderPreview, { uid: "ROOT" }) }), jsx("div", { id: "visual-content" })] }))] }, "preview") }) })] }));
+};
+
+export { BuilderPage };

package/dist/esm/pages/collection-detail.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
+import { NextSeo } from 'next-seo';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+const CollectionProvider = dynamic(() => import('@gem-sdk/core').then((m) => m.CollectionProvider));
+const CollectionDetailPage = ({ seo, components, builderData, sectionData, themeStyle, collection, fontStyle, }) => {
+    const router = useRouter();
+    if (router.isFallback) {
+        return jsx("div", { children: "Loading..." });
+    }
+    return (jsxs(Fragment, { children: [jsx(NextSeo, { ...seo }), jsxs(Head, { children: [themeStyle && (jsx("style", { "data-id": "global-style", type: "text/css", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsx(BuilderComponentProvider, { components: components, children: jsx(SectionProvider, { data: sectionData, children: jsx(CollectionProvider, { collection: collection, children: builderData && (jsx(BuilderProvider, { state: builderData, children: jsx(Render, { uid: "ROOT" }) })) }) }) })] }));
+};
+
+export { CollectionDetailPage as default };

package/dist/esm/pages/preview.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import dynamic from 'next/dynamic';
+
+const StaticPage = dynamic(() => import('./static.js'));
+const ProductPage = dynamic(() => import('./product-detail.js'));
+const CollectionPage = dynamic(() => import('./collection-detail.js'));
+const PreviewPage = ({ pageType, ...props }) => {
+    switch (pageType) {
+        case 'PRODUCT':
+            return jsx(ProductPage, { ...props });
+        case 'COLLECTION':
+            return jsx(CollectionPage, { ...props });
+        default:
+            return jsx(StaticPage, { ...props });
+    }
+};
+
+export { PreviewPage };

package/dist/esm/pages/product-detail.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render, AddOn } from '@gem-sdk/core';
+import { NextSeo } from 'next-seo';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+const ProductProvider = dynamic(() => import('@gem-sdk/core').then((m) => m.ProductProvider));
+const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, builderData, sectionData, }) => {
+    const router = useRouter();
+    if (router.isFallback) {
+        return jsx("div", { children: "Loading..." });
+    }
+    return (jsxs(Fragment, { children: [jsx(NextSeo, { ...seo }), jsxs(Head, { children: [themeStyle && (jsx("style", { "data-id": "global-style", type: "text/css", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsx(BuilderComponentProvider, { components: components, children: jsx(SectionProvider, { data: sectionData, children: jsxs(ProductProvider, { product: product, children: [builderData && (jsx(BuilderProvider, { state: builderData, children: jsx(Render, { uid: "ROOT" }) })), jsx(AddOn, { name: "sticky-add-to-cart" })] }) }) })] }));
+};
+
+export { ProductDetailPage as default };

package/dist/esm/pages/static-v2.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
+import { NextSeo } from 'next-seo';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, }) => {
+    const router = useRouter();
+    if (router.isFallback) {
+        return (jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "flex gap-2", children: [jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800" }), jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800" }), jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800" })] }) }));
+    }
+    return (jsxs(Fragment, { children: [jsx(NextSeo, { ...seo }), jsxs(Head, { children: [themeStyle && (jsx("style", { "data-id": "global-style", type: "text/css", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsx(BuilderComponentProvider, { components: components, children: jsx(SectionProvider, { data: sectionData, children: builderData?.map((builder) => (jsx(BuilderProvider, { state: builder.data, lazy: builder.lazy, priority: builder.priority, children: jsx(Render, { uid: builder.uid }) }, builder.uid))) }) })] }));
+};
+
+export { StaticPageV2 };

package/dist/esm/pages/static.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
+import { NextSeo } from 'next-seo';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, }) => {
+    const router = useRouter();
+    if (router.isFallback) {
+        return (jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "flex gap-2", children: [jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800" }), jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800" }), jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800" })] }) }));
+    }
+    return (jsxs(Fragment, { children: [jsx(NextSeo, { ...seo }), jsxs(Head, { children: [themeStyle && (jsx("style", { "data-id": "global-style", type: "text/css", dangerouslySetInnerHTML: { __html: themeStyle } })), fontStyle && (jsx("style", { "data-id": "google-fonts", type: "text/css", dangerouslySetInnerHTML: { __html: fontStyle } }))] }), jsx(BuilderComponentProvider, { components: components, children: jsx(SectionProvider, { data: sectionData, children: jsx(Fragment, { children: builderData && (jsx(BuilderProvider, { state: builderData, children: jsx(Render, { uid: "ROOT" }) }, "body")) }) }) })] }));
+};
+
+export { StaticPage as default };

package/dist/types/index.d.ts

@@ -0,0 +1,173 @@
+import { BuilderState, SectionData, ShopType, RenderMode, CollectionQueryResponse, FetchFunc, ProductSelectFragment } from '@gem-sdk/core';
+import { NextPage, GetStaticPaths } from 'next';
+import { NextSeoProps } from 'next-seo';
+import { AppProps } from 'next/app';
+import { SWRConfig } from 'swr';
+import * as react from 'react';
+import { Component } from 'react';
+
+type PageBuilderProps = {
+    seo?: NextSeoProps;
+    builderData?: BuilderState;
+    sectionData?: Record<string, SectionData>;
+    themeStyle?: string | null;
+    fontStyle?: string | null;
+    swr?: React.ComponentProps<typeof SWRConfig>['value'];
+    plugins?: string[];
+    pageType?: ShopType.PublishedThemePageType;
+    storefrontToken?: string | null;
+    storefrontHandle?: string | null;
+    shopToken?: string | null;
+    currency?: string | null;
+    locale?: string | null;
+    favicon?: string | null;
+    mobileOnly?: boolean | null;
+    swatches?: any[] | null;
+    mode?: RenderMode;
+    gaTrackingId?: string | null;
+    tiktokPixelId?: string | null;
+    facebookPixelId?: string | null;
+};
+type PageBuilderPropsV2 = {
+    builderData?: {
+        uid: string;
+        lazy?: boolean;
+        priority?: boolean;
+        data: BuilderState;
+    }[];
+} & Omit<PageBuilderProps, 'builderData'>;
+type AdditionalPageBuilderProps = {
+    components: Record<string, React.ComponentType<any>>;
+};
+type NextPageWithLayout<P = PageBuilderProps, IP = P> = NextPage<P, IP> & {
+    getLayout?: (page: React.ReactElement) => React.ReactNode;
+};
+type AppPropsWithLayout<P = PageBuilderProps> = AppProps<P> & {
+    Component: NextPageWithLayout;
+};
+
+type CollectionPageProps = PageBuilderProps & {
+    collection?: CollectionQueryResponse['collection'];
+};
+declare const CollectionDetailPage: React.FC<CollectionPageProps & AdditionalPageBuilderProps>;
+
+declare const getCollectionProps: (fetcher: FetchFunc) => (handle?: string) => Promise<CollectionPageProps>;
+
+declare const getHomePageProps: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => () => Promise<PageBuilderProps>;
+
+declare const getHomePagePropsV2: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => () => Promise<PageBuilderPropsV2>;
+
+declare const getPreviewProps: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (pageType: ShopType.PublishedThemePageType, slug?: string) => Promise<PageBuilderProps>;
+
+type Props$4 = Pick<PageBuilderProps, 'swr' | 'themeStyle' | 'seo' | 'currency' | 'locale' | 'swatches'>;
+declare const getBuilderProps: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => Promise<Props$4>;
+
+type ProductPageProps = PageBuilderProps & {
+    product?: ProductSelectFragment;
+};
+declare const ProductDetailPage: React.FC<ProductPageProps & AdditionalPageBuilderProps>;
+
+declare const getProductProps: (fetcher: FetchFunc) => (handle?: string) => Promise<ProductPageProps>;
+
+declare const getStaticPageProps: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (slug?: string) => Promise<PageBuilderProps>;
+
+declare const getStaticPagePropsV2: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (slug: string) => Promise<PageBuilderPropsV2>;
+
+declare const getStaticPagePropsPreview: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (slug: string) => Promise<PageBuilderPropsV2>;
+
+declare const createFetcher: (token?: string | null) => FetchFunc;
+declare const createShopifyFetcher: (storefrontToken?: string, handle?: string) => FetchFunc;
+
+declare const getLayout: (page: React.ReactElement) => JSX.Element;
+
+declare const genCSS: (input?: string | Record<string, any>, mobileOnly?: boolean) => string;
+
+type PreviewPageProps = {
+    components: Record<string, React.ComponentType<any>>;
+    pageType: ShopType.PublishedThemePageType;
+};
+declare const PreviewPage: React.FC<PreviewPageProps>;
+
+type StaticPageProps = PageBuilderProps;
+declare const StaticPage: React.FC<StaticPageProps & AdditionalPageBuilderProps>;
+
+type BuilderPageProps = {
+    components: Record<string, React.ComponentType<any>>;
+    seo?: NextSeoProps;
+    themeStyle?: string | null;
+    fontStyle?: string | null;
+    header?: BuilderState;
+    footer?: BuilderState;
+    sectionData?: Record<string, SectionData>;
+    storefrontToken?: string | null;
+    storefrontHandle?: string | null;
+    shopToken?: string | null;
+    mode?: RenderMode;
+};
+declare const BuilderPage: React.FC<BuilderPageProps>;
+
+type StaticPagePropsV2 = PageBuilderPropsV2;
+declare const StaticPageV2: React.FC<StaticPagePropsV2 & AdditionalPageBuilderProps>;
+
+declare const getStaticPaths: GetStaticPaths;
+
+type FontItem = {
+    family: string;
+    variants: string[];
+    subsets: string[];
+};
+type FontOption = {
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    subset?: string;
+    effect?: string;
+};
+declare function getFonts(fonts: FontItem[], option?: FontOption): Promise<string>;
+
+declare const getStorefrontApi: (handle: string, provider?: 'BIGCOMMERCE' | 'SHOPIFY') => string;
+
+type ErrorBoundaryProps = {
+    children?: React.ReactNode;
+    FallbackComponent: React.ComponentType<{
+        error?: Error;
+        resetErrorBoundary: () => void;
+    }>;
+    onError?: (error: Error, info: React.ErrorInfo) => void;
+};
+type ErrorBoundaryState = {
+    hasError?: boolean;
+    error?: Error;
+};
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    reset: () => void;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | boolean | react.ReactFragment | JSX.Element | null | undefined;
+}
+
+type Props$3 = {
+    error?: Error;
+    resetErrorBoundary: () => void;
+};
+declare const ErrorFallback: ({ error, resetErrorBoundary }: Props$3) => JSX.Element;
+
+declare const Page404: () => JSX.Element;
+
+declare const Page500: () => JSX.Element;
+
+type Props$2 = {
+    trackingId?: string | null;
+};
+declare const GoogleAnalytic: ({ trackingId }: Props$2) => JSX.Element | null;
+
+type Props$1 = {
+    pixelId?: string | null;
+};
+declare const FacebookPixel: ({ pixelId }: Props$1) => JSX.Element | null;
+
+type Props = {
+    pixelId?: string | null;
+};
+declare const TikTokPixel: ({ pixelId }: Props) => JSX.Element | null;
+
+export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFonts, getHomePageProps, getHomePagePropsV2, getLayout, getPreviewProps, getProductProps, getStaticPageProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi };