@webiny/website-builder-react 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

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.js

@@ -1,36 +1,32 @@
 import { createSlotInput } from "@webiny/website-builder-sdk";
-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) {
-    const hasChildren = inputs.some(input => input.name === "children");
-    if (!hasChildren) {
-      inputs.push(createSlotInput({
-        name: "children"
-      }));
+function createComponent(component, manifest) {
+    const inputs = [];
+    if (Array.isArray(manifest.inputs)) inputs.push(...manifest.inputs);
+    else {
+        const inputsObject = manifest.inputs ?? {};
+        Object.keys(inputsObject).forEach((name)=>{
+            inputs.push({
+                ...inputsObject[name],
+                name
+            });
+        });
     }
-  }
-  return {
-    component,
-    manifest: {
-      ...manifest,
-      inputs
+    const acceptsChildren = manifest.acceptsChildren;
+    if (acceptsChildren) {
+        const hasChildren = inputs.some((input)=>"children" === input.name);
+        if (!hasChildren) inputs.push(createSlotInput({
+            name: "children"
+        }));
     }
-  };
+    return {
+        component,
+        manifest: {
+            ...manifest,
+            tags: manifest.tags ?? [],
+            inputs
+        }
+    };
 }
+export { createComponent };
 
 //# sourceMappingURL=createComponent.js.map

package/createComponent.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"createComponent.js","sources":["../src/createComponent.ts"],"sourcesContent":["import type {\n    Component,\n    ComponentInput,\n    ComponentManifest,\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 {\n        component,\n        manifest: { ...manifest, tags: manifest.tags ?? [], inputs } as ComponentManifest\n    };\n}\n"],"names":["createComponent","component","manifest","inputs","Array","inputsObject","Object","name","acceptsChildren","hasChildren","input","createSlotInput"],"mappings":";AAUO,SAASA,gBAGdC,SAAqB,EAAEC,QAAyC;IAC9D,MAAMC,SAA2B,EAAE;IAInC,IAAIC,MAAM,OAAO,CAACF,SAAS,MAAM,GAC7BC,OAAO,IAAI,IAAID,SAAS,MAAM;SAC3B;QACH,MAAMG,eAAkDH,SAAS,MAAM,IAAI,CAAC;QAC5EI,OAAO,IAAI,CAACD,cAAc,OAAO,CAAC,CAACE;YAC/BJ,OAAO,IAAI,CAAC;gBAAE,GAAGE,YAAY,CAACE,KAAK;gBAAEA;YAAK;QAC9C;IACJ;IAEA,MAAMC,kBAAkBN,SAAS,eAAe;IAEhD,IAAIM,iBAAiB;QACjB,MAAMC,cAAcN,OAAO,IAAI,CAACO,CAAAA,QAASA,AAAe,eAAfA,MAAM,IAAI;QACnD,IAAI,CAACD,aACDN,OAAO,IAAI,CAACQ,gBAAgB;YAAE,MAAM;QAAW;IAEvD;IAEA,OAAO;QACHV;QACA,UAAU;YAAE,GAAGC,QAAQ;YAAE,MAAMA,SAAS,IAAI,IAAI,EAAE;YAAEC;QAAO;IAC/D;AACJ"}

package/createComponent.test.js

@@ -2,128 +2,117 @@ 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
+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);
     });
-    expect(manifest).toEqual({
-      name: "Button",
-      acceptsChildren: true,
-      inputs: [{
-        type: "slot",
-        list: true,
-        renderer: "Webiny/Slot",
-        name: "children",
-        defaultValue: []
-      }]
+    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", () => {
-    // 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"
-        })
-      }
+    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);
     });
-
-    // 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

@@ -1 +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":"AAAA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ,QAAQ;AAE7C,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,eAAe,QAAQ,6BAA6B;;AAE7D;AACA;AACA;AACA;;AAEAL,QAAQ,CAAC,oBAAoB,EAAE,MAAM;EACjCE,EAAE,CAAC,sDAAsD,EAAE,MAAM;IAC7D;IACA,MAAMI,MAAM,GAAIC,CAA+D,IAAK;MAChF,OAAO,IAAI;IACf,CAAC;IAID,MAAMC,OAAO,GAAGL,eAAe,CAACG,MAAM,EAAE;MACpCG,IAAI,EAAE,QAAQ;MACdC,MAAM,EAAE;MACJ;MACAN,eAAe,CAAS;QACpBK,IAAI,EAAE,OAAO;QACbE,KAAK,EAAE;MACX,CAAC,CAAC;MACF;MACAN,eAAe,CAAC;QACZI,IAAI,EAAE;MACV,CAAC,CAAC;IAEV,CAAC,CAAC;IAEF,MAAMG,OAAO,GAAGT,eAAe,CAACG,MAAM,EAAE;MACpCG,IAAI,EAAE,QAAQ;MACdC,MAAM,EAAE;QACJG,KAAK,EAAET,eAAe,CAAC;UACnBO,KAAK,EAAE;QACX,CAAC,CAAC;QACFG,QAAQ,EAAET,eAAe,CAAC,CAAC,CAAC;MAChC;IACJ,CAAC,CAAC;IAEF,MAAMU,QAAQ,GAAG;MACbN,IAAI,EAAE,QAAQ;MACdC,MAAM,EAAE,CACJ;QACIM,IAAI,EAAE,MAAM;QACZL,KAAK,EAAE,OAAO;QACdM,QAAQ,EAAE,cAAc;QACxBR,IAAI,EAAE;MACV,CAAC,EACD;QACIO,IAAI,EAAE,MAAM;QACZC,QAAQ,EAAE,aAAa;QACvBR,IAAI,EAAE,UAAU;QAChBS,IAAI,EAAE,IAAI;QACVC,YAAY,EAAE;MAClB,CAAC;IAET,CAAC;IAEDlB,MAAM,CAACO,OAAO,CAACY,QAAQ,CAAC,CAACC,OAAO,CAACN,QAAQ,CAAC;IAC1Cd,MAAM,CAACW,OAAO,CAACQ,QAAQ,CAAC,CAACC,OAAO,CAACN,QAAQ,CAAC;EAC9C,CAAC,CAAC;EAEFb,EAAE,CAAC,iEAAiE,EAAE,MAAM;IACxE;IACA,MAAMI,MAAM,GAAIC,CAAgD,IAAK;MACjE,OAAO,IAAI;IACf,CAAC;IAED,MAAM;MAAEa;IAAS,CAAC,GAAGjB,eAAe,CAACG,MAAM,EAAE;MACzCG,IAAI,EAAE,QAAQ;MACda,eAAe,EAAE;IACrB,CAAC,CAAC;IAEFrB,MAAM,CAACmB,QAAQ,CAAC,CAACC,OAAO,CAAC;MACrBZ,IAAI,EAAE,QAAQ;MACda,eAAe,EAAE,IAAI;MACrBZ,MAAM,EAAE,CACJ;QACIM,IAAI,EAAE,MAAM;QACZE,IAAI,EAAE,IAAI;QACVD,QAAQ,EAAE,aAAa;QACvBR,IAAI,EAAE,UAAU;QAChBU,YAAY,EAAE;MAClB,CAAC;IAET,CAAC,CAAC;EACN,CAAC,CAAC;EAEFjB,EAAE,CAAC,sDAAsD,EAAE,MAAM;IAC7D;IACA,MAAMI,MAAM,GAAIC,CAA+D,IAAK;MAChF,OAAO,IAAI;IACf,CAAC;;IAED;IACA,MAAMC,OAAO,GAAGL,eAAe,CAACG,MAAM,EAAE;MACpCG,IAAI,EAAE,QAAQ;MACda,eAAe,EAAE,IAAI;MACrBZ,MAAM,EAAE,CACJN,eAAe,CAAC;QACZK,IAAI,EAAE,OAAO;QACbE,KAAK,EAAE;MACX,CAAC,CAAC;IAEV,CAAC,CAAC;;IAEF;IACA,MAAMC,OAAO,GAAGT,eAAe,CAACG,MAAM,EAAE;MACpCG,IAAI,EAAE,QAAQ;MACda,eAAe,EAAE,IAAI;MACrBZ,MAAM,EAAE;QACJG,KAAK,EAAET,eAAe,CAAC;UACnBO,KAAK,EAAE;QACX,CAAC;MACL;IACJ,CAAC,CAAC;;IAEF;IACA,MAAMI,QAAQ,GAAG;MACbN,IAAI,EAAE,QAAQ;MACda,eAAe,EAAE,IAAI;MACrBZ,MAAM,EAAE,CACJ;QACIM,IAAI,EAAE,MAAM;QACZC,QAAQ,EAAE,cAAc;QACxBR,IAAI,EAAE,OAAO;QACbE,KAAK,EAAE;MACX,CAAC,EACD;QACIK,IAAI,EAAE,MAAM;QACZC,QAAQ,EAAE,aAAa;QACvBR,IAAI,EAAE,UAAU;QAChBS,IAAI,EAAE,IAAI;QACVC,YAAY,EAAE;MAClB,CAAC;IAET,CAAC;IAEDlB,MAAM,CAACO,OAAO,CAACY,QAAQ,CAAC,CAACC,OAAO,CAACN,QAAQ,CAAC;IAC1Cd,MAAM,CAACW,OAAO,CAACQ,QAAQ,CAAC,CAACC,OAAO,CAACN,QAAQ,CAAC;EAC9C,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
+{"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.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.js\";\n\nexport const BoxComponent = ({ inputs }: ComponentPropsWithChildren) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACpE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}
+{"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.js

@@ -1,21 +1,22 @@
 "use client";
-
 import { createComponent } from "../createComponent.js";
 import { BoxComponent } from "./Box.js";
-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"
+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" 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"
+        }
     }
-  }
 });
+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.js\";\nimport { BoxComponent } from \"./Box.js\";\n\nexport const Box = createComponent(BoxComponent, {\n    name: \"Webiny/Box\",\n    label: \"Box\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n    acceptsChildren: true,\n    defaults: {\n        styles: {\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,YAAY;AAErB,OAAO,MAAMC,GAAG,GAAGF,eAAe,CAACC,YAAY,EAAE;EAC7CE,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,+LAA+L;EACtMC,eAAe,EAAE,IAAI;EACrBC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,UAAU,EAAE,KAAK;MACjBC,YAAY,EAAE,KAAK;MACnBC,aAAa,EAAE,KAAK;MACpBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"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\" 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"],"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.js

@@ -1,39 +1,30 @@
-import React from "react";
+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 fragment = findFixedFragmentByName(fragments, inputs.name);
-  if (!fragment && isEditing) {
-    return /*#__PURE__*/React.createElement(FragmentPlaceholder, {
-      name: inputs.name
+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
     });
-  }
-  if (fragment) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, fragment.element);
-  }
-  return null;
+    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