@webiny/website-builder-react 0.0.0-unstable.f9f12f52a0 → 5.45.0-beta.0

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.d.ts

@@ -1 +1 @@
-export declare const useDocumentState: () => import("@webiny/website-builder-sdk").DocumentState;
+export declare const useDocumentState: () => import("@webiny/website-builder-sdk/types.js").DocumentState;

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/components/useSelectFromState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Equals<T> = (a: T, b: T) => boolean;
 /**
  * Subscribe to part of the document state.

package/createComponent.d.ts

@@ -1,2 +1,3 @@
-import type { Component, ComponentManifest } from "@webiny/website-builder-sdk";
-export declare const createComponent: (component: React.ComponentType<any>, manifest: ComponentManifest) => Component;
+import type { Component, ComponentManifestInput } from "@webiny/website-builder-sdk";
+import type { ExtractInputs } from "./types.js";
+export declare function createComponent<TComponent extends (props: any) => any, TInputs extends ExtractInputs<Parameters<TComponent>[0]>>(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component;

package/createComponent.js

@@ -1,16 +1,36 @@
 import { createSlotInput } from "@webiny/website-builder-sdk";
-export const createComponent = (component, manifest) => {
+export function createComponent(component, manifest) {
+  const inputs = [];
+
+  // Normalize inputs to always be an array of objects.
+
+  if (Array.isArray(manifest.inputs)) {
+    inputs.push(...manifest.inputs);
+  } else {
+    const inputsObject = manifest.inputs ?? {};
+    Object.keys(inputsObject).forEach(name => {
+      inputs.push({
+        ...inputsObject[name],
+        name
+      });
+    });
+  }
   const acceptsChildren = manifest.acceptsChildren;
   if (acceptsChildren) {
-    manifest.inputs = [...(manifest.inputs ?? []), createSlotInput({
-      name: "children",
-      defaultValue: []
-    })];
+    const hasChildren = inputs.some(input => input.name === "children");
+    if (!hasChildren) {
+      inputs.push(createSlotInput({
+        name: "children"
+      }));
+    }
   }
   return {
     component,
-    manifest
+    manifest: {
+      ...manifest,
+      inputs
+    }
   };
-};
+}
 
 //# sourceMappingURL=createComponent.js.map

package/createComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["createSlotInput","createComponent","component","manifest","acceptsChildren","inputs","name","defaultValue"],"sources":["createComponent.ts"],"sourcesContent":["import type { Component, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\n\nexport const createComponent = (\n    component: React.ComponentType<any>,\n    manifest: ComponentManifest\n): Component => {\n    const acceptsChildren = manifest.acceptsChildren;\n    if (acceptsChildren) {\n        manifest.inputs = [\n            ...(manifest.inputs ?? []),\n            createSlotInput({\n                name: \"children\",\n                defaultValue: []\n            })\n        ];\n    }\n\n    return {\n        component,\n        manifest\n    };\n};\n"],"mappings":"AACA,SAASA,eAAe,QAAQ,6BAA6B;AAE7D,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,SAAmC,EACnCC,QAA2B,KACf;EACZ,MAAMC,eAAe,GAAGD,QAAQ,CAACC,eAAe;EAChD,IAAIA,eAAe,EAAE;IACjBD,QAAQ,CAACE,MAAM,GAAG,CACd,IAAIF,QAAQ,CAACE,MAAM,IAAI,EAAE,CAAC,EAC1BL,eAAe,CAAC;MACZM,IAAI,EAAE,UAAU;MAChBC,YAAY,EAAE;IAClB,CAAC,CAAC,CACL;EACL;EAEA,OAAO;IACHL,SAAS;IACTC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["createSlotInput","createComponent","component","manifest","inputs","Array","isArray","push","inputsObject","Object","keys","forEach","name","acceptsChildren","hasChildren","some","input"],"sources":["createComponent.ts"],"sourcesContent":["import type {\n    Component,\n    ComponentInput,\n    ComponentManifestInput,\n    InputFactory\n} from \"@webiny/website-builder-sdk\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\nimport type { ExtractInputs } from \"~/types.js\";\n\nexport function createComponent<\n    TComponent extends (props: any) => any,\n    TInputs extends ExtractInputs<Parameters<TComponent>[0]>\n>(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component {\n    const inputs: ComponentInput[] = [];\n\n    // Normalize inputs to always be an array of objects.\n\n    if (Array.isArray(manifest.inputs)) {\n        inputs.push(...manifest.inputs);\n    } else {\n        const inputsObject: Record<string, InputFactory<any>> = manifest.inputs ?? {};\n        Object.keys(inputsObject).forEach((name: string) => {\n            inputs.push({ ...inputsObject[name], name });\n        });\n    }\n\n    const acceptsChildren = manifest.acceptsChildren;\n\n    if (acceptsChildren) {\n        const hasChildren = inputs.some(input => input.name === \"children\");\n        if (!hasChildren) {\n            inputs.push(createSlotInput({ name: \"children\" }));\n        }\n    }\n\n    return { component, manifest: { ...manifest, inputs } };\n}\n"],"mappings":"AAMA,SAASA,eAAe,QAAQ,6BAA6B;AAG7D,OAAO,SAASC,eAAeA,CAG7BC,SAAqB,EAAEC,QAAyC,EAAa;EAC3E,MAAMC,MAAwB,GAAG,EAAE;;EAEnC;;EAEA,IAAIC,KAAK,CAACC,OAAO,CAACH,QAAQ,CAACC,MAAM,CAAC,EAAE;IAChCA,MAAM,CAACG,IAAI,CAAC,GAAGJ,QAAQ,CAACC,MAAM,CAAC;EACnC,CAAC,MAAM;IACH,MAAMI,YAA+C,GAAGL,QAAQ,CAACC,MAAM,IAAI,CAAC,CAAC;IAC7EK,MAAM,CAACC,IAAI,CAACF,YAAY,CAAC,CAACG,OAAO,CAAEC,IAAY,IAAK;MAChDR,MAAM,CAACG,IAAI,CAAC;QAAE,GAAGC,YAAY,CAACI,IAAI,CAAC;QAAEA;MAAK,CAAC,CAAC;IAChD,CAAC,CAAC;EACN;EAEA,MAAMC,eAAe,GAAGV,QAAQ,CAACU,eAAe;EAEhD,IAAIA,eAAe,EAAE;IACjB,MAAMC,WAAW,GAAGV,MAAM,CAACW,IAAI,CAACC,KAAK,IAAIA,KAAK,CAACJ,IAAI,KAAK,UAAU,CAAC;IACnE,IAAI,CAACE,WAAW,EAAE;MACdV,MAAM,CAACG,IAAI,CAACP,eAAe,CAAC;QAAEY,IAAI,EAAE;MAAW,CAAC,CAAC,CAAC;IACtD;EACJ;EAEA,OAAO;IAAEV,SAAS;IAAEC,QAAQ,EAAE;MAAE,GAAGA,QAAQ;MAAEC;IAAO;EAAE,CAAC;AAC3D","ignoreList":[]}

package/createComponent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/createComponent.test.js

@@ -0,0 +1,129 @@
+import { describe, expect, it } from "vitest";
+import { createComponent } from "./createComponent.js";
+import { createTextInput } from "./index.js";
+import { createSlotInput } from "@webiny/website-builder-sdk";
+
+/**
+ * These tests are aimed at testing TS types rather than functionality itself.
+ * // TODO: figure out how to enable typechecking for a single test. Currently it only typechecks at build time.
+ */
+
+describe("Component Manifest", () => {
+  it("should support input arrays and strict input objects", () => {
+    // eslint-disable-next-line
+    const Button = _ => {
+      return null;
+    };
+    const button1 = createComponent(Button, {
+      name: "Button",
+      inputs: [
+      // Passing a generic narrows down the `name` property and provides autocomplete.
+      createTextInput({
+        name: "title",
+        label: "Title"
+      }),
+      // Skipping the generic still performs typechecks, but doesn't provide autocomplete.
+      createSlotInput({
+        name: "children"
+      })]
+    });
+    const button2 = createComponent(Button, {
+      name: "Button",
+      inputs: {
+        title: createTextInput({
+          label: "Title"
+        }),
+        children: createSlotInput({})
+      }
+    });
+    const snapshot = {
+      name: "Button",
+      inputs: [{
+        type: "text",
+        label: "Title",
+        renderer: "Webiny/Input",
+        name: "title"
+      }, {
+        type: "slot",
+        renderer: "Webiny/Slot",
+        name: "children",
+        list: true,
+        defaultValue: []
+      }]
+    };
+    expect(button1.manifest).toEqual(snapshot);
+    expect(button2.manifest).toEqual(snapshot);
+  });
+  it("acceptsChildren should satisfy the `children` input requirement", () => {
+    // eslint-disable-next-line
+    const Button = _ => {
+      return null;
+    };
+    const {
+      manifest
+    } = createComponent(Button, {
+      name: "Button",
+      acceptsChildren: true
+    });
+    expect(manifest).toEqual({
+      name: "Button",
+      acceptsChildren: true,
+      inputs: [{
+        type: "slot",
+        list: true,
+        renderer: "Webiny/Slot",
+        name: "children",
+        defaultValue: []
+      }]
+    });
+  });
+  it("`acceptsChildren` should work alongside other inputs", () => {
+    // eslint-disable-next-line
+    const Button = _ => {
+      return null;
+    };
+
+    // Inputs as array
+    const button1 = createComponent(Button, {
+      name: "Button",
+      acceptsChildren: true,
+      inputs: [createTextInput({
+        name: "title",
+        label: "Title"
+      })]
+    });
+
+    // Inputs as object
+    const button2 = createComponent(Button, {
+      name: "Button",
+      acceptsChildren: true,
+      inputs: {
+        title: createTextInput({
+          label: "Title"
+        })
+      }
+    });
+
+    // Both must produce the same component manifest
+    const snapshot = {
+      name: "Button",
+      acceptsChildren: true,
+      inputs: [{
+        type: "text",
+        renderer: "Webiny/Input",
+        name: "title",
+        label: "Title"
+      }, {
+        type: "slot",
+        renderer: "Webiny/Slot",
+        name: "children",
+        list: true,
+        defaultValue: []
+      }]
+    };
+    expect(button1.manifest).toEqual(snapshot);
+    expect(button2.manifest).toEqual(snapshot);
+  });
+});
+
+//# sourceMappingURL=createComponent.test.js.map

package/createComponent.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","expect","it","createComponent","createTextInput","createSlotInput","Button","_","button1","name","inputs","label","button2","title","children","snapshot","type","renderer","list","defaultValue","manifest","toEqual","acceptsChildren"],"sources":["createComponent.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport type { ComponentProps, ExtractInputNames } from \"~/types.js\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { createTextInput } from \"~/index.js\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\n\n/**\n * These tests are aimed at testing TS types rather than functionality itself.\n * // TODO: figure out how to enable typechecking for a single test. Currently it only typechecks at build time.\n */\n\ndescribe(\"Component Manifest\", () => {\n    it(\"should support input arrays and strict input objects\", () => {\n        // eslint-disable-next-line\n        const Button = (_: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n            return null;\n        };\n\n        type Inputs = ExtractInputNames<typeof Button>;\n\n        const button1 = createComponent(Button, {\n            name: \"Button\",\n            inputs: [\n                // Passing a generic narrows down the `name` property and provides autocomplete.\n                createTextInput<Inputs>({\n                    name: \"title\",\n                    label: \"Title\"\n                }),\n                // Skipping the generic still performs typechecks, but doesn't provide autocomplete.\n                createSlotInput({\n                    name: \"children\"\n                })\n            ]\n        });\n\n        const button2 = createComponent(Button, {\n            name: \"Button\",\n            inputs: {\n                title: createTextInput({\n                    label: \"Title\"\n                }),\n                children: createSlotInput({})\n            }\n        });\n\n        const snapshot = {\n            name: \"Button\",\n            inputs: [\n                {\n                    type: \"text\",\n                    label: \"Title\",\n                    renderer: \"Webiny/Input\",\n                    name: \"title\"\n                },\n                {\n                    type: \"slot\",\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    list: true,\n                    defaultValue: []\n                }\n            ]\n        };\n\n        expect(button1.manifest).toEqual(snapshot);\n        expect(button2.manifest).toEqual(snapshot);\n    });\n\n    it(\"acceptsChildren should satisfy the `children` input requirement\", () => {\n        // eslint-disable-next-line\n        const Button = (_: ComponentProps<{ children: React.ReactNode }>) => {\n            return null;\n        };\n\n        const { manifest } = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true\n        });\n\n        expect(manifest).toEqual({\n            name: \"Button\",\n            acceptsChildren: true,\n            inputs: [\n                {\n                    type: \"slot\",\n                    list: true,\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    defaultValue: []\n                }\n            ]\n        });\n    });\n\n    it(\"`acceptsChildren` should work alongside other inputs\", () => {\n        // eslint-disable-next-line\n        const Button = (_: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n            return null;\n        };\n\n        // Inputs as array\n        const button1 = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true,\n            inputs: [\n                createTextInput({\n                    name: \"title\",\n                    label: \"Title\"\n                })\n            ]\n        });\n\n        // Inputs as object\n        const button2 = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true,\n            inputs: {\n                title: createTextInput({\n                    label: \"Title\"\n                })\n            }\n        });\n\n        // Both must produce the same component manifest\n        const snapshot = {\n            name: \"Button\",\n            acceptsChildren: true,\n            inputs: [\n                {\n                    type: \"text\",\n                    renderer: \"Webiny/Input\",\n                    name: \"title\",\n                    label: \"Title\"\n                },\n                {\n                    type: \"slot\",\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    list: true,\n                    defaultValue: []\n                }\n            ]\n        };\n\n        expect(button1.manifest).toEqual(snapshot);\n        expect(button2.manifest).toEqual(snapshot);\n    });\n});\n"],"mappings":"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","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.d.ts

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

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,7 +1,7 @@
 import React from "react";
-import type { ComponentProps } from "../types";
+import type { ComponentProps } from "../types.js";
 type FragmentComponentProps = ComponentProps<{
     name: string;
 }>;
-export declare const FragmentComponent: ({ inputs }: FragmentComponentProps) => React.JSX.Element;
+export declare const FragmentComponent: ({ inputs }: FragmentComponentProps) => React.JSX.Element | null;
 export {};

package/editorComponents/Fragment.js

@@ -1,18 +1,24 @@
 import React from "react";
-import { useDocumentFragments } from "../components/FragmentsProvider";
 import { contentSdk } from "@webiny/website-builder-sdk";
+import { useDocumentFragments } from "../components/FragmentsProvider.js";
+const findFixedFragmentByName = (fragments, name) => {
+  return fragments.filter(fragment => fragment.type === "fixed").find(fragment => fragment.name === name);
+};
 export const FragmentComponent = ({
   inputs
 }) => {
   const isEditing = contentSdk.isEditing();
   const fragments = useDocumentFragments();
-  const element = fragments[inputs.name] ?? null;
-  if (!element && isEditing) {
+  const fragment = findFixedFragmentByName(fragments, inputs.name);
+  if (!fragment && isEditing) {
     return /*#__PURE__*/React.createElement(FragmentPlaceholder, {
       name: inputs.name
     });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, element);
+  if (fragment) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, fragment.element);
+  }
+  return null;
 };
 const FragmentPlaceholder = ({
   name

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","findFixedFragmentByName","fragments","name","filter","fragment","type","find","FragmentComponent","inputs","isEditing","createElement","FragmentPlaceholder","Fragment","element","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\";\nimport type { DocumentFragments } from \"~/components/FragmentsProvider.js\";\n\ntype FragmentComponentProps = ComponentProps<{\n    name: string;\n}>;\n\nconst findFixedFragmentByName = (fragments: DocumentFragments, name: string) => {\n    return fragments\n        .filter(fragment => fragment.type === \"fixed\")\n        .find(fragment => fragment.name === name);\n};\n\nexport const FragmentComponent = ({ inputs }: FragmentComponentProps) => {\n    const isEditing = contentSdk.isEditing();\n    const fragments = useDocumentFragments();\n    const fragment = findFixedFragmentByName(fragments, inputs.name);\n\n    if (!fragment && isEditing) {\n        return <FragmentPlaceholder name={inputs.name} />;\n    }\n\n    if (fragment) {\n        return <>{fragment.element}</>;\n    }\n\n    return null;\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;AAQ7B,MAAMC,uBAAuB,GAAGA,CAACC,SAA4B,EAAEC,IAAY,KAAK;EAC5E,OAAOD,SAAS,CACXE,MAAM,CAACC,QAAQ,IAAIA,QAAQ,CAACC,IAAI,KAAK,OAAO,CAAC,CAC7CC,IAAI,CAACF,QAAQ,IAAIA,QAAQ,CAACF,IAAI,KAAKA,IAAI,CAAC;AACjD,CAAC;AAED,OAAO,MAAMK,iBAAiB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EACrE,MAAMC,SAAS,GAAGX,UAAU,CAACW,SAAS,CAAC,CAAC;EACxC,MAAMR,SAAS,GAAGF,oBAAoB,CAAC,CAAC;EACxC,MAAMK,QAAQ,GAAGJ,uBAAuB,CAACC,SAAS,EAAEO,MAAM,CAACN,IAAI,CAAC;EAEhE,IAAI,CAACE,QAAQ,IAAIK,SAAS,EAAE;IACxB,oBAAOZ,KAAA,CAAAa,aAAA,CAACC,mBAAmB;MAACT,IAAI,EAAEM,MAAM,CAACN;IAAK,CAAE,CAAC;EACrD;EAEA,IAAIE,QAAQ,EAAE;IACV,oBAAOP,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QAAGR,QAAQ,CAACS,OAAU,CAAC;EAClC;EAEA,OAAO,IAAI;AACf,CAAC;AAED,MAAMF,mBAAmB,GAAGA,CAAC;EAAET;AAAuB,CAAC,KAAK;EACxD,MAAMY,YAAY,GAAGZ,IAAI,gBACrBL,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QAAE,MACQ,eAAAf,KAAA,CAAAa,aAAA,iBAASR,IAAa,CAAC,QAC/B,CAAC,gBAEHL,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QAAE,MAAQ,CACb;EACD,oBACIf,KAAA,CAAAa,aAAA;IACIK,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;
@@ -9,6 +9,7 @@ export interface Column {
 type GridProps = ComponentProps<{
     gridLayout: string;
     rowCount: number;
+    rowGap: number;
     columnGap: number;
     columns: Column[];
     stackAtBreakpoint?: string;

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    rowGap: 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;AAgBD,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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface Column {
     children: React.ReactNode;
 }

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":"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","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,6 +1,6 @@
 import React from "react";
-import type { ComponentPropsWithChildren } from "../types";
-type ImageProps = ComponentPropsWithChildren<{
+import type { ComponentProps } from "../types.js";
+type ImageProps = ComponentProps<{
     title: string;
     altText: string;
     image: {