@webiny/website-builder-react 6.0.0-alpha.0

package/components/useBindingsForElement.js

@@ -0,0 +1,19 @@
+import { toJS } from "mobx";
+import { BindingsProcessor } from "@webiny/app-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]);
+};
+
+//# sourceMappingURL=useBindingsForElement.js.map

package/components/useBindingsForElement.js.map

@@ -0,0 +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/app-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,iCAAiC;AACnE,SAASC,WAAW;AACpB,SAASC,gBAAgB;AACzB,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,qBAAqB,GAAGA,CAACC,SAAiB,EAAEC,UAAkB,KAAK;EAC5E,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,QAAQ,GAAGP,WAAW,CAAC,CAAC;EAE9B,OAAOE,kBAAkB,CACrB,MAAMI,aAAa,CAACE,WAAW,CAAC,CAAE,EAClCC,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGZ,IAAI,CAACW,QAAQ,CAACC,QAAQ,CAACN,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;IACzD,MAAMO,WAAW,GAAGJ,QAAQ,CAACI,WAAW,CAACC,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;;IAE3D;IACA,MAAMC,iBAAiB,GAAG,IAAIhB,iBAAiB,CAACY,WAAW,CAAC;IAE5D,OAAOI,iBAAiB,CAACC,WAAW,CAACN,QAAQ,EAAEL,UAAU,CAAC;EAC9D,CAAC,EACD,CAACD,SAAS,EAAEC,UAAU,CAC1B,CAAC;AACL,CAAC","ignoreList":[]}

package/components/useDocumentState.d.ts

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

package/components/useDocumentState.js

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

package/components/useDocumentState.js.map

@@ -0,0 +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":[]}

package/components/useSelectFromState.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Equals<T> = (a: T, b: T) => boolean;
+/**
+ * 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 declare function useSelectFromState<TState, T>(getState: () => TState, selector: (doc: TState) => T, deps?: React.DependencyList, equals?: Equals<T>): T;
+export {};

package/components/useSelectFromState.js

@@ -0,0 +1,39 @@
+import deepEqual from "deep-equal";
+import { useState, useEffect, useMemo } 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;
+}
+
+//# sourceMappingURL=useSelectFromState.js.map

package/components/useSelectFromState.js.map

@@ -0,0 +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 { reaction, IReactionDisposer } 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;AACpD,SAASC,QAAQ,QAA2B,MAAM;AAIlD;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":[]}

package/components/useViewportInfo.d.ts

@@ -0,0 +1 @@
+export declare const useViewport: () => import("@webiny/app-website-builder/sdk").ViewportInfo;

package/components/useViewportInfo.js

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

package/components/useViewportInfo.js.map

@@ -0,0 +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/app-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,iCAAiC;AAEjE,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":[]}

package/createComponent.d.ts

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

package/createComponent.js

@@ -0,0 +1,16 @@
+import { createSlotInput } from "@webiny/app-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

package/createComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createSlotInput","createComponent","component","manifest","acceptsChildren","inputs","name","defaultValue"],"sources":["createComponent.ts"],"sourcesContent":["import type { Component, ComponentManifest } from \"@webiny/app-website-builder/sdk\";\nimport { createSlotInput } from \"@webiny/app-website-builder/sdk\";\n\nexport const createComponent = (\n    component: React.ComponentType<any>,\n    manifest: ComponentManifest\n): Component => {\n    const acceptsChildren = manifest.acceptsChildren;\n    if (acceptsChildren) {\n        manifest.inputs = [\n            ...(manifest.inputs ?? []),\n            createSlotInput({\n                name: \"children\",\n                defaultValue: []\n            })\n        ];\n    }\n\n    return {\n        component,\n        manifest\n    };\n};\n"],"mappings":"AACA,SAASA,eAAe,QAAQ,iCAAiC;AAEjE,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,SAAmC,EACnCC,QAA2B,KACf;EACZ,MAAMC,eAAe,GAAGD,QAAQ,CAACC,eAAe;EAChD,IAAIA,eAAe,EAAE;IACjBD,QAAQ,CAACE,MAAM,GAAG,CACd,IAAIF,QAAQ,CAACE,MAAM,IAAI,EAAE,CAAC,EAC1BL,eAAe,CAAC;MACZM,IAAI,EAAE,UAAU;MAChBC,YAAY,EAAE;IAClB,CAAC,CAAC,CACL;EACL;EAEA,OAAO;IACHL,SAAS;IACTC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/editorComponents/Box.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ComponentPropsWithChildren } from "../types";
+export declare const BoxComponent: ({ inputs }: ComponentPropsWithChildren) => React.JSX.Element;

package/editorComponents/Box.js

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

package/editorComponents/Box.js.map

@@ -0,0 +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":[]}

package/editorComponents/Box.manifest.d.ts

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

package/editorComponents/Box.manifest.js

@@ -0,0 +1,21 @@
+"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"
+    }
+  }
+});
+
+//# sourceMappingURL=Box.manifest.js.map

package/editorComponents/Box.manifest.js.map

@@ -0,0 +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":[]}

package/editorComponents/Fragment.d.ts

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

package/editorComponents/Fragment.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { useDocumentFragments } from "../components/FragmentsProvider";
+import { contentSdk } from "@webiny/app-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
+    });
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, element);
+};
+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.");
+};
+
+//# sourceMappingURL=Fragment.js.map

package/editorComponents/Fragment.js.map

@@ -0,0 +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/app-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,iCAAiC;AAM5D,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":[]}

package/editorComponents/Fragment.manifest.d.ts

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

package/editorComponents/Fragment.manifest.js

@@ -0,0 +1,19 @@
+"use client";
+
+import { createComponent } from "../createComponent";
+import { FragmentComponent } from "./Fragment";
+import { createTextInput } from "@webiny/app-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",
+    label: "Fragment",
+    description: "Select fragment to display.",
+    renderer: "Webiny/FragmentSelector"
+  })]
+});
+
+//# sourceMappingURL=Fragment.manifest.js.map

package/editorComponents/Fragment.manifest.js.map

@@ -0,0 +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/app-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,iCAAiC;AAEjE,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":[]}

package/editorComponents/Grid.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { ComponentProps, ComponentPropsWithChildren } from "../types";
+export declare const GridColumnComponent: ({ inputs }: {
+    inputs: ComponentPropsWithChildren["inputs"];
+}) => React.JSX.Element;
+export interface Column {
+    children: React.ReactNode;
+}
+type GridProps = ComponentProps<{
+    gridLayout: string;
+    rowCount: number;
+    columnGap: number;
+    columns: Column[];
+    stackAtBreakpoint?: string;
+    reverseWhenStacked?: boolean;
+}>;
+export declare const GridComponent: ({ inputs, styles, breakpoint }: GridProps) => React.JSX.Element;
+export {};

package/editorComponents/Grid.js

@@ -0,0 +1,65 @@
+import React from "react";
+export const GridColumnComponent = ({
+  inputs
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, inputs.children);
+};
+export const GridComponent = ({
+  inputs,
+  styles,
+  breakpoint
+}) => {
+  const {
+    gridLayout = "12",
+    columns,
+    columnGap,
+    stackAtBreakpoint,
+    reverseWhenStacked
+  } = inputs;
+  const rowConfig = gridLayout.split("-").map(size => parseInt(size));
+  const rows = [];
+
+  // Chunk columns into rows
+  for (let i = 0; i < columns.length; i += rowConfig.length) {
+    rows.push(columns.slice(i, i + rowConfig.length));
+  }
+
+  // Number of pixels we need to subtract from each cell to ensure they fit in the grid with column gap
+  const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;
+  const stackColumns = breakpoint === stackAtBreakpoint;
+  if (stackColumns) {
+    styles.flexDirection = reverseWhenStacked ? "column-reverse" : "column";
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles
+  }, rows.map(columns => {
+    return columns.map((column, i) => /*#__PURE__*/React.createElement(Span, {
+      key: i,
+      stackColumns: stackColumns,
+      size: rowConfig[i],
+      reductionInPx: cellWidthReduction
+    }, /*#__PURE__*/React.createElement(GridColumnComponent, {
+      key: i,
+      inputs: {
+        children: column.children
+      }
+    })));
+  }));
+};
+const Span = ({
+  size,
+  children,
+  reductionInPx,
+  stackColumns
+}) => {
+  const width = stackColumns ? "100%" : `calc(${size / 12 * 100}% - ${reductionInPx}px)`;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: `0 0 ${width}`,
+      maxWidth: width,
+      boxSizing: "border-box"
+    }
+  }, children);
+};
+
+//# sourceMappingURL=Grid.js.map

package/editorComponents/Grid.js.map

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

package/editorComponents/Grid.manifest.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface Column {
+    children: React.ReactNode;
+}
+export declare const Grid: import("@webiny/app-website-builder/sdk").Component;

package/editorComponents/Grid.manifest.js

@@ -0,0 +1,174 @@
+"use client";
+
+import { createBooleanInput, createElement, createNumberInput, createObjectInput, createSelectInput, createSlotInput, createTextInput } from "@webiny/app-website-builder/sdk";
+import { createComponent } from "../createComponent";
+import { GridComponent } from "./Grid";
+export const Grid = createComponent(GridComponent, {
+  name: "Webiny/Grid",
+  label: "Grid",
+  image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/></svg>`,
+  group: "basic",
+  autoApplyStyles: false,
+  inputs: [createTextInput({
+    name: "gridLayout",
+    label: "Grid Layout",
+    renderer: "Webiny/GridLayout",
+    onChange: ({
+      inputs,
+      createElement
+    }) => {
+      const rowColumnCount = inputs.gridLayout.split("-").length;
+      const columns = inputs.columns.length;
+      const remainder = columns % rowColumnCount;
+      if (remainder !== 0) {
+        const fullColumnCount = rowColumnCount * inputs.rowCount;
+        const toCreate = columns > fullColumnCount ? remainder : rowColumnCount - remainder;
+        Array.from({
+          length: toCreate
+        }).forEach(() => {
+          inputs.columns.push({
+            children: createElement({
+              component: "Webiny/GridColumn"
+            })
+          });
+        });
+      }
+      inputs.rowCount = inputs.columns.length / rowColumnCount;
+    }
+  }), createNumberInput({
+    name: "rowCount",
+    label: "Row Count",
+    defaultValue: 1,
+    minValue: 1,
+    onChange: ({
+      inputs,
+      createElement
+    }) => {
+      const gridLayout = inputs.gridLayout;
+      const columnCount = gridLayout.split("-").length;
+      const rowCount = Math.max(1, inputs.rowCount);
+      const columns = inputs.columns;
+      const rows = [];
+
+      // Chunk columns into rows
+      for (let i = 0; i < columns.length; i += columnCount) {
+        rows.push(columns.slice(i, i + columnCount));
+      }
+      if (rows.length > rowCount) {
+        inputs.columns = columns.slice(0, columnCount * rowCount);
+        return;
+      }
+      const createRows = Math.max(0, rowCount - rows.length);
+      if (createRows <= 0) {
+        return;
+      }
+      const newRows = Array.from({
+        length: createRows * columnCount
+      }).map(() => {
+        return {
+          children: createElement({
+            component: "Webiny/GridColumn"
+          })
+        };
+      });
+      inputs.columns.push(...newRows);
+    }
+  }), createNumberInput({
+    name: "rowGap",
+    label: "Row Gap",
+    defaultValue: 0,
+    responsive: true,
+    onChange: ({
+      inputs,
+      styles
+    }) => {
+      const rowGap = parseInt(inputs.rowGap);
+      if (isNaN(rowGap)) {
+        delete styles.rowGap;
+      } else {
+        styles.rowGap = `${inputs.rowGap}px`;
+      }
+    }
+  }), createNumberInput({
+    name: "columnGap",
+    label: "Column Gap",
+    defaultValue: 0,
+    responsive: true,
+    onChange: ({
+      inputs,
+      styles
+    }) => {
+      const columnGap = parseInt(inputs.columnGap);
+      if (isNaN(columnGap)) {
+        delete styles.columnGap;
+      } else {
+        styles.columnGap = `${inputs.columnGap}px`;
+      }
+    }
+  }), createSelectInput({
+    name: "stackAtBreakpoint",
+    label: "Stack at breakpoint",
+    options: [{
+      label: "Tablet",
+      value: "tablet"
+    }, {
+      label: "Mobile",
+      value: "mobile"
+    }]
+  }), createBooleanInput({
+    name: "reverseWhenStacked",
+    label: "Reverse columns when stacked"
+  }), createObjectInput({
+    name: "columns",
+    list: true,
+    hideFromUi: true,
+    fields: [createSlotInput({
+      name: "children",
+      list: false,
+      components: ["Webiny/GridColumn"]
+    })]
+  })],
+  defaults: {
+    inputs: {
+      gridLayout: "6-6",
+      columns: [{
+        children: createElement({
+          component: "Webiny/GridColumn",
+          inputs: {
+            children: [createElement({
+              component: "Webiny/Lexical"
+            })]
+          }
+        })
+      }, {
+        children: createElement({
+          component: "Webiny/GridColumn",
+          inputs: {
+            children: [createElement({
+              component: "Webiny/Lexical"
+            })]
+          }
+        })
+      }]
+    },
+    styles: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "flex-start",
+      alignItems: "stretch",
+      width: "100%",
+      marginTop: "0px",
+      marginBottom: "0px",
+      marginLeft: "0px",
+      marginRight: "0px",
+      paddingTop: "5px",
+      paddingRight: "5px",
+      paddingBottom: "5px",
+      paddingLeft: "5px"
+    }
+  }
+});
+
+//# sourceMappingURL=Grid.manifest.js.map

package/editorComponents/Grid.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createBooleanInput","createElement","createNumberInput","createObjectInput","createSelectInput","createSlotInput","createTextInput","createComponent","GridComponent","Grid","name","label","image","group","autoApplyStyles","inputs","renderer","onChange","rowColumnCount","gridLayout","split","length","columns","remainder","fullColumnCount","rowCount","toCreate","Array","from","forEach","push","children","component","defaultValue","minValue","columnCount","Math","max","rows","i","slice","createRows","newRows","map","responsive","styles","rowGap","parseInt","isNaN","columnGap","options","value","list","hideFromUi","fields","components","defaults","boxSizing","display","flexDirection","flexWrap","justifyContent","alignItems","width","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["Grid.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n    createBooleanInput,\n    createElement,\n    createNumberInput,\n    createObjectInput,\n    createSelectInput,\n    createSlotInput,\n    createTextInput\n} from \"@webiny/app-website-builder/sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { GridComponent } from \"./Grid\";\n\nexport interface Column {\n    children: React.ReactNode;\n}\n\nexport const Grid = createComponent(GridComponent, {\n    name: \"Webiny/Grid\",\n    label: \"Grid\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z\"/></svg>`,\n    group: \"basic\",\n    autoApplyStyles: false,\n    inputs: [\n        createTextInput({\n            name: \"gridLayout\",\n            label: \"Grid Layout\",\n            renderer: \"Webiny/GridLayout\",\n            onChange: ({ inputs, createElement }) => {\n                const rowColumnCount = inputs.gridLayout.split(\"-\").length;\n                const columns = inputs.columns.length;\n\n                const remainder = columns % rowColumnCount;\n\n                if (remainder !== 0) {\n                    const fullColumnCount = rowColumnCount * inputs.rowCount;\n                    const toCreate =\n                        columns > fullColumnCount ? remainder : rowColumnCount - remainder;\n\n                    Array.from({ length: toCreate }).forEach(() => {\n                        inputs.columns.push({\n                            children: createElement({\n                                component: \"Webiny/GridColumn\"\n                            })\n                        });\n                    });\n                }\n\n                inputs.rowCount = inputs.columns.length / rowColumnCount;\n            }\n        }),\n        createNumberInput({\n            name: \"rowCount\",\n            label: \"Row Count\",\n            defaultValue: 1,\n            minValue: 1,\n            onChange: ({ inputs, createElement }) => {\n                const gridLayout = inputs.gridLayout;\n                const columnCount = gridLayout.split(\"-\").length;\n                const rowCount = Math.max(1, inputs.rowCount);\n                const columns = inputs.columns;\n                const rows: Column[][] = [];\n\n                // Chunk columns into rows\n                for (let i = 0; i < columns.length; i += columnCount) {\n                    rows.push(columns.slice(i, i + columnCount));\n                }\n\n                if (rows.length > rowCount) {\n                    inputs.columns = columns.slice(0, columnCount * rowCount);\n                    return;\n                }\n\n                const createRows = Math.max(0, rowCount - rows.length);\n\n                if (createRows <= 0) {\n                    return;\n                }\n\n                const newRows = Array.from({ length: createRows * columnCount }).map(() => {\n                    return {\n                        children: createElement({\n                            component: \"Webiny/GridColumn\"\n                        })\n                    };\n                });\n\n                inputs.columns.push(...newRows);\n            }\n        }),\n        createNumberInput({\n            name: \"rowGap\",\n            label: \"Row Gap\",\n            defaultValue: 0,\n            responsive: true,\n            onChange: ({ inputs, styles }) => {\n                const rowGap = parseInt(inputs.rowGap);\n                if (isNaN(rowGap)) {\n                    delete styles.rowGap;\n                } else {\n                    styles.rowGap = `${inputs.rowGap}px`;\n                }\n            }\n        }),\n        createNumberInput({\n            name: \"columnGap\",\n            label: \"Column Gap\",\n            defaultValue: 0,\n            responsive: true,\n            onChange: ({ inputs, styles }) => {\n                const columnGap = parseInt(inputs.columnGap);\n                if (isNaN(columnGap)) {\n                    delete styles.columnGap;\n                } else {\n                    styles.columnGap = `${inputs.columnGap}px`;\n                }\n            }\n        }),\n        createSelectInput({\n            name: \"stackAtBreakpoint\",\n            label: \"Stack at breakpoint\",\n            options: [\n                { label: \"Tablet\", value: \"tablet\" },\n                { label: \"Mobile\", value: \"mobile\" }\n            ]\n        }),\n        createBooleanInput({\n            name: \"reverseWhenStacked\",\n            label: \"Reverse columns when stacked\"\n        }),\n        createObjectInput({\n            name: \"columns\",\n            list: true,\n            hideFromUi: true,\n            fields: [\n                createSlotInput({\n                    name: \"children\",\n                    list: false,\n                    components: [\"Webiny/GridColumn\"]\n                })\n            ]\n        })\n    ],\n    defaults: {\n        inputs: {\n            gridLayout: \"6-6\",\n            columns: [\n                {\n                    children: createElement({\n                        component: \"Webiny/GridColumn\",\n                        inputs: {\n                            children: [\n                                createElement({\n                                    component: \"Webiny/Lexical\"\n                                })\n                            ]\n                        }\n                    })\n                },\n                {\n                    children: createElement({\n                        component: \"Webiny/GridColumn\",\n                        inputs: {\n                            children: [\n                                createElement({\n                                    component: \"Webiny/Lexical\"\n                                })\n                            ]\n                        }\n                    })\n                }\n            ]\n        },\n        styles: {\n            boxSizing: \"border-box\",\n            display: \"flex\",\n            flexDirection: \"row\",\n            flexWrap: \"wrap\",\n            justifyContent: \"flex-start\",\n            alignItems: \"stretch\",\n            width: \"100%\",\n            marginTop: \"0px\",\n            marginBottom: \"0px\",\n            marginLeft: \"0px\",\n            marginRight: \"0px\",\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SACIA,kBAAkB,EAClBC,aAAa,EACbC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,QACZ,iCAAiC;AACxC,SAASC,eAAe;AACxB,SAASC,aAAa;AAMtB,OAAO,MAAMC,IAAI,GAAGF,eAAe,CAACC,aAAa,EAAE;EAC/CE,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,MAAM;EACbC,KAAK,EAAE,qWAAqW;EAC5WC,KAAK,EAAE,OAAO;EACdC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE,CACJT,eAAe,CAAC;IACZI,IAAI,EAAE,YAAY;IAClBC,KAAK,EAAE,aAAa;IACpBK,QAAQ,EAAE,mBAAmB;IAC7BC,QAAQ,EAAEA,CAAC;MAAEF,MAAM;MAAEd;IAAc,CAAC,KAAK;MACrC,MAAMiB,cAAc,GAAGH,MAAM,CAACI,UAAU,CAACC,KAAK,CAAC,GAAG,CAAC,CAACC,MAAM;MAC1D,MAAMC,OAAO,GAAGP,MAAM,CAACO,OAAO,CAACD,MAAM;MAErC,MAAME,SAAS,GAAGD,OAAO,GAAGJ,cAAc;MAE1C,IAAIK,SAAS,KAAK,CAAC,EAAE;QACjB,MAAMC,eAAe,GAAGN,cAAc,GAAGH,MAAM,CAACU,QAAQ;QACxD,MAAMC,QAAQ,GACVJ,OAAO,GAAGE,eAAe,GAAGD,SAAS,GAAGL,cAAc,GAAGK,SAAS;QAEtEI,KAAK,CAACC,IAAI,CAAC;UAAEP,MAAM,EAAEK;QAAS,CAAC,CAAC,CAACG,OAAO,CAAC,MAAM;UAC3Cd,MAAM,CAACO,OAAO,CAACQ,IAAI,CAAC;YAChBC,QAAQ,EAAE9B,aAAa,CAAC;cACpB+B,SAAS,EAAE;YACf,CAAC;UACL,CAAC,CAAC;QACN,CAAC,CAAC;MACN;MAEAjB,MAAM,CAACU,QAAQ,GAAGV,MAAM,CAACO,OAAO,CAACD,MAAM,GAAGH,cAAc;IAC5D;EACJ,CAAC,CAAC,EACFhB,iBAAiB,CAAC;IACdQ,IAAI,EAAE,UAAU;IAChBC,KAAK,EAAE,WAAW;IAClBsB,YAAY,EAAE,CAAC;IACfC,QAAQ,EAAE,CAAC;IACXjB,QAAQ,EAAEA,CAAC;MAAEF,MAAM;MAAEd;IAAc,CAAC,KAAK;MACrC,MAAMkB,UAAU,GAAGJ,MAAM,CAACI,UAAU;MACpC,MAAMgB,WAAW,GAAGhB,UAAU,CAACC,KAAK,CAAC,GAAG,CAAC,CAACC,MAAM;MAChD,MAAMI,QAAQ,GAAGW,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEtB,MAAM,CAACU,QAAQ,CAAC;MAC7C,MAAMH,OAAO,GAAGP,MAAM,CAACO,OAAO;MAC9B,MAAMgB,IAAgB,GAAG,EAAE;;MAE3B;MACA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGjB,OAAO,CAACD,MAAM,EAAEkB,CAAC,IAAIJ,WAAW,EAAE;QAClDG,IAAI,CAACR,IAAI,CAACR,OAAO,CAACkB,KAAK,CAACD,CAAC,EAAEA,CAAC,GAAGJ,WAAW,CAAC,CAAC;MAChD;MAEA,IAAIG,IAAI,CAACjB,MAAM,GAAGI,QAAQ,EAAE;QACxBV,MAAM,CAACO,OAAO,GAAGA,OAAO,CAACkB,KAAK,CAAC,CAAC,EAAEL,WAAW,GAAGV,QAAQ,CAAC;QACzD;MACJ;MAEA,MAAMgB,UAAU,GAAGL,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEZ,QAAQ,GAAGa,IAAI,CAACjB,MAAM,CAAC;MAEtD,IAAIoB,UAAU,IAAI,CAAC,EAAE;QACjB;MACJ;MAEA,MAAMC,OAAO,GAAGf,KAAK,CAACC,IAAI,CAAC;QAAEP,MAAM,EAAEoB,UAAU,GAAGN;MAAY,CAAC,CAAC,CAACQ,GAAG,CAAC,MAAM;QACvE,OAAO;UACHZ,QAAQ,EAAE9B,aAAa,CAAC;YACpB+B,SAAS,EAAE;UACf,CAAC;QACL,CAAC;MACL,CAAC,CAAC;MAEFjB,MAAM,CAACO,OAAO,CAACQ,IAAI,CAAC,GAAGY,OAAO,CAAC;IACnC;EACJ,CAAC,CAAC,EACFxC,iBAAiB,CAAC;IACdQ,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBsB,YAAY,EAAE,CAAC;IACfW,UAAU,EAAE,IAAI;IAChB3B,QAAQ,EAAEA,CAAC;MAAEF,MAAM;MAAE8B;IAAO,CAAC,KAAK;MAC9B,MAAMC,MAAM,GAAGC,QAAQ,CAAChC,MAAM,CAAC+B,MAAM,CAAC;MACtC,IAAIE,KAAK,CAACF,MAAM,CAAC,EAAE;QACf,OAAOD,MAAM,CAACC,MAAM;MACxB,CAAC,MAAM;QACHD,MAAM,CAACC,MAAM,GAAG,GAAG/B,MAAM,CAAC+B,MAAM,IAAI;MACxC;IACJ;EACJ,CAAC,CAAC,EACF5C,iBAAiB,CAAC;IACdQ,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,YAAY;IACnBsB,YAAY,EAAE,CAAC;IACfW,UAAU,EAAE,IAAI;IAChB3B,QAAQ,EAAEA,CAAC;MAAEF,MAAM;MAAE8B;IAAO,CAAC,KAAK;MAC9B,MAAMI,SAAS,GAAGF,QAAQ,CAAChC,MAAM,CAACkC,SAAS,CAAC;MAC5C,IAAID,KAAK,CAACC,SAAS,CAAC,EAAE;QAClB,OAAOJ,MAAM,CAACI,SAAS;MAC3B,CAAC,MAAM;QACHJ,MAAM,CAACI,SAAS,GAAG,GAAGlC,MAAM,CAACkC,SAAS,IAAI;MAC9C;IACJ;EACJ,CAAC,CAAC,EACF7C,iBAAiB,CAAC;IACdM,IAAI,EAAE,mBAAmB;IACzBC,KAAK,EAAE,qBAAqB;IAC5BuC,OAAO,EAAE,CACL;MAAEvC,KAAK,EAAE,QAAQ;MAAEwC,KAAK,EAAE;IAAS,CAAC,EACpC;MAAExC,KAAK,EAAE,QAAQ;MAAEwC,KAAK,EAAE;IAAS,CAAC;EAE5C,CAAC,CAAC,EACFnD,kBAAkB,CAAC;IACfU,IAAI,EAAE,oBAAoB;IAC1BC,KAAK,EAAE;EACX,CAAC,CAAC,EACFR,iBAAiB,CAAC;IACdO,IAAI,EAAE,SAAS;IACf0C,IAAI,EAAE,IAAI;IACVC,UAAU,EAAE,IAAI;IAChBC,MAAM,EAAE,CACJjD,eAAe,CAAC;MACZK,IAAI,EAAE,UAAU;MAChB0C,IAAI,EAAE,KAAK;MACXG,UAAU,EAAE,CAAC,mBAAmB;IACpC,CAAC,CAAC;EAEV,CAAC,CAAC,CACL;EACDC,QAAQ,EAAE;IACNzC,MAAM,EAAE;MACJI,UAAU,EAAE,KAAK;MACjBG,OAAO,EAAE,CACL;QACIS,QAAQ,EAAE9B,aAAa,CAAC;UACpB+B,SAAS,EAAE,mBAAmB;UAC9BjB,MAAM,EAAE;YACJgB,QAAQ,EAAE,CACN9B,aAAa,CAAC;cACV+B,SAAS,EAAE;YACf,CAAC,CAAC;UAEV;QACJ,CAAC;MACL,CAAC,EACD;QACID,QAAQ,EAAE9B,aAAa,CAAC;UACpB+B,SAAS,EAAE,mBAAmB;UAC9BjB,MAAM,EAAE;YACJgB,QAAQ,EAAE,CACN9B,aAAa,CAAC;cACV+B,SAAS,EAAE;YACf,CAAC,CAAC;UAEV;QACJ,CAAC;MACL,CAAC;IAET,CAAC;IACDa,MAAM,EAAE;MACJY,SAAS,EAAE,YAAY;MACvBC,OAAO,EAAE,MAAM;MACfC,aAAa,EAAE,KAAK;MACpBC,QAAQ,EAAE,MAAM;MAChBC,cAAc,EAAE,YAAY;MAC5BC,UAAU,EAAE,SAAS;MACrBC,KAAK,EAAE,MAAM;MACbC,SAAS,EAAE,KAAK;MAChBC,YAAY,EAAE,KAAK;MACnBC,UAAU,EAAE,KAAK;MACjBC,WAAW,EAAE,KAAK;MAClBC,UAAU,EAAE,KAAK;MACjBC,YAAY,EAAE,KAAK;MACnBC,aAAa,EAAE,KAAK;MACpBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/GridColumn.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ComponentPropsWithChildren } from "../types";
+export declare const GridColumnComponent: ({ inputs }: {
+    inputs: ComponentPropsWithChildren["inputs"];
+}) => React.JSX.Element;

package/editorComponents/GridColumn.js

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

package/editorComponents/GridColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","GridColumnComponent","inputs","createElement","Fragment","children"],"sources":["GridColumn.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nexport const GridColumnComponent = ({\n    inputs\n}: {\n    inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCC;AAGJ,CAAC,KAAK;EACF,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}

package/editorComponents/GridColumn.manifest.d.ts

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