@gem-sdk/core 1.14.0-next.91 → 1.14.0

package/dist/cjs/components/AddOn.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),AddonContext=require("../contexts/AddonContext.js"),shop=require("../hooks/shop.js");const AddOn=({name:e})=>{let t=AddonContext.useAddon(e),n=shop.usePluginEnable();return n?.includes(e)?jsxRuntime.jsx(t,{}):null};exports.default=AddOn;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var AddonContext = require('../contexts/AddonContext.js');
+var shop = require('../hooks/shop.js');
+
+const AddOn = ({ name })=>{
+    const Comp = AddonContext.useAddon(name);
+    const plugins = shop.usePluginEnable();
+    if (!plugins?.includes(name)) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {});
+};
+
+exports.default = AddOn;

package/dist/cjs/components/ComponentWrapper.js

@@ -1 +1,28 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js");const ComponentWrapper=({children:e,...t})=>{if("section"===t.type)return null;let r=composeAdvanceStyle.composeAdvanceStyle(t.advanced,t.tag),s=t.advanced;return constant.disableWrap.includes(t.tag)&&react.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,style:r,advanced:s}):jsxRuntime.jsx("div",{style:r,className:`${t.uid}`,children:e})};exports.default=ComponentWrapper;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
+var constant = require('./constant.js');
+
+const ComponentWrapper = ({ children, ...props })=>{
+    if (props.type === 'section') return null;
+    const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
+    const advanced = props.advanced;
+    if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+            ...children.props,
+            style,
+            advanced
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: style,
+        className: `${props.uid}`,
+        children: children
+    });
+};
+
+exports.default = ComponentWrapper;

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -1 +1,72 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js");const ComponentWrapperPreview=({children:e,...t})=>{if("section"===t.type)return null;let o={};if(t.editorConfigs){let e=t.editorConfigs;e.placeholder?.notAppendBeforeAfter&&(o["data-placeholder-not-append-before-after"]=!0),e.toolbar?.parent&&(o["data-toolbar-parent"]=!0),e.component?.noDelete&&(o["data-component-no-delete"]=!0),e.component?.noDuplicate&&(o["data-component-no-duplicate"]=!0),e.component?.noDragDrop&&(o["data-component-no-drag-drop"]=!0),e.component?.noSetting&&(o["data-component-no-setting"]=!0),e.component?.isThirdParty&&(o["data-component-is-third-party"]=!0),e.toolbar?.hide&&(o["data-toolbar-hide"]=!0),e.slots?.children&&(o["data-slots-children"]=!0)}let n=composeAdvanceStyle.composeAdvanceStyle(t.advanced,t.tag),a=t.advanced,r={...o,"data-uid":t.uid,"data-component-type":"component","data-component-tag":t.tag,"data-component-label":t.label};return constant.disableWrap.includes(t.tag)&&react.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,style:n,builderAttrs:r,advanced:a}):jsxRuntime.jsx("div",{style:n,className:`${t.uid}`,...r,children:e})};exports.default=ComponentWrapperPreview;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
+var constant = require('./constant.js');
+
+const ComponentWrapperPreview = ({ children, ...props })=>{
+    if (props.type === 'section') {
+        return null;
+    }
+    const customProps = {};
+    // Build editor configs
+    if (props.editorConfigs) {
+        const editorConfigs = props.editorConfigs;
+        if (editorConfigs.placeholder?.notAppendBeforeAfter) {
+            customProps['data-placeholder-not-append-before-after'] = true;
+        }
+        if (editorConfigs.toolbar?.parent) {
+            customProps['data-toolbar-parent'] = true;
+        }
+        if (editorConfigs.component?.noDelete) {
+            customProps['data-component-no-delete'] = true;
+        }
+        if (editorConfigs.component?.noDuplicate) {
+            customProps['data-component-no-duplicate'] = true;
+        }
+        if (editorConfigs.component?.noDragDrop) {
+            customProps['data-component-no-drag-drop'] = true;
+        }
+        if (editorConfigs.component?.noSetting) {
+            customProps['data-component-no-setting'] = true;
+        }
+        if (editorConfigs.component?.isThirdParty) {
+            customProps['data-component-is-third-party'] = true;
+        }
+        if (editorConfigs.toolbar?.hide) {
+            customProps['data-toolbar-hide'] = true;
+        }
+        if (editorConfigs.slots?.children) {
+            customProps['data-slots-children'] = true;
+        }
+    }
+    const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
+    const advanced = props.advanced;
+    const builderAttrs = {
+        ...customProps,
+        'data-uid': props.uid,
+        'data-component-type': 'component',
+        'data-component-tag': props.tag,
+        'data-component-label': props.label
+    };
+    if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+            ...children.props,
+            style,
+            builderAttrs,
+            advanced
+        });
+    }
+    // Render
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: style,
+        className: `${props.uid}`,
+        ...builderAttrs,
+        children: children
+    });
+};
+
+exports.default = ComponentWrapperPreview;

package/dist/cjs/components/Empty.js

@@ -1 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const Empty=()=>null;exports.default=()=>null;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const Empty = ()=>null;
+
+exports.default = Empty;

package/dist/cjs/components/Render.js

@@ -1 +1,65 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),reactErrorBoundary=require("react-error-boundary"),BuilderComponent=require("../contexts/BuilderComponent.js"),BuilderContext=require("../contexts/BuilderContext.js"),ComponentWrapper=require("./ComponentWrapper.js"),RenderSection=require("./RenderSection.js");const Render=({uid:e,...r})=>{let t=BuilderContext.useBuilderStore(r=>r.getItem(e)),n=BuilderComponent.useBuilderComponent(t?.tag);return t?t?.type==="section"?jsxRuntime.jsx(RenderSection.default,{sectionId:t.uid}):jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary,{fallbackRender:({error:e,resetErrorBoundary:r})=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("span",{"aria-label":"Error message",children:e.message}),jsxRuntime.jsx("button",{type:"button",onClick:r,children:"Try again"})]}),children:jsxRuntime.jsx(ComponentWrapper.default,{...t,children:t?.childrens?.length?jsxRuntime.jsx(n,{builderProps:{uid:e,builderData:t},styles:t.styles,setting:t.settings,...r,children:t.childrens.map(e=>jsxRuntime.jsx(RenderMemo,{uid:e},e))}):jsxRuntime.jsx(n,{builderProps:{uid:e,builderData:t},styles:t.styles,setting:t.settings,...r})})},t.uid):null},RenderMemo=react.memo(Render);RenderMemo.displayName="RenderMemo",exports.default=RenderMemo;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactErrorBoundary = require('react-error-boundary');
+var BuilderComponent = require('../contexts/BuilderComponent.js');
+var BuilderContext = require('../contexts/BuilderContext.js');
+var ComponentWrapper = require('./ComponentWrapper.js');
+var RenderSection = require('./RenderSection.js');
+
+const Render = ({ uid, ...passProps })=>{
+    const item = BuilderContext.useBuilderStore((s)=>s.getItem(uid));
+    const Component = BuilderComponent.useBuilderComponent(item?.tag);
+    if (!item) return null;
+    if (item?.type === 'section') {
+        return /*#__PURE__*/ jsxRuntime.jsx(RenderSection.default, {
+            sectionId: item.uid
+        });
+    } else {
+        return /*#__PURE__*/ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, {
+            fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            "aria-label": "Error message",
+                            children: error.message
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            type: "button",
+                            onClick: resetErrorBoundary,
+                            children: "Try again"
+                        })
+                    ]
+                }),
+            children: /*#__PURE__*/ jsxRuntime.jsx(ComponentWrapper.default, {
+                ...item,
+                children: item?.childrens?.length ? /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps,
+                    children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderMemo, {
+                            uid: id
+                        }, id))
+                }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps
+                })
+            })
+        }, item.uid);
+    }
+};
+const RenderMemo = /*#__PURE__*/ react.memo(Render);
+RenderMemo.displayName = 'RenderMemo';
+
+exports.default = RenderMemo;

package/dist/cjs/components/Render.liquid.js

@@ -1,3 +1,158 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("react"),require("swr");var render=require("../helpers/render.js");require("../helpers/convert.js");var composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js");const componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],Render=({uid:e,builder:t,components:r,parentId:n,extraFiles:s={},...i})=>{let d=t[e],l=r[d?.tag];if(!l)return console.log("Miss component: ",d),{liquid:"",extraFiles:s};if(!d||d?.type==="section")return{liquid:"",extraFiles:s};{let s={extraFiles:{}},a=composeAdvanceStyle.composeAdvanceStyle(d.advanced,d.tag),o="";return{liquid:o=constant.disableWrap.includes(d.tag)?render.RenderIf(d?.childrens?.length,()=>l({builderProps:{uid:e,builderData:d},styles:d.styles,setting:d.settings,style:a,advanced:d.advanced,parentId:componentsRenderWithParentId.includes(d.tag)?n:null,...i,rawChildren:d.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:s})),children:d.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:s})).join("")}),()=>l({builderProps:{uid:e,builderData:d},styles:d.styles,setting:d.settings,advanced:d.advanced,style:a,isText:!!componentTexts.includes(d.tag)||null,parentId:componentsRenderWithParentId.includes(d.tag)?n:null,...i})):render.template`<div style="${a}" class="${d.uid}">
-      ${render.RenderIf(d?.childrens?.length,()=>l({builderProps:{uid:e,builderData:d},styles:d.styles,setting:d.settings,...i,rawChildren:d.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:s})),children:d.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:s})).join("")}),()=>l({builderProps:{uid:e,builderData:d},styles:d.styles,setting:d.settings,isText:!!componentTexts.includes(d.tag)||null,...i}))}
-      </div>`,extraFiles:s.extraFiles}}},RenderChildren=e=>{let t=Render(e);for(let r in t.extraFiles)if(Object.prototype.hasOwnProperty.call(t.extraFiles,r)){let n=t.extraFiles[r];e.customProps.extraFiles[r]=n}let r=new TextEncoder,n=t?.liquid?r.encode(t.liquid).length:0;if(Math.ceil(n/1024)>=180){let r=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[r]=t.liquid,`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id  %}`}return t.liquid};exports.RenderChildren=RenderChildren,exports.default=Render;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('swr');
+var render = require('../helpers/render.js');
+require('../helpers/convert.js');
+var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
+var constant = require('./constant.js');
+
+const componentsRenderWithParentId = [
+    'CarouselItem'
+];
+const componentTexts = [
+    'Text',
+    'Heading'
+];
+const Render = ({ uid, builder, components, parentId, extraFiles = {}, ...passProps })=>{
+    const item = builder[uid];
+    const Component = components[item?.tag];
+    if (!Component) {
+        console.log('Miss component: ', item);
+        return {
+            liquid: '',
+            extraFiles
+        };
+    }
+    if (!item) {
+        return {
+            liquid: '',
+            extraFiles
+        };
+    }
+    if (item?.type === 'section') {
+        return {
+            liquid: '',
+            extraFiles
+        };
+    } else {
+        const customProps = {
+            extraFiles: {}
+        };
+        const style = composeAdvanceStyle.composeAdvanceStyle(item.advanced, item.tag);
+        let liquid = '';
+        if (constant.disableWrap.includes(item.tag)) {
+            liquid = render.RenderIf(item?.childrens?.length, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    style,
+                    advanced: item.advanced,
+                    parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
+                    ...passProps,
+                    rawChildren: item.childrens.map((id)=>{
+                        return {
+                            ...builder[id],
+                            uid: id,
+                            builder,
+                            components,
+                            customProps
+                        };
+                    }),
+                    children: item.childrens.map((id)=>RenderChildren({
+                            uid: id,
+                            builder,
+                            components,
+                            customProps
+                        })).join('')
+                });
+            }, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    advanced: item.advanced,
+                    style,
+                    isText: componentTexts.includes(item.tag) ? true : null,
+                    parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
+                    ...passProps
+                });
+            });
+        } else {
+            liquid = render.template`<div style="${style}" class="${item.uid}">
+      ${render.RenderIf(item?.childrens?.length, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps,
+                    rawChildren: item.childrens.map((id)=>{
+                        return {
+                            ...builder[id],
+                            uid: id,
+                            builder,
+                            components,
+                            customProps
+                        };
+                    }),
+                    children: item.childrens.map((id)=>RenderChildren({
+                            uid: id,
+                            builder,
+                            components,
+                            customProps
+                        })).join('')
+                });
+            }, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    isText: componentTexts.includes(item.tag) ? true : null,
+                    ...passProps
+                });
+            })}
+      </div>`;
+        }
+        return {
+            liquid,
+            extraFiles: customProps.extraFiles
+        };
+    }
+};
+const RenderChildren = (props)=>{
+    const data = Render(props);
+    // Append to prop parent
+    for(const key in data.extraFiles){
+        if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
+            const value = data.extraFiles[key];
+            props.customProps.extraFiles[key] = value;
+        }
+    }
+    // Fix limit 256kb
+    const textEncoder = new TextEncoder();
+    const size = data?.liquid ? textEncoder.encode(data.liquid).length : 0;
+    if (Math.ceil(size / 1024) >= 180) {
+        const fileName = `gp-section-snippet-${props.uid}`;
+        props.customProps.extraFiles[fileName] = data.liquid;
+        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id  %}`;
+    }
+    return data.liquid;
+};
+
+exports.RenderChildren = RenderChildren;
+exports.default = Render;

package/dist/cjs/components/RenderBlock.js

@@ -1 +1,54 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),reactErrorBoundary=require("react-error-boundary"),BuilderComponent=require("../contexts/BuilderComponent.js"),BuilderContext=require("../contexts/BuilderContext.js"),ComponentWrapper=require("./ComponentWrapper.js");const RenderBlock=({uid:e})=>{let r=BuilderContext.useBuilderStore(r=>r.getItem(e)),t=BuilderComponent.useBuilderComponent(r?.tag);return r&&"section"!==r.type?jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary,{fallbackRender:({error:e,resetErrorBoundary:t})=>jsxRuntime.jsxs(ComponentWrapper.default,{...r,children:[jsxRuntime.jsx("span",{"aria-label":"Error message",children:e.message}),jsxRuntime.jsx("button",{type:"button",onClick:t,children:"Try again"})]}),children:jsxRuntime.jsx(ComponentWrapper.default,{...r,children:r?.childrens?.length?jsxRuntime.jsx(t,{builderProps:{uid:e},styles:r.styles??{},setting:r.settings??{},children:r?.childrens?.map(e=>jsxRuntime.jsx(RenderBlockMemo,{uid:e},e))}):jsxRuntime.jsx(t,{builderProps:{uid:e},styles:r.styles??{},setting:r.settings??{}})})},r.uid):null},RenderBlockMemo=react.memo(RenderBlock);exports.default=RenderBlockMemo;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactErrorBoundary = require('react-error-boundary');
+var BuilderComponent = require('../contexts/BuilderComponent.js');
+var BuilderContext = require('../contexts/BuilderContext.js');
+var ComponentWrapper = require('./ComponentWrapper.js');
+
+const RenderBlock = ({ uid })=>{
+    const item = BuilderContext.useBuilderStore((s)=>s.getItem(uid));
+    const Component = BuilderComponent.useBuilderComponent(item?.tag);
+    if (!item || item.type === 'section') return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, {
+        fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxRuntime.jsxs(ComponentWrapper.default, {
+                ...item,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        "aria-label": "Error message",
+                        children: error.message
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        type: "button",
+                        onClick: resetErrorBoundary,
+                        children: "Try again"
+                    })
+                ]
+            }),
+        children: /*#__PURE__*/ jsxRuntime.jsx(ComponentWrapper.default, {
+            ...item,
+            children: item?.childrens?.length ? /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                builderProps: {
+                    uid
+                },
+                styles: item.styles ?? {},
+                setting: item.settings ?? {},
+                children: item?.childrens?.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderBlockMemo, {
+                        uid: id
+                    }, id))
+            }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                builderProps: {
+                    uid
+                },
+                styles: item.styles ?? {},
+                setting: item.settings ?? {}
+            })
+        })
+    }, item.uid);
+};
+const RenderBlockMemo = /*#__PURE__*/ react.memo(RenderBlock);
+
+exports.default = RenderBlockMemo;

package/dist/cjs/components/RenderPreview.js

@@ -1 +1,66 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),reactErrorBoundary=require("react-error-boundary"),BuilderComponent=require("../contexts/BuilderComponent.js"),BuilderPreviewContext=require("../contexts/BuilderPreviewContext.js"),ComponentWrapperPreview=require("./ComponentWrapperPreview.js"),RenderSection=require("./RenderSection.js");const RenderPreview=({uid:e,...r})=>{let t=BuilderPreviewContext.useBuilderPreviewStore(r=>r.getItem(e)),n=BuilderComponent.useBuilderComponent(t?.tag);return t?t?.type==="section"?jsxRuntime.jsx(RenderSection.default,{sectionId:t.uid}):jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary,{fallbackRender:({error:e,resetErrorBoundary:r})=>jsxRuntime.jsxs(ComponentWrapperPreview.default,{...t,children:[jsxRuntime.jsx("span",{"aria-label":"Error message",children:e.message}),jsxRuntime.jsx("button",{type:"button",onClick:r,children:"Try again"})]}),children:jsxRuntime.jsx(ComponentWrapperPreview.default,{...t,children:t?.childrens?.length?jsxRuntime.jsx(n,{builderProps:{uid:e,builderData:t},styles:t.styles,setting:t.settings,...r,children:t.childrens.map(e=>jsxRuntime.jsx(RenderPreviewMemo,{uid:e},e))}):jsxRuntime.jsx(n,{builderProps:{uid:e,builderData:t},styles:t.styles,setting:t.settings,...r})})},t.uid):null},RenderPreviewMemo=react.memo(RenderPreview);RenderPreviewMemo.displayName="RenderPreviewMemo",exports.default=RenderPreviewMemo;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactErrorBoundary = require('react-error-boundary');
+var BuilderComponent = require('../contexts/BuilderComponent.js');
+var BuilderPreviewContext = require('../contexts/BuilderPreviewContext.js');
+var ComponentWrapperPreview = require('./ComponentWrapperPreview.js');
+var RenderSection = require('./RenderSection.js');
+
+const RenderPreview = ({ uid, ...passProps })=>{
+    const item = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem(uid));
+    const Component = BuilderComponent.useBuilderComponent(item?.tag);
+    if (!item) return null;
+    if (item?.type === 'section') {
+        return /*#__PURE__*/ jsxRuntime.jsx(RenderSection.default, {
+            sectionId: item.uid
+        });
+    } else {
+        return /*#__PURE__*/ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, {
+            fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxRuntime.jsxs(ComponentWrapperPreview.default, {
+                    ...item,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            "aria-label": "Error message",
+                            children: error.message
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            type: "button",
+                            onClick: resetErrorBoundary,
+                            children: "Try again"
+                        })
+                    ]
+                }),
+            children: /*#__PURE__*/ jsxRuntime.jsx(ComponentWrapperPreview.default, {
+                ...item,
+                children: item?.childrens?.length ? /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps,
+                    children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderPreviewMemo, {
+                            uid: id
+                        }, id))
+                }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps
+                })
+            })
+        }, item.uid);
+    }
+};
+const RenderPreviewMemo = /*#__PURE__*/ react.memo(RenderPreview);
+RenderPreviewMemo.displayName = 'RenderPreviewMemo';
+
+exports.default = RenderPreviewMemo;

package/dist/cjs/components/RenderSection.js

@@ -1 +1,23 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),BuilderContext=require("../contexts/BuilderContext.js"),SectionContext=require("../contexts/SectionContext.js"),RenderBlock=require("./RenderBlock.js");const RenderSection=({sectionId:e})=>{let t=SectionContext.useSection(e);return t?jsxRuntime.jsx(BuilderContext.BuilderProvider,{state:t,children:jsxRuntime.jsx(RenderBlock.default,{uid:e})},e):null},RenderSectionMemo=react.memo(RenderSection);exports.default=RenderSectionMemo;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var BuilderContext = require('../contexts/BuilderContext.js');
+var SectionContext = require('../contexts/SectionContext.js');
+var RenderBlock = require('./RenderBlock.js');
+
+const RenderSection = ({ sectionId })=>{
+    const state = SectionContext.useSection(sectionId);
+    if (!state) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(BuilderContext.BuilderProvider, {
+        state: state,
+        children: /*#__PURE__*/ jsxRuntime.jsx(RenderBlock.default, {
+            uid: sectionId
+        })
+    }, sectionId);
+};
+const RenderSectionMemo = /*#__PURE__*/ react.memo(RenderSection);
+
+exports.default = RenderSectionMemo;

package/dist/cjs/components/constant.js

@@ -1 +1,39 @@
-"use strict";const disableWrap=["Col","CollectionBanner","Row","Section","Image","Text","Button","ProductButton","Cart","Tabs","TabItem","Carousel","CarouselItem","ShopPayButton","AccordionItem","Video","Header","HeroBanner","Icon","IconList","HTMLCode","IconListHoz","IconListItem","CSSCode","FormEmail","FormDropdown","SubmitButton","Dialog","TextField","FormTextarea","ProductPrice","Product","ProductImages"];exports.disableWrap=disableWrap;
+'use strict';
+
+const disableWrap = [
+    'Col',
+    'CollectionBanner',
+    'Row',
+    'Section',
+    'Image',
+    'Text',
+    'Button',
+    'ProductButton',
+    'Cart',
+    'Tabs',
+    'TabItem',
+    'Carousel',
+    'CarouselItem',
+    'ShopPayButton',
+    'AccordionItem',
+    'Video',
+    'Header',
+    'HeroBanner',
+    'Icon',
+    'IconList',
+    'HTMLCode',
+    'IconListHoz',
+    'IconListItem',
+    'CSSCode',
+    'FormEmail',
+    'FormDropdown',
+    'SubmitButton',
+    'Dialog',
+    'TextField',
+    'FormTextarea',
+    'ProductPrice',
+    'Product',
+    'ProductImages'
+];
+
+exports.disableWrap = disableWrap;

package/dist/cjs/contexts/AddonContext.js

@@ -1 +1,36 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),Empty=require("../components/Empty.js");const AddonContext=react.createContext(null),AddonProvider=({children:e,components:t,...d})=>jsxRuntime.jsx(AddonContext.Provider,{...d,value:{components:t},children:e}),useAddons=()=>{let e=react.useContext(AddonContext);if(!e)throw Error("useAddons must be used within an AddonProvider");return react.useMemo(()=>e.components,[e.components])},useAddon=e=>{let t=useAddons();return react.useMemo(()=>e?t[e]??Empty.default:Empty.default,[e,t])};exports.AddonProvider=AddonProvider,exports.useAddon=useAddon,exports.useAddons=useAddons;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Empty = require('../components/Empty.js');
+
+const AddonContext = /*#__PURE__*/ react.createContext(null);
+const AddonProvider = ({ children, components, ...passProps })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(AddonContext.Provider, {
+        ...passProps,
+        value: {
+            components
+        },
+        children: children
+    });
+};
+const useAddons = ()=>{
+    const context = react.useContext(AddonContext);
+    if (!context) {
+        throw new Error('useAddons must be used within an AddonProvider');
+    }
+    return react.useMemo(()=>context.components, [
+        context.components
+    ]);
+};
+const useAddon = (id)=>{
+    const addons = useAddons();
+    return react.useMemo(()=>id ? addons[id] ?? Empty.default : Empty.default, [
+        id,
+        addons
+    ]);
+};
+
+exports.AddonProvider = AddonProvider;
+exports.useAddon = useAddon;
+exports.useAddons = useAddons;

package/dist/cjs/contexts/BuilderComponent.js

@@ -1 +1,34 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),zustand=require("zustand"),react=require("react"),Empty=require("../components/Empty.js");const BuilderComponentContext=react.createContext(null),createBuilderComponentStore=e=>zustand.createStore((t,r)=>({components:e,getItem:e=>r().components[e]})),BuilderComponentProvider=({children:e,components:t,...r})=>jsxRuntime.jsx(BuilderComponentContext.Provider,{...r,value:createBuilderComponentStore(t),children:e}),useBuilderComponent=e=>{let t=react.useContext(BuilderComponentContext);if(!t)throw Error("useBuilderComponent must be used within a BuilderComponentProvider");return zustand.useStore(t,t=>e?t.getItem(e)??Empty.default:Empty.default)};exports.BuilderComponentProvider=BuilderComponentProvider,exports.useBuilderComponent=useBuilderComponent;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var zustand = require('zustand');
+var react = require('react');
+var Empty = require('../components/Empty.js');
+
+const BuilderComponentContext = /*#__PURE__*/ react.createContext(null);
+const createBuilderComponentStore = (components)=>zustand.createStore((_, get)=>({
+            components,
+            getItem: (id)=>{
+                return get().components[id];
+            }
+        }));
+const BuilderComponentProvider = ({ children, components, ...passProps })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(BuilderComponentContext.Provider, {
+        ...passProps,
+        value: createBuilderComponentStore(components),
+        children: children
+    });
+};
+// export const useBuilderComponent = (id?: string) => {
+//   return useStore((s) => (id ? s.getItem(id) ?? Empty : Empty));
+// };
+const useBuilderComponent = (id)=>{
+    const store = react.useContext(BuilderComponentContext);
+    if (!store) {
+        throw new Error('useBuilderComponent must be used within a BuilderComponentProvider');
+    }
+    return zustand.useStore(store, (s)=>id ? s.getItem(id) ?? Empty.default : Empty.default);
+};
+
+exports.BuilderComponentProvider = BuilderComponentProvider;
+exports.useBuilderComponent = useBuilderComponent;