@webiny/website-builder-react 0.0.0-unstable.06b2ede40f → 0.0.0-unstable.0d717d18dd

package/components/useBindingsForElement.js

@@ -1,19 +1,21 @@
 import { toJS } from "mobx";
 import { BindingsProcessor } from "@webiny/website-builder-sdk";
-import { useViewport } from "./useViewportInfo";
-import { useDocumentStore } from "./DocumentStoreProvider";
-import { useSelectFromState } from "./useSelectFromState";
-export const useBindingsForElement = (elementId, breakpoint) => {
-  const documentStore = useDocumentStore();
-  const viewport = useViewport();
-  return useSelectFromState(() => documentStore.getDocument(), document => {
-    const bindings = toJS(document.bindings[elementId]) ?? {};
-    const breakpoints = viewport.breakpoints.map(bp => bp.name);
-
-    // Merge element bindings.
-    const bindingsProcessor = new BindingsProcessor(breakpoints);
-    return bindingsProcessor.getBindings(bindings, breakpoint);
-  }, [elementId, breakpoint]);
+import { useViewport } from "./useViewportInfo.js";
+import { useDocumentStore } from "./DocumentStoreProvider.js";
+import { useSelectFromState } from "./useSelectFromState.js";
+const useBindingsForElement = (elementId, breakpoint)=>{
+    const documentStore = useDocumentStore();
+    const viewport = useViewport();
+    return useSelectFromState(()=>documentStore.getDocument(), (document)=>{
+        const bindings = toJS(document.bindings[elementId]) ?? {};
+        const breakpoints = viewport.breakpoints.map((bp)=>bp.name);
+        const bindingsProcessor = new BindingsProcessor(breakpoints);
+        return bindingsProcessor.getBindings(bindings, breakpoint);
+    }, [
+        elementId,
+        breakpoint
+    ]);
 };
+export { useBindingsForElement };
 
 //# sourceMappingURL=useBindingsForElement.js.map

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,"file":"components/useBindingsForElement.js","sources":["../../src/components/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"],"names":["useBindingsForElement","elementId","breakpoint","documentStore","useDocumentStore","viewport","useViewport","useSelectFromState","document","bindings","toJS","breakpoints","bp","bindingsProcessor","BindingsProcessor"],"mappings":";;;;;AAMO,MAAMA,wBAAwB,CAACC,WAAmBC;IACrD,MAAMC,gBAAgBC;IACtB,MAAMC,WAAWC;IAEjB,OAAOC,mBACH,IAAMJ,cAAc,WAAW,IAC/BK,CAAAA;QACI,MAAMC,WAAWC,KAAKF,SAAS,QAAQ,CAACP,UAAU,KAAK,CAAC;QACxD,MAAMU,cAAcN,SAAS,WAAW,CAAC,GAAG,CAACO,CAAAA,KAAMA,GAAG,IAAI;QAG1D,MAAMC,oBAAoB,IAAIC,kBAAkBH;QAEhD,OAAOE,kBAAkB,WAAW,CAACJ,UAAUP;IACnD,GACA;QAACD;QAAWC;KAAW;AAE/B"}

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,8 +1,9 @@
-import { useDocumentStore } from "./DocumentStoreProvider";
-import { useSelectFromState } from "./useSelectFromState";
-export const useDocumentState = () => {
-  const documentStore = useDocumentStore();
-  return useSelectFromState(() => documentStore.getDocument(), document => document.state ?? {});
+import { useDocumentStore } from "./DocumentStoreProvider.js";
+import { useSelectFromState } from "./useSelectFromState.js";
+const useDocumentState = ()=>{
+    const documentStore = useDocumentStore();
+    return useSelectFromState(()=>documentStore.getDocument(), (document)=>document.state ?? {});
 };
+export { useDocumentState };
 
 //# sourceMappingURL=useDocumentState.js.map

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,"file":"components/useDocumentState.js","sources":["../../src/components/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"],"names":["useDocumentState","documentStore","useDocumentStore","useSelectFromState","document"],"mappings":";;AAGO,MAAMA,mBAAmB;IAC5B,MAAMC,gBAAgBC;IACtB,OAAOC,mBACH,IAAMF,cAAc,WAAW,IAC/BG,CAAAA,WAAYA,SAAS,KAAK,IAAI,CAAC;AAEvC"}

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

@@ -1,39 +1,33 @@
-import deepEqual from "deep-equal";
-import { useState, useEffect, useMemo } from "react";
+import deep_equal from "deep-equal";
+import { useEffect, useMemo, useState } from "react";
 import { reaction } from "mobx";
-/**
- * Subscribe to part of the document state.
- * @param selector   Pick the slice of state you care about.
- * @param equals     (optional) comparator, defaults to Object.is
- */
-export function useSelectFromState(getState, selector, deps = [], equals = deepEqual) {
-  // Pull the initial slice synchronously
-  const initialValue = useMemo(() => selector(getState()), deps);
-  const [value, setValue] = useState(initialValue);
-  useEffect(() => {
-    setValue(selector(getState())); // reset state on dep change
-  }, deps);
-  useEffect(() => {
-    // reaction tracks selector(doc) and only fires when newVal !== oldVal
-    const disposer = reaction(() => {
-      const state = getState();
-      return selector(state);
-    }, (newValue, oldValue) => {
-      if (!equals(oldValue, newValue)) {
-        setValue(newValue);
-      }
-    }, {
-      // use your comparator to decide if newValue “really” changed
-      equals,
-      // we already set initial via useState
-      fireImmediately: false
-    });
-    return () => {
-      // clean up when the component unmounts
-      disposer();
-    };
-  }, [getState, selector, equals, ...deps]);
-  return value;
+function useSelectFromState(getState, selector, deps = [], equals = deep_equal) {
+    const initialValue = useMemo(()=>selector(getState()), deps);
+    const [value, setValue] = useState(initialValue);
+    useEffect(()=>{
+        setValue(selector(getState()));
+    }, deps);
+    useEffect(()=>{
+        const disposer = reaction(()=>{
+            const state = getState();
+            return selector(state);
+        }, (newValue, oldValue)=>{
+            if (!equals(oldValue, newValue)) setValue(newValue);
+        }, {
+            equals,
+            fireImmediately: false
+        });
+        return ()=>{
+            disposer();
+        };
+    }, [
+        getState,
+        selector,
+        equals,
+        ...deps
+    ]);
+    return value;
 }
+export { useSelectFromState };
 
 //# sourceMappingURL=useSelectFromState.js.map

package/components/useSelectFromState.js.map

@@ -1 +1 @@
-{"version":3,"names":["deepEqual","useState","useEffect","useMemo","reaction","useSelectFromState","getState","selector","deps","equals","initialValue","value","setValue","disposer","state","newValue","oldValue","fireImmediately"],"sources":["useSelectFromState.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport type { IReactionDisposer } from \"mobx\";\nimport { reaction } from \"mobx\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromState<TState, T>(\n    getState: () => TState,\n    selector: (doc: TState) => T,\n    deps: React.DependencyList = [],\n    equals: Equals<T> = deepEqual\n): T {\n    // Pull the initial slice synchronously\n    const initialValue = useMemo(() => selector(getState()), deps);\n    const [value, setValue] = useState<T>(initialValue);\n\n    useEffect(() => {\n        setValue(selector(getState())); // reset state on dep change\n    }, deps);\n\n    useEffect(() => {\n        // reaction tracks selector(doc) and only fires when newVal !== oldVal\n        const disposer: IReactionDisposer = reaction(\n            () => {\n                const state = getState();\n\n                return selector(state);\n            },\n            (newValue, oldValue) => {\n                if (!equals(oldValue, newValue)) {\n                    setValue(newValue);\n                }\n            },\n            {\n                // use your comparator to decide if newValue “really” changed\n                equals,\n                // we already set initial via useState\n                fireImmediately: false\n            }\n        );\n\n        return () => {\n            // clean up when the component unmounts\n            disposer();\n        };\n    }, [getState, selector, equals, ...deps]);\n\n    return value;\n}\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAEpD,SAASC,QAAQ,QAAQ,MAAM;AAI/B;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAC9BC,QAAsB,EACtBC,QAA4B,EAC5BC,IAA0B,GAAG,EAAE,EAC/BC,MAAiB,GAAGT,SAAS,EAC5B;EACD;EACA,MAAMU,YAAY,GAAGP,OAAO,CAAC,MAAMI,QAAQ,CAACD,QAAQ,CAAC,CAAC,CAAC,EAAEE,IAAI,CAAC;EAC9D,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAAIS,YAAY,CAAC;EAEnDR,SAAS,CAAC,MAAM;IACZU,QAAQ,CAACL,QAAQ,CAACD,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EACpC,CAAC,EAAEE,IAAI,CAAC;EAERN,SAAS,CAAC,MAAM;IACZ;IACA,MAAMW,QAA2B,GAAGT,QAAQ,CACxC,MAAM;MACF,MAAMU,KAAK,GAAGR,QAAQ,CAAC,CAAC;MAExB,OAAOC,QAAQ,CAACO,KAAK,CAAC;IAC1B,CAAC,EACD,CAACC,QAAQ,EAAEC,QAAQ,KAAK;MACpB,IAAI,CAACP,MAAM,CAACO,QAAQ,EAAED,QAAQ,CAAC,EAAE;QAC7BH,QAAQ,CAACG,QAAQ,CAAC;MACtB;IACJ,CAAC,EACD;MACI;MACAN,MAAM;MACN;MACAQ,eAAe,EAAE;IACrB,CACJ,CAAC;IAED,OAAO,MAAM;MACT;MACAJ,QAAQ,CAAC,CAAC;IACd,CAAC;EACL,CAAC,EAAE,CAACP,QAAQ,EAAEC,QAAQ,EAAEE,MAAM,EAAE,GAAGD,IAAI,CAAC,CAAC;EAEzC,OAAOG,KAAK;AAChB","ignoreList":[]}
+{"version":3,"file":"components/useSelectFromState.js","sources":["../../src/components/useSelectFromState.ts"],"sourcesContent":["import deepEqual from \"deep-equal\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport type { IReactionDisposer } from \"mobx\";\nimport { reaction } from \"mobx\";\n\ntype Equals<T> = (a: T, b: T) => boolean;\n\n/**\n * Subscribe to part of the document state.\n * @param selector   Pick the slice of state you care about.\n * @param equals     (optional) comparator, defaults to Object.is\n */\nexport function useSelectFromState<TState, T>(\n    getState: () => TState,\n    selector: (doc: TState) => T,\n    deps: React.DependencyList = [],\n    equals: Equals<T> = deepEqual\n): T {\n    // Pull the initial slice synchronously\n    const initialValue = useMemo(() => selector(getState()), deps);\n    const [value, setValue] = useState<T>(initialValue);\n\n    useEffect(() => {\n        setValue(selector(getState())); // reset state on dep change\n    }, deps);\n\n    useEffect(() => {\n        // reaction tracks selector(doc) and only fires when newVal !== oldVal\n        const disposer: IReactionDisposer = reaction(\n            () => {\n                const state = getState();\n\n                return selector(state);\n            },\n            (newValue, oldValue) => {\n                if (!equals(oldValue, newValue)) {\n                    setValue(newValue);\n                }\n            },\n            {\n                // use your comparator to decide if newValue “really” changed\n                equals,\n                // we already set initial via useState\n                fireImmediately: false\n            }\n        );\n\n        return () => {\n            // clean up when the component unmounts\n            disposer();\n        };\n    }, [getState, selector, equals, ...deps]);\n\n    return value;\n}\n"],"names":["useSelectFromState","getState","selector","deps","equals","deepEqual","initialValue","useMemo","value","setValue","useState","useEffect","disposer","reaction","state","newValue","oldValue"],"mappings":";;;AAYO,SAASA,mBACZC,QAAsB,EACtBC,QAA4B,EAC5BC,OAA6B,EAAE,EAC/BC,SAAoBC,UAAS;IAG7B,MAAMC,eAAeC,QAAQ,IAAML,SAASD,aAAaE;IACzD,MAAM,CAACK,OAAOC,SAAS,GAAGC,SAAYJ;IAEtCK,UAAU;QACNF,SAASP,SAASD;IACtB,GAAGE;IAEHQ,UAAU;QAEN,MAAMC,WAA8BC,SAChC;YACI,MAAMC,QAAQb;YAEd,OAAOC,SAASY;QACpB,GACA,CAACC,UAAUC;YACP,IAAI,CAACZ,OAAOY,UAAUD,WAClBN,SAASM;QAEjB,GACA;YAEIX;YAEA,iBAAiB;QACrB;QAGJ,OAAO;YAEHQ;QACJ;IACJ,GAAG;QAACX;QAAUC;QAAUE;WAAWD;KAAK;IAExC,OAAOK;AACX"}

package/components/useViewportInfo.js

@@ -1,11 +1,10 @@
 import { useEffect, useState } from "react";
 import { viewportManager } from "@webiny/website-builder-sdk";
-export const useViewport = () => {
-  const [viewport, setViewport] = useState(viewportManager.getViewport());
-  useEffect(() => {
-    return viewportManager.onViewportChangeEnd(setViewport);
-  }, []);
-  return viewport;
+const useViewport = ()=>{
+    const [viewport, setViewport] = useState(viewportManager.getViewport());
+    useEffect(()=>viewportManager.onViewportChangeEnd(setViewport), []);
+    return viewport;
 };
+export { useViewport };
 
 //# sourceMappingURL=useViewportInfo.js.map

package/components/useViewportInfo.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useState","viewportManager","useViewport","viewport","setViewport","getViewport","onViewportChangeEnd"],"sources":["useViewportInfo.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { viewportManager } from \"@webiny/website-builder-sdk\";\n\nexport const useViewport = () => {\n    const [viewport, setViewport] = useState(viewportManager.getViewport());\n\n    useEffect(() => {\n        return viewportManager.onViewportChangeEnd(setViewport);\n    }, []);\n\n    return viewport;\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,eAAe,QAAQ,6BAA6B;AAE7D,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGJ,QAAQ,CAACC,eAAe,CAACI,WAAW,CAAC,CAAC,CAAC;EAEvEN,SAAS,CAAC,MAAM;IACZ,OAAOE,eAAe,CAACK,mBAAmB,CAACF,WAAW,CAAC;EAC3D,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOD,QAAQ;AACnB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/useViewportInfo.js","sources":["../../src/components/useViewportInfo.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { viewportManager } from \"@webiny/website-builder-sdk\";\n\nexport const useViewport = () => {\n    const [viewport, setViewport] = useState(viewportManager.getViewport());\n\n    useEffect(() => {\n        return viewportManager.onViewportChangeEnd(setViewport);\n    }, []);\n\n    return viewport;\n};\n"],"names":["useViewport","viewport","setViewport","useState","viewportManager","useEffect"],"mappings":";;AAGO,MAAMA,cAAc;IACvB,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAASC,gBAAgB,WAAW;IAEpEC,UAAU,IACCD,gBAAgB,mBAAmB,CAACF,cAC5C,EAAE;IAEL,OAAOD;AACX"}

package/createComponent.d.ts

@@ -1,2 +1 @@
-import type { Component, ComponentManifest } from "@webiny/website-builder-sdk";
-export declare const createComponent: (component: React.ComponentType<any>, manifest: ComponentManifest) => Component;
+export { createComponent } from "@webiny/website-builder-sdk";

package/createComponent.js

@@ -1,16 +1 @@
-import { createSlotInput } from "@webiny/website-builder-sdk";
-export const createComponent = (component, manifest) => {
-  const acceptsChildren = manifest.acceptsChildren;
-  if (acceptsChildren) {
-    manifest.inputs = [...(manifest.inputs ?? []), createSlotInput({
-      name: "children",
-      defaultValue: []
-    })];
-  }
-  return {
-    component,
-    manifest
-  };
-};
-
-//# sourceMappingURL=createComponent.js.map
+export { createComponent } from "@webiny/website-builder-sdk";

package/createComponent.test.d.ts

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

package/createComponent.test.js

@@ -0,0 +1,118 @@
+import { describe, expect, it } from "vitest";
+import { createComponent } from "./createComponent.js";
+import { createTextInput } from "./index.js";
+import { createSlotInput } from "@webiny/website-builder-sdk";
+describe("Component Manifest", ()=>{
+    it("should support input arrays and strict input objects", ()=>{
+        const Button = (_)=>null;
+        const button1 = createComponent(Button, {
+            name: "Button",
+            inputs: [
+                createTextInput({
+                    name: "title",
+                    label: "Title"
+                }),
+                createSlotInput({
+                    name: "children"
+                })
+            ]
+        });
+        const button2 = createComponent(Button, {
+            name: "Button",
+            inputs: {
+                title: createTextInput({
+                    label: "Title"
+                }),
+                children: createSlotInput({})
+            }
+        });
+        const snapshot = {
+            name: "Button",
+            tags: [],
+            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", ()=>{
+        const Button = (_)=>null;
+        const { manifest } = createComponent(Button, {
+            name: "Button",
+            acceptsChildren: true
+        });
+        expect(manifest).toEqual({
+            name: "Button",
+            acceptsChildren: true,
+            tags: [],
+            inputs: [
+                {
+                    type: "slot",
+                    list: true,
+                    renderer: "Webiny/Slot",
+                    name: "children",
+                    defaultValue: []
+                }
+            ]
+        });
+    });
+    it("`acceptsChildren` should work alongside other inputs", ()=>{
+        const Button = (_)=>null;
+        const button1 = createComponent(Button, {
+            name: "Button",
+            acceptsChildren: true,
+            inputs: [
+                createTextInput({
+                    name: "title",
+                    label: "Title"
+                })
+            ]
+        });
+        const button2 = createComponent(Button, {
+            name: "Button",
+            acceptsChildren: true,
+            inputs: {
+                title: createTextInput({
+                    label: "Title"
+                })
+            }
+        });
+        const snapshot = {
+            name: "Button",
+            acceptsChildren: true,
+            tags: [],
+            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,"file":"createComponent.test.js","sources":["../src/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        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            tags: [],\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        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            tags: [],\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        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            tags: [],\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"],"names":["describe","it","Button","_","button1","createComponent","createTextInput","createSlotInput","button2","snapshot","expect","manifest"],"mappings":";;;;AAWAA,SAAS,sBAAsB;IAC3BC,GAAG,wDAAwD;QACvD,MAAMC,SAAS,CAACC,IACL;QAKX,MAAMC,UAAUC,gBAAgBH,QAAQ;YACpC,MAAM;YACN,QAAQ;gBAEJI,gBAAwB;oBACpB,MAAM;oBACN,OAAO;gBACX;gBAEAC,gBAAgB;oBACZ,MAAM;gBACV;aACH;QACL;QAEA,MAAMC,UAAUH,gBAAgBH,QAAQ;YACpC,MAAM;YACN,QAAQ;gBACJ,OAAOI,gBAAgB;oBACnB,OAAO;gBACX;gBACA,UAAUC,gBAAgB,CAAC;YAC/B;QACJ;QAEA,MAAME,WAAW;YACb,MAAM;YACN,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,OAAO;oBACP,UAAU;oBACV,MAAM;gBACV;gBACA;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;QAEAC,OAAON,QAAQ,QAAQ,EAAE,OAAO,CAACK;QACjCC,OAAOF,QAAQ,QAAQ,EAAE,OAAO,CAACC;IACrC;IAEAR,GAAG,mEAAmE;QAClE,MAAMC,SAAS,CAACC,IACL;QAGX,MAAM,EAAEQ,QAAQ,EAAE,GAAGN,gBAAgBH,QAAQ;YACzC,MAAM;YACN,iBAAiB;QACrB;QAEAQ,OAAOC,UAAU,OAAO,CAAC;YACrB,MAAM;YACN,iBAAiB;YACjB,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;IACJ;IAEAV,GAAG,wDAAwD;QACvD,MAAMC,SAAS,CAACC,IACL;QAIX,MAAMC,UAAUC,gBAAgBH,QAAQ;YACpC,MAAM;YACN,iBAAiB;YACjB,QAAQ;gBACJI,gBAAgB;oBACZ,MAAM;oBACN,OAAO;gBACX;aACH;QACL;QAGA,MAAME,UAAUH,gBAAgBH,QAAQ;YACpC,MAAM;YACN,iBAAiB;YACjB,QAAQ;gBACJ,OAAOI,gBAAgB;oBACnB,OAAO;gBACX;YACJ;QACJ;QAGA,MAAMG,WAAW;YACb,MAAM;YACN,iBAAiB;YACjB,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,OAAO;gBACX;gBACA;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;QAEAC,OAAON,QAAQ,QAAQ,EAAE,OAAO,CAACK;QACjCC,OAAOF,QAAQ,QAAQ,EAAE,OAAO,CAACC;IACrC;AACJ"}

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

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

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,"file":"editorComponents/Box.js","sources":["../../src/editorComponents/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"],"names":["BoxComponent","inputs"],"mappings":";AAGO,MAAMA,eAAe,CAAC,EAAEC,MAAM,EAA8B,GACxD,WAAP,GAAO,0CAAGA,OAAO,QAAQ"}

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,21 +1,22 @@
 "use client";
-
-import { createComponent } from "../createComponent";
-import { BoxComponent } from "./Box";
-export const Box = createComponent(BoxComponent, {
-  name: "Webiny/Box",
-  label: "Box",
-  group: "basic",
-  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>`,
-  acceptsChildren: true,
-  defaults: {
-    styles: {
-      paddingTop: "5px",
-      paddingRight: "5px",
-      paddingBottom: "5px",
-      paddingLeft: "5px"
+import { createComponent } from "../createComponent.js";
+import { BoxComponent } from "./Box.js";
+const Box = createComponent(BoxComponent, {
+    name: "Webiny/Box",
+    label: "Box",
+    aiContext: "Generic container with no visual output of its own. Use it to group child elements and apply shared padding, margin, background, or other styles.",
+    group: "basic",
+    image: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 3v18h18V3H3zm16 16H5V5h14v14z"/></svg>',
+    acceptsChildren: true,
+    defaults: {
+        styles: {
+            paddingTop: "5px",
+            paddingRight: "5px",
+            paddingBottom: "5px",
+            paddingLeft: "5px"
+        }
     }
-  }
 });
+export { Box };
 
 //# sourceMappingURL=Box.manifest.js.map

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,"file":"editorComponents/Box.manifest.js","sources":["../../src/editorComponents/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    aiContext:\n        \"Generic container with no visual output of its own. Use it to group child elements and apply shared padding, margin, background, or other styles.\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M3 3v18h18V3H3zm16 16H5V5h14v14z\"/></svg>`,\n    acceptsChildren: true,\n    defaults: {\n        styles: {\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"names":["Box","createComponent","BoxComponent"],"mappings":";;;AAIO,MAAMA,MAAMC,gBAAgBC,cAAc;IAC7C,MAAM;IACN,OAAO;IACP,WACI;IACJ,OAAO;IACP,OAAO;IACP,iBAAiB;IACjB,UAAU;QACN,QAAQ;YACJ,YAAY;YACZ,cAAc;YACd,eAAe;YACf,aAAa;QACjB;IACJ;AACJ"}

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,33 +1,30 @@
-import React from "react";
-import { useDocumentFragments } from "../components/FragmentsProvider";
+import react from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
-export const FragmentComponent = ({
-  inputs
-}) => {
-  const isEditing = contentSdk.isEditing();
-  const fragments = useDocumentFragments();
-  const element = fragments[inputs.name] ?? null;
-  if (!element && isEditing) {
-    return /*#__PURE__*/React.createElement(FragmentPlaceholder, {
-      name: inputs.name
+import { useDocumentFragments } from "../components/FragmentsProvider.js";
+const findFixedFragmentByName = (fragments, name)=>fragments.filter((fragment)=>"fixed" === fragment.type).find((fragment)=>fragment.name === name);
+const FragmentComponent = ({ inputs })=>{
+    const isEditing = contentSdk.isEditing();
+    const fragments = useDocumentFragments();
+    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
-}) => {
-  const fragmentName = name ? /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0", /*#__PURE__*/React.createElement("strong", null, name), "\xA0") : /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0");
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      height: "100px",
-      backgroundColor: "#f4f4f4",
-      justifyContent: "center",
-      alignItems: "center",
-      fill: "#ffffff"
-    }
-  }, "This is a placeholder for", fragmentName, "content coming from your frontend app.");
+const FragmentPlaceholder = ({ name })=>{
+    const fragmentName = name ? /*#__PURE__*/ react.createElement(react.Fragment, null, "\xa0", /*#__PURE__*/ react.createElement("strong", null, name), "\xa0") : /*#__PURE__*/ react.createElement(react.Fragment, null, "\xa0");
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            height: "100px",
+            backgroundColor: "#f4f4f4",
+            justifyContent: "center",
+            alignItems: "center",
+            fill: "#ffffff"
+        }
+    }, "This is a placeholder for", fragmentName, "content coming from your frontend app.");
 };
+export { FragmentComponent };
 
 //# sourceMappingURL=Fragment.js.map

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,"file":"editorComponents/Fragment.js","sources":["../../src/editorComponents/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"],"names":["findFixedFragmentByName","fragments","name","fragment","FragmentComponent","inputs","isEditing","contentSdk","useDocumentFragments","FragmentPlaceholder","fragmentName"],"mappings":";;;AAUA,MAAMA,0BAA0B,CAACC,WAA8BC,OACpDD,UACF,MAAM,CAACE,CAAAA,WAAYA,AAAkB,YAAlBA,SAAS,IAAI,EAChC,IAAI,CAACA,CAAAA,WAAYA,SAAS,IAAI,KAAKD;AAGrC,MAAME,oBAAoB,CAAC,EAAEC,MAAM,EAA0B;IAChE,MAAMC,YAAYC,WAAW,SAAS;IACtC,MAAMN,YAAYO;IAClB,MAAML,WAAWH,wBAAwBC,WAAWI,OAAO,IAAI;IAE/D,IAAI,CAACF,YAAYG,WACb,OAAO,WAAP,GAAO,oBAACG,qBAAmBA;QAAC,MAAMJ,OAAO,IAAI;;IAGjD,IAAIF,UACA,OAAO,WAAP,GAAO,0CAAGA,SAAS,OAAO;IAG9B,OAAO;AACX;AAEA,MAAMM,sBAAsB,CAAC,EAAEP,IAAI,EAAoB;IACnD,MAAMQ,eAAeR,OAAO,WAAPA,GACjB,0CAAE,sBACQ,oBAAC,gBAAQA,OAAc,wBAGjC,0CAAE;IAEN,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,QAAQ;YACR,iBAAiB;YACjB,gBAAgB;YAChB,YAAY;YACZ,MAAM;QACV;OACH,6BAC6BQ,cAAa;AAGnD"}

package/editorComponents/Fragment.manifest.js

@@ -1,19 +1,22 @@
 "use client";
-
-import { createComponent } from "../createComponent";
-import { FragmentComponent } from "./Fragment";
 import { createTextInput } from "@webiny/website-builder-sdk";
-export const Fragment = createComponent(FragmentComponent, {
-  name: "Webiny/Fragment",
-  label: "Fragment",
-  group: "basic",
-  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>`,
-  inputs: [createTextInput({
-    name: "name",
+import { createComponent } from "../createComponent.js";
+import { FragmentComponent } from "./Fragment.js";
+const Fragment = createComponent(FragmentComponent, {
+    name: "Webiny/Fragment",
     label: "Fragment",
-    description: "Select fragment to display.",
-    renderer: "Webiny/FragmentSelector"
-  })]
+    useInAiContentGeneration: false,
+    group: "basic",
+    image: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 3v18h18V3H3zm16 16H5V5h14v14z"/></svg>',
+    inputs: [
+        createTextInput({
+            name: "name",
+            label: "Fragment",
+            description: "Select fragment to display.",
+            renderer: "Webiny/FragmentSelector"
+        })
+    ]
 });
+export { Fragment };
 
 //# sourceMappingURL=Fragment.manifest.js.map

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,"file":"editorComponents/Fragment.manifest.js","sources":["../../src/editorComponents/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    useInAiContentGeneration: false,\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M3 3v18h18V3H3zm16 16H5V5h14v14z\"/></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"],"names":["Fragment","createComponent","FragmentComponent","createTextInput"],"mappings":";;;;AAKO,MAAMA,WAAWC,gBAAgBC,mBAAmB;IACvD,MAAM;IACN,OAAO;IACP,0BAA0B;IAC1B,OAAO;IACP,OAAO;IACP,QAAQ;QACJC,gBAAgB;YACZ,MAAM;YACN,OAAO;YACP,aAAa;YACb,UAAU;QACd;KACH;AACL"}

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;