@gem-sdk/pages 2.0.0-dev.173 → 2.0.0-dev.194

package/dist/cjs/pages/static.js

@@ -5,42 +5,53 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
-var react = require('react');
+var nextSeo = require('next-seo');
+var Head = require('next/head');
+var router = require('next/router');
 
-const StaticPage = ({ components, builderData, sectionData, themeStyle, fontStyle })=>{
-    const fallbackContent = /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "gp-flex gp-h-[100vh] gp-items-center gp-justify-center",
-        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-            className: "gp-flex gp-gap-2",
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx("span", {
-                    className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx("span", {
-                    className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx("span", {
-                    className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"
-                })
-            ]
-        })
-    });
-    return /*#__PURE__*/ jsxRuntime.jsxs(react.Suspense, {
-        fallback: fallbackContent,
+const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fontStyle })=>{
+    const router$1 = router.useRouter();
+    if (router$1.isFallback) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-flex gp-h-[100vh] gp-items-center gp-justify-center",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "gp-flex gp-gap-2",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "global-style",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: themeStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
+                ...seo
             }),
-            fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "google-fonts",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: fontStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsxs(Head, {
+                children: [
+                    themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "global-style",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: themeStyle
+                        }
+                    }),
+                    fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "google-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: fontStyle
+                        }
+                    })
+                ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
                 children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {

package/dist/esm/components/builder/Header.js

@@ -118,7 +118,7 @@ const Header = (props)=>{
                                 })
                             ]
                         }),
-                        !isOriginTemplate && /*#__PURE__*/ jsx("button", {
+                        !(isOriginTemplate || pageType === 'STATIC') && /*#__PURE__*/ jsx("button", {
                             className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
                             onClick: openPageSetting,
                             children: /*#__PURE__*/ jsxs("div", {

package/dist/esm/layouts/main.js

@@ -7,7 +7,7 @@ const MainLayout = ({ children, ...props })=>{
     const mobileOnly = useShopStore((s)=>s.mobileOnly);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            parseHtml(props?.customCodeBody),
+            parseHtml('custom-code-body', props?.customCodeBody),
             /*#__PURE__*/ jsx("div", {
                 className: cls({
                     'gp-max-w-mobile gp-mx-auto gp-w-full': mobileOnly

package/dist/esm/libs/api/get-post-purchase-props-preview.js

@@ -1,4 +1,4 @@
-import { ThemePageDocument, StorePropertyDocument, SaleFunnelDiscountsDocument, LibraryTemplateDocument, LibrarySaleFunnelDocument, ShopLibraryPageDocument } from '@gem-sdk/core';
+import { ThemePageDocument, StorePropertyDocument, SaleFunnelDiscountsDocument, SaleFunnelOfferDocument, LibraryTemplateDocument, LibrarySaleFunnelDocument, ShopLibraryPageDocument } from '@gem-sdk/core';
 import { captureException } from '@sentry/nextjs';
 import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
@@ -31,6 +31,7 @@ const fetchSalePageDataByID = async (data, fetcher)=>{
         dataBuilder: theme.value.themePage,
         pageStyle: theme.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,
         storeProperty,
+        dynamicDiscountOffer: undefined,
         productOffers: []
     };
 };
@@ -42,7 +43,7 @@ const fetchPostPurchasePageDataByID = async (data, fetcher)=>{
             default: true
         }
     };
-    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+    const [theme, storeProperty, saleFunnelDiscounts, saleFunnelOffer] = await Promise.allSettled([
         fetcher([
             ThemePageDocument,
             variables
@@ -57,6 +58,12 @@ const fetchPostPurchasePageDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -65,10 +72,14 @@ const fetchPostPurchasePageDataByID = async (data, fetcher)=>{
     if (saleFunnelDiscounts.status === 'rejected') {
         throw new Error(saleFunnelDiscounts.reason?.[0]);
     }
+    if (saleFunnelOffer.status === 'rejected') {
+        throw new Error(saleFunnelOffer.reason?.[0]);
+    }
     return {
         dataBuilder: theme.value.themePage,
         pageStyle: theme.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,
         storeProperty,
+        dynamicDiscountOffer: saleFunnelOffer.value.saleFunnelOffer?.dynamicDiscounts?.[0],
         productOffers: saleFunnelDiscounts.value.saleFunnelDiscounts?.edges?.filter((item)=>item?.node?.objectType === 'PRODUCT' && item?.node?.type === 'ORDER_VALUE') || []
     };
 };
@@ -114,6 +125,7 @@ const fetchThemePageDataByTemplateID = async (data, fetcher)=>{
         dataBuilder: theme.value.libraryTemplate,
         pageStyle: undefined,
         storeProperty,
+        dynamicDiscountOffer: undefined,
         productOffers: productOffers
     };
 };
@@ -121,7 +133,7 @@ const fetchShopLibraryPageDataByID = async (data, fetcher)=>{
     const variables = {
         shopLibraryPageId: data.shopLibraryPageId
     };
-    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+    const [theme, storeProperty, saleFunnelDiscounts, saleFunnelOffer] = await Promise.allSettled([
         fetcher([
             ShopLibraryPageDocument,
             variables
@@ -136,6 +148,12 @@ const fetchShopLibraryPageDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -144,10 +162,14 @@ const fetchShopLibraryPageDataByID = async (data, fetcher)=>{
     if (saleFunnelDiscounts.status === 'rejected') {
         throw new Error(saleFunnelDiscounts.reason?.[0]);
     }
+    if (saleFunnelOffer.status === 'rejected') {
+        throw new Error(saleFunnelOffer.reason?.[0]);
+    }
     return {
         dataBuilder: theme.value.shopLibraryPage,
         pageStyle: undefined,
         storeProperty,
+        dynamicDiscountOffer: saleFunnelOffer.value.saleFunnelOffer?.dynamicDiscounts?.[0],
         productOffers: saleFunnelDiscounts.value.saleFunnelDiscounts?.edges?.filter((item)=>item?.node?.objectType === 'PRODUCT' && item?.node?.type === 'ORDER_VALUE') || []
     };
 };
@@ -155,7 +177,7 @@ const fetchLibraryTemplateDataByID = async (data, fetcher)=>{
     const variables = {
         libraryTemplateId: data.libraryTemplateId
     };
-    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+    const [theme, storeProperty, saleFunnelDiscounts, saleFunnelOffer] = await Promise.allSettled([
         fetcher([
             LibraryTemplateDocument,
             variables
@@ -170,6 +192,12 @@ const fetchLibraryTemplateDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -178,10 +206,14 @@ const fetchLibraryTemplateDataByID = async (data, fetcher)=>{
     if (saleFunnelDiscounts.status === 'rejected') {
         throw new Error(saleFunnelDiscounts.reason?.[0]);
     }
+    if (saleFunnelOffer.status === 'rejected') {
+        throw new Error(saleFunnelOffer.reason?.[0]);
+    }
     return {
         dataBuilder: theme.value.libraryTemplate,
         pageStyle: undefined,
         storeProperty,
+        dynamicDiscountOffer: saleFunnelOffer.value.saleFunnelOffer?.dynamicDiscounts?.[0],
         productOffers: saleFunnelDiscounts.value.saleFunnelDiscounts?.edges?.filter((item)=>item?.node?.objectType === 'PRODUCT' && item?.node?.type === 'ORDER_VALUE') || []
     };
 };
@@ -219,7 +251,7 @@ const getRelevantPageData = async (data)=>{
 const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFetcher)=>async (data)=>{
         try {
             const { id, currentOfferID, isLibraryTemplate, isShopLibraryPage } = data;
-            const { dataBuilder, storeProperty, productOffers, pageStyle } = await getRelevantPageData({
+            const { dataBuilder, storeProperty, productOffers, pageStyle, dynamicDiscountOffer } = await getRelevantPageData({
                 id,
                 currentOfferID,
                 fetcher,
@@ -248,7 +280,8 @@ const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFet
                 swr: {
                     fallback
                 },
-                productOffers
+                productOffers,
+                dynamicDiscountOffer
             });
         } catch (err) {
             console.log('error', err);

package/dist/esm/libs/api/get-static-page-props-preview.js

@@ -43,7 +43,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 getFallbackV2(fetcher, pageTemplate),
                 getCustomFonts(themePageCustomFonts)
             ]);
-            const mobileOnly = dataBuilder.isMobile ?? false;
+            const mobileOnly = !!dataBuilder.isMobile;
             const description = dataBuilder?.dataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
             const thumbnail = parseJson(dataBuilder?.dataSEO?.find((item)=>item?.key === 'global-meta-thumbnail')?.value);
             const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
@@ -117,15 +117,15 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             };
             const languageIsoCode = shopMeta?.localization.language.isoCode ?? null;
             const countryIsoCode = shopMeta?.localization.country.isoCode ?? null;
-            const locale = !languageIsoCode || !countryIsoCode ? null : `${languageIsoCode}-${countryIsoCode}`;
+            const locale = languageIsoCode && countryIsoCode ? `${languageIsoCode}-${countryIsoCode}` : null;
             return serializableJson({
                 themeStyle: genCSS(dataBuilder?.themeStyle?.data, mobileOnly),
                 fontStyle,
                 elementFontStyle,
                 builderData: pageTemplate,
                 pageType,
-                moneyFormat: shopMeta?.shop.moneyFormat ?? null,
-                currency: shopMeta?.localization.country.currency.isoCode ?? null,
+                moneyFormat: shopMeta?.shop?.moneyFormat ?? null,
+                currency: shopMeta?.localization?.country?.currency?.isoCode ?? null,
                 languageIsoCode,
                 countryIsoCode,
                 locale,
@@ -141,7 +141,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeHeader: dataBuilder.customCode?.header ?? null,
                 customCodeBody: dataBuilder.customCode?.body ?? null,
                 customFonts,
-                pageBackground: extractPageBackground(dataBuilder)
+                pageBackground: extractPageBackground(dataBuilder),
+                interaction: dataBuilder?.interaction
             });
         } catch (err) {
             captureException(err);

package/dist/esm/libs/parse-html.js

@@ -1,34 +1,26 @@
 import { jsx } from 'react/jsx-runtime';
 import parse, { Element, Text } from 'html-react-parser';
-import Script from 'next/script';
 
-const parseHtml = (html, isHead)=>{
+const parseHtml = (key, html, isHead)=>{
     if (!html) return undefined;
     try {
         return parse(html, {
             replace: (node)=>{
-                if (node.type === 'script' && node instanceof Element) {
-                    const child = node.children?.[0];
-                    if (child instanceof Text) {
-                        if (isHead) return /*#__PURE__*/ jsx("script", {
-                            ...node.attribs,
-                            dangerouslySetInnerHTML: {
-                                __html: child.data
-                            }
-                        });
-                        else return /*#__PURE__*/ jsx(Script, {
-                            ...node.attribs,
-                            dangerouslySetInnerHTML: {
-                                __html: child.data
-                            }
-                        });
-                    } else {
-                        if (!isHead) {
-                            return /*#__PURE__*/ jsx(Script, {
-                                ...node.attribs
-                            });
+                if (node.type !== 'script' || !(node instanceof Element)) return null;
+                const child = node.children?.[0];
+                if (!child) return null;
+                if (!(child instanceof Text) && !isHead) return /*#__PURE__*/ jsx("script", {
+                    id: key,
+                    ...node.attribs
+                }, key);
+                if (child instanceof Text && isHead) {
+                    return /*#__PURE__*/ jsx("script", {
+                        id: key,
+                        ...node.attribs,
+                        dangerouslySetInnerHTML: {
+                            __html: child.data
                         }
-                    }
+                    }, key);
                 }
             }
         });

package/dist/esm/pages/builder.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider } from '@gem-sdk/core';
+import { NextSeo } from 'next-seo';
+import Head from 'next/head';
 import { useState, useMemo, useEffect } from 'react';
 import Toolbox from '../components/builder/Toolbox.js';
 import Header from '../components/builder/Header.js';
@@ -12,7 +14,7 @@ import Toolbar from '../components/builder/Toolbar.js';
 import Devices from '../components/builder/SwitchView.js';
 import Body from '../components/builder/Body.js';
 
-const BuilderPage = ({ components, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
+const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
     const [loadSuccess, setLoadSuccess] = useState(false);
     const isDisableHeaderFooter = ()=>{
         return isThemeSectionEditor;
@@ -35,19 +37,26 @@ const BuilderPage = ({ components, themeStyle, fontStyle, sectionData, pageType,
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            themeStyle && /*#__PURE__*/ jsx("style", {
-                type: "text/css",
-                id: "global-style",
-                dangerouslySetInnerHTML: {
-                    __html: themeStyle
-                }
+            /*#__PURE__*/ jsx(NextSeo, {
+                ...seo
             }),
-            fontStyle && /*#__PURE__*/ jsx("style", {
-                "data-id": "google-fonts",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: fontStyle
-                }
+            /*#__PURE__*/ jsxs(Head, {
+                children: [
+                    themeStyle && /*#__PURE__*/ jsx("style", {
+                        type: "text/css",
+                        id: "global-style",
+                        dangerouslySetInnerHTML: {
+                            __html: themeStyle
+                        }
+                    }),
+                    fontStyle && /*#__PURE__*/ jsx("style", {
+                        "data-id": "google-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: fontStyle
+                        }
+                    })
+                ]
             }),
             /*#__PURE__*/ jsx(PageProvider, {
                 children: /*#__PURE__*/ jsx(BuilderComponentProvider, {

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

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

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

@@ -1,29 +1,41 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render, AddOn } from '@gem-sdk/core';
+import { NextSeo } from 'next-seo';
 import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
+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, product, components, builderData, sectionData })=>{
-    return /*#__PURE__*/ jsxs(Suspense, {
-        fallback: /*#__PURE__*/ jsx("div", {
+const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, builderData, sectionData })=>{
+    const router = useRouter();
+    if (router.isFallback) {
+        return /*#__PURE__*/ jsx("div", {
             children: "Loading..."
-        }),
+        });
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            themeStyle && /*#__PURE__*/ jsx("style", {
-                "data-id": "global-style",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: themeStyle
-                }
+            /*#__PURE__*/ jsx(NextSeo, {
+                ...seo
             }),
-            fontStyle && /*#__PURE__*/ jsx("style", {
-                "data-id": "google-fonts",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: fontStyle
-                }
+            /*#__PURE__*/ jsxs(Head, {
+                children: [
+                    themeStyle && /*#__PURE__*/ jsx("style", {
+                        "data-id": "global-style",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: themeStyle
+                        }
+                    }),
+                    fontStyle && /*#__PURE__*/ jsx("style", {
+                        "data-id": "google-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: fontStyle
+                        }
+                    })
+                ]
             }),
             /*#__PURE__*/ jsx(PageProvider, {
                 children: /*#__PURE__*/ jsx(BuilderComponentProvider, {