@webiny/website-builder-nextjs 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/DocumentRenderer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DocumentRenderer as BaseDocumentRenderer } from "@webiny/website-builder-react";
+export type DocumentRendererProps = React.ComponentProps<typeof BaseDocumentRenderer>;
+export declare const DocumentRenderer: ({ document, components, children }: DocumentRendererProps) => React.JSX.Element;

package/DocumentRenderer.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { DocumentRenderer as BaseDocumentRenderer } from "@webiny/website-builder-react";
+import { Image } from "./editorComponents/Image.manifest.js";
+export const DocumentRenderer = ({
+  document,
+  components,
+  children
+}) => {
+  const allComponents = [Image, ...components];
+  return /*#__PURE__*/React.createElement(BaseDocumentRenderer, {
+    document: document,
+    components: allComponents
+  }, children);
+};
+
+//# sourceMappingURL=DocumentRenderer.js.map

package/DocumentRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","DocumentRenderer","BaseDocumentRenderer","Image","document","components","children","allComponents","createElement"],"sources":["DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { DocumentRenderer as BaseDocumentRenderer } from \"@webiny/website-builder-react\";\nimport { Image } from \"~/editorComponents/Image.manifest.js\";\n\nexport type DocumentRendererProps = React.ComponentProps<typeof BaseDocumentRenderer>;\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n    const allComponents = [Image, ...components];\n    return (\n        <BaseDocumentRenderer document={document} components={allComponents}>\n            {children}\n        </BaseDocumentRenderer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB,IAAIC,oBAAoB,QAAQ,+BAA+B;AACxF,SAASC,KAAK;AAId,OAAO,MAAMF,gBAAgB,GAAGA,CAAC;EAAEG,QAAQ;EAAEC,UAAU;EAAEC;AAAgC,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAG,CAACJ,KAAK,EAAE,GAAGE,UAAU,CAAC;EAC5C,oBACIL,KAAA,CAAAQ,aAAA,CAACN,oBAAoB;IAACE,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEE;EAAc,GAC/DD,QACiB,CAAC;AAE/B,CAAC","ignoreList":[]}

package/README.md

@@ -1,3 +1,11 @@
-# Webiny Website Builder Next.js SDK
+# @webiny/website-builder-nextjs
 
-A Next.js integration SDK for Webiny Website Builder. 
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
+
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
+
+---
+
+_This README file is automatically generated during the publish process._

package/editorComponents/Image.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { ComponentProps } from "@webiny/website-builder-react";
+type ImageProps = ComponentProps<{
+    title: string;
+    altText: string;
+    highPriority: boolean;
+    image: {
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
+        src: string;
+        width: number;
+        height: number;
+    };
+}>;
+export declare const ImageComponent: (props: ImageProps) => React.JSX.Element;
+export {};

package/editorComponents/Image.js

@@ -0,0 +1,89 @@
+import React from "react";
+import Image from "next/image";
+export 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
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      ...props.styles
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    alt: image.altText,
+    title: image.title,
+    src: image.src,
+    width: props.inputs.image.width,
+    height: props.inputs.image.height,
+    style: image.styles,
+    priority: props.inputs.highPriority,
+    loading: props.inputs.highPriority ? "eager" : "lazy",
+    sizes: "100vw",
+    loader: ({
+      src,
+      width
+    }) => `${src}?width=${width}`
+  }));
+};
+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 useImage = ({
+  inputs,
+  styles
+}) => {
+  const {
+    title = "",
+    altText,
+    image
+  } = inputs;
+  const src = image?.src;
+  const tag = src && src.endsWith(".svg") ? "object" : "img";
+  const imageStyles = {
+    maxWidth: "100%",
+    ...styles
+  };
+  return {
+    altText,
+    src: inputs.image?.src,
+    styles: imageStyles,
+    tag,
+    title
+  };
+};
+
+//# sourceMappingURL=Image.js.map

package/editorComponents/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","ImageComponent","props","image","useImage","src","createElement","ImagePlaceholder","style","styles","tag","title","data","position","alt","altText","width","inputs","height","priority","highPriority","loading","sizes","loader","display","backgroundColor","justifyContent","alignItems","fill","filter","xmlns","viewBox","d","endsWith","imageStyles","maxWidth"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport Image from \"next/image\";\nimport type { CssProperties } from \"@webiny/website-builder-react\";\nimport type { ComponentProps } from \"@webiny/website-builder-react\";\n\ntype ImageProps = ComponentProps<{\n    title: string;\n    altText: string;\n    highPriority: boolean;\n    image: {\n        id: string;\n        name: string;\n        size: number;\n        mimeType: string;\n        src: string;\n        width: number;\n        height: number;\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        <div\n            style={{\n                position: \"relative\",\n                ...props.styles\n            }}\n        >\n            {/* <ImagePlaceholder style={image.styles} /> */}\n            <Image\n                alt={image.altText}\n                title={image.title}\n                src={image.src}\n                width={props.inputs.image.width}\n                height={props.inputs.image.height}\n                style={image.styles}\n                priority={props.inputs.highPriority}\n                loading={props.inputs.highPriority ? \"eager\" : \"lazy\"}\n                sizes={\"100vw\"}\n                loader={({ src, width }) => `${src}?width=${width}`}\n            />\n        </div>\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 useImage = ({ inputs, styles }: ImageProps) => {\n    const { title = \"\", altText, image } = inputs;\n    const src = image?.src;\n\n    const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n    const imageStyles = {\n        maxWidth: \"100%\",\n        ...styles\n    };\n\n    return {\n        altText,\n        src: inputs.image?.src,\n        styles: imageStyles,\n        tag,\n        title\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/editorComponents/Image.manifest.d.ts

@@ -0,0 +1 @@
+export declare const Image: import("@webiny/website-builder-sdk/types.js").Component;

package/editorComponents/Image.manifest.js

@@ -0,0 +1,45 @@
+"use client";
+
+import { createFileInput, createTextInput, createBooleanInput, createComponent } from "@webiny/website-builder-react";
+import { ImageComponent } from "./Image.js";
+export const Image = createComponent(ImageComponent, {
+  name: "Webiny/Image",
+  label: "Image",
+  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"
+    }),
+    highPriority: createBooleanInput({
+      label: "High Priority",
+      description: "Prioritize this image loading over other images on the page",
+      defaultValue: false
+    })
+  },
+  defaults: {
+    styles: {
+      width: "100%"
+    }
+  }
+});
+
+//# sourceMappingURL=Image.manifest.js.map

package/editorComponents/Image.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createFileInput","createTextInput","createBooleanInput","createComponent","ImageComponent","Image","name","label","group","image","autoApplyStyles","inputs","allowedFileTypes","onChange","title","altText","description","highPriority","defaultValue","defaults","styles","width"],"sources":["Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n    createFileInput,\n    createTextInput,\n    createBooleanInput,\n    createComponent\n} from \"@webiny/website-builder-react\";\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        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        highPriority: createBooleanInput({\n            label: \"High Priority\",\n            description: \"Prioritize this image loading over other images on the page\",\n            defaultValue: false\n        })\n    },\n    defaults: {\n        styles: {\n            width: \"100%\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SACIA,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,QACZ,+BAA+B;AACtC,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;IACJF,KAAK,EAAET,eAAe,CAAC;MACnBO,KAAK,EAAE,OAAO;MACdK,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,CAACH,IAAI;UAChCK,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACH,IAAI;QACtC;MACJ;IACJ,CAAC,CAAC;IACFQ,KAAK,EAAEb,eAAe,CAAC;MACnBM,KAAK,EAAE,OAAO;MACdS,WAAW,EAAE;IACjB,CAAC,CAAC;IACFD,OAAO,EAAEd,eAAe,CAAC;MACrBM,KAAK,EAAE,gBAAgB;MACvBS,WAAW,EAAE;IACjB,CAAC,CAAC;IACFC,YAAY,EAAEf,kBAAkB,CAAC;MAC7BK,KAAK,EAAE,eAAe;MACtBS,WAAW,EAAE,6DAA6D;MAC1EE,YAAY,EAAE;IAClB,CAAC;EACL,CAAC;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/index.d.ts

@@ -1 +1,2 @@
 export * from "@webiny/website-builder-react";
+export { DocumentRenderer } from "./DocumentRenderer.js";

package/index.js

@@ -1,11 +1,12 @@
 export * from "@webiny/website-builder-react";
+export { DocumentRenderer } from "./DocumentRenderer.js";
 import { setHeadersProvider } from "@webiny/website-builder-react";
 setHeadersProvider(async () => {
   // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.
   // @ts-ignore This is a peer dependency.
   const {
     headers
-  } = await import("next/headers");
+  } = await import("next/headers.js");
   return await headers();
 });
 

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["setHeadersProvider","headers"],"sources":["index.ts"],"sourcesContent":["export * from \"@webiny/website-builder-react\";\n\nimport { setHeadersProvider } from \"@webiny/website-builder-react\";\n\nsetHeadersProvider(async () => {\n    // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.\n    // @ts-ignore This is a peer dependency.\n    const { headers } = await import(\"next/headers\");\n    return await headers();\n});\n"],"mappings":"AAAA,cAAc,+BAA+B;AAE7C,SAASA,kBAAkB,QAAQ,+BAA+B;AAElEA,kBAAkB,CAAC,YAAY;EAC3B;EACA;EACA,MAAM;IAAEC;EAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC;EAChD,OAAO,MAAMA,OAAO,CAAC,CAAC;AAC1B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["DocumentRenderer","setHeadersProvider","headers"],"sources":["index.ts"],"sourcesContent":["export * from \"@webiny/website-builder-react\";\nexport { DocumentRenderer } from \"./DocumentRenderer.js\";\n\nimport { setHeadersProvider } from \"@webiny/website-builder-react\";\n\nsetHeadersProvider(async () => {\n    // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.\n    // @ts-ignore This is a peer dependency.\n    const { headers } = await import(\"next/headers.js\");\n    return await headers();\n});\n"],"mappings":"AAAA,cAAc,+BAA+B;AAC7C,SAASA,gBAAgB;AAEzB,SAASC,kBAAkB,QAAQ,+BAA+B;AAElEA,kBAAkB,CAAC,YAAY;EAC3B;EACA;EACA,MAAM;IAAEC;EAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,iBAAiB,CAAC;EACnD,OAAO,MAAMA,OAAO,CAAC,CAAC;AAC1B,CAAC,CAAC","ignoreList":[]}

package/lexical.css

@@ -0,0 +1,379 @@
+.wb-lx-ltr {
+  text-align: inherit;
+}
+.wb-lx-rtl {
+  text-align: inherit;
+}
+.wb-lx-paragraph {
+}
+
+.wb-lx-quote {
+}
+
+.wb-lx-h1,
+.wb-lx-h2,
+.wb-lx-h3,
+.wb-lx-h4,
+.wb-lx-h5,
+.wb-lx-h6 {
+}
+
+.wb-lx-textBold {
+  font-weight: bold;
+}
+
+.wb-lx-textItalic {
+  font-style: italic;
+}
+.wb-lx-textUnderline {
+  text-decoration: underline;
+}
+.wb-lx-textStrikethrough {
+  text-decoration: line-through;
+}
+.wb-lx-textUnderlineStrikethrough {
+  text-decoration: underline line-through;
+}
+
+.wb-lx-textSubscript {
+  font-size: 0.8em;
+  vertical-align: sub !important;
+}
+
+.wb-lx-textSuperscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
+
+.wb-lx-textCode {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
+.wb-lx-hashtag {
+  background-color: rgba(88, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+}
+.wb-lx-link {
+  color: var(--wb-theme-color1);
+  text-decoration: none;
+  > * {
+    color: inherit !important;
+  }
+}
+.wb-lx-link:hover {
+  text-decoration: underline;
+}
+.wb-lx-code {
+  background-color: rgb(240, 242, 245);
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 8px 0;
+  tab-size: 2;
+  /* white-space: pre; */
+  overflow-x: auto;
+  position: relative;
+}
+.wb-lx-code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: #eee;
+  left: 0;
+  top: 0;
+  border-right: 1px solid #ccc;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.wb-lx-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  max-width: 100%;
+  overflow-y: scroll;
+  table-layout: fixed;
+  width: calc(100% - 25px);
+  margin: 30px 0;
+}
+.wb-lx-tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.wb-lx-tableCell {
+  border: 1px solid #bbb;
+  min-width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  cursor: default;
+  outline: none;
+}
+.wb-lx-tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #999;
+}
+.wb-lx-tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.wb-lx-tableCellHeader {
+  background-color: #f2f3f5;
+  text-align: start;
+}
+.wb-lx-tableCellSelected {
+  background-color: #c9dbf0;
+}
+.wb-lx-tableCellPrimarySelected {
+  border: 2px solid rgb(60, 132, 244);
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+.wb-lx-tableCellEditing {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+}
+.wb-lx-tableAddColumns {
+  position: absolute;
+  top: 0;
+  width: 20px;
+  background-color: #eee;
+  height: 100%;
+  right: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+
+.wb-lx-tableAddColumns:hover {
+  background-color: #c9dbf0;
+}
+.wb-lx-tableAddRows {
+  position: absolute;
+  bottom: -25px;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  height: 20px;
+  left: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.wb-lx-tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.wb-lx-tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.wb-lx-tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.wb-lx-tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.wb-lx-tableCellActionButton:hover {
+  background-color: #ddd;
+}
+.wb-lx-characterLimit {
+  display: inline;
+  background-color: #ffbbbb !important;
+}
+.wb-lx-ol1 {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: inside;
+}
+.wb-lx-ol2 {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: upper-alpha inside;
+}
+.wb-lx-ol3 {
+  list-style: initial;
+  list-style: auto;
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style-type: lower-alpha;
+  list-style-position: inside;
+}
+.wb-lx-ol4 {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: upper-roman inside;
+}
+.wb-lx-ol5 {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: lower-roman inside;
+}
+.wb-lx-ul {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: inside;
+}
+.wb-lx-listItem {
+  margin: 0 32px;
+}
+.wb-lx-listItemChecked,
+.wb-lx-listItemUnchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+.wb-lx-listItemChecked {
+  text-decoration: line-through;
+}
+.wb-lx-listItemUnchecked:before,
+.wb-lx-listItemChecked:before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+.wb-lx-listItemUnchecked[dir="rtl"]:before,
+.wb-lx-listItemChecked[dir="rtl"]:before {
+  left: auto;
+  right: 0;
+}
+.wb-lx-listItemUnchecked:focus:before,
+.wb-lx-listItemChecked:focus:before {
+  box-shadow: 0 0 0 2px #a6cdfe;
+  border-radius: 2px;
+}
+.wb-lx-listItemUnchecked:before {
+  border: 1px solid #999;
+  border-radius: 2px;
+}
+.wb-lx-listItemChecked:before {
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 2px;
+  background-color: #3d87f5;
+  background-repeat: no-repeat;
+}
+.wb-lx-listItemChecked:after {
+  content: "";
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 6px;
+  width: 3px;
+  left: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+.wb-lx-nestedListItem {
+  list-style-type: none;
+}
+.wb-lx-nestedListItem:before,
+.wb-lx-nestedListItem:after {
+  display: none;
+}
+.wb-lx-tokenComment {
+  color: slategray;
+}
+.wb-lx-tokenPunctuation {
+  color: #999;
+}
+.wb-lx-tokenProperty {
+  color: #905;
+}
+.wb-lx-tokenSelector {
+  color: #690;
+}
+.wb-lx-tokenOperator {
+  color: #9a6e3a;
+}
+.wb-lx-tokenAttr {
+  color: #07a;
+}
+.wb-lx-tokenVariable {
+  color: #e90;
+}
+.wb-lx-tokenFunction {
+  color: #dd4a68;
+}
+.wb-lx-mark {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+}
+.wb-lx-markOverlap {
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.wb-lx-mark.selected {
+  background: rgba(255, 212, 0, 0.5);
+  border-bottom: 2px solid rgba(255, 212, 0, 1);
+}
+.wb-lx-markOverlap.selected {
+  background: rgba(255, 212, 0, 0.7);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.wb-lx-embedBlock {
+  user-select: none;
+}
+.wb-lx-embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}
+
+.wb-lx-placeholder {
+  text-align: left;
+}

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "@webiny/website-builder-nextjs",
-	"version": "0.0.0-unstable.e53eceafb5",
-	"main": "index.js",
+	"version": "0.0.0-unstable.e6f0dc8ca7",
+	"type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
 	},
 	"exports": {
-		".": "./index.js"
+		".": "./index.js",
+		"./webpack": "./webpack.js"
 	},
 	"description": "A Next.js integration SDK for Webiny Website Builder.",
 	"contributors": [
@@ -17,30 +18,32 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/website-builder-react": "0.0.0-unstable.e53eceafb5"
-	},
-	"peerDependencies": {
-		"next": "^15"
+		"@webiny/website-builder-react": "0.0.0-unstable.e6f0dc8ca7",
+		"postcss": "8.5.14",
+		"postcss-import": "16.1.1"
 	},
 	"devDependencies": {
-		"@webiny/project-utils": "0.0.0-unstable.e53eceafb5",
-		"typescript": "5.3.3"
+		"@types/postcss-import": "14.0.3",
+		"@webiny/build-tools": "0.0.0-unstable.e6f0dc8ca7",
+		"typescript": "6.0.3",
+		"vitest": "4.1.5",
+		"webpack": "5.106.2"
+	},
+	"peerDependencies": {
+		"next": "16.2.6"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "node ../cli/bin.js run build",
-		"watch": "node ../cli/bin.js run watch"
-	},
 	"adio": {
 		"ignore": {
 			"dependencies": [
-				"next",
+				"postcss",
+				"postcss-import",
 				"@webiny/website-builder-react"
 			]
 		}
 	},
-	"gitHead": "e53eceafb5ce1a3872c9b4548939bb2eae5b1aef"
+	"gitHead": "e6f0dc8ca741c1fcc3fec9a5b9e86fdd49544641"
 }

package/webpack.d.ts

@@ -0,0 +1,7 @@
+import type { WebpackPluginInstance } from "webpack";
+import type { NextConfig } from "next";
+type WebpackConfigContext = Parameters<NonNullable<NextConfig["webpack"]>>[1];
+export declare const injectThemeCss: (entry: string, variableName?: string) => Promise<{
+    getPlugins: (context: WebpackConfigContext) => WebpackPluginInstance[];
+}>;
+export {};

package/webpack.js

@@ -0,0 +1,56 @@
+import fs from "fs";
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+
+// We're inferring the type from Next's config type.
+
+const buildThemeCss = async entry => {
+  // Read CSS entry file.
+  const raw = fs.readFileSync(entry, "utf8");
+
+  // Inline local imports.
+  const result = await postcss([postcssImport()]).process(raw, {
+    from: entry
+  });
+  return result.css;
+};
+export const injectThemeCss = async (entry, variableName) => {
+  const defineKey = variableName ?? "__THEME_CSS__";
+  const initialCss = await buildThemeCss(entry);
+
+  // Inject as a global constant available in your app.
+  let definePlugin;
+  const getPlugins = context => {
+    const {
+      dev,
+      webpack
+    } = context;
+    if (!definePlugin) {
+      definePlugin = new webpack.DefinePlugin({
+        [defineKey]: JSON.stringify(initialCss)
+      });
+    }
+    const plugins = [definePlugin];
+    if (dev) {
+      // Watch for changes and update plugin definitions
+      plugins.push({
+        apply(compiler) {
+          compiler.hooks.afterCompile.tapPromise("WatchThemeCss", async compilation => {
+            compilation.fileDependencies.add(entry);
+          });
+          compiler.hooks.beforeCompile.tapPromise("UpdateThemeCss", async () => {
+            const cssValue = await buildThemeCss(entry);
+            // Update the definitions on our specific plugin
+            definePlugin.definitions[defineKey] = JSON.stringify(cssValue);
+          });
+        }
+      });
+    }
+    return plugins;
+  };
+  return {
+    getPlugins
+  };
+};
+
+//# sourceMappingURL=webpack.js.map

package/webpack.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fs","postcss","postcssImport","buildThemeCss","entry","raw","readFileSync","result","process","from","css","injectThemeCss","variableName","defineKey","initialCss","definePlugin","getPlugins","context","dev","webpack","DefinePlugin","JSON","stringify","plugins","push","apply","compiler","hooks","afterCompile","tapPromise","compilation","fileDependencies","add","beforeCompile","cssValue","definitions"],"sources":["webpack.ts"],"sourcesContent":["import fs from \"fs\";\nimport type { WebpackPluginInstance } from \"webpack\";\nimport type { AcceptedPlugin } from \"postcss\";\nimport postcss from \"postcss\";\nimport postcssImport from \"postcss-import\";\nimport type { NextConfig } from \"next\";\n\n// We're inferring the type from Next's config type.\ntype WebpackConfigContext = Parameters<NonNullable<NextConfig[\"webpack\"]>>[1];\n\nconst buildThemeCss = async (entry: string) => {\n    // Read CSS entry file.\n    const raw = fs.readFileSync(entry, \"utf8\");\n\n    // Inline local imports.\n    const result = await postcss([postcssImport() as AcceptedPlugin]).process(raw, {\n        from: entry\n    });\n\n    return result.css;\n};\n\nexport const injectThemeCss = async (entry: string, variableName?: string) => {\n    const defineKey = variableName ?? \"__THEME_CSS__\";\n\n    const initialCss = await buildThemeCss(entry);\n\n    // Inject as a global constant available in your app.\n    let definePlugin: WebpackPluginInstance;\n\n    const getPlugins = (context: WebpackConfigContext) => {\n        const { dev, webpack } = context;\n\n        if (!definePlugin) {\n            definePlugin = new webpack.DefinePlugin({ [defineKey]: JSON.stringify(initialCss) });\n        }\n\n        const plugins: WebpackPluginInstance[] = [definePlugin];\n\n        if (dev) {\n            // Watch for changes and update plugin definitions\n            plugins.push({\n                apply(compiler) {\n                    compiler.hooks.afterCompile.tapPromise(\"WatchThemeCss\", async compilation => {\n                        compilation.fileDependencies.add(entry);\n                    });\n\n                    compiler.hooks.beforeCompile.tapPromise(\"UpdateThemeCss\", async () => {\n                        const cssValue = await buildThemeCss(entry);\n                        // Update the definitions on our specific plugin\n                        definePlugin.definitions[defineKey] = JSON.stringify(cssValue);\n                    });\n                }\n            });\n        }\n\n        return plugins;\n    };\n\n    return { getPlugins };\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,IAAI;AAGnB,OAAOC,OAAO,MAAM,SAAS;AAC7B,OAAOC,aAAa,MAAM,gBAAgB;;AAG1C;;AAGA,MAAMC,aAAa,GAAG,MAAOC,KAAa,IAAK;EAC3C;EACA,MAAMC,GAAG,GAAGL,EAAE,CAACM,YAAY,CAACF,KAAK,EAAE,MAAM,CAAC;;EAE1C;EACA,MAAMG,MAAM,GAAG,MAAMN,OAAO,CAAC,CAACC,aAAa,CAAC,CAAC,CAAmB,CAAC,CAACM,OAAO,CAACH,GAAG,EAAE;IAC3EI,IAAI,EAAEL;EACV,CAAC,CAAC;EAEF,OAAOG,MAAM,CAACG,GAAG;AACrB,CAAC;AAED,OAAO,MAAMC,cAAc,GAAG,MAAAA,CAAOP,KAAa,EAAEQ,YAAqB,KAAK;EAC1E,MAAMC,SAAS,GAAGD,YAAY,IAAI,eAAe;EAEjD,MAAME,UAAU,GAAG,MAAMX,aAAa,CAACC,KAAK,CAAC;;EAE7C;EACA,IAAIW,YAAmC;EAEvC,MAAMC,UAAU,GAAIC,OAA6B,IAAK;IAClD,MAAM;MAAEC,GAAG;MAAEC;IAAQ,CAAC,GAAGF,OAAO;IAEhC,IAAI,CAACF,YAAY,EAAE;MACfA,YAAY,GAAG,IAAII,OAAO,CAACC,YAAY,CAAC;QAAE,CAACP,SAAS,GAAGQ,IAAI,CAACC,SAAS,CAACR,UAAU;MAAE,CAAC,CAAC;IACxF;IAEA,MAAMS,OAAgC,GAAG,CAACR,YAAY,CAAC;IAEvD,IAAIG,GAAG,EAAE;MACL;MACAK,OAAO,CAACC,IAAI,CAAC;QACTC,KAAKA,CAACC,QAAQ,EAAE;UACZA,QAAQ,CAACC,KAAK,CAACC,YAAY,CAACC,UAAU,CAAC,eAAe,EAAE,MAAMC,WAAW,IAAI;YACzEA,WAAW,CAACC,gBAAgB,CAACC,GAAG,CAAC5B,KAAK,CAAC;UAC3C,CAAC,CAAC;UAEFsB,QAAQ,CAACC,KAAK,CAACM,aAAa,CAACJ,UAAU,CAAC,gBAAgB,EAAE,YAAY;YAClE,MAAMK,QAAQ,GAAG,MAAM/B,aAAa,CAACC,KAAK,CAAC;YAC3C;YACAW,YAAY,CAACoB,WAAW,CAACtB,SAAS,CAAC,GAAGQ,IAAI,CAACC,SAAS,CAACY,QAAQ,CAAC;UAClE,CAAC,CAAC;QACN;MACJ,CAAC,CAAC;IACN;IAEA,OAAOX,OAAO;EAClB,CAAC;EAED,OAAO;IAAEP;EAAW,CAAC;AACzB,CAAC","ignoreList":[]}