@gem-sdk/pages 1.53.0-dev.0 → 1.53.0-dev.107

package/dist/cjs/components/builder/Body.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var core = require('@gem-sdk/core');
+var CollectionGlobalProvider = require('../../pages/CollectionGlobalProvider.js');
+
+const Body = ({ pageType, isThemeSectionEditor })=>{
+    const interactionData = core.usePageStore((s)=>s.interactionData);
+    const isInteractionSelectModeClass = react.useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
+        interactionData?.isSelectOnPage
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        id: "storefront",
+        className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
+        children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
+                uid: "ROOT"
+            })
+        }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
+            uid: "ROOT"
+        })
+    });
+};
+
+exports.default = Body;

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

@@ -25,7 +25,6 @@ const Header = (props)=>{
     const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
-    console.log('isSelectOnPage', isSelectOnPage);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),

package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js

@@ -4,39 +4,37 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
+var useSelectModeInteraction = require('../../libs/hooks/useSelectModeInteraction.js');
 
 const InteractionSelectOnPageHeader = ()=>{
     const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
     const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
     const { closeSelectOnPage } = core.useInteraction();
+    const { changeSelectMode } = useSelectModeInteraction.useSelectModeInteraction();
+    const handleSetInteraction = (type)=>{
+        setInteractionSelectType(type);
+        changeSelectMode(type);
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs("header", {
-                className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-black gp-text-white",
+                className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-[#151515] gp-text-white interaction-select-mode-header",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                         className: "gp-ml-4 gp-text-xs gp-mt-1",
                         children: "Select mode enabled"
                     }),
                     /*#__PURE__*/ jsxRuntime.jsxs("section", {
-                        className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
+                        className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                "data-interaction-mode": "element",
-                                onClick: ()=>setInteractionSelectType('element'),
-                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
-                                style: {
-                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
-                                },
+                                onClick: ()=>handleSetInteraction('ELEMENT'),
+                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px]  ${selectType === 'ELEMENT' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
                                 children: "Choose an element on page"
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                "data-interaction-mode": "page",
-                                onClick: ()=>setInteractionSelectType('page'),
-                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
-                                style: {
-                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
-                                },
+                                onClick: ()=>handleSetInteraction('PAGE'),
+                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'PAGE' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
                                 children: "Use entire page"
                             })
                         ]
@@ -59,7 +57,7 @@ const InteractionSelectOnPageHeader = ()=>{
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF]  gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF]   gp-mt-[40px] gp-z-[999]  ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
                 style: {
                     height: 'calc(100% - 40px)'
                 }

package/dist/cjs/components/builder/PopupManager.js

@@ -33,7 +33,7 @@ const PopupManager = ()=>{
         onSetActiveModal
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
+        className: "gp-popup-trigger-button gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
         children: popups?.map((item)=>{
             const display = item?.advanced?.d;
             return /*#__PURE__*/ jsxRuntime.jsx("div", {

package/dist/cjs/components/builder/Toolbox.js

@@ -10,6 +10,8 @@ var googleFonts = require('../../libs/google-fonts.js');
 var genCss = require('../../libs/helpers/gen-css.js');
 var genFonts = require('../../libs/helpers/gen-fonts.js');
 var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
+var libsStore = require('../../store/libs-store.js');
+var checkOptionFont = require('../../libs/helpers/check-option-font.js');
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -35,10 +37,13 @@ const Toolbox = ()=>{
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
+    const changeFontType = libsStore.libsStore((s)=>s.changeFontType);
+    const fontType = libsStore.libsStore((s)=>s.fontType);
     const clearModal = core.useModalStore((s)=>s.clearModal);
     const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
     const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
     const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionSettingType = core.usePageStore((s)=>s.setInteractionSettingType);
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
@@ -67,6 +72,12 @@ const Toolbox = ()=>{
         });
         // append new fonts
         for (const font of fonts){
+            if ([
+                'bunny',
+                'google'
+            ].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType)) {
+                return;
+            }
             if (font.type !== 'custom') {
                 if (font.variants?.length) {
                     for (const variant of font.variants){
@@ -78,7 +89,7 @@ const Toolbox = ()=>{
                         const variantName = variant;
                         const url = googleFonts.createFontUrl([
                             cloneFont
-                        ]);
+                        ], undefined, fontType);
                         if (url) {
                             const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
                             if (googleFont) {
@@ -281,6 +292,13 @@ const Toolbox = ()=>{
     }, [
         changeShopPlan
     ]);
+    const onUpdateFontType = react.useCallback((e)=>{
+        const fontType = e.detail;
+        if (!fontType) return;
+        changeFontType(fontType);
+    }, [
+        changeFontType
+    ]);
     const onUpdateDynamicProduct = react.useCallback((e)=>{
         const product = e.detail;
         if (!product) return;
@@ -335,11 +353,20 @@ const Toolbox = ()=>{
     const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
         const isSelectOnPage = e.detail.value;
         const mode = e.detail.mode;
+        const settingType = e.detail.settingType;
         setInteractionIsSelectOnPage(isSelectOnPage);
         setInteractionSelectType(mode);
+        setInteractionSettingType(settingType);
     }, [
         setInteractionIsSelectOnPage,
-        setInteractionSelectType
+        setInteractionSelectType,
+        setInteractionSettingType
+    ]);
+    const onUpdateInteractionSettingType = react.useCallback((e)=>{
+        const settingType = e.detail.settingType;
+        setInteractionSettingType(settingType);
+    }, [
+        setInteractionSettingType
     ]);
     const onUpdateInteractionItem = react.useCallback((e)=>{
         const interactionItem = e.detail;
@@ -376,6 +403,8 @@ const Toolbox = ()=>{
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
         window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
         window.addEventListener('update-interaction-item', onUpdateInteractionItem);
+        window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('update-font-type', onUpdateFontType);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -397,6 +426,8 @@ const Toolbox = ()=>{
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
             window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
             window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
+            window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+            window.removeEventListener('update-font-type', onUpdateFontType);
         };
     }, [
         onAddEntity,
@@ -419,7 +450,9 @@ const Toolbox = ()=>{
         onUpdateProductOffers,
         onUpdateSalePageProductId,
         onUpdateInteractionItem,
-        onUpdateInteractionIsSelectOnPage
+        onUpdateInteractionIsSelectOnPage,
+        onUpdateInteractionSettingType,
+        onUpdateFontType
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/libs/api/get-static-page-props-v2.js

@@ -18,7 +18,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 slug,
                 slugType: pageType
             };
-            const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
                 fetcher([
                     core.PublishedThemePagesDocument,
                     variables
@@ -28,11 +28,21 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 ]),
                 shopifyFetcher([
                     adapterShopify.ShopMetaDocument
+                ]),
+                fetcher([
+                    core.PublishedShopMetasDocument,
+                    {
+                        keys: [
+                            'source_font'
+                        ]
+                    }
                 ])
             ]);
             if (theme.status === 'rejected') {
                 throw new Error(theme.reason?.[0]);
             }
+            const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
+            const sourceFont = publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 'source_font');
             const dataBuilder = theme.value.publishedThemePages?.[0];
             const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
             if (!dataBuilder) {
@@ -40,8 +50,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
             }
             const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
             const [elementFontStyle, fontStyle, fallback, customFonts$1] = await Promise.all([
-                googleFonts.getFontStyleFromPageTemplate(pageTemplate),
-                googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+                googleFonts.getFontStyleFromPageTemplate(pageTemplate, sourceFont?.value),
+                googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data, sourceFont?.value),
                 getFallback.getFallbackV2(fetcher, pageTemplate),
                 customFonts.getCustomFonts(themePageCustomFonts)
             ]);

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var checkOptionFont = require('./helpers/check-option-font.js');
 var genFonts = require('./helpers/gen-fonts.js');
 
 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';
@@ -35,12 +36,17 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option)=>{
-    const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
-    if (!googleFonts.length) return;
+const createFontUrl = (fonts, option, fontType)=>{
+    const mainFonts = fonts.filter((font)=>{
+        return !([
+            'bunny',
+            'google'
+        ].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType || 'google')) && (font.type === 'google' || font.type === 'bunny' || !font.type);
+    });
+    if (!mainFonts.length) return;
     const params = new URLSearchParams();
     const display = option?.display || 'swap';
-    const uniqFonts = googleFonts.filter((font, index, arr)=>{
+    const uniqFonts = mainFonts.filter((font, index, arr)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
@@ -54,13 +60,16 @@ const createFontUrl = (fonts, option)=>{
     if (option?.effect) {
         params.append('effect', option.effect);
     }
-    return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
-async function getFonts(fonts, option, isImportFontByUrl = true) {
+// eslint-disable-next-line max-params
+async function getFonts(fonts, option, isImportFontByUrl = true, fontType) {
     /**
    * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
    * CSS cascading 🤷‍♂️.
-   */ const url = createFontUrl(fonts, option);
+   */ const url = createFontUrl(fonts, option, fontType);
     if (!url) return '';
     try {
         if (isImportFontByUrl) return `@import url('${url}');`;
@@ -82,7 +91,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
         return '';
     }
 }
-const getFontFromGlobalStyle = (data)=>{
+const getFontFromGlobalStyle = (data, sourceFont)=>{
     if (!data) return '';
     try {
         const globalStyle = JSON.parse(data);
@@ -90,14 +99,14 @@ const getFontFromGlobalStyle = (data)=>{
         const fonts = Object.entries(fontData).map(([, value])=>{
             return value;
         });
-        return getFonts(fonts);
+        return getFonts(fonts, undefined, undefined, sourceFont);
     } catch  {
         return '';
     }
 };
-async function getFontStyleFromPageTemplate(pageTemplate) {
+async function getFontStyleFromPageTemplate(pageTemplate, sourceFont) {
     const fontStyle = pageTemplate.map((sectionData)=>{
-        return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data));
+        return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data), undefined, undefined, sourceFont);
     });
     return await Promise.all(fontStyle);
 }

package/dist/cjs/libs/helpers/check-option-font.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const listFontsNotInBunny = [
+    'Anton SC',
+    'Arsenal SC',
+    'Baskervville SC',
+    'Beiruti',
+    'Bodoni Moda SC',
+    'Bona Nova SC',
+    'Bungee Tint',
+    'Edu AU VIC WA NT Hand',
+    'Fustat',
+    'Ga Maamli',
+    'Kalnia Glaze',
+    'Maname',
+    'Matemasie',
+    'Material Icons',
+    'Material Icons Outlined',
+    'Material Icons Round',
+    'Material Icons Sharp',
+    'Material Icons Two Tone',
+    'Material Symbols Outlined',
+    'Material Symbols Rounded',
+    'Material Symbols Sharp',
+    'Moderustic',
+    'New Amsterdam',
+    'Playwrite AR',
+    'Playwrite AT',
+    'Playwrite BE VLG',
+    'Playwrite BE WAL',
+    'Playwrite CL',
+    'Playwrite CU',
+    'Playwrite CZ',
+    'Playwrite DK Loopet',
+    'Playwrite DK Uloopet',
+    'Playwrite HR',
+    'Playwrite HR Lijeva',
+    'Playwrite HU',
+    'Playwrite PE',
+    'SUSE',
+    'Sankofa Display',
+    'Wittgenstein',
+    'Zain'
+];
+const listFontsNotInGoogle = [
+    'Arima Madurai',
+    'Coda Caption',
+    'Fredoka One',
+    'Gentium Book Basic',
+    'Kantumruy',
+    'Merienda One',
+    'Source Sans Pro',
+    'Source Serif Pro',
+    'Briem Hand',
+    'Pushster'
+];
+const objectFont = {
+    bunny: listFontsNotInBunny,
+    google: listFontsNotInGoogle
+};
+const checkNotInOptionFont = (currentfont, type)=>{
+    return objectFont?.[type]?.includes(currentfont);
+};
+
+exports.checkNotInOptionFont = checkNotInOptionFont;

package/dist/cjs/libs/hooks/useSelectModeInteraction.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const useSelectModeInteraction = ()=>{
+    const changeSelectMode = (mode)=>{
+        const event = new CustomEvent('editor:interaction:change-select-mode', {
+            bubbles: true,
+            detail: mode
+        });
+        window.dispatchEvent(event);
+    };
+    return {
+        changeSelectMode
+    };
+};
+
+exports.useSelectModeInteraction = useSelectModeInteraction;

package/dist/cjs/pages/builder.js

@@ -8,12 +8,12 @@ var react = require('react');
 var Toolbox = require('../components/builder/Toolbox.js');
 var Header = require('../components/builder/Header.js');
 var Footer = require('../components/builder/Footer.js');
-var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
 var PopupManager = require('../components/builder/PopupManager.js');
 var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
 var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
 var Toolbar = require('../components/builder/Toolbar.js');
 var SwitchView = require('../components/builder/SwitchView.js');
+var Body = require('../components/builder/Body.js');
 
 const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
     const [loadSuccess, setLoadSuccess] = react.useState(false);
@@ -77,16 +77,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                             pageType: pageType,
                                             isOriginTemplate: isOriginTemplate
                                         })),
-                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                            id: "storefront",
-                                            className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
-                                            children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
-                                                children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
-                                                    uid: "ROOT"
-                                                })
-                                            }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
-                                                uid: "ROOT"
-                                            })
+                                        /*#__PURE__*/ jsxRuntime.jsx(Body.default, {
+                                            pageType: pageType,
+                                            isThemeSectionEditor: isThemeSectionEditor
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
                                             editorImageToLayout: editorImageToLayout || false

package/dist/cjs/store/libs-store.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var zustand = require('zustand');
+
+const libsStore = zustand.create((set)=>({
+        fontType: 'google',
+        changeFontType: (fontType)=>{
+            set({
+                fontType
+            });
+        }
+    }));
+
+exports.libsStore = libsStore;

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { usePageStore, RenderPreview } from '@gem-sdk/core';
+import CollectionGlobalProvider from '../../pages/CollectionGlobalProvider.js';
+
+const Body = ({ pageType, isThemeSectionEditor })=>{
+    const interactionData = usePageStore((s)=>s.interactionData);
+    const isInteractionSelectModeClass = useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
+        interactionData?.isSelectOnPage
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        id: "storefront",
+        className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
+        children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
+            children: /*#__PURE__*/ jsx(RenderPreview, {
+                uid: "ROOT"
+            })
+        }) : /*#__PURE__*/ jsx(RenderPreview, {
+            uid: "ROOT"
+        })
+    });
+};
+
+export { Body as default };

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

@@ -21,7 +21,6 @@ const Header = (props)=>{
     const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
-    console.log('isSelectOnPage', isSelectOnPage);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Devices, {}),

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

@@ -1,38 +1,36 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { usePageStore, useInteraction } from '@gem-sdk/core';
+import { useSelectModeInteraction } from '../../libs/hooks/useSelectModeInteraction.js';
 
 const InteractionSelectOnPageHeader = ()=>{
     const selectType = usePageStore((s)=>s.interactionData?.selectType);
     const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
     const { closeSelectOnPage } = useInteraction();
+    const { changeSelectMode } = useSelectModeInteraction();
+    const handleSetInteraction = (type)=>{
+        setInteractionSelectType(type);
+        changeSelectMode(type);
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("header", {
-                className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-black gp-text-white",
+                className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-[#151515] gp-text-white interaction-select-mode-header",
                 children: [
                     /*#__PURE__*/ jsx("div", {
                         className: "gp-ml-4 gp-text-xs gp-mt-1",
                         children: "Select mode enabled"
                     }),
                     /*#__PURE__*/ jsxs("section", {
-                        className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
+                        className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
                         children: [
                             /*#__PURE__*/ jsx("button", {
-                                "data-interaction-mode": "element",
-                                onClick: ()=>setInteractionSelectType('element'),
-                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
-                                style: {
-                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
-                                },
+                                onClick: ()=>handleSetInteraction('ELEMENT'),
+                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px]  ${selectType === 'ELEMENT' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
                                 children: "Choose an element on page"
                             }),
                             /*#__PURE__*/ jsx("button", {
-                                "data-interaction-mode": "page",
-                                onClick: ()=>setInteractionSelectType('page'),
-                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
-                                style: {
-                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
-                                },
+                                onClick: ()=>handleSetInteraction('PAGE'),
+                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'PAGE' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
                                 children: "Use entire page"
                             })
                         ]
@@ -55,7 +53,7 @@ const InteractionSelectOnPageHeader = ()=>{
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
-                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF]  gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF]   gp-mt-[40px] gp-z-[999]  ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
                 style: {
                     height: 'calc(100% - 40px)'
                 }

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

@@ -29,7 +29,7 @@ const PopupManager = ()=>{
         onSetActiveModal
     ]);
     return /*#__PURE__*/ jsx("div", {
-        className: "gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
+        className: "gp-popup-trigger-button gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
         children: popups?.map((item)=>{
             const display = item?.advanced?.d;
             return /*#__PURE__*/ jsx("div", {

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

@@ -6,6 +6,8 @@ import { createFontUrl } from '../../libs/google-fonts.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
 import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
+import { libsStore } from '../../store/libs-store.js';
+import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -31,10 +33,13 @@ const Toolbox = ()=>{
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
+    const changeFontType = libsStore((s)=>s.changeFontType);
+    const fontType = libsStore((s)=>s.fontType);
     const clearModal = useModalStore((s)=>s.clearModal);
     const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
     const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
     const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -63,6 +68,12 @@ const Toolbox = ()=>{
         });
         // append new fonts
         for (const font of fonts){
+            if ([
+                'bunny',
+                'google'
+            ].includes(font.type) && checkNotInOptionFont(font.family, fontType)) {
+                return;
+            }
             if (font.type !== 'custom') {
                 if (font.variants?.length) {
                     for (const variant of font.variants){
@@ -74,7 +85,7 @@ const Toolbox = ()=>{
                         const variantName = variant;
                         const url = createFontUrl([
                             cloneFont
-                        ]);
+                        ], undefined, fontType);
                         if (url) {
                             const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
                             if (googleFont) {
@@ -277,6 +288,13 @@ const Toolbox = ()=>{
     }, [
         changeShopPlan
     ]);
+    const onUpdateFontType = useCallback((e)=>{
+        const fontType = e.detail;
+        if (!fontType) return;
+        changeFontType(fontType);
+    }, [
+        changeFontType
+    ]);
     const onUpdateDynamicProduct = useCallback((e)=>{
         const product = e.detail;
         if (!product) return;
@@ -331,11 +349,20 @@ const Toolbox = ()=>{
     const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
         const isSelectOnPage = e.detail.value;
         const mode = e.detail.mode;
+        const settingType = e.detail.settingType;
         setInteractionIsSelectOnPage(isSelectOnPage);
         setInteractionSelectType(mode);
+        setInteractionSettingType(settingType);
     }, [
         setInteractionIsSelectOnPage,
-        setInteractionSelectType
+        setInteractionSelectType,
+        setInteractionSettingType
+    ]);
+    const onUpdateInteractionSettingType = useCallback((e)=>{
+        const settingType = e.detail.settingType;
+        setInteractionSettingType(settingType);
+    }, [
+        setInteractionSettingType
     ]);
     const onUpdateInteractionItem = useCallback((e)=>{
         const interactionItem = e.detail;
@@ -372,6 +399,8 @@ const Toolbox = ()=>{
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
         window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
         window.addEventListener('update-interaction-item', onUpdateInteractionItem);
+        window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('update-font-type', onUpdateFontType);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -393,6 +422,8 @@ const Toolbox = ()=>{
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
             window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
             window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
+            window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+            window.removeEventListener('update-font-type', onUpdateFontType);
         };
     }, [
         onAddEntity,
@@ -415,7 +446,9 @@ const Toolbox = ()=>{
         onUpdateProductOffers,
         onUpdateSalePageProductId,
         onUpdateInteractionItem,
-        onUpdateInteractionIsSelectOnPage
+        onUpdateInteractionIsSelectOnPage,
+        onUpdateInteractionSettingType,
+        onUpdateFontType
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

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

@@ -1,4 +1,4 @@
-import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
+import { PublishedThemePagesDocument, StorePropertyDocument, PublishedShopMetasDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
@@ -16,7 +16,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 slug,
                 slugType: pageType
             };
-            const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
                 fetcher([
                     PublishedThemePagesDocument,
                     variables
@@ -26,11 +26,21 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 ]),
                 shopifyFetcher([
                     ShopMetaDocument
+                ]),
+                fetcher([
+                    PublishedShopMetasDocument,
+                    {
+                        keys: [
+                            'source_font'
+                        ]
+                    }
                 ])
             ]);
             if (theme.status === 'rejected') {
                 throw new Error(theme.reason?.[0]);
             }
+            const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
+            const sourceFont = publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 'source_font');
             const dataBuilder = theme.value.publishedThemePages?.[0];
             const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
             if (!dataBuilder) {
@@ -38,8 +48,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
             }
             const pageTemplate = parseBuilderTemplateV2(dataBuilder);
             const [elementFontStyle, fontStyle, fallback, customFonts] = await Promise.all([
-                getFontStyleFromPageTemplate(pageTemplate),
-                getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+                getFontStyleFromPageTemplate(pageTemplate, sourceFont?.value),
+                getFontFromGlobalStyle(dataBuilder?.pageStyle?.data, sourceFont?.value),
                 getFallbackV2(fetcher, pageTemplate),
                 getCustomFonts(themePageCustomFonts)
             ]);

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

@@ -1,3 +1,4 @@
+import { checkNotInOptionFont } from './helpers/check-option-font.js';
 import { getFontsFromDataBuilder } from './helpers/gen-fonts.js';
 
 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';
@@ -33,12 +34,17 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option)=>{
-    const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
-    if (!googleFonts.length) return;
+const createFontUrl = (fonts, option, fontType)=>{
+    const mainFonts = fonts.filter((font)=>{
+        return !([
+            'bunny',
+            'google'
+        ].includes(font.type) && checkNotInOptionFont(font.family, fontType || 'google')) && (font.type === 'google' || font.type === 'bunny' || !font.type);
+    });
+    if (!mainFonts.length) return;
     const params = new URLSearchParams();
     const display = option?.display || 'swap';
-    const uniqFonts = googleFonts.filter((font, index, arr)=>{
+    const uniqFonts = mainFonts.filter((font, index, arr)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
@@ -52,13 +58,16 @@ const createFontUrl = (fonts, option)=>{
     if (option?.effect) {
         params.append('effect', option.effect);
     }
-    return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
-async function getFonts(fonts, option, isImportFontByUrl = true) {
+// eslint-disable-next-line max-params
+async function getFonts(fonts, option, isImportFontByUrl = true, fontType) {
     /**
    * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
    * CSS cascading 🤷‍♂️.
-   */ const url = createFontUrl(fonts, option);
+   */ const url = createFontUrl(fonts, option, fontType);
     if (!url) return '';
     try {
         if (isImportFontByUrl) return `@import url('${url}');`;
@@ -80,7 +89,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
         return '';
     }
 }
-const getFontFromGlobalStyle = (data)=>{
+const getFontFromGlobalStyle = (data, sourceFont)=>{
     if (!data) return '';
     try {
         const globalStyle = JSON.parse(data);
@@ -88,14 +97,14 @@ const getFontFromGlobalStyle = (data)=>{
         const fonts = Object.entries(fontData).map(([, value])=>{
             return value;
         });
-        return getFonts(fonts);
+        return getFonts(fonts, undefined, undefined, sourceFont);
     } catch  {
         return '';
     }
 };
-async function getFontStyleFromPageTemplate(pageTemplate) {
+async function getFontStyleFromPageTemplate(pageTemplate, sourceFont) {
     const fontStyle = pageTemplate.map((sectionData)=>{
-        return getFonts(getFontsFromDataBuilder(sectionData.data));
+        return getFonts(getFontsFromDataBuilder(sectionData.data), undefined, undefined, sourceFont);
     });
     return await Promise.all(fontStyle);
 }

package/dist/esm/libs/helpers/check-option-font.js

@@ -0,0 +1,63 @@
+const listFontsNotInBunny = [
+    'Anton SC',
+    'Arsenal SC',
+    'Baskervville SC',
+    'Beiruti',
+    'Bodoni Moda SC',
+    'Bona Nova SC',
+    'Bungee Tint',
+    'Edu AU VIC WA NT Hand',
+    'Fustat',
+    'Ga Maamli',
+    'Kalnia Glaze',
+    'Maname',
+    'Matemasie',
+    'Material Icons',
+    'Material Icons Outlined',
+    'Material Icons Round',
+    'Material Icons Sharp',
+    'Material Icons Two Tone',
+    'Material Symbols Outlined',
+    'Material Symbols Rounded',
+    'Material Symbols Sharp',
+    'Moderustic',
+    'New Amsterdam',
+    'Playwrite AR',
+    'Playwrite AT',
+    'Playwrite BE VLG',
+    'Playwrite BE WAL',
+    'Playwrite CL',
+    'Playwrite CU',
+    'Playwrite CZ',
+    'Playwrite DK Loopet',
+    'Playwrite DK Uloopet',
+    'Playwrite HR',
+    'Playwrite HR Lijeva',
+    'Playwrite HU',
+    'Playwrite PE',
+    'SUSE',
+    'Sankofa Display',
+    'Wittgenstein',
+    'Zain'
+];
+const listFontsNotInGoogle = [
+    'Arima Madurai',
+    'Coda Caption',
+    'Fredoka One',
+    'Gentium Book Basic',
+    'Kantumruy',
+    'Merienda One',
+    'Source Sans Pro',
+    'Source Serif Pro',
+    'Briem Hand',
+    'Pushster'
+];
+const objectFont = {
+    bunny: listFontsNotInBunny,
+    google: listFontsNotInGoogle
+};
+const checkNotInOptionFont = (currentfont, type)=>{
+    return objectFont?.[type]?.includes(currentfont);
+};
+
+export { checkNotInOptionFont };

package/dist/esm/libs/hooks/useSelectModeInteraction.js

@@ -0,0 +1,14 @@
+const useSelectModeInteraction = ()=>{
+    const changeSelectMode = (mode)=>{
+        const event = new CustomEvent('editor:interaction:change-select-mode', {
+            bubbles: true,
+            detail: mode
+        });
+        window.dispatchEvent(event);
+    };
+    return {
+        changeSelectMode
+    };
+};
+
+export { useSelectModeInteraction };

package/dist/esm/pages/builder.js

@@ -1,17 +1,17 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
+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';
 import Footer from '../components/builder/Footer.js';
-import CollectionGlobalProvider from './CollectionGlobalProvider.js';
 import PopupManager from '../components/builder/PopupManager.js';
 import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
 import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
 import Toolbar from '../components/builder/Toolbar.js';
 import Devices from '../components/builder/SwitchView.js';
+import Body from '../components/builder/Body.js';
 
 const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
     const [loadSuccess, setLoadSuccess] = useState(false);
@@ -75,16 +75,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                             pageType: pageType,
                                             isOriginTemplate: isOriginTemplate
                                         })),
-                                        /*#__PURE__*/ jsx("div", {
-                                            id: "storefront",
-                                            className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
-                                            children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
-                                                children: /*#__PURE__*/ jsx(RenderPreview, {
-                                                    uid: "ROOT"
-                                                })
-                                            }) : /*#__PURE__*/ jsx(RenderPreview, {
-                                                uid: "ROOT"
-                                            })
+                                        /*#__PURE__*/ jsx(Body, {
+                                            pageType: pageType,
+                                            isThemeSectionEditor: isThemeSectionEditor
                                         }),
                                         /*#__PURE__*/ jsx(ImageToLayout, {
                                             editorImageToLayout: editorImageToLayout || false

package/dist/esm/store/libs-store.js

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+
+const libsStore = create((set)=>({
+        fontType: 'google',
+        changeFontType: (fontType)=>{
+            set({
+                fontType
+            });
+        }
+    }));
+
+export { libsStore };

package/dist/types/index.d.ts

@@ -189,7 +189,9 @@ declare const BuilderPage: React.FC<BuilderPageProps>;
 
 declare const getStaticPaths: GetStaticPaths;
 
-type TypographyV2FontFamilyType = 'google' | 'custom' | 'theme';
+type TypographyV2FontFamilyType = 'google' | 'custom' | 'theme' | 'bunny';
+
+type FontType = 'bunny' | 'google';
 
 type FontItem = {
     type: TypographyV2FontFamilyType;
@@ -202,8 +204,8 @@ type FontOption = {
     subset?: string;
     effect?: string;
 };
-declare function getFonts(fonts: FontItem[], option?: FontOption, isImportFontByUrl?: boolean): Promise<string>;
-declare const getFontFromGlobalStyle: (data?: string) => "" | Promise<string>;
+declare function getFonts(fonts: FontItem[], option?: FontOption, isImportFontByUrl?: boolean, fontType?: FontType): Promise<string>;
+declare const getFontFromGlobalStyle: (data?: string, sourceFont?: FontType) => "" | Promise<string>;
 
 declare const getFontsFromDataBuilder: (dataBuilder: Record<string, any>) => FontItem[];
 declare const getFontFromGroupSetting: (fonts: FontItem[], groupSetting: Record<string, any>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.53.0-dev.0",
+  "version": "1.53.0-dev.107",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.53.0-dev.0",
-    "@gem-sdk/plugin-cookie-bar": "1.53.0-dev.0",
-    "@gem-sdk/plugin-quick-view": "1.53.0-dev.0",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.53.0-dev.0"
+    "@gem-sdk/core": "1.53.0-dev.107",
+    "@gem-sdk/plugin-cookie-bar": "1.53.0-dev.105",
+    "@gem-sdk/plugin-quick-view": "1.53.0-dev.105",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.53.0-dev.105"
   },
   "peerDependencies": {
     "next": ">=13"