@webiny/website-builder-react 6.0.0-alpha.4 → 6.0.0-rc.0

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

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

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

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

package/editorComponents/Image.js.map

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

package/editorComponents/Image.manifest.js

@@ -9,27 +9,28 @@ export const Image = createComponent(ImageComponent, {
   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: [createFileInput({
-    name: "image",
-    label: "Image",
-    allowedFileTypes: ["image/*"],
-    onChange: ({
-      inputs
-    }) => {
-      if (inputs.image) {
-        inputs.title = inputs.image.name;
-        inputs.altText = inputs.image.name;
+  inputs: {
+    image: createFileInput({
+      label: "Image",
+      allowedFileTypes: ["image/*"],
+      onChange: ({
+        inputs
+      }) => {
+        if (inputs.image) {
+          inputs.title = inputs.image.name;
+          inputs.altText = inputs.image.name;
+        }
       }
-    }
-  }), createTextInput({
-    name: "title",
-    label: "Title",
-    description: "Title of the image"
-  }), createTextInput({
-    name: "altText",
-    label: "Alternate Text",
-    description: "Shown when the user has disabled images"
-  })],
+    }),
+    title: createTextInput({
+      label: "Title",
+      description: "Title of the image"
+    }),
+    altText: createTextInput({
+      label: "Alternate Text",
+      description: "Shown when the user has disabled images"
+    })
+  },
   defaults: {
     styles: {
       width: "100%"

package/editorComponents/Image.manifest.js.map

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

package/editorComponents/Lexical.d.ts

@@ -2,12 +2,12 @@ import React from "react";
 import type { ComponentProps } from "../types.js";
 export declare const createLexicalValue: (value: string) => {
     state: string;
+    html: string;
 };
 type LexicalProps = ComponentProps<{
     content: {
-        state: string;
         html?: string;
     };
 }>;
-export declare const LexicalComponent: ({ inputs }: LexicalProps) => React.JSX.Element;
+export declare const LexicalComponent: ({ inputs }: LexicalProps) => React.JSX.Element | null;
 export {};

package/editorComponents/Lexical.js

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

package/editorComponents/Lexical.js.map

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

package/editorComponents/Root.manifest.d.ts

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

package/editorComponents/index.d.ts

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

package/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./components/index.js";
 export * from "./createComponent.js";
-export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, type WebsiteBuilderThemeInput, StyleSettings } from "@webiny/website-builder-sdk";
+export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, type CssProperties, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, type WebsiteBuilderThemeInput, StyleSettings } from "@webiny/website-builder-sdk";
 export type { ComponentProps, ComponentPropsWithChildren } from "./types.js";

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createTextInput","createLongTextInput","createNumberInput","createBooleanInput","createColorInput","createFileInput","createDateInput","createLexicalInput","createSelectInput","createRadioInput","createObjectInput","createTagsInput","createSlotInput","createInput","createElement","createTheme","contentSdk","environment","setHeadersProvider","getHeadersProvider","registerComponentGroup","StyleSettings"],"sources":["index.ts"],"sourcesContent":["export * from \"./components/index.js\";\nexport * from \"./createComponent.js\";\n\nexport {\n    createTextInput,\n    createLongTextInput,\n    createNumberInput,\n    createBooleanInput,\n    createColorInput,\n    createFileInput,\n    createDateInput,\n    createLexicalInput,\n    createSelectInput,\n    createRadioInput,\n    createObjectInput,\n    createTagsInput,\n    createSlotInput,\n    createInput,\n    createElement,\n    createTheme,\n    contentSdk,\n    environment,\n    setHeadersProvider,\n    getHeadersProvider,\n    registerComponentGroup,\n    type Document,\n    type DocumentElement,\n    type Breakpoint,\n    type CreateElementParams,\n    type ContentSDKConfig,\n    type ComponentManifest,\n    type ComponentInput,\n    type WebsiteBuilderThemeInput,\n    StyleSettings\n} from \"@webiny/website-builder-sdk\";\n\nexport type { ComponentProps, ComponentPropsWithChildren } from \"./types.js\";\n"],"mappings":"AAAA;AACA;AAEA,SACIA,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,kBAAkB,EAClBC,kBAAkB,EAClBC,sBAAsB,EAStBC,aAAa,QACV,6BAA6B","ignoreList":[]}
+{"version":3,"names":["createTextInput","createLongTextInput","createNumberInput","createBooleanInput","createColorInput","createFileInput","createDateInput","createLexicalInput","createSelectInput","createRadioInput","createObjectInput","createTagsInput","createSlotInput","createInput","createElement","createTheme","contentSdk","environment","setHeadersProvider","getHeadersProvider","registerComponentGroup","StyleSettings"],"sources":["index.ts"],"sourcesContent":["export * from \"./components/index.js\";\nexport * from \"./createComponent.js\";\n\nexport {\n    createTextInput,\n    createLongTextInput,\n    createNumberInput,\n    createBooleanInput,\n    createColorInput,\n    createFileInput,\n    createDateInput,\n    createLexicalInput,\n    createSelectInput,\n    createRadioInput,\n    createObjectInput,\n    createTagsInput,\n    createSlotInput,\n    createInput,\n    createElement,\n    createTheme,\n    contentSdk,\n    environment,\n    setHeadersProvider,\n    getHeadersProvider,\n    registerComponentGroup,\n    type CssProperties,\n    type Document,\n    type DocumentElement,\n    type Breakpoint,\n    type CreateElementParams,\n    type ContentSDKConfig,\n    type ComponentManifest,\n    type ComponentInput,\n    type WebsiteBuilderThemeInput,\n    StyleSettings\n} from \"@webiny/website-builder-sdk\";\n\nexport type { ComponentProps, ComponentPropsWithChildren } from \"./types.js\";\n"],"mappings":"AAAA;AACA;AAEA,SACIA,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,kBAAkB,EAClBC,kBAAkB,EAClBC,sBAAsB,EAUtBC,aAAa,QACV,6BAA6B","ignoreList":[]}

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@webiny/website-builder-react",
-	"version": "6.0.0-alpha.4",
+	"version": "6.0.0-rc.0",
+	"type": "module",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -17,26 +18,22 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/lexical-editor": "6.0.0-alpha.4",
-		"@webiny/website-builder-sdk": "6.0.0-alpha.4",
+		"@webiny/website-builder-sdk": "6.0.0-rc.0",
 		"deep-equal": "2.2.3",
-		"mobx": "6.9.0",
+		"mobx": "6.15.0",
 		"mobx-react-lite": "3.4.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
 		"@types/react": "18.2.79",
-		"@webiny/project-utils": "6.0.0-alpha.4",
-		"typescript": "5.3.3"
+		"@webiny/build-tools": "6.0.0-rc.0",
+		"typescript": "5.9.3",
+		"vitest": "4.0.18"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "node ../cli/bin.js run build",
-		"watch": "node ../cli/bin.js run watch"
-	},
-	"gitHead": "eb196ccd2f32296e10f7add6dd7220d4e3abece4"
+	"gitHead": "0f2aa699f4642e550ab62c96fcd050e8d02345c9"
 }

package/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CssProperties, DocumentElement } from "@webiny/website-builder-sdk";
 export type ComponentProps<TInputs = unknown> = {
     inputs: TInputs;
@@ -9,3 +8,7 @@ export type ComponentProps<TInputs = unknown> = {
 export type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<TInputs & {
     children: React.ReactNode;
 }>;
+export type ExtractInputs<T> = T extends {
+    inputs: infer I;
+} ? I : never;
+export type ExtractInputNames<T extends (props: any) => any> = keyof ExtractInputs<Parameters<T>[0]>;

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { CssProperties, DocumentElement } from \"@webiny/website-builder-sdk\";\n\nexport type ComponentProps<TInputs = unknown> = {\n    inputs: TInputs;\n    styles: CssProperties;\n    element: DocumentElement;\n    breakpoint: string;\n};\n\nexport type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<\n    TInputs & { children: React.ReactNode }\n>;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { CssProperties, DocumentElement } from \"@webiny/website-builder-sdk\";\n\nexport type ComponentProps<TInputs = unknown> = {\n    inputs: TInputs;\n    styles: CssProperties;\n    element: DocumentElement;\n    breakpoint: string;\n};\n\nexport type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<\n    TInputs & { children: React.ReactNode }\n>;\n\nexport type ExtractInputs<T> = T extends { inputs: infer I } ? I : never;\n\nexport type ExtractInputNames<T extends (props: any) => any> = keyof ExtractInputs<\n    Parameters<T>[0]\n>;\n"],"mappings":"","ignoreList":[]}