@webiny/website-builder-react 6.0.0-alpha.3 → 6.0.0-alpha.5

package/components/ConnectToEditor.js

@@ -2,8 +2,8 @@
 
 import React, { useEffect, useState } from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
-import { DocumentStoreProvider } from "./DocumentStoreProvider";
-import { ElementRenderer } from "./ElementRenderer";
+import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
+import { ElementRenderer } from "./ElementRenderer.js";
 export const ConnectToEditor = props => {
   const [data, setData] = useState(null);
   useEffect(() => {

package/components/ConnectToEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","contentSdk","DocumentStoreProvider","ElementRenderer","ConnectToEditor","props","data","setData","getPage","document","properties","path","then","createElement","id"],"sources":["ConnectToEditor.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from \"react\";\nimport { contentSdk, type Component, type Document } from \"@webiny/website-builder-sdk\";\nimport { DocumentStoreProvider } from \"~/components/DocumentStoreProvider\";\nimport { ElementRenderer } from \"~/components/ElementRenderer\";\n\ninterface ConnectToEditorProps {\n    document: Document;\n    components: Component[];\n}\n\nexport const ConnectToEditor = (props: ConnectToEditorProps) => {\n    const [data, setData] = useState<Document | null>(null);\n\n    useEffect(() => {\n        contentSdk.getPage(props.document.properties.path).then(document => {\n            setData(document);\n        });\n    }, []);\n\n    if (!data) {\n        return null;\n    }\n\n    return (\n        <DocumentStoreProvider id={data.properties.id} document={data}>\n            <ElementRenderer id={\"root\"} />\n        </DocumentStoreProvider>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAuC,6BAA6B;AACvF,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AAOxB,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC5D,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGP,QAAQ,CAAkB,IAAI,CAAC;EAEvDD,SAAS,CAAC,MAAM;IACZE,UAAU,CAACO,OAAO,CAACH,KAAK,CAACI,QAAQ,CAACC,UAAU,CAACC,IAAI,CAAC,CAACC,IAAI,CAACH,QAAQ,IAAI;MAChEF,OAAO,CAACE,QAAQ,CAAC;IACrB,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAI,CAACH,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIR,KAAA,CAAAe,aAAA,CAACX,qBAAqB;IAACY,EAAE,EAAER,IAAI,CAACI,UAAU,CAACI,EAAG;IAACL,QAAQ,EAAEH;EAAK,gBAC1DR,KAAA,CAAAe,aAAA,CAACV,eAAe;IAACW,EAAE,EAAE;EAAO,CAAE,CACX,CAAC;AAEhC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","contentSdk","DocumentStoreProvider","ElementRenderer","ConnectToEditor","props","data","setData","getPage","document","properties","path","then","createElement","id"],"sources":["ConnectToEditor.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from \"react\";\nimport { contentSdk, type Component, type Document } from \"@webiny/website-builder-sdk\";\nimport { DocumentStoreProvider } from \"~/components/DocumentStoreProvider.js\";\nimport { ElementRenderer } from \"~/components/ElementRenderer.js\";\n\ninterface ConnectToEditorProps {\n    document: Document;\n    components: Component[];\n}\n\nexport const ConnectToEditor = (props: ConnectToEditorProps) => {\n    const [data, setData] = useState<Document | null>(null);\n\n    useEffect(() => {\n        contentSdk.getPage(props.document.properties.path).then(document => {\n            setData(document);\n        });\n    }, []);\n\n    if (!data) {\n        return null;\n    }\n\n    return (\n        <DocumentStoreProvider id={data.properties.id} document={data}>\n            <ElementRenderer id={\"root\"} />\n        </DocumentStoreProvider>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAuC,6BAA6B;AACvF,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AAOxB,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC5D,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGP,QAAQ,CAAkB,IAAI,CAAC;EAEvDD,SAAS,CAAC,MAAM;IACZE,UAAU,CAACO,OAAO,CAACH,KAAK,CAACI,QAAQ,CAACC,UAAU,CAACC,IAAI,CAAC,CAACC,IAAI,CAACH,QAAQ,IAAI;MAChEF,OAAO,CAACE,QAAQ,CAAC;IACrB,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAI,CAACH,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIR,KAAA,CAAAe,aAAA,CAACX,qBAAqB;IAACY,EAAE,EAAER,IAAI,CAACI,UAAU,CAACI,EAAG;IAACL,QAAQ,EAAEH;EAAK,gBAC1DR,KAAA,CAAAe,aAAA,CAACV,eAAe;IAACW,EAAE,EAAE;EAAO,CAAE,CACX,CAAC;AAEhC,CAAC","ignoreList":[]}

package/components/DocumentRenderer.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
-import { ElementRenderer } from "./ElementRenderer";
-import { DocumentStoreProvider } from "./DocumentStoreProvider";
-import { ConnectToEditor } from "./ConnectToEditor";
-import { editorComponents } from "../editorComponents/index";
-import { FragmentsProvider } from "./FragmentsProvider";
+import { ElementRenderer } from "./ElementRenderer.js";
+import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
+import { ConnectToEditor } from "./ConnectToEditor.js";
+import { editorComponents } from "../editorComponents/index.js";
+import { FragmentsProvider } from "./FragmentsProvider.js";
 export const DocumentRenderer = ({
   document,
   components,

package/components/DocumentRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","contentSdk","ElementRenderer","DocumentStoreProvider","ConnectToEditor","editorComponents","FragmentsProvider","DocumentRenderer","document","components","children","allComponents","forEach","blueprint","registerComponent","fragments","Children","toArray","child","name","props","createElement","Fragment","isEditing","id","properties"],"sources":["DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { type Component, contentSdk, type Document } from \"@webiny/website-builder-sdk\";\nimport { ElementRenderer } from \"./ElementRenderer\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider\";\nimport { ConnectToEditor } from \"./ConnectToEditor\";\nimport { editorComponents } from \"../editorComponents/index\";\nimport type { DocumentFragments } from \"./FragmentsProvider\";\nimport { FragmentsProvider } from \"./FragmentsProvider\";\n\ninterface DocumentRendererProps {\n    document: Document | null;\n    components: Component[];\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n    const allComponents = [...editorComponents, ...components];\n    allComponents.forEach(blueprint => contentSdk.registerComponent(blueprint));\n    const fragments: DocumentFragments = {};\n\n    React.Children.toArray(children).forEach(child => {\n        // @ts-expect-error Need to properly type this.\n        const { name, children } = child.props;\n        if (!name || !children) {\n            return;\n        }\n\n        fragments[name] = <>{children}</>;\n    });\n\n    if (!document) {\n        return <div data-role={\"document-renderer\"}>{children}</div>;\n    }\n\n    return (\n        <div data-role={\"document-renderer\"}>\n            <FragmentsProvider fragments={fragments ?? {}}>\n                {contentSdk.isEditing() ? (\n                    <ConnectToEditor document={document} components={components} />\n                ) : (\n                    <DocumentStoreProvider id={document.properties.id} document={document}>\n                        <ElementRenderer id={\"root\"} />\n                    </DocumentStoreProvider>\n                )}\n            </FragmentsProvider>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyBC,UAAU,QAAuB,6BAA6B;AACvF,SAASC,eAAe;AACxB,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAEzB,SAASC,iBAAiB;AAQ1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAgC,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAG,CAAC,GAAGN,gBAAgB,EAAE,GAAGI,UAAU,CAAC;EAC1DE,aAAa,CAACC,OAAO,CAACC,SAAS,IAAIZ,UAAU,CAACa,iBAAiB,CAACD,SAAS,CAAC,CAAC;EAC3E,MAAME,SAA4B,GAAG,CAAC,CAAC;EAEvCf,KAAK,CAACgB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC,CAACE,OAAO,CAACM,KAAK,IAAI;IAC9C;IACA,MAAM;MAAEC,IAAI;MAAET;IAAS,CAAC,GAAGQ,KAAK,CAACE,KAAK;IACtC,IAAI,CAACD,IAAI,IAAI,CAACT,QAAQ,EAAE;MACpB;IACJ;IAEAK,SAAS,CAACI,IAAI,CAAC,gBAAGnB,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QAAGZ,QAAW,CAAC;EACrC,CAAC,CAAC;EAEF,IAAI,CAACF,QAAQ,EAAE;IACX,oBAAOR,KAAA,CAAAqB,aAAA;MAAK,aAAW;IAAoB,GAAEX,QAAc,CAAC;EAChE;EAEA,oBACIV,KAAA,CAAAqB,aAAA;IAAK,aAAW;EAAoB,gBAChCrB,KAAA,CAAAqB,aAAA,CAACf,iBAAiB;IAACS,SAAS,EAAEA,SAAS,IAAI,CAAC;EAAE,GACzCd,UAAU,CAACsB,SAAS,CAAC,CAAC,gBACnBvB,KAAA,CAAAqB,aAAA,CAACjB,eAAe;IAACI,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,gBAE/DT,KAAA,CAAAqB,aAAA,CAAClB,qBAAqB;IAACqB,EAAE,EAAEhB,QAAQ,CAACiB,UAAU,CAACD,EAAG;IAAChB,QAAQ,EAAEA;EAAS,gBAClER,KAAA,CAAAqB,aAAA,CAACnB,eAAe;IAACsB,EAAE,EAAE;EAAO,CAAE,CACX,CAEZ,CAClB,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","contentSdk","ElementRenderer","DocumentStoreProvider","ConnectToEditor","editorComponents","FragmentsProvider","DocumentRenderer","document","components","children","allComponents","forEach","blueprint","registerComponent","fragments","Children","toArray","child","name","props","createElement","Fragment","isEditing","id","properties"],"sources":["DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { type Component, contentSdk, type Document } from \"@webiny/website-builder-sdk\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider.js\";\nimport { ConnectToEditor } from \"./ConnectToEditor.js\";\nimport { editorComponents } from \"../editorComponents/index.js\";\nimport type { DocumentFragments } from \"./FragmentsProvider.js\";\nimport { FragmentsProvider } from \"./FragmentsProvider.js\";\n\ninterface DocumentRendererProps {\n    document: Document | null;\n    components: Component[];\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n    const allComponents = [...editorComponents, ...components];\n    allComponents.forEach(blueprint => contentSdk.registerComponent(blueprint));\n    const fragments: DocumentFragments = {};\n\n    React.Children.toArray(children).forEach(child => {\n        // @ts-expect-error Need to properly type this.\n        const { name, children } = child.props;\n        if (!name || !children) {\n            return;\n        }\n\n        fragments[name] = <>{children}</>;\n    });\n\n    if (!document) {\n        return <div data-role={\"document-renderer\"}>{children}</div>;\n    }\n\n    return (\n        <div data-role={\"document-renderer\"}>\n            <FragmentsProvider fragments={fragments ?? {}}>\n                {contentSdk.isEditing() ? (\n                    <ConnectToEditor document={document} components={components} />\n                ) : (\n                    <DocumentStoreProvider id={document.properties.id} document={document}>\n                        <ElementRenderer id={\"root\"} />\n                    </DocumentStoreProvider>\n                )}\n            </FragmentsProvider>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyBC,UAAU,QAAuB,6BAA6B;AACvF,SAASC,eAAe;AACxB,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAEzB,SAASC,iBAAiB;AAQ1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAgC,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAG,CAAC,GAAGN,gBAAgB,EAAE,GAAGI,UAAU,CAAC;EAC1DE,aAAa,CAACC,OAAO,CAACC,SAAS,IAAIZ,UAAU,CAACa,iBAAiB,CAACD,SAAS,CAAC,CAAC;EAC3E,MAAME,SAA4B,GAAG,CAAC,CAAC;EAEvCf,KAAK,CAACgB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC,CAACE,OAAO,CAACM,KAAK,IAAI;IAC9C;IACA,MAAM;MAAEC,IAAI;MAAET;IAAS,CAAC,GAAGQ,KAAK,CAACE,KAAK;IACtC,IAAI,CAACD,IAAI,IAAI,CAACT,QAAQ,EAAE;MACpB;IACJ;IAEAK,SAAS,CAACI,IAAI,CAAC,gBAAGnB,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QAAGZ,QAAW,CAAC;EACrC,CAAC,CAAC;EAEF,IAAI,CAACF,QAAQ,EAAE;IACX,oBAAOR,KAAA,CAAAqB,aAAA;MAAK,aAAW;IAAoB,GAAEX,QAAc,CAAC;EAChE;EAEA,oBACIV,KAAA,CAAAqB,aAAA;IAAK,aAAW;EAAoB,gBAChCrB,KAAA,CAAAqB,aAAA,CAACf,iBAAiB;IAACS,SAAS,EAAEA,SAAS,IAAI,CAAC;EAAE,GACzCd,UAAU,CAACsB,SAAS,CAAC,CAAC,gBACnBvB,KAAA,CAAAqB,aAAA,CAACjB,eAAe;IAACI,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,gBAE/DT,KAAA,CAAAqB,aAAA,CAAClB,qBAAqB;IAACqB,EAAE,EAAEhB,QAAQ,CAACiB,UAAU,CAACD,EAAG;IAAChB,QAAQ,EAAEA;EAAS,gBAClER,KAAA,CAAAqB,aAAA,CAACnB,eAAe;IAACsB,EAAE,EAAE;EAAO,CAAE,CACX,CAEZ,CAClB,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/EditingElementRenderer/EditingElementRenderer.js

@@ -2,11 +2,11 @@
 
 import React, { useEffect, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { EditingElementRendererPresenter } from "./EditingElementRenderer.presenter";
-import { LiveElementRenderer } from "../LiveElementRenderer";
-import { useElementSlotDepth } from "../ElementSlotDepthProvider";
-import { useElementIndex } from "../ElementIndexProvider";
-import { useDocumentStore } from "../DocumentStoreProvider";
+import { EditingElementRendererPresenter } from "./EditingElementRenderer.presenter.js";
+import { LiveElementRenderer } from "../LiveElementRenderer.js";
+import { useElementSlotDepth } from "../ElementSlotDepthProvider.js";
+import { useElementIndex } from "../ElementIndexProvider.js";
+import { useDocumentStore } from "../DocumentStoreProvider.js";
 const styles = {
   display: "contents"
 };

package/components/EditingElementRenderer/EditingElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","observer","EditingElementRendererPresenter","LiveElementRenderer","useElementSlotDepth","useElementIndex","useDocumentStore","styles","display","EditingElementRenderer","props","documentStore","depth","index","presenter","element","id","init","dispose","vm","createElement","style","parent","slot"],"sources":["EditingElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { type DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRendererPresenter } from \"./EditingElementRenderer.presenter\";\nimport { LiveElementRenderer } from \"../LiveElementRenderer\";\nimport { useElementSlotDepth } from \"../ElementSlotDepthProvider\";\nimport { useElementIndex } from \"../ElementIndexProvider\";\nimport { useDocumentStore } from \"../DocumentStoreProvider\";\n\ninterface PreviewElementRendererProps {\n    element: DocumentElement;\n}\n\nconst styles = { display: \"contents\" };\n\nexport const EditingElementRenderer = observer((props: PreviewElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const depth = useElementSlotDepth();\n    const index = useElementIndex();\n\n    const presenter = useMemo(() => {\n        return new EditingElementRendererPresenter(documentStore);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        if (!props.element) {\n            return;\n        }\n        presenter.init(props.element);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        return () => {\n            presenter.dispose();\n        };\n    }, []);\n\n    const element = presenter.vm.element;\n\n    if (!element || !element.id) {\n        return null;\n    }\n\n    return (\n        <div\n            style={styles}\n            data-element-id={element.id}\n            data-depth={depth}\n            data-parent-index={index}\n            data-parent-id={element.parent?.id}\n            data-parent-slot={element.parent?.slot}\n        >\n            <LiveElementRenderer element={element} />\n        </div>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,+BAA+B;AACxC,SAASC,mBAAmB;AAC5B,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAMzB,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAW,CAAC;AAEtC,OAAO,MAAMC,sBAAsB,GAAGR,QAAQ,CAAES,KAAkC,IAAK;EACnF,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,KAAK,GAAGR,mBAAmB,CAAC,CAAC;EACnC,MAAMS,KAAK,GAAGR,eAAe,CAAC,CAAC;EAE/B,MAAMS,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIE,+BAA+B,CAACS,aAAa,CAAC;EAC7D,CAAC,EAAE,CAACD,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACW,KAAK,CAACK,OAAO,EAAE;MAChB;IACJ;IACAD,SAAS,CAACG,IAAI,CAACP,KAAK,CAACK,OAAO,CAAC;EACjC,CAAC,EAAE,CAACL,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTe,SAAS,CAACI,OAAO,CAAC,CAAC;IACvB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMH,OAAO,GAAGD,SAAS,CAACK,EAAE,CAACJ,OAAO;EAEpC,IAAI,CAACA,OAAO,IAAI,CAACA,OAAO,CAACC,EAAE,EAAE;IACzB,OAAO,IAAI;EACf;EAEA,oBACIlB,KAAA,CAAAsB,aAAA;IACIC,KAAK,EAAEd,MAAO;IACd,mBAAiBQ,OAAO,CAACC,EAAG;IAC5B,cAAYJ,KAAM;IAClB,qBAAmBC,KAAM;IACzB,kBAAgBE,OAAO,CAACO,MAAM,EAAEN,EAAG;IACnC,oBAAkBD,OAAO,CAACO,MAAM,EAAEC;EAAK,gBAEvCzB,KAAA,CAAAsB,aAAA,CAACjB,mBAAmB;IAACY,OAAO,EAAEA;EAAQ,CAAE,CACvC,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useMemo","observer","EditingElementRendererPresenter","LiveElementRenderer","useElementSlotDepth","useElementIndex","useDocumentStore","styles","display","EditingElementRenderer","props","documentStore","depth","index","presenter","element","id","init","dispose","vm","createElement","style","parent","slot"],"sources":["EditingElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { type DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRendererPresenter } from \"./EditingElementRenderer.presenter.js\";\nimport { LiveElementRenderer } from \"../LiveElementRenderer.js\";\nimport { useElementSlotDepth } from \"../ElementSlotDepthProvider.js\";\nimport { useElementIndex } from \"../ElementIndexProvider.js\";\nimport { useDocumentStore } from \"../DocumentStoreProvider.js\";\n\ninterface PreviewElementRendererProps {\n    element: DocumentElement;\n}\n\nconst styles = { display: \"contents\" };\n\nexport const EditingElementRenderer = observer((props: PreviewElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const depth = useElementSlotDepth();\n    const index = useElementIndex();\n\n    const presenter = useMemo(() => {\n        return new EditingElementRendererPresenter(documentStore);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        if (!props.element) {\n            return;\n        }\n        presenter.init(props.element);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        return () => {\n            presenter.dispose();\n        };\n    }, []);\n\n    const element = presenter.vm.element;\n\n    if (!element || !element.id) {\n        return null;\n    }\n\n    return (\n        <div\n            style={styles}\n            data-element-id={element.id}\n            data-depth={depth}\n            data-parent-index={index}\n            data-parent-id={element.parent?.id}\n            data-parent-slot={element.parent?.slot}\n        >\n            <LiveElementRenderer element={element} />\n        </div>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,+BAA+B;AACxC,SAASC,mBAAmB;AAC5B,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAMzB,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAW,CAAC;AAEtC,OAAO,MAAMC,sBAAsB,GAAGR,QAAQ,CAAES,KAAkC,IAAK;EACnF,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,KAAK,GAAGR,mBAAmB,CAAC,CAAC;EACnC,MAAMS,KAAK,GAAGR,eAAe,CAAC,CAAC;EAE/B,MAAMS,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIE,+BAA+B,CAACS,aAAa,CAAC;EAC7D,CAAC,EAAE,CAACD,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACW,KAAK,CAACK,OAAO,EAAE;MAChB;IACJ;IACAD,SAAS,CAACG,IAAI,CAACP,KAAK,CAACK,OAAO,CAAC;EACjC,CAAC,EAAE,CAACL,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTe,SAAS,CAACI,OAAO,CAAC,CAAC;IACvB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMH,OAAO,GAAGD,SAAS,CAACK,EAAE,CAACJ,OAAO;EAEpC,IAAI,CAACA,OAAO,IAAI,CAACA,OAAO,CAACC,EAAE,EAAE;IACzB,OAAO,IAAI;EACf;EAEA,oBACIlB,KAAA,CAAAsB,aAAA;IACIC,KAAK,EAAEd,MAAO;IACd,mBAAiBQ,OAAO,CAACC,EAAG;IAC5B,cAAYJ,KAAM;IAClB,qBAAmBC,KAAM;IACzB,kBAAgBE,OAAO,CAACO,MAAM,EAAEN,EAAG;IACnC,oBAAkBD,OAAO,CAACO,MAAM,EAAEC;EAAK,gBAEvCzB,KAAA,CAAAsB,aAAA,CAACjB,mBAAmB;IAACY,OAAO,EAAEA;EAAQ,CAAE,CACvC,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/components/ElementSlot.js

@@ -2,8 +2,8 @@
 
 import React from "react";
 import { environment } from "@webiny/website-builder-sdk";
-import { LiveElementSlot } from "./LiveElementSlot";
-import { PreviewElementSlot } from "./PreviewElementSlot";
+import { LiveElementSlot } from "./LiveElementSlot.js";
+import { PreviewElementSlot } from "./PreviewElementSlot.js";
 export const ElementSlot = props => {
   const isEditing = environment.isEditing();
   if (isEditing) {

package/components/ElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","environment","LiveElementSlot","PreviewElementSlot","ElementSlot","props","isEditing","createElement"],"sources":["ElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { LiveElementSlot } from \"./LiveElementSlot\";\nimport { PreviewElementSlot } from \"./PreviewElementSlot\";\n\nexport interface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const ElementSlot = (props: ElementSlotProps) => {\n    const isEditing = environment.isEditing();\n\n    if (isEditing) {\n        return <PreviewElementSlot {...props} />;\n    } else {\n        return <LiveElementSlot {...props} />;\n    }\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAW3B,OAAO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACpD,MAAMC,SAAS,GAAGL,WAAW,CAACK,SAAS,CAAC,CAAC;EAEzC,IAAIA,SAAS,EAAE;IACX,oBAAON,KAAA,CAAAO,aAAA,CAACJ,kBAAkB,EAAKE,KAAQ,CAAC;EAC5C,CAAC,MAAM;IACH,oBAAOL,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKG,KAAQ,CAAC;EACzC;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","environment","LiveElementSlot","PreviewElementSlot","ElementSlot","props","isEditing","createElement"],"sources":["ElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { PreviewElementSlot } from \"./PreviewElementSlot.js\";\n\nexport interface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const ElementSlot = (props: ElementSlotProps) => {\n    const isEditing = environment.isEditing();\n\n    if (isEditing) {\n        return <PreviewElementSlot {...props} />;\n    } else {\n        return <LiveElementSlot {...props} />;\n    }\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAW3B,OAAO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACpD,MAAMC,SAAS,GAAGL,WAAW,CAACK,SAAS,CAAC,CAAC;EAEzC,IAAIA,SAAS,EAAE;IACX,oBAAON,KAAA,CAAAO,aAAA,CAACJ,kBAAkB,EAAKE,KAAQ,CAAC;EAC5C,CAAC,MAAM;IACH,oBAAOL,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKG,KAAQ,CAAC;EACzC;AACJ,CAAC","ignoreList":[]}

package/components/LiveElementRenderer.js

@@ -3,10 +3,10 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { contentSdk } from "@webiny/website-builder-sdk";
-import { ElementSlot } from "./ElementSlot";
-import { useViewport } from "./useViewportInfo";
-import { useBindingsForElement } from "./useBindingsForElement";
-import { useDocumentState } from "./useDocumentState";
+import { ElementSlot } from "./ElementSlot.js";
+import { useViewport } from "./useViewportInfo.js";
+import { useBindingsForElement } from "./useBindingsForElement.js";
+import { useDocumentState } from "./useDocumentState.js";
 export const LiveElementRenderer = observer(({
   element
 }) => {

package/components/LiveElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","observer","contentSdk","ElementSlot","useViewport","useBindingsForElement","useDocumentState","LiveElementRenderer","element","viewport","breakpoint","setBreakpoint","elementBindings","id","state","onResolved","value","input","type","createElement","key","parentId","slot","name","elements","list","component","instances","resolveElement","Fragment","map","resolvedElement","index","Component","inputs","styles","manifest","props","autoApplyStyles","userElement","Object","assign","style"],"sources":["LiveElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    OnResolved\n} from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { ElementSlot } from \"./ElementSlot\";\nimport { useViewport } from \"./useViewportInfo\";\nimport { useBindingsForElement } from \"./useBindingsForElement\";\nimport { useDocumentState } from \"./useDocumentState\";\n\ninterface LiveElementRendererProps {\n    element: DocumentElement;\n    bindings?: DocumentElementBindings;\n}\n\nexport const LiveElementRenderer = observer(({ element }: LiveElementRendererProps) => {\n    const viewport = useViewport();\n\n    // 1. Start breakpoint as \"desktop\" on both server and initial client render.\n    const [breakpoint, setBreakpoint] = useState<\"desktop\" | string>(\"desktop\");\n\n    // 2. Update breakpoint on the client after mount, using real viewport value.\n    useEffect(() => {\n        if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {\n            setBreakpoint(viewport.breakpoint);\n        }\n    }, [viewport.breakpoint, breakpoint]);\n\n    // Bindings for current breakpoint\n    const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible\n    const state = useDocumentState();\n\n    const onResolved = useCallback(\n        ((value, input) => {\n            if (input.type === \"slot\") {\n                return (\n                    <ElementSlot\n                        key={element.id}\n                        parentId={element.id}\n                        slot={input.name}\n                        elements={input.list ? value : [value]}\n                    />\n                );\n            }\n            return value;\n        }) as OnResolved,\n        [element.id]\n    );\n\n    if (!element || !element.component) {\n        return null;\n    }\n\n    const instances = contentSdk.resolveElement({\n        element,\n        state,\n        elementBindings,\n        onResolved\n    });\n\n    if (!instances) {\n        return null;\n    }\n\n    return (\n        <>\n            {instances.map((resolvedElement, index) => {\n                const { component: Component, inputs, styles, manifest } = resolvedElement;\n                const props = { inputs, styles, element, breakpoint: viewport.breakpoint };\n                const autoApplyStyles = manifest.autoApplyStyles !== false;\n\n                const userElement = <Component key={element.id} {...props} />;\n\n                if (!autoApplyStyles) {\n                    return userElement;\n                }\n\n                return (\n                    <div key={index} style={styles}>\n                        {userElement}\n                    </div>\n                );\n            })}\n        </>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAM1C,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAOzB,OAAO,MAAMC,mBAAmB,GAAGN,QAAQ,CAAC,CAAC;EAAEO;AAAkC,CAAC,KAAK;EACnF,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;;EAE9B;EACA,MAAM,CAACM,UAAU,EAAEC,aAAa,CAAC,GAAGX,QAAQ,CAAqB,SAAS,CAAC;;EAE3E;EACAD,SAAS,CAAC,MAAM;IACZ,IAAIU,QAAQ,CAACC,UAAU,IAAID,QAAQ,CAACC,UAAU,KAAKA,UAAU,EAAE;MAC3DC,aAAa,CAACF,QAAQ,CAACC,UAAU,CAAC;IACtC;EACJ,CAAC,EAAE,CAACD,QAAQ,CAACC,UAAU,EAAEA,UAAU,CAAC,CAAC;;EAErC;EACA,MAAME,eAAe,GAAGP,qBAAqB,CAACG,OAAO,CAACK,EAAE,EAAEH,UAAU,CAAC,CAAC,CAAC;EACvE,MAAMI,KAAK,GAAGR,gBAAgB,CAAC,CAAC;EAEhC,MAAMS,UAAU,GAAGjB,WAAW,CACzB,CAACkB,KAAK,EAAEC,KAAK,KAAK;IACf,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,EAAE;MACvB,oBACIrB,KAAA,CAAAsB,aAAA,CAAChB,WAAW;QACRiB,GAAG,EAAEZ,OAAO,CAACK,EAAG;QAChBQ,QAAQ,EAAEb,OAAO,CAACK,EAAG;QACrBS,IAAI,EAAEL,KAAK,CAACM,IAAK;QACjBC,QAAQ,EAAEP,KAAK,CAACQ,IAAI,GAAGT,KAAK,GAAG,CAACA,KAAK;MAAE,CAC1C,CAAC;IAEV;IACA,OAAOA,KAAK;EAChB,CAAC,EACD,CAACR,OAAO,CAACK,EAAE,CACf,CAAC;EAED,IAAI,CAACL,OAAO,IAAI,CAACA,OAAO,CAACkB,SAAS,EAAE;IAChC,OAAO,IAAI;EACf;EAEA,MAAMC,SAAS,GAAGzB,UAAU,CAAC0B,cAAc,CAAC;IACxCpB,OAAO;IACPM,KAAK;IACLF,eAAe;IACfG;EACJ,CAAC,CAAC;EAEF,IAAI,CAACY,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACI9B,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAgC,QAAA,QACKF,SAAS,CAACG,GAAG,CAAC,CAACC,eAAe,EAAEC,KAAK,KAAK;IACvC,MAAM;MAAEN,SAAS,EAAEO,SAAS;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGL,eAAe;IAC1E,MAAMM,KAAK,GAAG;MAAEH,MAAM;MAAEC,MAAM;MAAE3B,OAAO;MAAEE,UAAU,EAAED,QAAQ,CAACC;IAAW,CAAC;IAC1E,MAAM4B,eAAe,GAAGF,QAAQ,CAACE,eAAe,KAAK,KAAK;IAE1D,MAAMC,WAAW,gBAAG1C,KAAA,CAAAsB,aAAA,CAACc,SAAS,EAAAO,MAAA,CAAAC,MAAA;MAACrB,GAAG,EAAEZ,OAAO,CAACK;IAAG,GAAKwB,KAAK,CAAG,CAAC;IAE7D,IAAI,CAACC,eAAe,EAAE;MAClB,OAAOC,WAAW;IACtB;IAEA,oBACI1C,KAAA,CAAAsB,aAAA;MAAKC,GAAG,EAAEY,KAAM;MAACU,KAAK,EAAEP;IAAO,GAC1BI,WACA,CAAC;EAEd,CAAC,CACH,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","observer","contentSdk","ElementSlot","useViewport","useBindingsForElement","useDocumentState","LiveElementRenderer","element","viewport","breakpoint","setBreakpoint","elementBindings","id","state","onResolved","value","input","type","createElement","key","parentId","slot","name","elements","list","component","instances","resolveElement","Fragment","map","resolvedElement","index","Component","inputs","styles","manifest","props","autoApplyStyles","userElement","Object","assign","style"],"sources":["LiveElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    OnResolved\n} from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { ElementSlot } from \"./ElementSlot.js\";\nimport { useViewport } from \"./useViewportInfo.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useDocumentState } from \"./useDocumentState.js\";\n\ninterface LiveElementRendererProps {\n    element: DocumentElement;\n    bindings?: DocumentElementBindings;\n}\n\nexport const LiveElementRenderer = observer(({ element }: LiveElementRendererProps) => {\n    const viewport = useViewport();\n\n    // 1. Start breakpoint as \"desktop\" on both server and initial client render.\n    const [breakpoint, setBreakpoint] = useState<\"desktop\" | string>(\"desktop\");\n\n    // 2. Update breakpoint on the client after mount, using real viewport value.\n    useEffect(() => {\n        if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {\n            setBreakpoint(viewport.breakpoint);\n        }\n    }, [viewport.breakpoint, breakpoint]);\n\n    // Bindings for current breakpoint\n    const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible\n    const state = useDocumentState();\n\n    const onResolved = useCallback(\n        ((value, input) => {\n            if (input.type === \"slot\") {\n                return (\n                    <ElementSlot\n                        key={element.id}\n                        parentId={element.id}\n                        slot={input.name}\n                        elements={input.list ? value : [value]}\n                    />\n                );\n            }\n            return value;\n        }) as OnResolved,\n        [element.id]\n    );\n\n    if (!element || !element.component) {\n        return null;\n    }\n\n    const instances = contentSdk.resolveElement({\n        element,\n        state,\n        elementBindings,\n        onResolved\n    });\n\n    if (!instances) {\n        return null;\n    }\n\n    return (\n        <>\n            {instances.map((resolvedElement, index) => {\n                const { component: Component, inputs, styles, manifest } = resolvedElement;\n                const props = { inputs, styles, element, breakpoint: viewport.breakpoint };\n                const autoApplyStyles = manifest.autoApplyStyles !== false;\n\n                const userElement = <Component key={element.id} {...props} />;\n\n                if (!autoApplyStyles) {\n                    return userElement;\n                }\n\n                return (\n                    <div key={index} style={styles}>\n                        {userElement}\n                    </div>\n                );\n            })}\n        </>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAM1C,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAOzB,OAAO,MAAMC,mBAAmB,GAAGN,QAAQ,CAAC,CAAC;EAAEO;AAAkC,CAAC,KAAK;EACnF,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;;EAE9B;EACA,MAAM,CAACM,UAAU,EAAEC,aAAa,CAAC,GAAGX,QAAQ,CAAqB,SAAS,CAAC;;EAE3E;EACAD,SAAS,CAAC,MAAM;IACZ,IAAIU,QAAQ,CAACC,UAAU,IAAID,QAAQ,CAACC,UAAU,KAAKA,UAAU,EAAE;MAC3DC,aAAa,CAACF,QAAQ,CAACC,UAAU,CAAC;IACtC;EACJ,CAAC,EAAE,CAACD,QAAQ,CAACC,UAAU,EAAEA,UAAU,CAAC,CAAC;;EAErC;EACA,MAAME,eAAe,GAAGP,qBAAqB,CAACG,OAAO,CAACK,EAAE,EAAEH,UAAU,CAAC,CAAC,CAAC;EACvE,MAAMI,KAAK,GAAGR,gBAAgB,CAAC,CAAC;EAEhC,MAAMS,UAAU,GAAGjB,WAAW,CACzB,CAACkB,KAAK,EAAEC,KAAK,KAAK;IACf,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,EAAE;MACvB,oBACIrB,KAAA,CAAAsB,aAAA,CAAChB,WAAW;QACRiB,GAAG,EAAEZ,OAAO,CAACK,EAAG;QAChBQ,QAAQ,EAAEb,OAAO,CAACK,EAAG;QACrBS,IAAI,EAAEL,KAAK,CAACM,IAAK;QACjBC,QAAQ,EAAEP,KAAK,CAACQ,IAAI,GAAGT,KAAK,GAAG,CAACA,KAAK;MAAE,CAC1C,CAAC;IAEV;IACA,OAAOA,KAAK;EAChB,CAAC,EACD,CAACR,OAAO,CAACK,EAAE,CACf,CAAC;EAED,IAAI,CAACL,OAAO,IAAI,CAACA,OAAO,CAACkB,SAAS,EAAE;IAChC,OAAO,IAAI;EACf;EAEA,MAAMC,SAAS,GAAGzB,UAAU,CAAC0B,cAAc,CAAC;IACxCpB,OAAO;IACPM,KAAK;IACLF,eAAe;IACfG;EACJ,CAAC,CAAC;EAEF,IAAI,CAACY,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACI9B,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAgC,QAAA,QACKF,SAAS,CAACG,GAAG,CAAC,CAACC,eAAe,EAAEC,KAAK,KAAK;IACvC,MAAM;MAAEN,SAAS,EAAEO,SAAS;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGL,eAAe;IAC1E,MAAMM,KAAK,GAAG;MAAEH,MAAM;MAAEC,MAAM;MAAE3B,OAAO;MAAEE,UAAU,EAAED,QAAQ,CAACC;IAAW,CAAC;IAC1E,MAAM4B,eAAe,GAAGF,QAAQ,CAACE,eAAe,KAAK,KAAK;IAE1D,MAAMC,WAAW,gBAAG1C,KAAA,CAAAsB,aAAA,CAACc,SAAS,EAAAO,MAAA,CAAAC,MAAA;MAACrB,GAAG,EAAEZ,OAAO,CAACK;IAAG,GAAKwB,KAAK,CAAG,CAAC;IAE7D,IAAI,CAACC,eAAe,EAAE;MAClB,OAAOC,WAAW;IACtB;IAEA,oBACI1C,KAAA,CAAAsB,aAAA;MAAKC,GAAG,EAAEY,KAAM;MAACU,KAAK,EAAEP;IAAO,GAC1BI,WACA,CAAC;EAEd,CAAC,CACH,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}

package/components/LiveElementSlot.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ElementSlotProps } from "./ElementSlot";
+import type { ElementSlotProps } from "./ElementSlot.js";
 export declare const LiveElementSlot: ({ elements }: Pick<ElementSlotProps, "elements">) => React.JSX.Element;

package/components/LiveElementSlot.js

@@ -1,9 +1,9 @@
 "use client";
 
 import React from "react";
-import { ElementRenderer } from "./ElementRenderer";
-import { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider";
-import { ElementIndexProvider } from "./ElementIndexProvider";
+import { ElementRenderer } from "./ElementRenderer.js";
+import { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider.js";
+import { ElementIndexProvider } from "./ElementIndexProvider.js";
 export const LiveElementSlot = ({
   elements = []
 }) => {

package/components/LiveElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ElementRenderer","ElementSlotDepthProvider","useElementSlotDepth","ElementIndexProvider","LiveElementSlot","elements","depth","createElement","Fragment","map","id","index","key"],"sources":["LiveElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ElementRenderer } from \"./ElementRenderer\";\nimport type { ElementSlotProps } from \"./ElementSlot\";\nimport { ElementSlotDepthProvider, useElementSlotDepth } from \"./ElementSlotDepthProvider\";\nimport { ElementIndexProvider } from \"./ElementIndexProvider\";\n\nexport const LiveElementSlot = ({ elements = [] }: Pick<ElementSlotProps, \"elements\">) => {\n    const depth = useElementSlotDepth();\n    return (\n        <>\n            <ElementSlotDepthProvider depth={depth + 1}>\n                {elements.map((id, index) => (\n                    <ElementIndexProvider key={id} index={index}>\n                        <ElementRenderer id={id} />\n                    </ElementIndexProvider>\n                ))}\n            </ElementSlotDepthProvider>\n        </>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,wBAAwB,EAAEC,mBAAmB;AACtD,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ,GAAG;AAAuC,CAAC,KAAK;EACtF,MAAMC,KAAK,GAAGJ,mBAAmB,CAAC,CAAC;EACnC,oBACIH,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,qBACIT,KAAA,CAAAQ,aAAA,CAACN,wBAAwB;IAACK,KAAK,EAAEA,KAAK,GAAG;EAAE,GACtCD,QAAQ,CAACI,GAAG,CAAC,CAACC,EAAE,EAAEC,KAAK,kBACpBZ,KAAA,CAAAQ,aAAA,CAACJ,oBAAoB;IAACS,GAAG,EAAEF,EAAG;IAACC,KAAK,EAAEA;EAAM,gBACxCZ,KAAA,CAAAQ,aAAA,CAACP,eAAe;IAACU,EAAE,EAAEA;EAAG,CAAE,CACR,CACzB,CACqB,CAC5B,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","ElementRenderer","ElementSlotDepthProvider","useElementSlotDepth","ElementIndexProvider","LiveElementSlot","elements","depth","createElement","Fragment","map","id","index","key"],"sources":["LiveElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport type { ElementSlotProps } from \"./ElementSlot.js\";\nimport { ElementSlotDepthProvider, useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\nimport { ElementIndexProvider } from \"./ElementIndexProvider.js\";\n\nexport const LiveElementSlot = ({ elements = [] }: Pick<ElementSlotProps, \"elements\">) => {\n    const depth = useElementSlotDepth();\n    return (\n        <>\n            <ElementSlotDepthProvider depth={depth + 1}>\n                {elements.map((id, index) => (\n                    <ElementIndexProvider key={id} index={index}>\n                        <ElementRenderer id={id} />\n                    </ElementIndexProvider>\n                ))}\n            </ElementSlotDepthProvider>\n        </>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,wBAAwB,EAAEC,mBAAmB;AACtD,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ,GAAG;AAAuC,CAAC,KAAK;EACtF,MAAMC,KAAK,GAAGJ,mBAAmB,CAAC,CAAC;EACnC,oBACIH,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,qBACIT,KAAA,CAAAQ,aAAA,CAACN,wBAAwB;IAACK,KAAK,EAAEA,KAAK,GAAG;EAAE,GACtCD,QAAQ,CAACI,GAAG,CAAC,CAACC,EAAE,EAAEC,KAAK,kBACpBZ,KAAA,CAAAQ,aAAA,CAACJ,oBAAoB;IAACS,GAAG,EAAEF,EAAG;IAACC,KAAK,EAAEA;EAAM,gBACxCZ,KAAA,CAAAQ,aAAA,CAACP,eAAe;IAACU,EAAE,EAAEA;EAAG,CAAE,CACR,CACzB,CACqB,CAC5B,CAAC;AAEX,CAAC","ignoreList":[]}

package/components/PreviewElementSlot.js

@@ -1,8 +1,8 @@
 "use client";
 
 import React from "react";
-import { LiveElementSlot } from "./LiveElementSlot";
-import { useElementSlotDepth } from "./ElementSlotDepthProvider";
+import { LiveElementSlot } from "./LiveElementSlot.js";
+import { useElementSlotDepth } from "./ElementSlotDepthProvider.js";
 export const PreviewElementSlot = ({
   parentId,
   slot,

package/components/PreviewElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","LiveElementSlot","useElementSlotDepth","PreviewElementSlot","parentId","slot","elements","depth","length","createElement","style","height","width"],"sources":["PreviewElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LiveElementSlot } from \"./LiveElementSlot\";\nimport { useElementSlotDepth } from \"./ElementSlotDepthProvider\";\n\ninterface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const PreviewElementSlot = ({ parentId, slot, elements = [] }: ElementSlotProps) => {\n    const depth = useElementSlotDepth();\n\n    if (!elements.length) {\n        return (\n            <div\n                style={{ height: 100, width: \"100% !important\" }}\n                data-role={\"element-slot\"}\n                data-parent-id={parentId}\n                data-parent-slot={slot}\n                data-depth={depth}\n                data-empty={true}\n            />\n        );\n    }\n\n    return <LiveElementSlot elements={elements} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAW5B,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,QAAQ,GAAG;AAAqB,CAAC,KAAK;EACvF,MAAMC,KAAK,GAAGL,mBAAmB,CAAC,CAAC;EAEnC,IAAI,CAACI,QAAQ,CAACE,MAAM,EAAE;IAClB,oBACIR,KAAA,CAAAS,aAAA;MACIC,KAAK,EAAE;QAAEC,MAAM,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAkB,CAAE;MACjD,aAAW,cAAe;MAC1B,kBAAgBR,QAAS;MACzB,oBAAkBC,IAAK;MACvB,cAAYE,KAAM;MAClB,cAAY;IAAK,CACpB,CAAC;EAEV;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,eAAe;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC;AAClD,CAAC","ignoreList":[]}
+{"version":3,"names":["React","LiveElementSlot","useElementSlotDepth","PreviewElementSlot","parentId","slot","elements","depth","length","createElement","style","height","width"],"sources":["PreviewElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\n\ninterface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const PreviewElementSlot = ({ parentId, slot, elements = [] }: ElementSlotProps) => {\n    const depth = useElementSlotDepth();\n\n    if (!elements.length) {\n        return (\n            <div\n                style={{ height: 100, width: \"100% !important\" }}\n                data-role={\"element-slot\"}\n                data-parent-id={parentId}\n                data-parent-slot={slot}\n                data-depth={depth}\n                data-empty={true}\n            />\n        );\n    }\n\n    return <LiveElementSlot elements={elements} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAW5B,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,QAAQ,GAAG;AAAqB,CAAC,KAAK;EACvF,MAAMC,KAAK,GAAGL,mBAAmB,CAAC,CAAC;EAEnC,IAAI,CAACI,QAAQ,CAACE,MAAM,EAAE;IAClB,oBACIR,KAAA,CAAAS,aAAA;MACIC,KAAK,EAAE;QAAEC,MAAM,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAkB,CAAE;MACjD,aAAW,cAAe;MAC1B,kBAAgBR,QAAS;MACzB,oBAAkBC,IAAK;MACvB,cAAYE,KAAM;MAClB,cAAY;IAAK,CACpB,CAAC;EAEV;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,eAAe;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC;AAClD,CAAC","ignoreList":[]}

package/components/useBindingsForElement.js

@@ -1,8 +1,8 @@
 import { toJS } from "mobx";
 import { BindingsProcessor } from "@webiny/website-builder-sdk";
-import { useViewport } from "./useViewportInfo";
-import { useDocumentStore } from "./DocumentStoreProvider";
-import { useSelectFromState } from "./useSelectFromState";
+import { useViewport } from "./useViewportInfo.js";
+import { useDocumentStore } from "./DocumentStoreProvider.js";
+import { useSelectFromState } from "./useSelectFromState.js";
 export const useBindingsForElement = (elementId, breakpoint) => {
   const documentStore = useDocumentStore();
   const viewport = useViewport();

package/components/useBindingsForElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["toJS","BindingsProcessor","useViewport","useDocumentStore","useSelectFromState","useBindingsForElement","elementId","breakpoint","documentStore","viewport","getDocument","document","bindings","breakpoints","map","bp","name","bindingsProcessor","getBindings"],"sources":["useBindingsForElement.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { useViewport } from \"./useViewportInfo\";\nimport { useDocumentStore } from \"./DocumentStoreProvider\";\nimport { useSelectFromState } from \"./useSelectFromState\";\n\nexport const useBindingsForElement = (elementId: string, breakpoint: string) => {\n    const documentStore = useDocumentStore();\n    const viewport = useViewport();\n\n    return useSelectFromState(\n        () => documentStore.getDocument()!,\n        document => {\n            const bindings = toJS(document.bindings[elementId]) ?? {};\n            const breakpoints = viewport.breakpoints.map(bp => bp.name);\n\n            // Merge element bindings.\n            const bindingsProcessor = new BindingsProcessor(breakpoints);\n\n            return bindingsProcessor.getBindings(bindings, breakpoint);\n        },\n        [elementId, breakpoint]\n    );\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAC3B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,WAAW;AACpB,SAASC,gBAAgB;AACzB,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,qBAAqB,GAAGA,CAACC,SAAiB,EAAEC,UAAkB,KAAK;EAC5E,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,QAAQ,GAAGP,WAAW,CAAC,CAAC;EAE9B,OAAOE,kBAAkB,CACrB,MAAMI,aAAa,CAACE,WAAW,CAAC,CAAE,EAClCC,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGZ,IAAI,CAACW,QAAQ,CAACC,QAAQ,CAACN,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;IACzD,MAAMO,WAAW,GAAGJ,QAAQ,CAACI,WAAW,CAACC,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;;IAE3D;IACA,MAAMC,iBAAiB,GAAG,IAAIhB,iBAAiB,CAACY,WAAW,CAAC;IAE5D,OAAOI,iBAAiB,CAACC,WAAW,CAACN,QAAQ,EAAEL,UAAU,CAAC;EAC9D,CAAC,EACD,CAACD,SAAS,EAAEC,UAAU,CAC1B,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["toJS","BindingsProcessor","useViewport","useDocumentStore","useSelectFromState","useBindingsForElement","elementId","breakpoint","documentStore","viewport","getDocument","document","bindings","breakpoints","map","bp","name","bindingsProcessor","getBindings"],"sources":["useBindingsForElement.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { useViewport } from \"./useViewportInfo.js\";\nimport { useDocumentStore } from \"./DocumentStoreProvider.js\";\nimport { useSelectFromState } from \"./useSelectFromState.js\";\n\nexport const useBindingsForElement = (elementId: string, breakpoint: string) => {\n    const documentStore = useDocumentStore();\n    const viewport = useViewport();\n\n    return useSelectFromState(\n        () => documentStore.getDocument()!,\n        document => {\n            const bindings = toJS(document.bindings[elementId]) ?? {};\n            const breakpoints = viewport.breakpoints.map(bp => bp.name);\n\n            // Merge element bindings.\n            const bindingsProcessor = new BindingsProcessor(breakpoints);\n\n            return bindingsProcessor.getBindings(bindings, breakpoint);\n        },\n        [elementId, breakpoint]\n    );\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAC3B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,WAAW;AACpB,SAASC,gBAAgB;AACzB,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,qBAAqB,GAAGA,CAACC,SAAiB,EAAEC,UAAkB,KAAK;EAC5E,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,QAAQ,GAAGP,WAAW,CAAC,CAAC;EAE9B,OAAOE,kBAAkB,CACrB,MAAMI,aAAa,CAACE,WAAW,CAAC,CAAE,EAClCC,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGZ,IAAI,CAACW,QAAQ,CAACC,QAAQ,CAACN,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;IACzD,MAAMO,WAAW,GAAGJ,QAAQ,CAACI,WAAW,CAACC,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;;IAE3D;IACA,MAAMC,iBAAiB,GAAG,IAAIhB,iBAAiB,CAACY,WAAW,CAAC;IAE5D,OAAOI,iBAAiB,CAACC,WAAW,CAACN,QAAQ,EAAEL,UAAU,CAAC;EAC9D,CAAC,EACD,CAACD,SAAS,EAAEC,UAAU,CAC1B,CAAC;AACL,CAAC","ignoreList":[]}

package/components/useDocumentState.js

@@ -1,5 +1,5 @@
-import { useDocumentStore } from "./DocumentStoreProvider";
-import { useSelectFromState } from "./useSelectFromState";
+import { useDocumentStore } from "./DocumentStoreProvider.js";
+import { useSelectFromState } from "./useSelectFromState.js";
 export const useDocumentState = () => {
   const documentStore = useDocumentStore();
   return useSelectFromState(() => documentStore.getDocument(), document => document.state ?? {});

package/components/useDocumentState.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDocumentStore","useSelectFromState","useDocumentState","documentStore","getDocument","document","state"],"sources":["useDocumentState.ts"],"sourcesContent":["import { useDocumentStore } from \"./DocumentStoreProvider\";\nimport { useSelectFromState } from \"./useSelectFromState\";\n\nexport const useDocumentState = () => {\n    const documentStore = useDocumentStore();\n    return useSelectFromState(\n        () => documentStore.getDocument()!,\n        document => document.state ?? {}\n    );\n};\n"],"mappings":"AAAA,SAASA,gBAAgB;AACzB,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;EACxC,OAAOC,kBAAkB,CACrB,MAAME,aAAa,CAACC,WAAW,CAAC,CAAE,EAClCC,QAAQ,IAAIA,QAAQ,CAACC,KAAK,IAAI,CAAC,CACnC,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["useDocumentStore","useSelectFromState","useDocumentState","documentStore","getDocument","document","state"],"sources":["useDocumentState.ts"],"sourcesContent":["import { useDocumentStore } from \"./DocumentStoreProvider.js\";\nimport { useSelectFromState } from \"./useSelectFromState.js\";\n\nexport const useDocumentState = () => {\n    const documentStore = useDocumentStore();\n    return useSelectFromState(\n        () => documentStore.getDocument()!,\n        document => document.state ?? {}\n    );\n};\n"],"mappings":"AAAA,SAASA,gBAAgB;AACzB,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;EACxC,OAAOC,kBAAkB,CACrB,MAAME,aAAa,CAACC,WAAW,CAAC,CAAE,EAClCC,QAAQ,IAAIA,QAAQ,CAACC,KAAK,IAAI,CAAC,CACnC,CAAC;AACL,CAAC","ignoreList":[]}

package/editorComponents/Box.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ComponentPropsWithChildren } from "../types";
+import type { ComponentPropsWithChildren } from "../types.js";
 export declare const BoxComponent: ({ inputs }: ComponentPropsWithChildren) => React.JSX.Element;

package/editorComponents/Box.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","BoxComponent","inputs","createElement","Fragment","children"],"sources":["Box.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nexport const BoxComponent = ({ inputs }: ComponentPropsWithChildren) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACpE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","BoxComponent","inputs","createElement","Fragment","children"],"sources":["Box.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const BoxComponent = ({ inputs }: ComponentPropsWithChildren) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACpE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}

package/editorComponents/Box.manifest.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { createComponent } from "../createComponent";
-import { BoxComponent } from "./Box";
+import { createComponent } from "../createComponent.js";
+import { BoxComponent } from "./Box.js";
 export const Box = createComponent(BoxComponent, {
   name: "Webiny/Box",
   label: "Box",

package/editorComponents/Box.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createComponent","BoxComponent","Box","name","label","group","image","acceptsChildren","defaults","styles","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["Box.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent\";\nimport { BoxComponent } from \"./Box\";\n\nexport const Box = createComponent(BoxComponent, {\n    name: \"Webiny/Box\",\n    label: \"Box\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n    acceptsChildren: true,\n    defaults: {\n        styles: {\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,YAAY;AAErB,OAAO,MAAMC,GAAG,GAAGF,eAAe,CAACC,YAAY,EAAE;EAC7CE,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,+LAA+L;EACtMC,eAAe,EAAE,IAAI;EACrBC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,UAAU,EAAE,KAAK;MACjBC,YAAY,EAAE,KAAK;MACnBC,aAAa,EAAE,KAAK;MACpBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createComponent","BoxComponent","Box","name","label","group","image","acceptsChildren","defaults","styles","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["Box.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { BoxComponent } from \"./Box.js\";\n\nexport const Box = createComponent(BoxComponent, {\n    name: \"Webiny/Box\",\n    label: \"Box\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n    acceptsChildren: true,\n    defaults: {\n        styles: {\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,YAAY;AAErB,OAAO,MAAMC,GAAG,GAAGF,eAAe,CAACC,YAAY,EAAE;EAC7CE,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,+LAA+L;EACtMC,eAAe,EAAE,IAAI;EACrBC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,UAAU,EAAE,KAAK;MACjBC,YAAY,EAAE,KAAK;MACnBC,aAAa,EAAE,KAAK;MACpBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Fragment.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ComponentProps } from "../types";
+import type { ComponentProps } from "../types.js";
 type FragmentComponentProps = ComponentProps<{
     name: string;
 }>;

package/editorComponents/Fragment.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { useDocumentFragments } from "../components/FragmentsProvider";
 import { contentSdk } from "@webiny/website-builder-sdk";
+import { useDocumentFragments } from "../components/FragmentsProvider.js";
 export const FragmentComponent = ({
   inputs
 }) => {

package/editorComponents/Fragment.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDocumentFragments","contentSdk","FragmentComponent","inputs","isEditing","fragments","element","name","createElement","FragmentPlaceholder","Fragment","fragmentName","style","display","height","backgroundColor","justifyContent","alignItems","fill"],"sources":["Fragment.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDocumentFragments } from \"~/components/FragmentsProvider\";\nimport type { ComponentProps } from \"~/types\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\n\ntype FragmentComponentProps = ComponentProps<{\n    name: string;\n}>;\n\nexport const FragmentComponent = ({ inputs }: FragmentComponentProps) => {\n    const isEditing = contentSdk.isEditing();\n    const fragments = useDocumentFragments();\n    const element = fragments[inputs.name] ?? null;\n    if (!element && isEditing) {\n        return <FragmentPlaceholder name={inputs.name} />;\n    }\n    return <>{element}</>;\n};\n\nconst FragmentPlaceholder = ({ name }: { name: string }) => {\n    const fragmentName = name ? (\n        <>\n            &nbsp;<strong>{name}</strong>&nbsp;\n        </>\n    ) : (\n        <>&nbsp;</>\n    );\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                height: \"100px\",\n                backgroundColor: \"#f4f4f4\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                fill: \"#ffffff\"\n            }}\n        >\n            This is a placeholder for{fragmentName}content coming from your frontend app.\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,oBAAoB;AAE7B,SAASC,UAAU,QAAQ,6BAA6B;AAMxD,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EACrE,MAAMC,SAAS,GAAGH,UAAU,CAACG,SAAS,CAAC,CAAC;EACxC,MAAMC,SAAS,GAAGL,oBAAoB,CAAC,CAAC;EACxC,MAAMM,OAAO,GAAGD,SAAS,CAACF,MAAM,CAACI,IAAI,CAAC,IAAI,IAAI;EAC9C,IAAI,CAACD,OAAO,IAAIF,SAAS,EAAE;IACvB,oBAAOL,KAAA,CAAAS,aAAA,CAACC,mBAAmB;MAACF,IAAI,EAAEJ,MAAM,CAACI;IAAK,CAAE,CAAC;EACrD;EACA,oBAAOR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAW,QAAA,QAAGJ,OAAU,CAAC;AACzB,CAAC;AAED,MAAMG,mBAAmB,GAAGA,CAAC;EAAEF;AAAuB,CAAC,KAAK;EACxD,MAAMI,YAAY,GAAGJ,IAAI,gBACrBR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAW,QAAA,QAAE,MACQ,eAAAX,KAAA,CAAAS,aAAA,iBAASD,IAAa,CAAC,QAC/B,CAAC,gBAEHR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAW,QAAA,QAAE,MAAQ,CACb;EACD,oBACIX,KAAA,CAAAS,aAAA;IACII,KAAK,EAAE;MACHC,OAAO,EAAE,MAAM;MACfC,MAAM,EAAE,OAAO;MACfC,eAAe,EAAE,SAAS;MAC1BC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,IAAI,EAAE;IACV;EAAE,GACL,2BAC4B,EAACP,YAAY,EAAC,wCACtC,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","contentSdk","useDocumentFragments","FragmentComponent","inputs","isEditing","fragments","element","name","createElement","FragmentPlaceholder","Fragment","fragmentName","style","display","height","backgroundColor","justifyContent","alignItems","fill"],"sources":["Fragment.tsx"],"sourcesContent":["import React from \"react\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { useDocumentFragments } from \"~/components/FragmentsProvider.js\";\nimport type { ComponentProps } from \"~/types.js\";\n\ntype FragmentComponentProps = ComponentProps<{\n    name: string;\n}>;\n\nexport const FragmentComponent = ({ inputs }: FragmentComponentProps) => {\n    const isEditing = contentSdk.isEditing();\n    const fragments = useDocumentFragments();\n    const element = fragments[inputs.name] ?? null;\n    if (!element && isEditing) {\n        return <FragmentPlaceholder name={inputs.name} />;\n    }\n    return <>{element}</>;\n};\n\nconst FragmentPlaceholder = ({ name }: { name: string }) => {\n    const fragmentName = name ? (\n        <>\n            &nbsp;<strong>{name}</strong>&nbsp;\n        </>\n    ) : (\n        <>&nbsp;</>\n    );\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                height: \"100px\",\n                backgroundColor: \"#f4f4f4\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                fill: \"#ffffff\"\n            }}\n        >\n            This is a placeholder for{fragmentName}content coming from your frontend app.\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,oBAAoB;AAO7B,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EACrE,MAAMC,SAAS,GAAGJ,UAAU,CAACI,SAAS,CAAC,CAAC;EACxC,MAAMC,SAAS,GAAGJ,oBAAoB,CAAC,CAAC;EACxC,MAAMK,OAAO,GAAGD,SAAS,CAACF,MAAM,CAACI,IAAI,CAAC,IAAI,IAAI;EAC9C,IAAI,CAACD,OAAO,IAAIF,SAAS,EAAE;IACvB,oBAAOL,KAAA,CAAAS,aAAA,CAACC,mBAAmB;MAACF,IAAI,EAAEJ,MAAM,CAACI;IAAK,CAAE,CAAC;EACrD;EACA,oBAAOR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAW,QAAA,QAAGJ,OAAU,CAAC;AACzB,CAAC;AAED,MAAMG,mBAAmB,GAAGA,CAAC;EAAEF;AAAuB,CAAC,KAAK;EACxD,MAAMI,YAAY,GAAGJ,IAAI,gBACrBR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAW,QAAA,QAAE,MACQ,eAAAX,KAAA,CAAAS,aAAA,iBAASD,IAAa,CAAC,QAC/B,CAAC,gBAEHR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAW,QAAA,QAAE,MAAQ,CACb;EACD,oBACIX,KAAA,CAAAS,aAAA;IACII,KAAK,EAAE;MACHC,OAAO,EAAE,MAAM;MACfC,MAAM,EAAE,OAAO;MACfC,eAAe,EAAE,SAAS;MAC1BC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,IAAI,EAAE;IACV;EAAE,GACL,2BAC4B,EAACP,YAAY,EAAC,wCACtC,CAAC;AAEd,CAAC","ignoreList":[]}

package/editorComponents/Fragment.manifest.js

@@ -1,8 +1,8 @@
 "use client";
 
-import { createComponent } from "../createComponent";
-import { FragmentComponent } from "./Fragment";
 import { createTextInput } from "@webiny/website-builder-sdk";
+import { createComponent } from "../createComponent.js";
+import { FragmentComponent } from "./Fragment.js";
 export const Fragment = createComponent(FragmentComponent, {
   name: "Webiny/Fragment",
   label: "Fragment",

package/editorComponents/Fragment.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createComponent","FragmentComponent","createTextInput","Fragment","name","label","group","image","inputs","description","renderer"],"sources":["Fragment.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent\";\nimport { FragmentComponent } from \"./Fragment\";\nimport { createTextInput } from \"@webiny/website-builder-sdk\";\n\nexport const Fragment = createComponent(FragmentComponent, {\n    name: \"Webiny/Fragment\",\n    label: \"Fragment\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n    inputs: [\n        createTextInput({\n            name: \"name\",\n            label: \"Fragment\",\n            description: \"Select fragment to display.\",\n            renderer: \"Webiny/FragmentSelector\"\n        })\n    ]\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,iBAAiB;AAC1B,SAASC,eAAe,QAAQ,6BAA6B;AAE7D,OAAO,MAAMC,QAAQ,GAAGH,eAAe,CAACC,iBAAiB,EAAE;EACvDG,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,UAAU;EACjBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,+LAA+L;EACtMC,MAAM,EAAE,CACJN,eAAe,CAAC;IACZE,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,UAAU;IACjBI,WAAW,EAAE,6BAA6B;IAC1CC,QAAQ,EAAE;EACd,CAAC,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createTextInput","createComponent","FragmentComponent","Fragment","name","label","group","image","inputs","description","renderer"],"sources":["Fragment.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createTextInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { FragmentComponent } from \"./Fragment.js\";\n\nexport const Fragment = createComponent(FragmentComponent, {\n    name: \"Webiny/Fragment\",\n    label: \"Fragment\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n    inputs: [\n        createTextInput({\n            name: \"name\",\n            label: \"Fragment\",\n            description: \"Select fragment to display.\",\n            renderer: \"Webiny/FragmentSelector\"\n        })\n    ]\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,eAAe;AACxB,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,QAAQ,GAAGF,eAAe,CAACC,iBAAiB,EAAE;EACvDE,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,UAAU;EACjBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,+LAA+L;EACtMC,MAAM,EAAE,CACJR,eAAe,CAAC;IACZI,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,UAAU;IACjBI,WAAW,EAAE,6BAA6B;IAC1CC,QAAQ,EAAE;EACd,CAAC,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Grid.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ComponentProps, ComponentPropsWithChildren } from "../types";
+import type { ComponentProps, ComponentPropsWithChildren } from "../types.js";
 export declare const GridColumnComponent: ({ inputs }: {
     inputs: ComponentPropsWithChildren["inputs"];
 }) => React.JSX.Element;

package/editorComponents/Grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","GridColumnComponent","inputs","createElement","Fragment","children","GridComponent","styles","breakpoint","gridLayout","columns","columnGap","stackAtBreakpoint","reverseWhenStacked","rowConfig","split","map","size","parseInt","rows","i","length","push","slice","cellWidthReduction","stackColumns","flexDirection","style","column","Span","key","reductionInPx","width","flex","maxWidth","boxSizing"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentProps, ComponentPropsWithChildren } from \"~/types\";\n\nexport const GridColumnComponent = ({\n    inputs\n}: {\n    inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n    return <>{inputs.children}</>;\n};\n\nexport interface Column {\n    children: React.ReactNode;\n}\n\ntype GridProps = ComponentProps<{\n    gridLayout: string;\n    rowCount: number;\n    columnGap: number;\n    columns: Column[];\n    stackAtBreakpoint?: string;\n    reverseWhenStacked?: boolean;\n}>;\n\nexport const GridComponent = ({ inputs, styles, breakpoint }: GridProps) => {\n    const { gridLayout = \"12\", columns, columnGap, stackAtBreakpoint, reverseWhenStacked } = inputs;\n    const rowConfig = gridLayout.split(\"-\").map(size => parseInt(size));\n    const rows: Column[][] = [];\n\n    // Chunk columns into rows\n    for (let i = 0; i < columns.length; i += rowConfig.length) {\n        rows.push(columns.slice(i, i + rowConfig.length));\n    }\n\n    // Number of pixels we need to subtract from each cell to ensure they fit in the grid with column gap\n    const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;\n\n    const stackColumns = breakpoint === stackAtBreakpoint;\n\n    if (stackColumns) {\n        styles.flexDirection = reverseWhenStacked ? \"column-reverse\" : \"column\";\n    }\n\n    return (\n        <div style={styles}>\n            {rows.map(columns => {\n                return columns.map((column, i) => (\n                    <Span\n                        key={i}\n                        stackColumns={stackColumns}\n                        size={rowConfig[i]}\n                        reductionInPx={cellWidthReduction}\n                    >\n                        <GridColumnComponent key={i} inputs={{ children: column.children }} />\n                    </Span>\n                ));\n            })}\n        </div>\n    );\n};\n\ninterface SpanProps {\n    size: number;\n    reductionInPx: number;\n    stackColumns: boolean;\n    children: React.ReactNode;\n}\n\nconst Span = ({ size, children, reductionInPx, stackColumns }: SpanProps) => {\n    const width = stackColumns ? \"100%\" : `calc(${(size / 12) * 100}% - ${reductionInPx}px)`;\n\n    return (\n        <div\n            style={{\n                flex: `0 0 ${width}`,\n                maxWidth: width,\n                boxSizing: \"border-box\"\n            }}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCC;AAGJ,CAAC,KAAK;EACF,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC;AAeD,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEJ,MAAM;EAAEK,MAAM;EAAEC;AAAsB,CAAC,KAAK;EACxE,MAAM;IAAEC,UAAU,GAAG,IAAI;IAAEC,OAAO;IAAEC,SAAS;IAAEC,iBAAiB;IAAEC;EAAmB,CAAC,GAAGX,MAAM;EAC/F,MAAMY,SAAS,GAAGL,UAAU,CAACM,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAACC,IAAI,IAAIC,QAAQ,CAACD,IAAI,CAAC,CAAC;EACnE,MAAME,IAAgB,GAAG,EAAE;;EAE3B;EACA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGV,OAAO,CAACW,MAAM,EAAED,CAAC,IAAIN,SAAS,CAACO,MAAM,EAAE;IACvDF,IAAI,CAACG,IAAI,CAACZ,OAAO,CAACa,KAAK,CAACH,CAAC,EAAEA,CAAC,GAAGN,SAAS,CAACO,MAAM,CAAC,CAAC;EACrD;;EAEA;EACA,MAAMG,kBAAkB,GAAGb,SAAS,GAAGA,SAAS,GAAGA,SAAS,GAAGG,SAAS,CAACO,MAAM,GAAG,CAAC;EAEnF,MAAMI,YAAY,GAAGjB,UAAU,KAAKI,iBAAiB;EAErD,IAAIa,YAAY,EAAE;IACdlB,MAAM,CAACmB,aAAa,GAAGb,kBAAkB,GAAG,gBAAgB,GAAG,QAAQ;EAC3E;EAEA,oBACIb,KAAA,CAAAG,aAAA;IAAKwB,KAAK,EAAEpB;EAAO,GACdY,IAAI,CAACH,GAAG,CAACN,OAAO,IAAI;IACjB,OAAOA,OAAO,CAACM,GAAG,CAAC,CAACY,MAAM,EAAER,CAAC,kBACzBpB,KAAA,CAAAG,aAAA,CAAC0B,IAAI;MACDC,GAAG,EAAEV,CAAE;MACPK,YAAY,EAAEA,YAAa;MAC3BR,IAAI,EAAEH,SAAS,CAACM,CAAC,CAAE;MACnBW,aAAa,EAAEP;IAAmB,gBAElCxB,KAAA,CAAAG,aAAA,CAACF,mBAAmB;MAAC6B,GAAG,EAAEV,CAAE;MAAClB,MAAM,EAAE;QAAEG,QAAQ,EAAEuB,MAAM,CAACvB;MAAS;IAAE,CAAE,CACnE,CACT,CAAC;EACN,CAAC,CACA,CAAC;AAEd,CAAC;AASD,MAAMwB,IAAI,GAAGA,CAAC;EAAEZ,IAAI;EAAEZ,QAAQ;EAAE0B,aAAa;EAAEN;AAAwB,CAAC,KAAK;EACzE,MAAMO,KAAK,GAAGP,YAAY,GAAG,MAAM,GAAG,QAASR,IAAI,GAAG,EAAE,GAAI,GAAG,OAAOc,aAAa,KAAK;EAExF,oBACI/B,KAAA,CAAAG,aAAA;IACIwB,KAAK,EAAE;MACHM,IAAI,EAAE,OAAOD,KAAK,EAAE;MACpBE,QAAQ,EAAEF,KAAK;MACfG,SAAS,EAAE;IACf;EAAE,GAED9B,QACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","GridColumnComponent","inputs","createElement","Fragment","children","GridComponent","styles","breakpoint","gridLayout","columns","columnGap","stackAtBreakpoint","reverseWhenStacked","rowConfig","split","map","size","parseInt","rows","i","length","push","slice","cellWidthReduction","stackColumns","flexDirection","style","column","Span","key","reductionInPx","width","flex","maxWidth","boxSizing"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentProps, ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const GridColumnComponent = ({\n    inputs\n}: {\n    inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n    return <>{inputs.children}</>;\n};\n\nexport interface Column {\n    children: React.ReactNode;\n}\n\ntype GridProps = ComponentProps<{\n    gridLayout: string;\n    rowCount: number;\n    columnGap: number;\n    columns: Column[];\n    stackAtBreakpoint?: string;\n    reverseWhenStacked?: boolean;\n}>;\n\nexport const GridComponent = ({ inputs, styles, breakpoint }: GridProps) => {\n    const { gridLayout = \"12\", columns, columnGap, stackAtBreakpoint, reverseWhenStacked } = inputs;\n    const rowConfig = gridLayout.split(\"-\").map(size => parseInt(size));\n    const rows: Column[][] = [];\n\n    // Chunk columns into rows\n    for (let i = 0; i < columns.length; i += rowConfig.length) {\n        rows.push(columns.slice(i, i + rowConfig.length));\n    }\n\n    // Number of pixels we need to subtract from each cell to ensure they fit in the grid with column gap\n    const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;\n\n    const stackColumns = breakpoint === stackAtBreakpoint;\n\n    if (stackColumns) {\n        styles.flexDirection = reverseWhenStacked ? \"column-reverse\" : \"column\";\n    }\n\n    return (\n        <div style={styles}>\n            {rows.map(columns => {\n                return columns.map((column, i) => (\n                    <Span\n                        key={i}\n                        stackColumns={stackColumns}\n                        size={rowConfig[i]}\n                        reductionInPx={cellWidthReduction}\n                    >\n                        <GridColumnComponent key={i} inputs={{ children: column.children }} />\n                    </Span>\n                ));\n            })}\n        </div>\n    );\n};\n\ninterface SpanProps {\n    size: number;\n    reductionInPx: number;\n    stackColumns: boolean;\n    children: React.ReactNode;\n}\n\nconst Span = ({ size, children, reductionInPx, stackColumns }: SpanProps) => {\n    const width = stackColumns ? \"100%\" : `calc(${(size / 12) * 100}% - ${reductionInPx}px)`;\n\n    return (\n        <div\n            style={{\n                flex: `0 0 ${width}`,\n                maxWidth: width,\n                boxSizing: \"border-box\"\n            }}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCC;AAGJ,CAAC,KAAK;EACF,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC;AAeD,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEJ,MAAM;EAAEK,MAAM;EAAEC;AAAsB,CAAC,KAAK;EACxE,MAAM;IAAEC,UAAU,GAAG,IAAI;IAAEC,OAAO;IAAEC,SAAS;IAAEC,iBAAiB;IAAEC;EAAmB,CAAC,GAAGX,MAAM;EAC/F,MAAMY,SAAS,GAAGL,UAAU,CAACM,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAACC,IAAI,IAAIC,QAAQ,CAACD,IAAI,CAAC,CAAC;EACnE,MAAME,IAAgB,GAAG,EAAE;;EAE3B;EACA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGV,OAAO,CAACW,MAAM,EAAED,CAAC,IAAIN,SAAS,CAACO,MAAM,EAAE;IACvDF,IAAI,CAACG,IAAI,CAACZ,OAAO,CAACa,KAAK,CAACH,CAAC,EAAEA,CAAC,GAAGN,SAAS,CAACO,MAAM,CAAC,CAAC;EACrD;;EAEA;EACA,MAAMG,kBAAkB,GAAGb,SAAS,GAAGA,SAAS,GAAGA,SAAS,GAAGG,SAAS,CAACO,MAAM,GAAG,CAAC;EAEnF,MAAMI,YAAY,GAAGjB,UAAU,KAAKI,iBAAiB;EAErD,IAAIa,YAAY,EAAE;IACdlB,MAAM,CAACmB,aAAa,GAAGb,kBAAkB,GAAG,gBAAgB,GAAG,QAAQ;EAC3E;EAEA,oBACIb,KAAA,CAAAG,aAAA;IAAKwB,KAAK,EAAEpB;EAAO,GACdY,IAAI,CAACH,GAAG,CAACN,OAAO,IAAI;IACjB,OAAOA,OAAO,CAACM,GAAG,CAAC,CAACY,MAAM,EAAER,CAAC,kBACzBpB,KAAA,CAAAG,aAAA,CAAC0B,IAAI;MACDC,GAAG,EAAEV,CAAE;MACPK,YAAY,EAAEA,YAAa;MAC3BR,IAAI,EAAEH,SAAS,CAACM,CAAC,CAAE;MACnBW,aAAa,EAAEP;IAAmB,gBAElCxB,KAAA,CAAAG,aAAA,CAACF,mBAAmB;MAAC6B,GAAG,EAAEV,CAAE;MAAClB,MAAM,EAAE;QAAEG,QAAQ,EAAEuB,MAAM,CAACvB;MAAS;IAAE,CAAE,CACnE,CACT,CAAC;EACN,CAAC,CACA,CAAC;AAEd,CAAC;AASD,MAAMwB,IAAI,GAAGA,CAAC;EAAEZ,IAAI;EAAEZ,QAAQ;EAAE0B,aAAa;EAAEN;AAAwB,CAAC,KAAK;EACzE,MAAMO,KAAK,GAAGP,YAAY,GAAG,MAAM,GAAG,QAASR,IAAI,GAAG,EAAE,GAAI,GAAG,OAAOc,aAAa,KAAK;EAExF,oBACI/B,KAAA,CAAAG,aAAA;IACIwB,KAAK,EAAE;MACHM,IAAI,EAAE,OAAOD,KAAK,EAAE;MACpBE,QAAQ,EAAEF,KAAK;MACfG,SAAS,EAAE;IACf;EAAE,GAED9B,QACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/editorComponents/Grid.manifest.js

@@ -1,8 +1,8 @@
 "use client";
 
 import { createBooleanInput, createElement, createNumberInput, createObjectInput, createSelectInput, createSlotInput, createTextInput } from "@webiny/website-builder-sdk";
-import { createComponent } from "../createComponent";
-import { GridComponent } from "./Grid";
+import { createComponent } from "../createComponent.js";
+import { GridComponent } from "./Grid.js";
 export const Grid = createComponent(GridComponent, {
   name: "Webiny/Grid",
   label: "Grid",

package/editorComponents/Grid.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createBooleanInput","createElement","createNumberInput","createObjectInput","createSelectInput","createSlotInput","createTextInput","createComponent","GridComponent","Grid","name","label","image","group","autoApplyStyles","inputs","renderer","onChange","rowColumnCount","gridLayout","split","length","columns","remainder","fullColumnCount","rowCount","toCreate","Array","from","forEach","push","children","component","defaultValue","minValue","columnCount","Math","max","rows","i","slice","createRows","newRows","map","responsive","styles","rowGap","parseInt","isNaN","columnGap","options","value","list","hideFromUi","fields","components","defaults","boxSizing","display","flexDirection","flexWrap","justifyContent","alignItems","width","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["Grid.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n    createBooleanInput,\n    createElement,\n    createNumberInput,\n    createObjectInput,\n    createSelectInput,\n    createSlotInput,\n    createTextInput\n} from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { GridComponent } from \"./Grid\";\n\nexport interface Column {\n    children: React.ReactNode;\n}\n\nexport const Grid = createComponent(GridComponent, {\n    name: \"Webiny/Grid\",\n    label: \"Grid\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z\"/></svg>`,\n    group: \"basic\",\n    autoApplyStyles: false,\n    inputs: [\n        createTextInput({\n            name: \"gridLayout\",\n            label: \"Grid Layout\",\n            renderer: \"Webiny/GridLayout\",\n            onChange: ({ inputs, createElement }) => {\n                const rowColumnCount = inputs.gridLayout.split(\"-\").length;\n                const columns = inputs.columns.length;\n\n                const remainder = columns % rowColumnCount;\n\n                if (remainder !== 0) {\n                    const fullColumnCount = rowColumnCount * inputs.rowCount;\n                    const toCreate =\n                        columns > fullColumnCount ? remainder : rowColumnCount - remainder;\n\n                    Array.from({ length: toCreate }).forEach(() => {\n                        inputs.columns.push({\n                            children: createElement({\n                                component: \"Webiny/GridColumn\"\n                            })\n                        });\n                    });\n                }\n\n                inputs.rowCount = inputs.columns.length / rowColumnCount;\n            }\n        }),\n        createNumberInput({\n            name: \"rowCount\",\n            label: \"Row Count\",\n            defaultValue: 1,\n            minValue: 1,\n            onChange: ({ inputs, createElement }) => {\n                const gridLayout = inputs.gridLayout;\n                const columnCount = gridLayout.split(\"-\").length;\n                const rowCount = Math.max(1, inputs.rowCount);\n                const columns = inputs.columns;\n                const rows: Column[][] = [];\n\n                // Chunk columns into rows\n                for (let i = 0; i < columns.length; i += columnCount) {\n                    rows.push(columns.slice(i, i + columnCount));\n                }\n\n                if (rows.length > rowCount) {\n                    inputs.columns = columns.slice(0, columnCount * rowCount);\n                    return;\n                }\n\n                const createRows = Math.max(0, rowCount - rows.length);\n\n                if (createRows <= 0) {\n                    return;\n                }\n\n                const newRows = Array.from({ length: createRows * columnCount }).map(() => {\n                    return {\n                        children: createElement({\n                            component: \"Webiny/GridColumn\"\n                        })\n                    };\n                });\n\n                inputs.columns.push(...newRows);\n            }\n        }),\n        createNumberInput({\n            name: \"rowGap\",\n            label: \"Row Gap\",\n            defaultValue: 0,\n            responsive: true,\n            onChange: ({ inputs, styles }) => {\n                const rowGap = parseInt(inputs.rowGap);\n                if (isNaN(rowGap)) {\n                    delete styles.rowGap;\n                } else {\n                    styles.rowGap = `${inputs.rowGap}px`;\n                }\n            }\n        }),\n        createNumberInput({\n            name: \"columnGap\",\n            label: \"Column Gap\",\n            defaultValue: 0,\n            responsive: true,\n            onChange: ({ inputs, styles }) => {\n                const columnGap = parseInt(inputs.columnGap);\n                if (isNaN(columnGap)) {\n                    delete styles.columnGap;\n                } else {\n                    styles.columnGap = `${inputs.columnGap}px`;\n                }\n            }\n        }),\n        createSelectInput({\n            name: \"stackAtBreakpoint\",\n            label: \"Stack at breakpoint\",\n            options: [\n                { label: \"Tablet\", value: \"tablet\" },\n                { label: \"Mobile\", value: \"mobile\" }\n            ]\n        }),\n        createBooleanInput({\n            name: \"reverseWhenStacked\",\n            label: \"Reverse columns when stacked\"\n        }),\n        createObjectInput({\n            name: \"columns\",\n            list: true,\n            hideFromUi: true,\n            fields: [\n                createSlotInput({\n                    name: \"children\",\n                    list: false,\n                    components: [\"Webiny/GridColumn\"]\n                })\n            ]\n        })\n    ],\n    defaults: {\n        inputs: {\n            gridLayout: \"6-6\",\n            columns: [\n                {\n                    children: createElement({\n                        component: \"Webiny/GridColumn\",\n                        inputs: {\n                            children: [\n                                createElement({\n                                    component: \"Webiny/Lexical\"\n                                })\n                            ]\n                        }\n                    })\n                },\n                {\n                    children: createElement({\n                        component: \"Webiny/GridColumn\",\n                        inputs: {\n                            children: [\n                                createElement({\n                                    component: \"Webiny/Lexical\"\n                                })\n                            ]\n                        }\n                    })\n                }\n            ]\n        },\n        styles: {\n            boxSizing: \"border-box\",\n            display: \"flex\",\n            flexDirection: \"row\",\n            flexWrap: \"wrap\",\n            justifyContent: \"flex-start\",\n            alignItems: \"stretch\",\n            width: \"100%\",\n            marginTop: \"0px\",\n            marginBottom: \"0px\",\n            marginLeft: \"0px\",\n            marginRight: \"0px\",\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SACIA,kBAAkB,EAClBC,aAAa,EACbC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,QACZ,6BAA6B;AACpC,SAASC,eAAe;AACxB,SAASC,aAAa;AAMtB,OAAO,MAAMC,IAAI,GAAGF,eAAe,CAACC,aAAa,EAAE;EAC/CE,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,MAAM;EACbC,KAAK,EAAE,qWAAqW;EAC5WC,KAAK,EAAE,OAAO;EACdC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE,CACJT,eAAe,CAAC;IACZI,IAAI,EAAE,YAAY;IAClBC,KAAK,EAAE,aAAa;IACpBK,QAAQ,EAAE,mBAAmB;IAC7BC,QAAQ,EAAEA,CAAC;MAAEF,MAAM;MAAEd;IAAc,CAAC,KAAK;MACrC,MAAMiB,cAAc,GAAGH,MAAM,CAACI,UAAU,CAACC,KAAK,CAAC,GAAG,CAAC,CAACC,MAAM;MAC1D,MAAMC,OAAO,GAAGP,MAAM,CAACO,OAAO,CAACD,MAAM;MAErC,MAAME,SAAS,GAAGD,OAAO,GAAGJ,cAAc;MAE1C,IAAIK,SAAS,KAAK,CAAC,EAAE;QACjB,MAAMC,eAAe,GAAGN,cAAc,GAAGH,MAAM,CAACU,QAAQ;QACxD,MAAMC,QAAQ,GACVJ,OAAO,GAAGE,eAAe,GAAGD,SAAS,GAAGL,cAAc,GAAGK,SAAS;QAEtEI,KAAK,CAACC,IAAI,CAAC;UAAEP,MAAM,EAAEK;QAAS,CAAC,CAAC,CAACG,OAAO,CAAC,MAAM;UAC3Cd,MAAM,CAACO,OAAO,CAACQ,IAAI,CAAC;YAChBC,QAAQ,EAAE9B,aAAa,CAAC;cACpB+B,SAAS,EAAE;YACf,CAAC;UACL,CAAC,CAAC;QACN,CAAC,CAAC;MACN;MAEAjB,MAAM,CAACU,QAAQ,GAAGV,MAAM,CAACO,OAAO,CAACD,MAAM,GAAGH,cAAc;IAC5D;EACJ,CAAC,CAAC,EACFhB,iBAAiB,CAAC;IACdQ,IAAI,EAAE,UAAU;IAChBC,KAAK,EAAE,WAAW;IAClBsB,YAAY,EAAE,CAAC;IACfC,QAAQ,EAAE,CAAC;IACXjB,QAAQ,EAAEA,CAAC;MAAEF,MAAM;MAAEd;IAAc,CAAC,KAAK;MACrC,MAAMkB,UAAU,GAAGJ,MAAM,CAACI,UAAU;MACpC,MAAMgB,WAAW,GAAGhB,UAAU,CAACC,KAAK,CAAC,GAAG,CAAC,CAACC,MAAM;MAChD,MAAMI,QAAQ,GAAGW,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEtB,MAAM,CAACU,QAAQ,CAAC;MAC7C,MAAMH,OAAO,GAAGP,MAAM,CAACO,OAAO;MAC9B,MAAMgB,IAAgB,GAAG,EAAE;;MAE3B;MACA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGjB,OAAO,CAACD,MAAM,EAAEkB,CAAC,IAAIJ,WAAW,EAAE;QAClDG,IAAI,CAACR,IAAI,CAACR,OAAO,CAACkB,KAAK,CAACD,CAAC,EAAEA,CAAC,GAAGJ,WAAW,CAAC,CAAC;MAChD;MAEA,IAAIG,IAAI,CAACjB,MAAM,GAAGI,QAAQ,EAAE;QACxBV,MAAM,CAACO,OAAO,GAAGA,OAAO,CAACkB,KAAK,CAAC,CAAC,EAAEL,WAAW,GAAGV,QAAQ,CAAC;QACzD;MACJ;MAEA,MAAMgB,UAAU,GAAGL,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEZ,QAAQ,GAAGa,IAAI,CAACjB,MAAM,CAAC;MAEtD,IAAIoB,UAAU,IAAI,CAAC,EAAE;QACjB;MACJ;MAEA,MAAMC,OAAO,GAAGf,KAAK,CAACC,IAAI,CAAC;QAAEP,MAAM,EAAEoB,UAAU,GAAGN;MAAY,CAAC,CAAC,CAACQ,GAAG,CAAC,MAAM;QACvE,OAAO;UACHZ,QAAQ,EAAE9B,aAAa,CAAC;YACpB+B,SAAS,EAAE;UACf,CAAC;QACL,CAAC;MACL,CAAC,CAAC;MAEFjB,MAAM,CAACO,OAAO,CAACQ,IAAI,CAAC,GAAGY,OAAO,CAAC;IACnC;EACJ,CAAC,CAAC,EACFxC,iBAAiB,CAAC;IACdQ,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBsB,YAAY,EAAE,CAAC;IACfW,UAAU,EAAE,IAAI;IAChB3B,QAAQ,EAAEA,CAAC;MAAEF,MAAM;MAAE8B;IAAO,CAAC,KAAK;MAC9B,MAAMC,MAAM,GAAGC,QAAQ,CAAChC,MAAM,CAAC+B,MAAM,CAAC;MACtC,IAAIE,KAAK,CAACF,MAAM,CAAC,EAAE;QACf,OAAOD,MAAM,CAACC,MAAM;MACxB,CAAC,MAAM;QACHD,MAAM,CAACC,MAAM,GAAG,GAAG/B,MAAM,CAAC+B,MAAM,IAAI;MACxC;IACJ;EACJ,CAAC,CAAC,EACF5C,iBAAiB,CAAC;IACdQ,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,YAAY;IACnBsB,YAAY,EAAE,CAAC;IACfW,UAAU,EAAE,IAAI;IAChB3B,QAAQ,EAAEA,CAAC;MAAEF,MAAM;MAAE8B;IAAO,CAAC,KAAK;MAC9B,MAAMI,SAAS,GAAGF,QAAQ,CAAChC,MAAM,CAACkC,SAAS,CAAC;MAC5C,IAAID,KAAK,CAACC,SAAS,CAAC,EAAE;QAClB,OAAOJ,MAAM,CAACI,SAAS;MAC3B,CAAC,MAAM;QACHJ,MAAM,CAACI,SAAS,GAAG,GAAGlC,MAAM,CAACkC,SAAS,IAAI;MAC9C;IACJ;EACJ,CAAC,CAAC,EACF7C,iBAAiB,CAAC;IACdM,IAAI,EAAE,mBAAmB;IACzBC,KAAK,EAAE,qBAAqB;IAC5BuC,OAAO,EAAE,CACL;MAAEvC,KAAK,EAAE,QAAQ;MAAEwC,KAAK,EAAE;IAAS,CAAC,EACpC;MAAExC,KAAK,EAAE,QAAQ;MAAEwC,KAAK,EAAE;IAAS,CAAC;EAE5C,CAAC,CAAC,EACFnD,kBAAkB,CAAC;IACfU,IAAI,EAAE,oBAAoB;IAC1BC,KAAK,EAAE;EACX,CAAC,CAAC,EACFR,iBAAiB,CAAC;IACdO,IAAI,EAAE,SAAS;IACf0C,IAAI,EAAE,IAAI;IACVC,UAAU,EAAE,IAAI;IAChBC,MAAM,EAAE,CACJjD,eAAe,CAAC;MACZK,IAAI,EAAE,UAAU;MAChB0C,IAAI,EAAE,KAAK;MACXG,UAAU,EAAE,CAAC,mBAAmB;IACpC,CAAC,CAAC;EAEV,CAAC,CAAC,CACL;EACDC,QAAQ,EAAE;IACNzC,MAAM,EAAE;MACJI,UAAU,EAAE,KAAK;MACjBG,OAAO,EAAE,CACL;QACIS,QAAQ,EAAE9B,aAAa,CAAC;UACpB+B,SAAS,EAAE,mBAAmB;UAC9BjB,MAAM,EAAE;YACJgB,QAAQ,EAAE,CACN9B,aAAa,CAAC;cACV+B,SAAS,EAAE;YACf,CAAC,CAAC;UAEV;QACJ,CAAC;MACL,CAAC,EACD;QACID,QAAQ,EAAE9B,aAAa,CAAC;UACpB+B,SAAS,EAAE,mBAAmB;UAC9BjB,MAAM,EAAE;YACJgB,QAAQ,EAAE,CACN9B,aAAa,CAAC;cACV+B,SAAS,EAAE;YACf,CAAC,CAAC;UAEV;QACJ,CAAC;MACL,CAAC;IAET,CAAC;IACDa,MAAM,EAAE;MACJY,SAAS,EAAE,YAAY;MACvBC,OAAO,EAAE,MAAM;MACfC,aAAa,EAAE,KAAK;MACpBC,QAAQ,EAAE,MAAM;MAChBC,cAAc,EAAE,YAAY;MAC5BC,UAAU,EAAE,SAAS;MACrBC,KAAK,EAAE,MAAM;MACbC,SAAS,EAAE,KAAK;MAChBC,YAAY,EAAE,KAAK;MACnBC,UAAU,EAAE,KAAK;MACjBC,WAAW,EAAE,KAAK;MAClBC,UAAU,EAAE,KAAK;MACjBC,YAAY,EAAE,KAAK;MACnBC,aAAa,EAAE,KAAK;MACpBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createBooleanInput","createElement","createNumberInput","createObjectInput","createSelectInput","createSlotInput","createTextInput","createComponent","GridComponent","Grid","name","label","image","group","autoApplyStyles","inputs","renderer","onChange","rowColumnCount","gridLayout","split","length","columns","remainder","fullColumnCount","rowCount","toCreate","Array","from","forEach","push","children","component","defaultValue","minValue","columnCount","Math","max","rows","i","slice","createRows","newRows","map","responsive","styles","rowGap","parseInt","isNaN","columnGap","options","value","list","hideFromUi","fields","components","defaults","boxSizing","display","flexDirection","flexWrap","justifyContent","alignItems","width","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["Grid.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n    createBooleanInput,\n    createElement,\n    createNumberInput,\n    createObjectInput,\n    createSelectInput,\n    createSlotInput,\n    createTextInput\n} from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { GridComponent } from \"./Grid.js\";\n\nexport interface Column {\n    children: React.ReactNode;\n}\n\nexport const Grid = createComponent(GridComponent, {\n    name: \"Webiny/Grid\",\n    label: \"Grid\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z\"/></svg>`,\n    group: \"basic\",\n    autoApplyStyles: false,\n    inputs: [\n        createTextInput({\n            name: \"gridLayout\",\n            label: \"Grid Layout\",\n            renderer: \"Webiny/GridLayout\",\n            onChange: ({ inputs, createElement }) => {\n                const rowColumnCount = inputs.gridLayout.split(\"-\").length;\n                const columns = inputs.columns.length;\n\n                const remainder = columns % rowColumnCount;\n\n                if (remainder !== 0) {\n                    const fullColumnCount = rowColumnCount * inputs.rowCount;\n                    const toCreate =\n                        columns > fullColumnCount ? remainder : rowColumnCount - remainder;\n\n                    Array.from({ length: toCreate }).forEach(() => {\n                        inputs.columns.push({\n                            children: createElement({\n                                component: \"Webiny/GridColumn\"\n                            })\n                        });\n                    });\n                }\n\n                inputs.rowCount = inputs.columns.length / rowColumnCount;\n            }\n        }),\n        createNumberInput({\n            name: \"rowCount\",\n            label: \"Row Count\",\n            defaultValue: 1,\n            minValue: 1,\n            onChange: ({ inputs, createElement }) => {\n                const gridLayout = inputs.gridLayout;\n                const columnCount = gridLayout.split(\"-\").length;\n                const rowCount = Math.max(1, inputs.rowCount);\n                const columns = inputs.columns;\n                const rows: Column[][] = [];\n\n                // Chunk columns into rows\n                for (let i = 0; i < columns.length; i += columnCount) {\n                    rows.push(columns.slice(i, i + columnCount));\n                }\n\n                if (rows.length > rowCount) {\n                    inputs.columns = columns.slice(0, columnCount * rowCount);\n                    return;\n                }\n\n                const createRows = Math.max(0, rowCount - rows.length);\n\n                if (createRows <= 0) {\n                    return;\n                }\n\n                const newRows = Array.from({ length: createRows * columnCount }).map(() => {\n                    return {\n                        children: createElement({\n                            component: \"Webiny/GridColumn\"\n                        })\n                    };\n                });\n\n                inputs.columns.push(...newRows);\n            }\n        }),\n        createNumberInput({\n            name: \"rowGap\",\n            label: \"Row Gap\",\n            defaultValue: 0,\n            responsive: true,\n            onChange: ({ inputs, styles }) => {\n                const rowGap = parseInt(inputs.rowGap);\n                if (isNaN(rowGap)) {\n                    delete styles.rowGap;\n                } else {\n                    styles.rowGap = `${inputs.rowGap}px`;\n                }\n            }\n        }),\n        createNumberInput({\n            name: \"columnGap\",\n            label: \"Column Gap\",\n            defaultValue: 0,\n            responsive: true,\n            onChange: ({ inputs, styles }) => {\n                const columnGap = parseInt(inputs.columnGap);\n                if (isNaN(columnGap)) {\n                    delete styles.columnGap;\n                } else {\n                    styles.columnGap = `${inputs.columnGap}px`;\n                }\n            }\n        }),\n        createSelectInput({\n            name: \"stackAtBreakpoint\",\n            label: \"Stack at breakpoint\",\n            options: [\n                { label: \"Tablet\", value: \"tablet\" },\n                { label: \"Mobile\", value: \"mobile\" }\n            ]\n        }),\n        createBooleanInput({\n            name: \"reverseWhenStacked\",\n            label: \"Reverse columns when stacked\"\n        }),\n        createObjectInput({\n            name: \"columns\",\n            list: true,\n            hideFromUi: true,\n            fields: [\n                createSlotInput({\n                    name: \"children\",\n                    list: false,\n                    components: [\"Webiny/GridColumn\"]\n                })\n            ]\n        })\n    ],\n    defaults: {\n        inputs: {\n            gridLayout: \"6-6\",\n            columns: [\n                {\n                    children: createElement({\n                        component: \"Webiny/GridColumn\",\n                        inputs: {\n                            children: [\n                                createElement({\n                                    component: \"Webiny/Lexical\"\n                                })\n                            ]\n                        }\n                    })\n                },\n                {\n                    children: createElement({\n                        component: \"Webiny/GridColumn\",\n                        inputs: {\n                            children: [\n                                createElement({\n                                    component: \"Webiny/Lexical\"\n                                })\n                            ]\n                        }\n                    })\n                }\n            ]\n        },\n        styles: {\n            boxSizing: \"border-box\",\n            display: \"flex\",\n            flexDirection: \"row\",\n            flexWrap: \"wrap\",\n            justifyContent: \"flex-start\",\n            alignItems: \"stretch\",\n            width: \"100%\",\n            marginTop: \"0px\",\n            marginBottom: \"0px\",\n            marginLeft: \"0px\",\n            marginRight: \"0px\",\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"mappings":"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","ignoreList":[]}

package/editorComponents/GridColumn.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ComponentPropsWithChildren } from "../types";
+import type { ComponentPropsWithChildren } from "../types.js";
 export declare const GridColumnComponent: ({ inputs }: {
     inputs: ComponentPropsWithChildren["inputs"];
 }) => React.JSX.Element;

package/editorComponents/GridColumn.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","GridColumnComponent","inputs","createElement","Fragment","children"],"sources":["GridColumn.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nexport const GridColumnComponent = ({\n    inputs\n}: {\n    inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCC;AAGJ,CAAC,KAAK;EACF,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","GridColumnComponent","inputs","createElement","Fragment","children"],"sources":["GridColumn.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const GridColumnComponent = ({\n    inputs\n}: {\n    inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCC;AAGJ,CAAC,KAAK;EACF,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}

package/editorComponents/GridColumn.manifest.js

@@ -1,8 +1,8 @@
 "use client";
 
 import { StyleSettings } from "@webiny/website-builder-sdk";
-import { createComponent } from "../createComponent";
-import { GridColumnComponent } from "./GridColumn";
+import { createComponent } from "../createComponent.js";
+import { GridColumnComponent } from "./GridColumn.js";
 export const GridColumn = createComponent(GridColumnComponent, {
   name: "Webiny/GridColumn",
   label: "Column",

package/editorComponents/GridColumn.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSettings","createComponent","GridColumnComponent","GridColumn","name","label","image","canDrag","canDelete","acceptsChildren","hideFromToolbar","hideStyleSettings","Visibility","defaults","styles","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["GridColumn.manifest.ts"],"sourcesContent":["\"use client\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { GridColumnComponent } from \"./GridColumn\";\n\nexport const GridColumn = createComponent(GridColumnComponent, {\n    name: \"Webiny/GridColumn\",\n    label: \"Column\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z\"/></svg>`,\n    canDrag: false,\n    canDelete: false,\n    acceptsChildren: true,\n    hideFromToolbar: true,\n    hideStyleSettings: [StyleSettings.Visibility],\n    defaults: {\n        styles: {\n            paddingTop: \"10px\",\n            paddingRight: \"10px\",\n            paddingBottom: \"10px\",\n            paddingLeft: \"10px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,aAAa,QAAQ,6BAA6B;AAC3D,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAACC,mBAAmB,EAAE;EAC3DE,IAAI,EAAE,mBAAmB;EACzBC,KAAK,EAAE,QAAQ;EACfC,KAAK,EAAE,4bAA4b;EACncC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE,IAAI;EACrBC,iBAAiB,EAAE,CAACX,aAAa,CAACY,UAAU,CAAC;EAC7CC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,UAAU,EAAE,MAAM;MAClBC,YAAY,EAAE,MAAM;MACpBC,aAAa,EAAE,MAAM;MACrBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSettings","createComponent","GridColumnComponent","GridColumn","name","label","image","canDrag","canDelete","acceptsChildren","hideFromToolbar","hideStyleSettings","Visibility","defaults","styles","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["GridColumn.manifest.ts"],"sourcesContent":["\"use client\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { GridColumnComponent } from \"./GridColumn.js\";\n\nexport const GridColumn = createComponent(GridColumnComponent, {\n    name: \"Webiny/GridColumn\",\n    label: \"Column\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z\"/></svg>`,\n    canDrag: false,\n    canDelete: false,\n    acceptsChildren: true,\n    hideFromToolbar: true,\n    hideStyleSettings: [StyleSettings.Visibility],\n    defaults: {\n        styles: {\n            paddingTop: \"10px\",\n            paddingRight: \"10px\",\n            paddingBottom: \"10px\",\n            paddingLeft: \"10px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,aAAa,QAAQ,6BAA6B;AAC3D,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAACC,mBAAmB,EAAE;EAC3DE,IAAI,EAAE,mBAAmB;EACzBC,KAAK,EAAE,QAAQ;EACfC,KAAK,EAAE,4bAA4b;EACncC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE,IAAI;EACrBC,iBAAiB,EAAE,CAACX,aAAa,CAACY,UAAU,CAAC;EAC7CC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,UAAU,EAAE,MAAM;MAClBC,YAAY,EAAE,MAAM;MACpBC,aAAa,EAAE,MAAM;MACrBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Image.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ComponentPropsWithChildren } from "../types";
+import type { ComponentPropsWithChildren } from "../types.js";
 type ImageProps = ComponentPropsWithChildren<{
     title: string;
     altText: string;

package/editorComponents/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","contentSdk","SUPPORTED_IMAGE_RESIZE_WIDTHS","ImageComponent","props","image","useImage","src","createElement","ImagePlaceholder","style","styles","tag","title","data","Fragment","isLoaded","alt","altText","onLoad","srcSet","display","height","backgroundColor","justifyContent","alignItems","fill","width","filter","xmlns","viewBox","d","getSrcSet","srcSetWidths","map","item","join","inputs","setIsLoaded","isEditing","endsWith","toString","imageWidthInt","parseInt","i","length","supportedResizeWidth","push","imageStyles","maxWidth","opacity","transition","setTimeout"],"sources":["Image.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport type { CssProperties } from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\ntype ImageProps = ComponentPropsWithChildren<{\n    title: string;\n    altText: string;\n    image: {\n        id: string;\n        name: string;\n        size: number;\n        mimeType: string;\n        src: string;\n    };\n}>;\n\nexport const ImageComponent = (props: ImageProps) => {\n    const image = useImage(props);\n\n    if (!image.src) {\n        return <ImagePlaceholder style={props.styles} />;\n    }\n\n    if (image.tag === \"object\") {\n        return <object style={image.styles} title={image.title} data={image.src} />;\n    }\n\n    return (\n        <>\n            {!image.isLoaded && <ImagePlaceholder style={image.styles} />}\n            <img\n                alt={image.altText}\n                onLoad={image.onLoad}\n                title={image.title}\n                src={image.src}\n                srcSet={image.srcSet}\n                style={image.styles}\n            />\n        </>\n    );\n};\n\nconst ImagePlaceholder = ({ style }: { style: CssProperties }) => {\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                height: \"200px\",\n                backgroundColor: \"#f4f4f4\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                fill: \"#ffffff\",\n                ...style\n            }}\n        >\n            <svg\n                style={{\n                    width: \"70px\",\n                    height: \"70px\",\n                    filter: \"drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)\"\n                }}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                height=\"24px\"\n                viewBox=\"0 -960 960 960\"\n                width=\"24px\"\n            >\n                <path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\" />\n            </svg>\n        </div>\n    );\n};\n\nconst getSrcSet = (src: string, srcSetWidths: number[]) => {\n    return srcSetWidths.map(item => `${src}?width=${item} ${item}w`).join(\", \");\n};\n\nconst useImage = ({ inputs, styles }: ImageProps) => {\n    const [isLoaded, setIsLoaded] = useState(contentSdk.isEditing() ? false : true);\n    const { title = \"\", altText, image } = inputs;\n    const src = image?.src;\n\n    const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n    useEffect(() => {\n        if (!src) {\n            setIsLoaded(false);\n        }\n    }, [src]);\n\n    // If a fixed image width in pixels was set, let's filter out unneeded\n    // image resize widths. For example, if 155px was set as the fixed image\n    // width, then we want the `srcset` attribute to only contain 100w and 300w.\n    let srcSetWidths: number[] = [];\n\n    const width = styles.width?.toString();\n\n    if (width && width.endsWith(\"px\")) {\n        const imageWidthInt = parseInt(width);\n        for (let i = 0; i < SUPPORTED_IMAGE_RESIZE_WIDTHS.length; i++) {\n            const supportedResizeWidth = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            if (imageWidthInt > supportedResizeWidth) {\n                srcSetWidths.push(supportedResizeWidth);\n            } else {\n                srcSetWidths.push(supportedResizeWidth);\n                break;\n            }\n        }\n    } else {\n        // If a fixed image width was not provided, we\n        // rely on all the supported image resize widths.\n        srcSetWidths = SUPPORTED_IMAGE_RESIZE_WIDTHS;\n    }\n\n    const srcSet = src ? getSrcSet(src, srcSetWidths) : \"\";\n\n    const imageStyles = {\n        maxWidth: \"100%\",\n        opacity: isLoaded ? 1 : 0,\n        transition: \"opacity 0.3s ease\",\n        ...styles\n    };\n\n    const onLoad = useCallback(() => {\n        if (contentSdk.isEditing()) {\n            setTimeout(() => {\n                setIsLoaded(true);\n            }, 100);\n        } else {\n            setIsLoaded(true);\n        }\n    }, []);\n\n    return {\n        altText,\n        isLoaded,\n        onLoad,\n        src: inputs.image?.src,\n        srcSet,\n        styles: imageStyles,\n        tag,\n        title\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","contentSdk","SUPPORTED_IMAGE_RESIZE_WIDTHS","ImageComponent","props","image","useImage","src","createElement","ImagePlaceholder","style","styles","tag","title","data","Fragment","isLoaded","alt","altText","onLoad","srcSet","display","height","backgroundColor","justifyContent","alignItems","fill","width","filter","xmlns","viewBox","d","getSrcSet","srcSetWidths","map","item","join","inputs","setIsLoaded","isEditing","endsWith","toString","imageWidthInt","parseInt","i","length","supportedResizeWidth","push","imageStyles","maxWidth","opacity","transition","setTimeout"],"sources":["Image.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport type { CssProperties } from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport type { ComponentPropsWithChildren } from \"~/types.js\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\ntype ImageProps = ComponentPropsWithChildren<{\n    title: string;\n    altText: string;\n    image: {\n        id: string;\n        name: string;\n        size: number;\n        mimeType: string;\n        src: string;\n    };\n}>;\n\nexport const ImageComponent = (props: ImageProps) => {\n    const image = useImage(props);\n\n    if (!image.src) {\n        return <ImagePlaceholder style={props.styles} />;\n    }\n\n    if (image.tag === \"object\") {\n        return <object style={image.styles} title={image.title} data={image.src} />;\n    }\n\n    return (\n        <>\n            {!image.isLoaded && <ImagePlaceholder style={image.styles} />}\n            <img\n                alt={image.altText}\n                onLoad={image.onLoad}\n                title={image.title}\n                src={image.src}\n                srcSet={image.srcSet}\n                style={image.styles}\n            />\n        </>\n    );\n};\n\nconst ImagePlaceholder = ({ style }: { style: CssProperties }) => {\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                height: \"200px\",\n                backgroundColor: \"#f4f4f4\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                fill: \"#ffffff\",\n                ...style\n            }}\n        >\n            <svg\n                style={{\n                    width: \"70px\",\n                    height: \"70px\",\n                    filter: \"drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)\"\n                }}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                height=\"24px\"\n                viewBox=\"0 -960 960 960\"\n                width=\"24px\"\n            >\n                <path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\" />\n            </svg>\n        </div>\n    );\n};\n\nconst getSrcSet = (src: string, srcSetWidths: number[]) => {\n    return srcSetWidths.map(item => `${src}?width=${item} ${item}w`).join(\", \");\n};\n\nconst useImage = ({ inputs, styles }: ImageProps) => {\n    const [isLoaded, setIsLoaded] = useState(contentSdk.isEditing() ? false : true);\n    const { title = \"\", altText, image } = inputs;\n    const src = image?.src;\n\n    const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n    useEffect(() => {\n        if (!src) {\n            setIsLoaded(false);\n        }\n    }, [src]);\n\n    // If a fixed image width in pixels was set, let's filter out unneeded\n    // image resize widths. For example, if 155px was set as the fixed image\n    // width, then we want the `srcset` attribute to only contain 100w and 300w.\n    let srcSetWidths: number[] = [];\n\n    const width = styles.width?.toString();\n\n    if (width && width.endsWith(\"px\")) {\n        const imageWidthInt = parseInt(width);\n        for (let i = 0; i < SUPPORTED_IMAGE_RESIZE_WIDTHS.length; i++) {\n            const supportedResizeWidth = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            if (imageWidthInt > supportedResizeWidth) {\n                srcSetWidths.push(supportedResizeWidth);\n            } else {\n                srcSetWidths.push(supportedResizeWidth);\n                break;\n            }\n        }\n    } else {\n        // If a fixed image width was not provided, we\n        // rely on all the supported image resize widths.\n        srcSetWidths = SUPPORTED_IMAGE_RESIZE_WIDTHS;\n    }\n\n    const srcSet = src ? getSrcSet(src, srcSetWidths) : \"\";\n\n    const imageStyles = {\n        maxWidth: \"100%\",\n        opacity: isLoaded ? 1 : 0,\n        transition: \"opacity 0.3s ease\",\n        ...styles\n    };\n\n    const onLoad = useCallback(() => {\n        if (contentSdk.isEditing()) {\n            setTimeout(() => {\n                setIsLoaded(true);\n            }, 100);\n        } else {\n            setIsLoaded(true);\n        }\n    }, []);\n\n    return {\n        altText,\n        isLoaded,\n        onLoad,\n        src: inputs.image?.src,\n        srcSet,\n        styles: imageStyles,\n        tag,\n        title\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/editorComponents/Image.manifest.js

@@ -1,8 +1,8 @@
 "use client";
 
 import { createFileInput, createTextInput } from "@webiny/website-builder-sdk";
-import { createComponent } from "../createComponent";
-import { ImageComponent } from "./Image";
+import { createComponent } from "../createComponent.js";
+import { ImageComponent } from "./Image.js";
 export const Image = createComponent(ImageComponent, {
   name: "Webiny/Image",
   label: "Image",

package/editorComponents/Image.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFileInput","createTextInput","createComponent","ImageComponent","Image","name","label","group","image","autoApplyStyles","inputs","allowedFileTypes","onChange","title","altText","description","defaults","styles","width"],"sources":["Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createFileInput, createTextInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { ImageComponent } from \"./Image\";\n\nexport const Image = createComponent(ImageComponent, {\n    name: \"Webiny/Image\",\n    label: \"Image\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>`,\n    autoApplyStyles: false,\n    inputs: [\n        createFileInput({\n            name: \"image\",\n            label: \"Image\",\n            allowedFileTypes: [\"image/*\"],\n            onChange: ({ inputs }) => {\n                if (inputs.image) {\n                    inputs.title = inputs.image.name;\n                    inputs.altText = inputs.image.name;\n                }\n            }\n        }),\n        createTextInput({\n            name: \"title\",\n            label: \"Title\",\n            description: \"Title of the image\"\n        }),\n        createTextInput({\n            name: \"altText\",\n            label: \"Alternate Text\",\n            description: \"Shown when the user has disabled images\"\n        })\n    ],\n    defaults: {\n        styles: {\n            width: \"100%\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe,EAAEC,eAAe,QAAQ,6BAA6B;AAC9E,SAASC,eAAe;AACxB,SAASC,cAAc;AAEvB,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAACC,cAAc,EAAE;EACjDE,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,0TAA0T;EACjUC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE,CACJV,eAAe,CAAC;IACZK,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdK,gBAAgB,EAAE,CAAC,SAAS,CAAC;IAC7BC,QAAQ,EAAEA,CAAC;MAAEF;IAAO,CAAC,KAAK;MACtB,IAAIA,MAAM,CAACF,KAAK,EAAE;QACdE,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACF,KAAK,CAACH,IAAI;QAChCK,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACH,IAAI;MACtC;IACJ;EACJ,CAAC,CAAC,EACFJ,eAAe,CAAC;IACZI,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdS,WAAW,EAAE;EACjB,CAAC,CAAC,EACFd,eAAe,CAAC;IACZI,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,gBAAgB;IACvBS,WAAW,EAAE;EACjB,CAAC,CAAC,CACL;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createFileInput","createTextInput","createComponent","ImageComponent","Image","name","label","group","image","autoApplyStyles","inputs","allowedFileTypes","onChange","title","altText","description","defaults","styles","width"],"sources":["Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createFileInput, createTextInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { ImageComponent } from \"./Image.js\";\n\nexport const Image = createComponent(ImageComponent, {\n    name: \"Webiny/Image\",\n    label: \"Image\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>`,\n    autoApplyStyles: false,\n    inputs: [\n        createFileInput({\n            name: \"image\",\n            label: \"Image\",\n            allowedFileTypes: [\"image/*\"],\n            onChange: ({ inputs }) => {\n                if (inputs.image) {\n                    inputs.title = inputs.image.name;\n                    inputs.altText = inputs.image.name;\n                }\n            }\n        }),\n        createTextInput({\n            name: \"title\",\n            label: \"Title\",\n            description: \"Title of the image\"\n        }),\n        createTextInput({\n            name: \"altText\",\n            label: \"Alternate Text\",\n            description: \"Shown when the user has disabled images\"\n        })\n    ],\n    defaults: {\n        styles: {\n            width: \"100%\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe,EAAEC,eAAe,QAAQ,6BAA6B;AAC9E,SAASC,eAAe;AACxB,SAASC,cAAc;AAEvB,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAACC,cAAc,EAAE;EACjDE,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,0TAA0T;EACjUC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE,CACJV,eAAe,CAAC;IACZK,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdK,gBAAgB,EAAE,CAAC,SAAS,CAAC;IAC7BC,QAAQ,EAAEA,CAAC;MAAEF;IAAO,CAAC,KAAK;MACtB,IAAIA,MAAM,CAACF,KAAK,EAAE;QACdE,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACF,KAAK,CAACH,IAAI;QAChCK,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACH,IAAI;MACtC;IACJ;EACJ,CAAC,CAAC,EACFJ,eAAe,CAAC;IACZI,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdS,WAAW,EAAE;EACjB,CAAC,CAAC,EACFd,eAAe,CAAC;IACZI,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,gBAAgB;IACvBS,WAAW,EAAE;EACjB,CAAC,CAAC,CACL;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Lexical.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ComponentProps } from "../types";
+import type { ComponentProps } from "../types.js";
 export declare const createLexicalValue: (value: string) => {
     state: string;
 };

package/editorComponents/Lexical.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","LexicalHtmlRenderer","createLexicalValue","value","state","LexicalComponent","inputs","html","content","createElement","dangerouslySetInnerHTML","__html","theme"],"sources":["Lexical.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LexicalHtmlRenderer } from \"@webiny/lexical-editor\";\nimport type { ComponentProps } from \"~/types\";\n\nexport const createLexicalValue = (value: string) => {\n    return {\n        state: `{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"${value}\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph-element\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}`\n    };\n};\n\ntype LexicalProps = ComponentProps<{\n    content: {\n        state: string;\n        html?: string;\n    };\n}>;\n\nexport const LexicalComponent = ({ inputs }: LexicalProps) => {\n    const { state, html } = inputs.content;\n\n    if (html) {\n        return <div dangerouslySetInnerHTML={{ __html: html }}></div>;\n    }\n\n    return <LexicalHtmlRenderer value={state} theme={{}} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,wBAAwB;AAG5D,OAAO,MAAMC,kBAAkB,GAAIC,KAAa,IAAK;EACjD,OAAO;IACHC,KAAK,EAAE,+FAA+FD,KAAK;EAC/G,CAAC;AACL,CAAC;AASD,OAAO,MAAME,gBAAgB,GAAGA,CAAC;EAAEC;AAAqB,CAAC,KAAK;EAC1D,MAAM;IAAEF,KAAK;IAAEG;EAAK,CAAC,GAAGD,MAAM,CAACE,OAAO;EAEtC,IAAID,IAAI,EAAE;IACN,oBAAOP,KAAA,CAAAS,aAAA;MAAKC,uBAAuB,EAAE;QAAEC,MAAM,EAAEJ;MAAK;IAAE,CAAM,CAAC;EACjE;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,mBAAmB;IAACE,KAAK,EAAEC,KAAM;IAACQ,KAAK,EAAE,CAAC;EAAE,CAAE,CAAC;AAC3D,CAAC","ignoreList":[]}
+{"version":3,"names":["React","LexicalHtmlRenderer","createLexicalValue","value","state","LexicalComponent","inputs","html","content","createElement","dangerouslySetInnerHTML","__html","theme"],"sources":["Lexical.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LexicalHtmlRenderer } from \"@webiny/lexical-editor\";\nimport type { ComponentProps } from \"~/types.js\";\n\nexport const createLexicalValue = (value: string) => {\n    return {\n        state: `{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"${value}\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph-element\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}`\n    };\n};\n\ntype LexicalProps = ComponentProps<{\n    content: {\n        state: string;\n        html?: string;\n    };\n}>;\n\nexport const LexicalComponent = ({ inputs }: LexicalProps) => {\n    const { state, html } = inputs.content;\n\n    if (html) {\n        return <div dangerouslySetInnerHTML={{ __html: html }}></div>;\n    }\n\n    return <LexicalHtmlRenderer value={state} theme={{}} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,wBAAwB;AAG5D,OAAO,MAAMC,kBAAkB,GAAIC,KAAa,IAAK;EACjD,OAAO;IACHC,KAAK,EAAE,+FAA+FD,KAAK;EAC/G,CAAC;AACL,CAAC;AASD,OAAO,MAAME,gBAAgB,GAAGA,CAAC;EAAEC;AAAqB,CAAC,KAAK;EAC1D,MAAM;IAAEF,KAAK;IAAEG;EAAK,CAAC,GAAGD,MAAM,CAACE,OAAO;EAEtC,IAAID,IAAI,EAAE;IACN,oBAAOP,KAAA,CAAAS,aAAA;MAAKC,uBAAuB,EAAE;QAAEC,MAAM,EAAEJ;MAAK;IAAE,CAAM,CAAC;EACjE;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,mBAAmB;IAACE,KAAK,EAAEC,KAAM;IAACQ,KAAK,EAAE,CAAC;EAAE,CAAE,CAAC;AAC3D,CAAC","ignoreList":[]}

package/editorComponents/Lexical.manifest.js

@@ -1,8 +1,8 @@
 "use client";
 
 import { createLexicalInput } from "@webiny/website-builder-sdk";
-import { createComponent } from "../createComponent";
-import { LexicalComponent, createLexicalValue } from "./Lexical";
+import { createComponent } from "../createComponent.js";
+import { LexicalComponent, createLexicalValue } from "./Lexical.js";
 export const Lexical = createComponent(LexicalComponent, {
   name: "Webiny/Lexical",
   label: "Rich Text",

package/editorComponents/Lexical.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createLexicalInput","createComponent","LexicalComponent","createLexicalValue","Lexical","name","label","group","image","inputs","defaults","content"],"sources":["Lexical.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createLexicalInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { LexicalComponent, createLexicalValue } from \"./Lexical\";\n\nexport const Lexical = createComponent(LexicalComponent, {\n    name: \"Webiny/Lexical\",\n    label: \"Rich Text\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z\"/></svg>`,\n    inputs: [\n        createLexicalInput({\n            name: \"content\",\n            label: \"Content\"\n        })\n    ],\n    defaults: {\n        inputs: {\n            content: createLexicalValue(\n                \"Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet.\"\n            )\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,eAAe;AACxB,SAASC,gBAAgB,EAAEC,kBAAkB;AAE7C,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAACC,gBAAgB,EAAE;EACrDG,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,WAAW;EAClBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,mMAAmM;EAC1MC,MAAM,EAAE,CACJT,kBAAkB,CAAC;IACfK,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE;EACX,CAAC,CAAC,CACL;EACDI,QAAQ,EAAE;IACND,MAAM,EAAE;MACJE,OAAO,EAAER,kBAAkB,CACvB,yRACJ;IACJ;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createLexicalInput","createComponent","LexicalComponent","createLexicalValue","Lexical","name","label","group","image","inputs","defaults","content"],"sources":["Lexical.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createLexicalInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { LexicalComponent, createLexicalValue } from \"./Lexical.js\";\n\nexport const Lexical = createComponent(LexicalComponent, {\n    name: \"Webiny/Lexical\",\n    label: \"Rich Text\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z\"/></svg>`,\n    inputs: [\n        createLexicalInput({\n            name: \"content\",\n            label: \"Content\"\n        })\n    ],\n    defaults: {\n        inputs: {\n            content: createLexicalValue(\n                \"Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet.\"\n            )\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,eAAe;AACxB,SAASC,gBAAgB,EAAEC,kBAAkB;AAE7C,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAACC,gBAAgB,EAAE;EACrDG,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,WAAW;EAClBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,mMAAmM;EAC1MC,MAAM,EAAE,CACJT,kBAAkB,CAAC;IACfK,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE;EACX,CAAC,CAAC,CACL;EACDI,QAAQ,EAAE;IACND,MAAM,EAAE;MACJE,OAAO,EAAER,kBAAkB,CACvB,yRACJ;IACJ;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Root.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ComponentPropsWithChildren } from "../types";
+import type { ComponentPropsWithChildren } from "../types.js";
 export declare const RootComponent: ({ inputs }: ComponentPropsWithChildren) => React.JSX.Element;

package/editorComponents/Root.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","RootComponent","inputs","createElement","Fragment","children"],"sources":["Root.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nexport const RootComponent = ({ inputs }: ComponentPropsWithChildren) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACrE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","RootComponent","inputs","createElement","Fragment","children"],"sources":["Root.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const RootComponent = ({ inputs }: ComponentPropsWithChildren) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACrE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}

package/editorComponents/Root.manifest.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { createComponent } from "../createComponent";
-import { RootComponent } from "./Root";
+import { createComponent } from "../createComponent.js";
+import { RootComponent } from "./Root.js";
 export const Root = createComponent(RootComponent, {
   name: "Webiny/Root",
   label: "Main Content",

package/editorComponents/Root.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createComponent","RootComponent","Root","name","label","acceptsChildren","hideFromToolbar"],"sources":["Root.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent\";\nimport { RootComponent } from \"./Root\";\n\nexport const Root = createComponent(RootComponent, {\n    name: \"Webiny/Root\",\n    label: \"Main Content\",\n    acceptsChildren: true,\n    hideFromToolbar: true\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,aAAa;AAEtB,OAAO,MAAMC,IAAI,GAAGF,eAAe,CAACC,aAAa,EAAE;EAC/CE,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,cAAc;EACrBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE;AACrB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createComponent","RootComponent","Root","name","label","acceptsChildren","hideFromToolbar"],"sources":["Root.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { RootComponent } from \"./Root.js\";\n\nexport const Root = createComponent(RootComponent, {\n    name: \"Webiny/Root\",\n    label: \"Main Content\",\n    acceptsChildren: true,\n    hideFromToolbar: true\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,aAAa;AAEtB,OAAO,MAAMC,IAAI,GAAGF,eAAe,CAACC,aAAa,EAAE;EAC/CE,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,cAAc;EACrBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE;AACrB,CAAC,CAAC","ignoreList":[]}

package/editorComponents/index.js

@@ -3,8 +3,8 @@ import { Grid } from "./Grid.manifest.js";
 import { Image } from "./Image.manifest.js";
 import { Lexical } from "./Lexical.manifest.js";
 import { Root } from "./Root.manifest.js";
-import { GridColumn } from "./GridColumn.manifest";
-import { Fragment } from "./Fragment.manifest";
+import { GridColumn } from "./GridColumn.manifest.js";
+import { Fragment } from "./Fragment.manifest.js";
 export const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];
 
 //# sourceMappingURL=index.js.map

package/editorComponents/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Box","Grid","Image","Lexical","Root","GridColumn","Fragment","editorComponents"],"sources":["index.ts"],"sourcesContent":["import { Box } from \"./Box.manifest.js\";\nimport { Grid } from \"./Grid.manifest.js\";\nimport { Image } from \"./Image.manifest.js\";\nimport { Lexical } from \"./Lexical.manifest.js\";\nimport { Root } from \"./Root.manifest.js\";\nimport { GridColumn } from \"./GridColumn.manifest\";\nimport { Fragment } from \"./Fragment.manifest\";\n\nexport const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];\n"],"mappings":"AAAA,SAASA,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,KAAK;AACd,SAASC,OAAO;AAChB,SAASC,IAAI;AACb,SAASC,UAAU;AACnB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,gBAAgB,GAAG,CAACH,IAAI,EAAEJ,GAAG,EAAEC,IAAI,EAAEI,UAAU,EAAEH,KAAK,EAAEC,OAAO,EAAEG,QAAQ,CAAC","ignoreList":[]}
+{"version":3,"names":["Box","Grid","Image","Lexical","Root","GridColumn","Fragment","editorComponents"],"sources":["index.ts"],"sourcesContent":["import { Box } from \"./Box.manifest.js\";\nimport { Grid } from \"./Grid.manifest.js\";\nimport { Image } from \"./Image.manifest.js\";\nimport { Lexical } from \"./Lexical.manifest.js\";\nimport { Root } from \"./Root.manifest.js\";\nimport { GridColumn } from \"./GridColumn.manifest.js\";\nimport { Fragment } from \"./Fragment.manifest.js\";\n\nexport const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];\n"],"mappings":"AAAA,SAASA,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,KAAK;AACd,SAASC,OAAO;AAChB,SAASC,IAAI;AACb,SAASC,UAAU;AACnB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,gBAAgB,GAAG,CAACH,IAAI,EAAEJ,GAAG,EAAEC,IAAI,EAAEI,UAAU,EAAEH,KAAK,EAAEC,OAAO,EAAEG,QAAQ,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/website-builder-react",
-	"version": "6.0.0-alpha.3",
+	"version": "6.0.0-alpha.5",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -17,8 +17,8 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/lexical-editor": "6.0.0-alpha.3",
-		"@webiny/website-builder-sdk": "6.0.0-alpha.3",
+		"@webiny/lexical-editor": "6.0.0-alpha.5",
+		"@webiny/website-builder-sdk": "6.0.0-alpha.5",
 		"deep-equal": "2.2.3",
 		"mobx": "6.9.0",
 		"mobx-react-lite": "3.4.3",
@@ -27,7 +27,7 @@
 	},
 	"devDependencies": {
 		"@types/react": "18.2.79",
-		"@webiny/project-utils": "6.0.0-alpha.3",
+		"@webiny/project-utils": "6.0.0-alpha.5",
 		"typescript": "5.3.3"
 	},
 	"publishConfig": {
@@ -38,5 +38,5 @@
 		"build": "node ../cli/bin.js run build",
 		"watch": "node ../cli/bin.js run watch"
 	},
-	"gitHead": "8b6c57b56947ee57acf428f703bc1b8c35617a95"
+	"gitHead": "b7e120541b093e91f214904a9f13e4c2c4640978"
 }