@webiny/website-builder-react 6.3.0 → 6.4.0-beta.1

package/editorComponents/Grid.js

@@ -1,65 +1,37 @@
-import React from "react";
-export const GridColumnComponent = ({
-  inputs
-}) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, inputs.children);
+import react from "react";
+const GridColumnComponent = ({ inputs })=>/*#__PURE__*/ react.createElement(react.Fragment, null, inputs.children);
+const GridComponent = ({ inputs, styles, breakpoint })=>{
+    const { gridLayout = "12", columns, columnGap, stackAtBreakpoint, reverseWhenStacked } = inputs;
+    const rowConfig = gridLayout.split("-").map((size)=>parseInt(size));
+    const rows = [];
+    for(let i = 0; i < columns.length; i += rowConfig.length)rows.push(columns.slice(i, i + rowConfig.length));
+    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)=>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
+                }
+            })))));
 };
-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);
+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);
 };
+export { GridColumnComponent, GridComponent };
 
 //# sourceMappingURL=Grid.js.map

package/editorComponents/Grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","GridColumnComponent","inputs","createElement","Fragment","children","GridComponent","styles","breakpoint","gridLayout","columns","columnGap","stackAtBreakpoint","reverseWhenStacked","rowConfig","split","map","size","parseInt","rows","i","length","push","slice","cellWidthReduction","stackColumns","flexDirection","style","column","Span","key","reductionInPx","width","flex","maxWidth","boxSizing"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentProps, ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const GridColumnComponent = ({\n    inputs\n}: {\n    inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n    return <>{inputs.children}</>;\n};\n\nexport interface Column {\n    children: React.ReactNode;\n}\n\ntype GridProps = ComponentProps<{\n    gridLayout: string;\n    rowCount: number;\n    rowGap: number;\n    columnGap: number;\n    columns: Column[];\n    stackAtBreakpoint?: string;\n    reverseWhenStacked?: boolean;\n}>;\n\nexport const GridComponent = ({ inputs, styles, breakpoint }: GridProps) => {\n    const { gridLayout = \"12\", columns, columnGap, stackAtBreakpoint, reverseWhenStacked } = inputs;\n    const rowConfig = gridLayout.split(\"-\").map(size => parseInt(size));\n    const rows: Column[][] = [];\n\n    // Chunk columns into rows\n    for (let i = 0; i < columns.length; i += rowConfig.length) {\n        rows.push(columns.slice(i, i + rowConfig.length));\n    }\n\n    // Number of pixels we need to subtract from each cell to ensure they fit in the grid with column gap\n    const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;\n\n    const stackColumns = breakpoint === stackAtBreakpoint;\n\n    if (stackColumns) {\n        styles.flexDirection = reverseWhenStacked ? \"column-reverse\" : \"column\";\n    }\n\n    return (\n        <div style={styles}>\n            {rows.map(columns => {\n                return columns.map((column, i) => (\n                    <Span\n                        key={i}\n                        stackColumns={stackColumns}\n                        size={rowConfig[i]}\n                        reductionInPx={cellWidthReduction}\n                    >\n                        <GridColumnComponent key={i} inputs={{ children: column.children }} />\n                    </Span>\n                ));\n            })}\n        </div>\n    );\n};\n\ninterface SpanProps {\n    size: number;\n    reductionInPx: number;\n    stackColumns: boolean;\n    children: React.ReactNode;\n}\n\nconst Span = ({ size, children, reductionInPx, stackColumns }: SpanProps) => {\n    const width = stackColumns ? \"100%\" : `calc(${(size / 12) * 100}% - ${reductionInPx}px)`;\n\n    return (\n        <div\n            style={{\n                flex: `0 0 ${width}`,\n                maxWidth: width,\n                boxSizing: \"border-box\"\n            }}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCC;AAGJ,CAAC,KAAK;EACF,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC;AAgBD,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEJ,MAAM;EAAEK,MAAM;EAAEC;AAAsB,CAAC,KAAK;EACxE,MAAM;IAAEC,UAAU,GAAG,IAAI;IAAEC,OAAO;IAAEC,SAAS;IAAEC,iBAAiB;IAAEC;EAAmB,CAAC,GAAGX,MAAM;EAC/F,MAAMY,SAAS,GAAGL,UAAU,CAACM,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAACC,IAAI,IAAIC,QAAQ,CAACD,IAAI,CAAC,CAAC;EACnE,MAAME,IAAgB,GAAG,EAAE;;EAE3B;EACA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGV,OAAO,CAACW,MAAM,EAAED,CAAC,IAAIN,SAAS,CAACO,MAAM,EAAE;IACvDF,IAAI,CAACG,IAAI,CAACZ,OAAO,CAACa,KAAK,CAACH,CAAC,EAAEA,CAAC,GAAGN,SAAS,CAACO,MAAM,CAAC,CAAC;EACrD;;EAEA;EACA,MAAMG,kBAAkB,GAAGb,SAAS,GAAGA,SAAS,GAAGA,SAAS,GAAGG,SAAS,CAACO,MAAM,GAAG,CAAC;EAEnF,MAAMI,YAAY,GAAGjB,UAAU,KAAKI,iBAAiB;EAErD,IAAIa,YAAY,EAAE;IACdlB,MAAM,CAACmB,aAAa,GAAGb,kBAAkB,GAAG,gBAAgB,GAAG,QAAQ;EAC3E;EAEA,oBACIb,KAAA,CAAAG,aAAA;IAAKwB,KAAK,EAAEpB;EAAO,GACdY,IAAI,CAACH,GAAG,CAACN,OAAO,IAAI;IACjB,OAAOA,OAAO,CAACM,GAAG,CAAC,CAACY,MAAM,EAAER,CAAC,kBACzBpB,KAAA,CAAAG,aAAA,CAAC0B,IAAI;MACDC,GAAG,EAAEV,CAAE;MACPK,YAAY,EAAEA,YAAa;MAC3BR,IAAI,EAAEH,SAAS,CAACM,CAAC,CAAE;MACnBW,aAAa,EAAEP;IAAmB,gBAElCxB,KAAA,CAAAG,aAAA,CAACF,mBAAmB;MAAC6B,GAAG,EAAEV,CAAE;MAAClB,MAAM,EAAE;QAAEG,QAAQ,EAAEuB,MAAM,CAACvB;MAAS;IAAE,CAAE,CACnE,CACT,CAAC;EACN,CAAC,CACA,CAAC;AAEd,CAAC;AASD,MAAMwB,IAAI,GAAGA,CAAC;EAAEZ,IAAI;EAAEZ,QAAQ;EAAE0B,aAAa;EAAEN;AAAwB,CAAC,KAAK;EACzE,MAAMO,KAAK,GAAGP,YAAY,GAAG,MAAM,GAAG,QAASR,IAAI,GAAG,EAAE,GAAI,GAAG,OAAOc,aAAa,KAAK;EAExF,oBACI/B,KAAA,CAAAG,aAAA;IACIwB,KAAK,EAAE;MACHM,IAAI,EAAE,OAAOD,KAAK,EAAE;MACpBE,QAAQ,EAAEF,KAAK;MACfG,SAAS,EAAE;IACf;EAAE,GAED9B,QACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"editorComponents/Grid.js","sources":["../../src/editorComponents/Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentProps, ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const GridColumnComponent = ({\n    inputs\n}: {\n    inputs: ComponentPropsWithChildren[\"inputs\"];\n}) => {\n    return <>{inputs.children}</>;\n};\n\nexport interface Column {\n    children: React.ReactNode;\n}\n\ntype GridProps = ComponentProps<{\n    gridLayout: string;\n    rowCount: number;\n    rowGap: number;\n    columnGap: number;\n    columns: Column[];\n    stackAtBreakpoint?: string;\n    reverseWhenStacked?: boolean;\n}>;\n\nexport const GridComponent = ({ inputs, styles, breakpoint }: GridProps) => {\n    const { gridLayout = \"12\", columns, columnGap, stackAtBreakpoint, reverseWhenStacked } = inputs;\n    const rowConfig = gridLayout.split(\"-\").map(size => parseInt(size));\n    const rows: Column[][] = [];\n\n    // Chunk columns into rows\n    for (let i = 0; i < columns.length; i += rowConfig.length) {\n        rows.push(columns.slice(i, i + rowConfig.length));\n    }\n\n    // Number of pixels we need to subtract from each cell to ensure they fit in the grid with column gap\n    const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;\n\n    const stackColumns = breakpoint === stackAtBreakpoint;\n\n    if (stackColumns) {\n        styles.flexDirection = reverseWhenStacked ? \"column-reverse\" : \"column\";\n    }\n\n    return (\n        <div style={styles}>\n            {rows.map(columns => {\n                return columns.map((column, i) => (\n                    <Span\n                        key={i}\n                        stackColumns={stackColumns}\n                        size={rowConfig[i]}\n                        reductionInPx={cellWidthReduction}\n                    >\n                        <GridColumnComponent key={i} inputs={{ children: column.children }} />\n                    </Span>\n                ));\n            })}\n        </div>\n    );\n};\n\ninterface SpanProps {\n    size: number;\n    reductionInPx: number;\n    stackColumns: boolean;\n    children: React.ReactNode;\n}\n\nconst Span = ({ size, children, reductionInPx, stackColumns }: SpanProps) => {\n    const width = stackColumns ? \"100%\" : `calc(${(size / 12) * 100}% - ${reductionInPx}px)`;\n\n    return (\n        <div\n            style={{\n                flex: `0 0 ${width}`,\n                maxWidth: width,\n                boxSizing: \"border-box\"\n            }}\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["GridColumnComponent","inputs","GridComponent","styles","breakpoint","gridLayout","columns","columnGap","stackAtBreakpoint","reverseWhenStacked","rowConfig","size","parseInt","rows","i","cellWidthReduction","stackColumns","column","Span","children","reductionInPx","width"],"mappings":";AAGO,MAAMA,sBAAsB,CAAC,EAChCC,MAAM,EAGT,GACU,WAAP,GAAO,0CAAGA,OAAO,QAAQ;AAiBtB,MAAMC,gBAAgB,CAAC,EAAED,MAAM,EAAEE,MAAM,EAAEC,UAAU,EAAa;IACnE,MAAM,EAAEC,aAAa,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGR;IACzF,MAAMS,YAAYL,WAAW,KAAK,CAAC,KAAK,GAAG,CAACM,CAAAA,OAAQC,SAASD;IAC7D,MAAME,OAAmB,EAAE;IAG3B,IAAK,IAAIC,IAAI,GAAGA,IAAIR,QAAQ,MAAM,EAAEQ,KAAKJ,UAAU,MAAM,CACrDG,KAAK,IAAI,CAACP,QAAQ,KAAK,CAACQ,GAAGA,IAAIJ,UAAU,MAAM;IAInD,MAAMK,qBAAqBR,YAAYA,YAAYA,YAAYG,UAAU,MAAM,GAAG;IAElF,MAAMM,eAAeZ,eAAeI;IAEpC,IAAIQ,cACAb,OAAO,aAAa,GAAGM,qBAAqB,mBAAmB;IAGnE,OAAO,WAAP,GACI,oBAAC;QAAI,OAAON;OACPU,KAAK,GAAG,CAACP,CAAAA,UACCA,QAAQ,GAAG,CAAC,CAACW,QAAQH,IAAAA,WAAAA,GACxB,oBAACI,MAAIA;gBACD,KAAKJ;gBACL,cAAcE;gBACd,MAAMN,SAAS,CAACI,EAAE;gBAClB,eAAeC;6BAEf,oBAACf,qBAAmBA;gBAAC,KAAKc;gBAAG,QAAQ;oBAAE,UAAUG,OAAO,QAAQ;gBAAC;;AAMzF;AASA,MAAMC,OAAO,CAAC,EAAEP,IAAI,EAAEQ,QAAQ,EAAEC,aAAa,EAAEJ,YAAY,EAAa;IACpE,MAAMK,QAAQL,eAAe,SAAS,CAAC,KAAK,EAAGL,OAAO,KAAM,IAAI,IAAI,EAAES,cAAc,GAAG,CAAC;IAExF,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,MAAM,CAAC,IAAI,EAAEC,OAAO;YACpB,UAAUA;YACV,WAAW;QACf;OAECF;AAGb"}

package/editorComponents/Grid.manifest.js

@@ -1,175 +1,171 @@
 "use client";
-
-import { createBooleanInput, createElement, createNumberInput, createObjectInput, createSelectInput, createSlotInput, createTextInput } from "@webiny/website-builder-sdk";
+import { createBooleanInput, createElement as website_builder_sdk_createElement, createNumberInput, createObjectInput, createSelectInput, createSlotInput, createTextInput } from "@webiny/website-builder-sdk";
 import { createComponent } from "../createComponent.js";
 import { GridComponent } from "./Grid.js";
-export const Grid = createComponent(GridComponent, {
-  name: "Webiny/Grid",
-  label: "Grid",
-  aiContext: "Multi-column layout container. Set gridLayout to a dash-separated pattern (e.g. '6-6' for two equal columns, '8-4' for wide-narrow, '4-4-4' for three equal). Each segment becomes a GridColumn. Columns stack vertically on smaller screens when stackAtBreakpoint is set.",
-  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"
-            })]
-          }
+const Grid = createComponent(GridComponent, {
+    name: "Webiny/Grid",
+    label: "Grid",
+    aiContext: "Multi-column layout container. Set gridLayout to a dash-separated pattern (e.g. '6-6' for two equal columns, '8-4' for wide-narrow, '4-4-4' for three equal). Each segment becomes a GridColumn. Columns stack vertically on smaller screens when stackAtBreakpoint is set.",
+    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 (0 !== remainder) {
+                    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 = [];
+                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(()=>({
+                        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"
+                    ]
+                })
+            ]
         })
-      }]
-    },
-    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"
+    ],
+    defaults: {
+        inputs: {
+            gridLayout: "6-6",
+            columns: [
+                {
+                    children: website_builder_sdk_createElement({
+                        component: "Webiny/GridColumn",
+                        inputs: {
+                            children: [
+                                website_builder_sdk_createElement({
+                                    component: "Webiny/Lexical"
+                                })
+                            ]
+                        }
+                    })
+                },
+                {
+                    children: website_builder_sdk_createElement({
+                        component: "Webiny/GridColumn",
+                        inputs: {
+                            children: [
+                                website_builder_sdk_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"
+        }
     }
-  }
 });
+export { Grid };
 
 //# sourceMappingURL=Grid.manifest.js.map

package/editorComponents/Grid.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createBooleanInput","createElement","createNumberInput","createObjectInput","createSelectInput","createSlotInput","createTextInput","createComponent","GridComponent","Grid","name","label","aiContext","image","group","autoApplyStyles","inputs","renderer","onChange","rowColumnCount","gridLayout","split","length","columns","remainder","fullColumnCount","rowCount","toCreate","Array","from","forEach","push","children","component","defaultValue","minValue","columnCount","Math","max","rows","i","slice","createRows","newRows","map","responsive","styles","rowGap","parseInt","isNaN","columnGap","options","value","list","hideFromUi","fields","components","defaults","boxSizing","display","flexDirection","flexWrap","justifyContent","alignItems","width","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["Grid.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n    createBooleanInput,\n    createElement,\n    createNumberInput,\n    createObjectInput,\n    createSelectInput,\n    createSlotInput,\n    createTextInput\n} from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { GridComponent } from \"./Grid.js\";\n\nexport interface Column {\n    children: React.ReactNode;\n}\nexport const Grid = createComponent(GridComponent, {\n    name: \"Webiny/Grid\",\n    label: \"Grid\",\n    aiContext:\n        \"Multi-column layout container. Set gridLayout to a dash-separated pattern (e.g. '6-6' for two equal columns, '8-4' for wide-narrow, '4-4-4' for three equal). Each segment becomes a GridColumn. Columns stack vertically on smaller screens when stackAtBreakpoint is set.\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z\"/></svg>`,\n    group: \"basic\",\n    autoApplyStyles: false,\n    inputs: [\n        createTextInput({\n            name: \"gridLayout\",\n            label: \"Grid Layout\",\n            renderer: \"Webiny/GridLayout\",\n            onChange: ({ inputs, createElement }) => {\n                const rowColumnCount = inputs.gridLayout.split(\"-\").length;\n                const columns = inputs.columns.length;\n\n                const remainder = columns % rowColumnCount;\n\n                if (remainder !== 0) {\n                    const fullColumnCount = rowColumnCount * inputs.rowCount;\n                    const toCreate =\n                        columns > fullColumnCount ? remainder : rowColumnCount - remainder;\n\n                    Array.from({ length: toCreate }).forEach(() => {\n                        inputs.columns.push({\n                            children: createElement({\n                                component: \"Webiny/GridColumn\"\n                            })\n                        });\n                    });\n                }\n\n                inputs.rowCount = inputs.columns.length / rowColumnCount;\n            }\n        }),\n        createNumberInput({\n            name: \"rowCount\",\n            label: \"Row Count\",\n            defaultValue: 1,\n            minValue: 1,\n            onChange: ({ inputs, createElement }) => {\n                const gridLayout = inputs.gridLayout;\n                const columnCount = gridLayout.split(\"-\").length;\n                const rowCount = Math.max(1, inputs.rowCount);\n                const columns = inputs.columns;\n                const rows: Column[][] = [];\n\n                // Chunk columns into rows\n                for (let i = 0; i < columns.length; i += columnCount) {\n                    rows.push(columns.slice(i, i + columnCount));\n                }\n\n                if (rows.length > rowCount) {\n                    inputs.columns = columns.slice(0, columnCount * rowCount);\n                    return;\n                }\n\n                const createRows = Math.max(0, rowCount - rows.length);\n\n                if (createRows <= 0) {\n                    return;\n                }\n\n                const newRows = Array.from({ length: createRows * columnCount }).map(() => {\n                    return {\n                        children: createElement({\n                            component: \"Webiny/GridColumn\"\n                        })\n                    };\n                });\n\n                inputs.columns.push(...newRows);\n            }\n        }),\n        createNumberInput({\n            name: \"rowGap\",\n            label: \"Row Gap\",\n            defaultValue: 0,\n            responsive: true,\n            onChange: ({ inputs, styles }) => {\n                const rowGap = parseInt(inputs.rowGap);\n                if (isNaN(rowGap)) {\n                    delete styles.rowGap;\n                } else {\n                    styles.rowGap = `${inputs.rowGap}px`;\n                }\n            }\n        }),\n        createNumberInput({\n            name: \"columnGap\",\n            label: \"Column Gap\",\n            defaultValue: 0,\n            responsive: true,\n            onChange: ({ inputs, styles }) => {\n                const columnGap = parseInt(inputs.columnGap);\n                if (isNaN(columnGap)) {\n                    delete styles.columnGap;\n                } else {\n                    styles.columnGap = `${inputs.columnGap}px`;\n                }\n            }\n        }),\n        createSelectInput({\n            name: \"stackAtBreakpoint\",\n            label: \"Stack at breakpoint\",\n            options: [\n                { label: \"Tablet\", value: \"tablet\" },\n                { label: \"Mobile\", value: \"mobile\" }\n            ]\n        }),\n        createBooleanInput({\n            name: \"reverseWhenStacked\",\n            label: \"Reverse columns when stacked\"\n        }),\n        createObjectInput({\n            name: \"columns\",\n            list: true,\n            hideFromUi: true,\n            fields: [\n                createSlotInput({\n                    name: \"children\",\n                    list: false,\n                    components: [\"Webiny/GridColumn\"]\n                })\n            ]\n        })\n    ],\n    defaults: {\n        inputs: {\n            gridLayout: \"6-6\",\n            columns: [\n                {\n                    children: createElement({\n                        component: \"Webiny/GridColumn\",\n                        inputs: {\n                            children: [\n                                createElement({\n                                    component: \"Webiny/Lexical\"\n                                })\n                            ]\n                        }\n                    })\n                },\n                {\n                    children: createElement({\n                        component: \"Webiny/GridColumn\",\n                        inputs: {\n                            children: [\n                                createElement({\n                                    component: \"Webiny/Lexical\"\n                                })\n                            ]\n                        }\n                    })\n                }\n            ]\n        },\n        styles: {\n            boxSizing: \"border-box\",\n            display: \"flex\",\n            flexDirection: \"row\",\n            flexWrap: \"wrap\",\n            justifyContent: \"flex-start\",\n            alignItems: \"stretch\",\n            width: \"100%\",\n            marginTop: \"0px\",\n            marginBottom: \"0px\",\n            marginLeft: \"0px\",\n            marginRight: \"0px\",\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"editorComponents/Grid.manifest.js","sources":["../../src/editorComponents/Grid.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n    createBooleanInput,\n    createElement,\n    createNumberInput,\n    createObjectInput,\n    createSelectInput,\n    createSlotInput,\n    createTextInput\n} from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { GridComponent } from \"./Grid.js\";\n\nexport interface Column {\n    children: React.ReactNode;\n}\nexport const Grid = createComponent(GridComponent, {\n    name: \"Webiny/Grid\",\n    label: \"Grid\",\n    aiContext:\n        \"Multi-column layout container. Set gridLayout to a dash-separated pattern (e.g. '6-6' for two equal columns, '8-4' for wide-narrow, '4-4-4' for three equal). Each segment becomes a GridColumn. Columns stack vertically on smaller screens when stackAtBreakpoint is set.\",\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"],"names":["Grid","createComponent","GridComponent","createTextInput","inputs","createElement","rowColumnCount","columns","remainder","fullColumnCount","toCreate","Array","createNumberInput","gridLayout","columnCount","rowCount","Math","rows","i","createRows","newRows","styles","rowGap","parseInt","isNaN","columnGap","createSelectInput","createBooleanInput","createObjectInput","createSlotInput"],"mappings":"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"}

package/editorComponents/GridColumn.js

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

package/editorComponents/GridColumn.js.map

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

package/editorComponents/GridColumn.manifest.js

@@ -1,26 +1,28 @@
 "use client";
-
 import { StyleSettings } from "@webiny/website-builder-sdk";
 import { createComponent } from "../createComponent.js";
 import { GridColumnComponent } from "./GridColumn.js";
-export const GridColumn = createComponent(GridColumnComponent, {
-  name: "Webiny/GridColumn",
-  label: "Column",
-  aiContext: "A single cell inside a Grid. Accepts any child elements. Created automatically when a Grid's layout changes.",
-  image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z"/></svg>`,
-  canDrag: false,
-  canDelete: false,
-  acceptsChildren: true,
-  hideFromToolbar: true,
-  hideStyleSettings: [StyleSettings.Visibility],
-  defaults: {
-    styles: {
-      paddingTop: "10px",
-      paddingRight: "10px",
-      paddingBottom: "10px",
-      paddingLeft: "10px"
+const GridColumn = createComponent(GridColumnComponent, {
+    name: "Webiny/GridColumn",
+    label: "Column",
+    aiContext: "A single cell inside a Grid. Accepts any child elements. Created automatically when a Grid's layout changes.",
+    image: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z"/></svg>',
+    canDrag: false,
+    canDelete: false,
+    acceptsChildren: true,
+    hideFromToolbar: true,
+    hideStyleSettings: [
+        StyleSettings.Visibility
+    ],
+    defaults: {
+        styles: {
+            paddingTop: "10px",
+            paddingRight: "10px",
+            paddingBottom: "10px",
+            paddingLeft: "10px"
+        }
     }
-  }
 });
+export { GridColumn };
 
 //# sourceMappingURL=GridColumn.manifest.js.map

package/editorComponents/GridColumn.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSettings","createComponent","GridColumnComponent","GridColumn","name","label","aiContext","image","canDrag","canDelete","acceptsChildren","hideFromToolbar","hideStyleSettings","Visibility","defaults","styles","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["GridColumn.manifest.ts"],"sourcesContent":["\"use client\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { GridColumnComponent } from \"./GridColumn.js\";\n\nexport const GridColumn = createComponent(GridColumnComponent, {\n    name: \"Webiny/GridColumn\",\n    label: \"Column\",\n    aiContext:\n        \"A single cell inside a Grid. Accepts any child elements. Created automatically when a Grid's layout changes.\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z\"/></svg>`,\n    canDrag: false,\n    canDelete: false,\n    acceptsChildren: true,\n    hideFromToolbar: true,\n    hideStyleSettings: [StyleSettings.Visibility],\n    defaults: {\n        styles: {\n            paddingTop: \"10px\",\n            paddingRight: \"10px\",\n            paddingBottom: \"10px\",\n            paddingLeft: \"10px\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,aAAa,QAAQ,6BAA6B;AAC3D,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAACC,mBAAmB,EAAE;EAC3DE,IAAI,EAAE,mBAAmB;EACzBC,KAAK,EAAE,QAAQ;EACfC,SAAS,EACL,8GAA8G;EAClHC,KAAK,EAAE,4bAA4b;EACncC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE,IAAI;EACrBC,iBAAiB,EAAE,CAACZ,aAAa,CAACa,UAAU,CAAC;EAC7CC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,UAAU,EAAE,MAAM;MAClBC,YAAY,EAAE,MAAM;MACpBC,aAAa,EAAE,MAAM;MACrBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"editorComponents/GridColumn.manifest.js","sources":["../../src/editorComponents/GridColumn.manifest.ts"],"sourcesContent":["\"use client\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { GridColumnComponent } from \"./GridColumn.js\";\n\nexport const GridColumn = createComponent(GridColumnComponent, {\n    name: \"Webiny/GridColumn\",\n    label: \"Column\",\n    aiContext:\n        \"A single cell inside a Grid. Accepts any child elements. Created automatically when a Grid's layout changes.\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z\"/></svg>`,\n    canDrag: false,\n    canDelete: false,\n    acceptsChildren: true,\n    hideFromToolbar: true,\n    hideStyleSettings: [StyleSettings.Visibility],\n    defaults: {\n        styles: {\n            paddingTop: \"10px\",\n            paddingRight: \"10px\",\n            paddingBottom: \"10px\",\n            paddingLeft: \"10px\"\n        }\n    }\n});\n"],"names":["GridColumn","createComponent","GridColumnComponent","StyleSettings"],"mappings":";;;;AAKO,MAAMA,aAAaC,gBAAgBC,qBAAqB;IAC3D,MAAM;IACN,OAAO;IACP,WACI;IACJ,OAAO;IACP,SAAS;IACT,WAAW;IACX,iBAAiB;IACjB,iBAAiB;IACjB,mBAAmB;QAACC,cAAc,UAAU;KAAC;IAC7C,UAAU;QACN,QAAQ;YACJ,YAAY;YACZ,cAAc;YACd,eAAe;YACf,aAAa;QACjB;IACJ;AACJ"}