@webiny/website-builder-react 6.3.0 → 6.4.0-beta.1

package/editorComponents/Image.js

@@ -1,126 +1,106 @@
-import React, { useCallback, useEffect, useState } from "react";
+import react, { useCallback, useEffect, useState } from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
-const SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];
-export const ImageComponent = props => {
-  const image = useImage(props);
-  if (!image.src) {
-    return /*#__PURE__*/React.createElement(ImagePlaceholder, {
-      style: props.styles
+const SUPPORTED_IMAGE_RESIZE_WIDTHS = [
+    100,
+    300,
+    500,
+    750,
+    1000,
+    1500,
+    2500
+];
+const ImageComponent = (props)=>{
+    const image = useImage(props);
+    if (!image.src) return /*#__PURE__*/ react.createElement(ImagePlaceholder, {
+        style: props.styles
     });
-  }
-  if (image.tag === "object") {
-    return /*#__PURE__*/React.createElement("object", {
-      style: image.styles,
-      title: image.title,
-      data: image.src
+    if ("object" === image.tag) return /*#__PURE__*/ react.createElement("object", {
+        style: image.styles,
+        title: image.title,
+        data: image.src
     });
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !image.isLoaded && /*#__PURE__*/React.createElement(ImagePlaceholder, {
-    style: image.styles
-  }), /*#__PURE__*/React.createElement("img", {
-    alt: image.altText,
-    onLoad: image.onLoad,
-    title: image.title,
-    src: image.src,
-    srcSet: image.srcSet,
-    style: image.styles
-  }));
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, !image.isLoaded && /*#__PURE__*/ react.createElement(ImagePlaceholder, {
+        style: image.styles
+    }), /*#__PURE__*/ react.createElement("img", {
+        alt: image.altText,
+        onLoad: image.onLoad,
+        title: image.title,
+        src: image.src,
+        srcSet: image.srcSet,
+        style: image.styles
+    }));
 };
-const ImagePlaceholder = ({
-  style
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      height: "200px",
-      backgroundColor: "#f4f4f4",
-      justifyContent: "center",
-      alignItems: "center",
-      fill: "#ffffff",
-      ...style
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    style: {
-      width: "70px",
-      height: "70px",
-      filter: "drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)"
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 -960 960 960",
-    width: "24px"
-  }, /*#__PURE__*/React.createElement("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"
-  })));
-};
-const getSrcSet = (src, srcSetWidths) => {
-  return srcSetWidths.map(item => `${src}?width=${item} ${item}w`).join(", ");
-};
-const useImage = ({
-  inputs,
-  styles
-}) => {
-  const [isLoaded, setIsLoaded] = useState(contentSdk.isEditing() ? false : true);
-  const {
-    title = "",
-    altText,
-    image
-  } = inputs;
-  const src = image?.src;
-  const tag = src && src.endsWith(".svg") ? "object" : "img";
-  useEffect(() => {
-    if (!src) {
-      setIsLoaded(false);
-    }
-  }, [src]);
-
-  // If a fixed image width in pixels was set, let's filter out unneeded
-  // image resize widths. For example, if 155px was set as the fixed image
-  // width, then we want the `srcset` attribute to only contain 100w and 300w.
-  let srcSetWidths = [];
-  const width = styles.width?.toString();
-  if (width && width.endsWith("px")) {
-    const imageWidthInt = parseInt(width);
-    for (let i = 0; i < SUPPORTED_IMAGE_RESIZE_WIDTHS.length; i++) {
-      const supportedResizeWidth = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
-      if (imageWidthInt > supportedResizeWidth) {
-        srcSetWidths.push(supportedResizeWidth);
-      } else {
-        srcSetWidths.push(supportedResizeWidth);
-        break;
-      }
-    }
-  } else {
-    // If a fixed image width was not provided, we
-    // rely on all the supported image resize widths.
-    srcSetWidths = SUPPORTED_IMAGE_RESIZE_WIDTHS;
-  }
-  const srcSet = src ? getSrcSet(src, srcSetWidths) : "";
-  const imageStyles = {
-    maxWidth: "100%",
-    opacity: isLoaded ? 1 : 0,
-    transition: "opacity 0.3s ease",
-    ...styles
-  };
-  const onLoad = useCallback(() => {
-    if (contentSdk.isEditing()) {
-      setTimeout(() => {
-        setIsLoaded(true);
-      }, 100);
-    } else {
-      setIsLoaded(true);
-    }
-  }, []);
-  return {
-    altText,
-    isLoaded,
-    onLoad,
-    src: inputs.image?.src,
-    srcSet,
-    styles: imageStyles,
-    tag,
-    title
-  };
+const ImagePlaceholder = ({ style })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            height: "200px",
+            backgroundColor: "#f4f4f4",
+            justifyContent: "center",
+            alignItems: "center",
+            fill: "#ffffff",
+            ...style
+        }
+    }, /*#__PURE__*/ react.createElement("svg", {
+        style: {
+            width: "70px",
+            height: "70px",
+            filter: "drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)"
+        },
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "24px",
+        viewBox: "0 -960 960 960",
+        width: "24px"
+    }, /*#__PURE__*/ react.createElement("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"
+    })));
+const getSrcSet = (src, srcSetWidths)=>srcSetWidths.map((item)=>`${src}?width=${item} ${item}w`).join(", ");
+const useImage = ({ inputs, styles })=>{
+    const [isLoaded, setIsLoaded] = useState(!contentSdk.isEditing());
+    const { title = "", altText, image } = inputs;
+    const src = image?.src;
+    const tag = src && src.endsWith(".svg") ? "object" : "img";
+    useEffect(()=>{
+        if (!src) setIsLoaded(false);
+    }, [
+        src
+    ]);
+    let srcSetWidths = [];
+    const width = styles.width?.toString();
+    if (width && width.endsWith("px")) {
+        const imageWidthInt = parseInt(width);
+        for(let i = 0; i < SUPPORTED_IMAGE_RESIZE_WIDTHS.length; i++){
+            const supportedResizeWidth = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
+            if (imageWidthInt > supportedResizeWidth) srcSetWidths.push(supportedResizeWidth);
+            else {
+                srcSetWidths.push(supportedResizeWidth);
+                break;
+            }
+        }
+    } else srcSetWidths = SUPPORTED_IMAGE_RESIZE_WIDTHS;
+    const srcSet = src ? getSrcSet(src, srcSetWidths) : "";
+    const imageStyles = {
+        maxWidth: "100%",
+        opacity: isLoaded ? 1 : 0,
+        transition: "opacity 0.3s ease",
+        ...styles
+    };
+    const onLoad = useCallback(()=>{
+        if (contentSdk.isEditing()) setTimeout(()=>{
+            setIsLoaded(true);
+        }, 100);
+        else setIsLoaded(true);
+    }, []);
+    return {
+        altText,
+        isLoaded,
+        onLoad,
+        src: inputs.image?.src,
+        srcSet,
+        styles: imageStyles,
+        tag,
+        title
+    };
 };
+export { ImageComponent };
 
 //# sourceMappingURL=Image.js.map

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 { ComponentProps } from \"~/types.js\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\ntype ImageProps = ComponentProps<{\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,"file":"editorComponents/Image.js","sources":["../../src/editorComponents/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 { ComponentProps } from \"~/types.js\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\ntype ImageProps = ComponentProps<{\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"],"names":["SUPPORTED_IMAGE_RESIZE_WIDTHS","ImageComponent","props","image","useImage","ImagePlaceholder","style","getSrcSet","src","srcSetWidths","item","inputs","styles","isLoaded","setIsLoaded","useState","contentSdk","title","altText","tag","useEffect","width","imageWidthInt","parseInt","i","supportedResizeWidth","srcSet","imageStyles","onLoad","useCallback","setTimeout"],"mappings":";;AAKA,MAAMA,gCAAgC;IAAC;IAAK;IAAK;IAAK;IAAK;IAAM;IAAM;CAAK;AAcrE,MAAMC,iBAAiB,CAACC;IAC3B,MAAMC,QAAQC,SAASF;IAEvB,IAAI,CAACC,MAAM,GAAG,EACV,OAAO,WAAP,GAAO,oBAACE,kBAAgBA;QAAC,OAAOH,MAAM,MAAM;;IAGhD,IAAIC,AAAc,aAAdA,MAAM,GAAG,EACT,OAAO,WAAP,GAAO,oBAAC;QAAO,OAAOA,MAAM,MAAM;QAAE,OAAOA,MAAM,KAAK;QAAE,MAAMA,MAAM,GAAG;;IAG3E,OAAO,WAAP,GACI,0CACK,CAACA,MAAM,QAAQ,IAAI,WAAJ,GAAI,oBAACE,kBAAgBA;QAAC,OAAOF,MAAM,MAAM;sBACzD,oBAAC;QACG,KAAKA,MAAM,OAAO;QAClB,QAAQA,MAAM,MAAM;QACpB,OAAOA,MAAM,KAAK;QAClB,KAAKA,MAAM,GAAG;QACd,QAAQA,MAAM,MAAM;QACpB,OAAOA,MAAM,MAAM;;AAInC;AAEA,MAAME,mBAAmB,CAAC,EAAEC,KAAK,EAA4B,GAClD,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,QAAQ;YACR,iBAAiB;YACjB,gBAAgB;YAChB,YAAY;YACZ,MAAM;YACN,GAAGA,KAAK;QACZ;qBAEA,oBAAC;QACG,OAAO;YACH,OAAO;YACP,QAAQ;YACR,QAAQ;QACZ;QACA,OAAM;QACN,QAAO;QACP,SAAQ;QACR,OAAM;qBAEN,oBAAC;QAAK,GAAE;;AAMxB,MAAMC,YAAY,CAACC,KAAaC,eACrBA,aAAa,GAAG,CAACC,CAAAA,OAAQ,GAAGF,IAAI,OAAO,EAAEE,KAAK,CAAC,EAAEA,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC;AAG1E,MAAMN,WAAW,CAAC,EAAEO,MAAM,EAAEC,MAAM,EAAc;IAC5C,MAAM,CAACC,UAAUC,YAAY,GAAGC,UAASC,WAAW,SAAS;IAC7D,MAAM,EAAEC,QAAQ,EAAE,EAAEC,OAAO,EAAEf,KAAK,EAAE,GAAGQ;IACvC,MAAMH,MAAML,OAAO;IAEnB,MAAMgB,MAAMX,OAAOA,IAAI,QAAQ,CAAC,UAAU,WAAW;IAErDY,UAAU;QACN,IAAI,CAACZ,KACDM,YAAY;IAEpB,GAAG;QAACN;KAAI;IAKR,IAAIC,eAAyB,EAAE;IAE/B,MAAMY,QAAQT,OAAO,KAAK,EAAE;IAE5B,IAAIS,SAASA,MAAM,QAAQ,CAAC,OAAO;QAC/B,MAAMC,gBAAgBC,SAASF;QAC/B,IAAK,IAAIG,IAAI,GAAGA,IAAIxB,8BAA8B,MAAM,EAAEwB,IAAK;YAC3D,MAAMC,uBAAuBzB,6BAA6B,CAACwB,EAAE;YAC7D,IAAIF,gBAAgBG,sBAChBhB,aAAa,IAAI,CAACgB;iBACf;gBACHhB,aAAa,IAAI,CAACgB;gBAClB;YACJ;QACJ;IACJ,OAGIhB,eAAeT;IAGnB,MAAM0B,SAASlB,MAAMD,UAAUC,KAAKC,gBAAgB;IAEpD,MAAMkB,cAAc;QAChB,UAAU;QACV,SAASd,WAAW,IAAI;QACxB,YAAY;QACZ,GAAGD,MAAM;IACb;IAEA,MAAMgB,SAASC,YAAY;QACvB,IAAIb,WAAW,SAAS,IACpBc,WAAW;YACPhB,YAAY;QAChB,GAAG;aAEHA,YAAY;IAEpB,GAAG,EAAE;IAEL,OAAO;QACHI;QACAL;QACAe;QACA,KAAKjB,OAAO,KAAK,EAAE;QACnBe;QACA,QAAQC;QACRR;QACAF;IACJ;AACJ"}

package/editorComponents/Image.manifest.js

@@ -1,42 +1,42 @@
 "use client";
-
 import { createFileInput, createTextInput } from "@webiny/website-builder-sdk";
 import { createComponent } from "../createComponent.js";
 import { ImageComponent } from "./Image.js";
-export const Image = createComponent(ImageComponent, {
-  name: "Webiny/Image",
-  label: "Image",
-  aiContext: "Displays an image from the file manager with configurable title and alt text.",
-  group: "basic",
-  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>`,
-  autoApplyStyles: false,
-  inputs: {
-    image: createFileInput({
-      label: "Image",
-      allowedFileTypes: ["image/*"],
-      onChange: ({
-        inputs
-      }) => {
-        if (inputs.image) {
-          inputs.title = inputs.image.name;
-          inputs.altText = inputs.image.name;
+const Image = createComponent(ImageComponent, {
+    name: "Webiny/Image",
+    label: "Image",
+    aiContext: "Displays an image from the file manager with configurable title and alt text.",
+    group: "basic",
+    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>',
+    autoApplyStyles: false,
+    inputs: {
+        image: createFileInput({
+            label: "Image",
+            allowedFileTypes: [
+                "image/*"
+            ],
+            onChange: ({ inputs })=>{
+                if (inputs.image) {
+                    inputs.title = inputs.image.name;
+                    inputs.altText = inputs.image.name;
+                }
+            }
+        }),
+        title: createTextInput({
+            label: "Title",
+            description: "Title of the image"
+        }),
+        altText: createTextInput({
+            label: "Alternate Text",
+            description: "Shown when the user has disabled images"
+        })
+    },
+    defaults: {
+        styles: {
+            width: "100%"
         }
-      }
-    }),
-    title: createTextInput({
-      label: "Title",
-      description: "Title of the image"
-    }),
-    altText: createTextInput({
-      label: "Alternate Text",
-      description: "Shown when the user has disabled images"
-    })
-  },
-  defaults: {
-    styles: {
-      width: "100%"
     }
-  }
 });
+export { Image };
 
 //# sourceMappingURL=Image.manifest.js.map

package/editorComponents/Image.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFileInput","createTextInput","createComponent","ImageComponent","Image","name","label","aiContext","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    aiContext: \"Displays an image from the file manager with configurable title and alt 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=\"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        image: createFileInput({\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        title: createTextInput({\n            label: \"Title\",\n            description: \"Title of the image\"\n        }),\n        altText: createTextInput({\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,SAAS,EAAE,+EAA+E;EAC1FC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,0TAA0T;EACjUC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE;IACJF,KAAK,EAAET,eAAe,CAAC;MACnBM,KAAK,EAAE,OAAO;MACdM,gBAAgB,EAAE,CAAC,SAAS,CAAC;MAC7BC,QAAQ,EAAEA,CAAC;QAAEF;MAAO,CAAC,KAAK;QACtB,IAAIA,MAAM,CAACF,KAAK,EAAE;UACdE,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACF,KAAK,CAACJ,IAAI;UAChCM,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACJ,IAAI;QACtC;MACJ;IACJ,CAAC,CAAC;IACFS,KAAK,EAAEb,eAAe,CAAC;MACnBK,KAAK,EAAE,OAAO;MACdU,WAAW,EAAE;IACjB,CAAC,CAAC;IACFD,OAAO,EAAEd,eAAe,CAAC;MACrBK,KAAK,EAAE,gBAAgB;MACvBU,WAAW,EAAE;IACjB,CAAC;EACL,CAAC;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"editorComponents/Image.manifest.js","sources":["../../src/editorComponents/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    aiContext: \"Displays an image from the file manager with configurable title and alt 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=\"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        image: createFileInput({\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        title: createTextInput({\n            label: \"Title\",\n            description: \"Title of the image\"\n        }),\n        altText: createTextInput({\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"],"names":["Image","createComponent","ImageComponent","createFileInput","inputs","createTextInput"],"mappings":";;;;AAKO,MAAMA,QAAQC,gBAAgBC,gBAAgB;IACjD,MAAM;IACN,OAAO;IACP,WAAW;IACX,OAAO;IACP,OAAO;IACP,iBAAiB;IACjB,QAAQ;QACJ,OAAOC,gBAAgB;YACnB,OAAO;YACP,kBAAkB;gBAAC;aAAU;YAC7B,UAAU,CAAC,EAAEC,MAAM,EAAE;gBACjB,IAAIA,OAAO,KAAK,EAAE;oBACdA,OAAO,KAAK,GAAGA,OAAO,KAAK,CAAC,IAAI;oBAChCA,OAAO,OAAO,GAAGA,OAAO,KAAK,CAAC,IAAI;gBACtC;YACJ;QACJ;QACA,OAAOC,gBAAgB;YACnB,OAAO;YACP,aAAa;QACjB;QACA,SAASA,gBAAgB;YACrB,OAAO;YACP,aAAa;QACjB;IACJ;IACA,UAAU;QACN,QAAQ;YACJ,OAAO;QACX;IACJ;AACJ"}

package/editorComponents/Lexical.js

@@ -1,26 +1,18 @@
 "use client";
-
-import React from "react";
-export const createLexicalValue = value => {
-  return {
-    state: `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${value}","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"wby-paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
-    html: `<p class="wb-paragraph-1">${value}</p>`
-  };
-};
-export const LexicalComponent = ({
-  inputs
-}) => {
-  const {
-    html
-  } = inputs.content;
-  if (html) {
-    return /*#__PURE__*/React.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: html
-      }
+import react from "react";
+const createLexicalValue = (value)=>({
+        state: `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${value}","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"wby-paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
+        html: `<p class="wb-paragraph-1">${value}</p>`
+    });
+const LexicalComponent = ({ inputs })=>{
+    const { html } = inputs.content;
+    if (html) return /*#__PURE__*/ react.createElement("div", {
+        dangerouslySetInnerHTML: {
+            __html: html
+        }
     });
-  }
-  return null;
+    return null;
 };
+export { LexicalComponent, createLexicalValue };
 
 //# sourceMappingURL=Lexical.js.map

package/editorComponents/Lexical.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createLexicalValue","value","state","html","LexicalComponent","inputs","content","createElement","dangerouslySetInnerHTML","__html"],"sources":["Lexical.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\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\":\"wby-paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}`,\n        html: `<p class=\"wb-paragraph-1\">${value}</p>`\n    };\n};\n\ntype LexicalProps = ComponentProps<{\n    content: {\n        html?: string;\n    };\n}>;\n\nexport const LexicalComponent = ({ inputs }: LexicalProps) => {\n    const { html } = inputs.content;\n\n    if (html) {\n        return <div dangerouslySetInnerHTML={{ __html: html }}></div>;\n    }\n\n    return null;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,kBAAkB,GAAIC,KAAa,IAAK;EACjD,OAAO;IACHC,KAAK,EAAE,+FAA+FD,KAAK,gNAAgN;IAC3TE,IAAI,EAAE,6BAA6BF,KAAK;EAC5C,CAAC;AACL,CAAC;AAQD,OAAO,MAAMG,gBAAgB,GAAGA,CAAC;EAAEC;AAAqB,CAAC,KAAK;EAC1D,MAAM;IAAEF;EAAK,CAAC,GAAGE,MAAM,CAACC,OAAO;EAE/B,IAAIH,IAAI,EAAE;IACN,oBAAOJ,KAAA,CAAAQ,aAAA;MAAKC,uBAAuB,EAAE;QAAEC,MAAM,EAAEN;MAAK;IAAE,CAAM,CAAC;EACjE;EAEA,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"editorComponents/Lexical.js","sources":["../../src/editorComponents/Lexical.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\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\":\"wby-paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}`,\n        html: `<p class=\"wb-paragraph-1\">${value}</p>`\n    };\n};\n\ntype LexicalProps = ComponentProps<{\n    content: {\n        html?: string;\n    };\n}>;\n\nexport const LexicalComponent = ({ inputs }: LexicalProps) => {\n    const { html } = inputs.content;\n\n    if (html) {\n        return <div dangerouslySetInnerHTML={{ __html: html }}></div>;\n    }\n\n    return null;\n};\n"],"names":["createLexicalValue","value","LexicalComponent","inputs","html"],"mappings":";;AAIO,MAAMA,qBAAqB,CAACC,QACxB;QACH,OAAO,CAAC,4FAA4F,EAAEA,MAAM,8MAA8M,CAAC;QAC3T,MAAM,CAAC,0BAA0B,EAAEA,MAAM,IAAI,CAAC;IAClD;AASG,MAAMC,mBAAmB,CAAC,EAAEC,MAAM,EAAgB;IACrD,MAAM,EAAEC,IAAI,EAAE,GAAGD,OAAO,OAAO;IAE/B,IAAIC,MACA,OAAO,WAAP,GAAO,oBAAC;QAAI,yBAAyB;YAAE,QAAQA;QAAK;;IAGxD,OAAO;AACX"}

package/editorComponents/Lexical.manifest.js

@@ -1,23 +1,25 @@
 "use client";
-
 import { createLexicalInput } from "@webiny/website-builder-sdk";
 import { createComponent } from "../createComponent.js";
 import { LexicalComponent, createLexicalValue } from "./Lexical.js";
-export const Lexical = createComponent(LexicalComponent, {
-  name: "Webiny/Lexical",
-  label: "Rich Text",
-  aiContext: "Rich text content. Generate semantic HTML tags. Do NOT generate markdown.",
-  group: "basic",
-  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>`,
-  inputs: [createLexicalInput({
-    name: "content",
-    label: "Content"
-  })],
-  defaults: {
-    inputs: {
-      content: createLexicalValue("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.")
+const Lexical = createComponent(LexicalComponent, {
+    name: "Webiny/Lexical",
+    label: "Rich Text",
+    aiContext: "Rich text content. Generate semantic HTML tags. Do NOT generate markdown.",
+    group: "basic",
+    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>',
+    inputs: [
+        createLexicalInput({
+            name: "content",
+            label: "Content"
+        })
+    ],
+    defaults: {
+        inputs: {
+            content: createLexicalValue("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.")
+        }
     }
-  }
 });
+export { Lexical };
 
 //# sourceMappingURL=Lexical.manifest.js.map

package/editorComponents/Lexical.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createLexicalInput","createComponent","LexicalComponent","createLexicalValue","Lexical","name","label","aiContext","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    aiContext: \"Rich text content. Generate semantic HTML tags. Do NOT generate markdown.\",\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,SAAS,EAAE,2EAA2E;EACtFC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,mMAAmM;EAC1MC,MAAM,EAAE,CACJV,kBAAkB,CAAC;IACfK,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE;EACX,CAAC,CAAC,CACL;EACDK,QAAQ,EAAE;IACND,MAAM,EAAE;MACJE,OAAO,EAAET,kBAAkB,CACvB,yRACJ;IACJ;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"editorComponents/Lexical.manifest.js","sources":["../../src/editorComponents/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    aiContext: \"Rich text content. Generate semantic HTML tags. Do NOT generate markdown.\",\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"],"names":["Lexical","createComponent","LexicalComponent","createLexicalInput","createLexicalValue"],"mappings":";;;;AAKO,MAAMA,UAAUC,gBAAgBC,kBAAkB;IACrD,MAAM;IACN,OAAO;IACP,WAAW;IACX,OAAO;IACP,OAAO;IACP,QAAQ;QACJC,mBAAmB;YACf,MAAM;YACN,OAAO;QACX;KACH;IACD,UAAU;QACN,QAAQ;YACJ,SAASC,mBACL;QAER;IACJ;AACJ"}

package/editorComponents/Root.js

@@ -1,8 +1,5 @@
-import React from "react";
-export const RootComponent = ({
-  inputs
-}) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, inputs.children);
-};
+import react from "react";
+const RootComponent = ({ inputs })=>/*#__PURE__*/ react.createElement(react.Fragment, null, inputs.children);
+export { RootComponent };
 
 //# sourceMappingURL=Root.js.map

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.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":[]}
+{"version":3,"file":"editorComponents/Root.js","sources":["../../src/editorComponents/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"],"names":["RootComponent","inputs"],"mappings":";AAGO,MAAMA,gBAAgB,CAAC,EAAEC,MAAM,EAA8B,GACzD,WAAP,GAAO,0CAAGA,OAAO,QAAQ"}

package/editorComponents/Root.manifest.js

@@ -1,13 +1,13 @@
 "use client";
-
 import { createComponent } from "../createComponent.js";
 import { RootComponent } from "./Root.js";
-export const Root = createComponent(RootComponent, {
-  name: "Webiny/Root",
-  label: "Main Content",
-  acceptsChildren: true,
-  hideFromToolbar: true,
-  useInAiContentGeneration: false
+const Root = createComponent(RootComponent, {
+    name: "Webiny/Root",
+    label: "Main Content",
+    acceptsChildren: true,
+    hideFromToolbar: true,
+    useInAiContentGeneration: false
 });
+export { Root };
 
 //# sourceMappingURL=Root.manifest.js.map

package/editorComponents/Root.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createComponent","RootComponent","Root","name","label","acceptsChildren","hideFromToolbar","useInAiContentGeneration"],"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    useInAiContentGeneration: false\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,IAAI;EACrBC,wBAAwB,EAAE;AAC9B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"editorComponents/Root.manifest.js","sources":["../../src/editorComponents/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    useInAiContentGeneration: false\n});\n"],"names":["Root","createComponent","RootComponent"],"mappings":";;;AAIO,MAAMA,OAAOC,gBAAgBC,eAAe;IAC/C,MAAM;IACN,OAAO;IACP,iBAAiB;IACjB,iBAAiB;IACjB,0BAA0B;AAC9B"}

package/editorComponents/index.js

@@ -5,6 +5,15 @@ import { Lexical } from "./Lexical.manifest.js";
 import { Root } from "./Root.manifest.js";
 import { GridColumn } from "./GridColumn.manifest.js";
 import { Fragment } from "./Fragment.manifest.js";
-export const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];
+const editorComponents = [
+    Root,
+    Box,
+    Grid,
+    GridColumn,
+    Image,
+    Lexical,
+    Fragment
+];
+export { editorComponents };
 
 //# 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.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":[]}
+{"version":3,"file":"editorComponents/index.js","sources":["../../src/editorComponents/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"],"names":["editorComponents","Root","Box","Grid","GridColumn","Image","Lexical","Fragment"],"mappings":";;;;;;;AAQO,MAAMA,mBAAmB;IAACC;IAAMC;IAAKC;IAAMC;IAAYC;IAAOC;IAASC;CAAS"}

package/index.js

@@ -1,5 +1,3 @@
 export * from "./components/index.js";
 export * from "./createComponent.js";
-export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, StyleSettings } from "@webiny/website-builder-sdk";
-
-//# sourceMappingURL=index.js.map
+export { StyleSettings, contentSdk, createBooleanInput, createColorInput, createDateInput, createElement, createFileInput, createInput, createLexicalInput, createLongTextInput, createNumberInput, createObjectInput, createRadioInput, createSelectInput, createSlotInput, createTagsInput, createTextInput, createTheme, environment, getHeadersProvider, registerComponentGroup, setHeadersProvider } from "@webiny/website-builder-sdk";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/website-builder-react",
-	"version": "6.3.0",
+	"version": "6.4.0-beta.1",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -17,22 +17,22 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/website-builder-sdk": "6.3.0",
+		"@webiny/website-builder-sdk": "6.4.0-beta.1",
 		"deep-equal": "2.2.3",
-		"mobx": "6.15.1",
+		"mobx": "6.15.3",
 		"mobx-react-lite": "4.1.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
 		"@types/react": "18.3.28",
-		"@webiny/build-tools": "6.3.0",
+		"@webiny/build-tools": "6.4.0-beta.1",
 		"typescript": "6.0.3",
-		"vitest": "4.1.5"
+		"vitest": "4.1.6"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"gitHead": "7cefe15431dbd65504e1f58147dc9e55bcbfa693"
+	"gitHead": "73237b8243693038c072bae1c0b783387448cbbe"
 }

package/types.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=types.js.map