@webiny/app-website-builder 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/inputRenderers/DateTimeInput.test.js

@@ -0,0 +1,27 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { toUtcIsoString } from "./DateTimeInput.js";
+describe("toUtcIsoString", ()=>{
+    const originalTz = process.env.TZ;
+    beforeAll(()=>{
+        process.env.TZ = "America/New_York";
+    });
+    afterAll(()=>{
+        process.env.TZ = originalTz;
+    });
+    it("converts the picker's local wall-clock value to the matching UTC instant", ()=>{
+        expect(toUtcIsoString("2026-10-02T09:00:00.000Z")).toBe("2026-10-02T13:00:00.000Z");
+    });
+    it("round-trips: a stored instant shown in local time is saved back unchanged", ()=>{
+        const stored = "2026-10-02T14:00:00.000Z";
+        const shown = new Date(stored);
+        const pad = (n)=>String(n).padStart(2, "0");
+        const emitted = `${shown.getFullYear()}-${pad(shown.getMonth() + 1)}-${pad(shown.getDate())}T${pad(shown.getHours())}:${pad(shown.getMinutes())}:00.000Z`;
+        expect(toUtcIsoString(emitted)).toBe(stored);
+    });
+    it("keeps an empty value empty", ()=>{
+        expect(toUtcIsoString(void 0)).toBeUndefined();
+        expect(toUtcIsoString("")).toBeUndefined();
+    });
+});
+
+//# sourceMappingURL=DateTimeInput.test.js.map

package/inputRenderers/DateTimeInput.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/DateTimeInput.test.js","sources":["../../src/inputRenderers/DateTimeInput.test.ts"],"sourcesContent":["import { describe, it, expect, beforeAll, afterAll } from \"vitest\";\nimport { toUtcIsoString } from \"./DateTimeInput.js\";\n\ndescribe(\"toUtcIsoString\", () => {\n    const originalTz = process.env.TZ;\n\n    beforeAll(() => {\n        // UTC-04:00 on the dates below (EDT).\n        process.env.TZ = \"America/New_York\";\n    });\n\n    afterAll(() => {\n        process.env.TZ = originalTz;\n    });\n\n    it(\"converts the picker's local wall-clock value to the matching UTC instant\", () => {\n        // The user picks 09:00 local time; the picker emits it as \"09:00Z\".\n        expect(toUtcIsoString(\"2026-10-02T09:00:00.000Z\")).toBe(\"2026-10-02T13:00:00.000Z\");\n    });\n\n    it(\"round-trips: a stored instant shown in local time is saved back unchanged\", () => {\n        const stored = \"2026-10-02T14:00:00.000Z\";\n        // What the picker displays (local) and emits back with a \"Z\" suffix.\n        const shown = new Date(stored);\n        const pad = (n: number) => String(n).padStart(2, \"0\");\n        const emitted = `${shown.getFullYear()}-${pad(shown.getMonth() + 1)}-${pad(\n            shown.getDate()\n        )}T${pad(shown.getHours())}:${pad(shown.getMinutes())}:00.000Z`;\n\n        expect(toUtcIsoString(emitted)).toBe(stored);\n    });\n\n    it(\"keeps an empty value empty\", () => {\n        expect(toUtcIsoString(undefined)).toBeUndefined();\n        expect(toUtcIsoString(\"\")).toBeUndefined();\n    });\n});\n"],"names":["describe","originalTz","process","beforeAll","afterAll","it","expect","toUtcIsoString","stored","shown","Date","pad","n","String","emitted","undefined"],"mappings":";;AAGAA,SAAS,kBAAkB;IACvB,MAAMC,aAAaC,QAAQ,GAAG,CAAC,EAAE;IAEjCC,UAAU;QAEND,QAAQ,GAAG,CAAC,EAAE,GAAG;IACrB;IAEAE,SAAS;QACLF,QAAQ,GAAG,CAAC,EAAE,GAAGD;IACrB;IAEAI,GAAG,4EAA4E;QAE3EC,OAAOC,eAAe,6BAA6B,IAAI,CAAC;IAC5D;IAEAF,GAAG,6EAA6E;QAC5E,MAAMG,SAAS;QAEf,MAAMC,QAAQ,IAAIC,KAAKF;QACvB,MAAMG,MAAM,CAACC,IAAcC,OAAOD,GAAG,QAAQ,CAAC,GAAG;QACjD,MAAME,UAAU,GAAGL,MAAM,WAAW,GAAG,CAAC,EAAEE,IAAIF,MAAM,QAAQ,KAAK,GAAG,CAAC,EAAEE,IACnEF,MAAM,OAAO,IACf,CAAC,EAAEE,IAAIF,MAAM,QAAQ,IAAI,CAAC,EAAEE,IAAIF,MAAM,UAAU,IAAI,QAAQ,CAAC;QAE/DH,OAAOC,eAAeO,UAAU,IAAI,CAACN;IACzC;IAEAH,GAAG,8BAA8B;QAC7BC,OAAOC,eAAeQ,SAAY,aAAa;QAC/CT,OAAOC,eAAe,KAAK,aAAa;IAC5C;AACJ"}

package/inputRenderers/FileInput.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ElementInputRendererProps } from "../BaseEditor";
-export declare const FileInputRenderer: ({ value, metadata, onChange, label, ...props }: ElementInputRendererProps) => React.JSX.Element;
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
+export declare const FileInputRenderer: ({ value, onChange, label, ...props }: ElementInputRendererProps) => React.JSX.Element;

package/inputRenderers/FileInput.js

@@ -1,59 +1,123 @@
-import React from "react";
-import { FilePicker } from "@webiny/admin-ui";
+import react, { useState } from "react";
+import { FilePicker, ImageEditor, RichItemPreview, getCroppedImageRenderStyles } from "@webiny/admin-ui";
 import { FileManager } from "@webiny/app-admin";
-import { useBreakpoint } from "../BaseEditor/hooks/useBreakpoint";
-import { fileManagerItemToValue } from "../shared/fileManagerItemToValue";
-export const FileInputRenderer = ({
-  value,
-  metadata,
-  onChange,
-  label,
-  ...props
-}) => {
-  const input = props.input;
-  const {
-    isBaseBreakpoint
-  } = useBreakpoint();
-  const onFileChange = file => {
-    onChange(({
-      value,
-      metadata
-    }) => {
-      const newValue = fileManagerItemToValue(file);
-      value.set(newValue);
-      metadata.set("image", newValue);
-    });
-  };
-  const onRemove = () => {
-    onChange(({
-      value,
-      metadata
-    }) => {
-      if (isBaseBreakpoint) {
-        value.set(undefined);
-      } else {
-        value.set(null);
-      }
-      metadata.unset("image");
+import { useBreakpoint } from "../BaseEditor/hooks/useBreakpoint.js";
+import { getAssetCropParam, normalizeToAsset } from "@webiny/website-builder-sdk";
+import { fileManagerItemToValue } from "../shared/fileManagerItemToValue.js";
+const isEditableImage = (asset)=>!!asset?.src && "string" == typeof asset.mimeType && asset.mimeType.startsWith("image/") && "image/svg+xml" !== asset.mimeType;
+const hasImageEdit = (image)=>{
+    if (!image?.width || !image?.height) return false;
+    const c = image.crop;
+    const fullCrop = !c || 0 === c.top && 0 === c.left && 0 === c.bottom && 0 === c.right;
+    const fp = image.focalPoint;
+    const centeredFocal = !fp || 0.5 === fp.x && 0.5 === fp.y;
+    return !fullCrop || !centeredFocal;
+};
+const toEditorValue = (image)=>{
+    if (!image) return;
+    return {
+        crop: image.crop,
+        hotspot: image.focalPoint ? {
+            x: image.focalPoint.x,
+            y: image.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: image.alt,
+        caption: image.caption
+    };
+};
+const FileInputRenderer = ({ value, onChange, label, ...props })=>{
+    const input = props.input;
+    const { isBaseBreakpoint } = useBreakpoint();
+    const [editorOpen, setEditorOpen] = useState(false);
+    const asset = normalizeToAsset(value) ?? void 0;
+    const editable = isEditableImage(asset);
+    const onFileChange = (file)=>{
+        onChange(({ value })=>{
+            value.set(fileManagerItemToValue(file));
+        });
+    };
+    const onRemove = ()=>{
+        onChange(({ value })=>{
+            if (isBaseBreakpoint) value.set(void 0);
+            else value.set(null);
+        });
+    };
+    const onSaveEdit = (edit)=>{
+        onChange(({ value })=>{
+            if (!asset) return;
+            const image = {
+                width: asset.image?.width,
+                height: asset.image?.height,
+                crop: edit.crop,
+                focalPoint: edit.hotspot ? {
+                    x: edit.hotspot.x,
+                    y: edit.hotspot.y
+                } : void 0,
+                alt: edit.alt,
+                caption: edit.caption
+            };
+            const updated = {
+                ...asset,
+                image
+            };
+            const cropParam = getAssetCropParam(updated);
+            if (cropParam) {
+                const sep = asset.src.includes("?") ? "&" : "?";
+                updated.url = `${asset.src}${sep}crop=${cropParam}`;
+            } else updated.url = asset.src;
+            value.set(updated);
+        });
+    };
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        accept: input.allowedFileTypes,
+        onChange: onFileChange,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FilePicker, {
+                variant: "secondary",
+                label: label,
+                description: input.description,
+                type: "compact",
+                value: asset?.src,
+                renderFilePreview: editable && asset?.src && hasImageEdit(asset.image) ? (previewProps)=>/*#__PURE__*/ react.createElement(RichItemPreview, {
+                        ...previewProps,
+                        renderImage: ({ name })=>{
+                            const { wrapper, image } = getCroppedImageRenderStyles(asset.image?.width ?? 0, asset.image?.height ?? 0, asset.image?.crop, asset.image?.focalPoint ? {
+                                x: asset.image.focalPoint.x,
+                                y: asset.image.focalPoint.y,
+                                width: 1,
+                                height: 1
+                            } : void 0, {
+                                boxWidth: 1,
+                                boxHeight: 1,
+                                fit: "cover"
+                            });
+                            return /*#__PURE__*/ react.createElement("div", {
+                                style: wrapper
+                            }, /*#__PURE__*/ react.createElement("img", {
+                                src: asset.src,
+                                alt: name,
+                                draggable: false,
+                                style: image
+                            }));
+                        }
+                    }) : void 0,
+                onSelectItem: ()=>showFileManager(),
+                onRemoveItem: onRemove,
+                onEditItem: editable ? ()=>setEditorOpen(true) : void 0
+            }), editable ? /*#__PURE__*/ react.createElement(ImageEditor, {
+                open: editorOpen,
+                onClose: ()=>setEditorOpen(false),
+                image: {
+                    src: asset.src,
+                    width: asset.image?.width ?? 0,
+                    height: asset.image?.height ?? 0
+                },
+                value: toEditorValue(asset.image),
+                onSave: onSaveEdit
+            }) : null)
     });
-  };
-  const fileInfo = metadata.get("image");
-  const preview = value ? fileInfo : undefined;
-  return /*#__PURE__*/React.createElement(FileManager, {
-    accept: input.allowedFileTypes,
-    onChange: onFileChange,
-    render: ({
-      showFileManager
-    }) => /*#__PURE__*/React.createElement(FilePicker, {
-      label: label,
-      description: input.description,
-      type: "compact",
-      value: preview,
-      onSelectItem: () => showFileManager(),
-      onRemoveItem: onRemove,
-      onEditItem: () => showFileManager()
-    })
-  });
 };
+export { FileInputRenderer };
 
 //# sourceMappingURL=FileInput.js.map

package/inputRenderers/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FilePicker","FileManager","useBreakpoint","fileManagerItemToValue","FileInputRenderer","value","metadata","onChange","label","props","input","isBaseBreakpoint","onFileChange","file","newValue","set","onRemove","undefined","unset","fileInfo","get","preview","createElement","accept","allowedFileTypes","render","showFileManager","description","type","onSelectItem","onRemoveItem","onEditItem"],"sources":["FileInput.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemDto } from \"@webiny/admin-ui\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue\";\n\nexport const FileInputRenderer = ({\n    value,\n    metadata,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value, metadata }) => {\n            const newValue = fileManagerItemToValue(file);\n            value.set(newValue);\n\n            metadata.set(\"image\", newValue);\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value, metadata }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n            metadata.unset(\"image\");\n        });\n    };\n\n    const fileInfo = metadata.get<FileItemDto>(\"image\");\n    const preview = value ? fileInfo : undefined;\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    label={label}\n                    description={input.description}\n                    type=\"compact\"\n                    value={preview}\n                    onSelectItem={() => showFileManager()}\n                    onRemoveItem={onRemove}\n                    onEditItem={() => showFileManager()}\n                />\n            )}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,WAAW,QAAkC,mBAAmB;AACzE,SAASC,aAAa;AAEtB,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACoB,CAAC,KAAK;EAC7B,MAAMC,KAAK,GAAGD,KAAK,CAACC,KAAkB;EACtC,MAAM;IAAEC;EAAiB,CAAC,GAAGT,aAAa,CAAC,CAAC;EAC5C,MAAMU,YAAY,GAAIC,IAAyB,IAAK;IAChDN,QAAQ,CAAC,CAAC;MAAEF,KAAK;MAAEC;IAAS,CAAC,KAAK;MAC9B,MAAMQ,QAAQ,GAAGX,sBAAsB,CAACU,IAAI,CAAC;MAC7CR,KAAK,CAACU,GAAG,CAACD,QAAQ,CAAC;MAEnBR,QAAQ,CAACS,GAAG,CAAC,OAAO,EAAED,QAAQ,CAAC;IACnC,CAAC,CAAC;EACN,CAAC;EAED,MAAME,QAAQ,GAAGA,CAAA,KAAM;IACnBT,QAAQ,CAAC,CAAC;MAAEF,KAAK;MAAEC;IAAS,CAAC,KAAK;MAC9B,IAAIK,gBAAgB,EAAE;QAClBN,KAAK,CAACU,GAAG,CAACE,SAAS,CAAC;MACxB,CAAC,MAAM;QACHZ,KAAK,CAACU,GAAG,CAAC,IAAI,CAAC;MACnB;MACAT,QAAQ,CAACY,KAAK,CAAC,OAAO,CAAC;IAC3B,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,QAAQ,GAAGb,QAAQ,CAACc,GAAG,CAAc,OAAO,CAAC;EACnD,MAAMC,OAAO,GAAGhB,KAAK,GAAGc,QAAQ,GAAGF,SAAS;EAE5C,oBACIlB,KAAA,CAAAuB,aAAA,CAACrB,WAAW;IACRsB,MAAM,EAAEb,KAAK,CAACc,gBAAiB;IAC/BjB,QAAQ,EAAEK,YAAa;IACvBa,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxB3B,KAAA,CAAAuB,aAAA,CAACtB,UAAU;MACPQ,KAAK,EAAEA,KAAM;MACbmB,WAAW,EAAEjB,KAAK,CAACiB,WAAY;MAC/BC,IAAI,EAAC,SAAS;MACdvB,KAAK,EAAEgB,OAAQ;MACfQ,YAAY,EAAEA,CAAA,KAAMH,eAAe,CAAC,CAAE;MACtCI,YAAY,EAAEd,QAAS;MACvBe,UAAU,EAAEA,CAAA,KAAML,eAAe,CAAC;IAAE,CACvC;EACH,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/FileInput.js","sources":["../../src/inputRenderers/FileInput.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n    FilePicker,\n    ImageEditor,\n    RichItemPreview,\n    getCroppedImageRenderStyles,\n    type ImageEditorValue\n} from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport {\n    normalizeToAsset,\n    getAssetCropParam,\n    type Asset,\n    type AssetImage\n} from \"@webiny/website-builder-sdk\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nconst isEditableImage = (asset: Asset | undefined): asset is Asset => {\n    return (\n        !!asset?.src &&\n        typeof asset.mimeType === \"string\" &&\n        asset.mimeType.startsWith(\"image/\") &&\n        asset.mimeType !== \"image/svg+xml\"\n    );\n};\n\n/** True when the image carries a non-trivial crop or focal point worth previewing. */\nconst hasImageEdit = (image: AssetImage | undefined): boolean => {\n    if (!image?.width || !image?.height) {\n        return false;\n    }\n    const c = image.crop;\n    const fullCrop = !c || (c.top === 0 && c.left === 0 && c.bottom === 0 && c.right === 0);\n    const fp = image.focalPoint;\n    const centeredFocal = !fp || (fp.x === 0.5 && fp.y === 0.5);\n    return !fullCrop || !centeredFocal;\n};\n\n/** Map the stored asset image into the shared `ImageEditor` value (focalPoint → hotspot). */\nconst toEditorValue = (image: AssetImage | undefined): ImageEditorValue | undefined => {\n    if (!image) {\n        return undefined;\n    }\n    return {\n        crop: image.crop,\n        hotspot: image.focalPoint\n            ? { x: image.focalPoint.x, y: image.focalPoint.y, width: 1, height: 1 }\n            : undefined,\n        alt: image.alt,\n        caption: image.caption\n    };\n};\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n    const [editorOpen, setEditorOpen] = useState(false);\n\n    const asset = normalizeToAsset(value) ?? undefined;\n    const editable = isEditableImage(asset);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            value.set(fileManagerItemToValue(file));\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    // Save the per-usage crop / focal point / alt override onto the element value,\n    // writing the unified asset shape (hotspot → focalPoint).\n    const onSaveEdit = (edit: ImageEditorValue) => {\n        onChange(({ value }) => {\n            if (!asset) {\n                return;\n            }\n            const image: AssetImage = {\n                width: asset.image?.width,\n                height: asset.image?.height,\n                crop: edit.crop,\n                focalPoint: edit.hotspot ? { x: edit.hotspot.x, y: edit.hotspot.y } : undefined,\n                alt: edit.alt,\n                caption: edit.caption\n            };\n            const updated = { ...asset, image };\n            const cropParam = getAssetCropParam(updated);\n            if (cropParam) {\n                const sep = asset.src.includes(\"?\") ? \"&\" : \"?\";\n                updated.url = `${asset.src}${sep}crop=${cropParam}`;\n            } else {\n                updated.url = asset.src;\n            }\n            value.set(updated);\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        variant={\"secondary\"}\n                        label={label}\n                        description={input.description}\n                        type=\"compact\"\n                        value={asset?.src}\n                        // Reflect the per-usage crop + focal point in the thumbnail.\n                        renderFilePreview={\n                            editable && asset?.src && hasImageEdit(asset.image)\n                                ? previewProps => (\n                                      <RichItemPreview\n                                          {...previewProps}\n                                          renderImage={({ name }) => {\n                                              const { wrapper, image } =\n                                                  getCroppedImageRenderStyles(\n                                                      asset.image?.width ?? 0,\n                                                      asset.image?.height ?? 0,\n                                                      asset.image?.crop,\n                                                      asset.image?.focalPoint\n                                                          ? {\n                                                                x: asset.image.focalPoint.x,\n                                                                y: asset.image.focalPoint.y,\n                                                                width: 1,\n                                                                height: 1\n                                                            }\n                                                          : undefined,\n                                                      { boxWidth: 1, boxHeight: 1, fit: \"cover\" }\n                                                  );\n                                              return (\n                                                  <div style={wrapper}>\n                                                      <img\n                                                          src={asset.src as string}\n                                                          alt={name}\n                                                          draggable={false}\n                                                          style={image}\n                                                      />\n                                                  </div>\n                                              );\n                                          }}\n                                      />\n                                  )\n                                : undefined\n                        }\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                        // The \"Edit\" (pencil) action edits the image (crop / focal\n                        // point / alt). Replacing the file is done by clicking the\n                        // preview. For non-images there is nothing to edit, so the\n                        // pencil is hidden.\n                        onEditItem={editable ? () => setEditorOpen(true) : undefined}\n                    />\n                    {editable ? (\n                        <ImageEditor\n                            open={editorOpen}\n                            onClose={() => setEditorOpen(false)}\n                            image={{\n                                src: asset.src,\n                                width: asset.image?.width ?? 0,\n                                height: asset.image?.height ?? 0\n                            }}\n                            value={toEditorValue(asset.image)}\n                            onSave={onSaveEdit}\n                        />\n                    ) : null}\n                </>\n            )}\n        />\n    );\n};\n"],"names":["isEditableImage","asset","hasImageEdit","image","c","fullCrop","fp","centeredFocal","toEditorValue","undefined","FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","useBreakpoint","editorOpen","setEditorOpen","useState","normalizeToAsset","editable","onFileChange","file","fileManagerItemToValue","onRemove","onSaveEdit","edit","updated","cropParam","getAssetCropParam","sep","FileManager","showFileManager","FilePicker","previewProps","RichItemPreview","name","wrapper","getCroppedImageRenderStyles","ImageEditor"],"mappings":"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"}

package/inputRenderers/FragmentSelectorInput.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ElementInputRendererProps } from "../BaseEditor";
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
 export declare const FragmentSelectorInputRenderer: ({ value, onChange, label, input }: ElementInputRendererProps) => React.JSX.Element;

package/inputRenderers/FragmentSelectorInput.js

@@ -1,35 +1,31 @@
-import React, { useMemo } from "react";
+import react, { useMemo } from "react";
 import { Select } from "@webiny/admin-ui";
-import { useSelectFromEditor } from "../BaseEditor/hooks/useSelectFromEditor";
-import { toTitleCaseLabel } from "../shared/toTitleCaseLabel";
-export const FragmentSelectorInputRenderer = ({
-  value,
-  onChange,
-  label,
-  input
-}) => {
-  const fragmentNames = useSelectFromEditor(state => state.fragments ?? []);
-  const options = useMemo(() => {
-    return fragmentNames.sort().map(name => ({
-      label: toTitleCaseLabel(name),
-      value: name
-    }));
-  }, [fragmentNames]);
-  return /*#__PURE__*/React.createElement(Select, {
-    value: value,
-    onChange: newValue => {
-      onChange(({
-        value
-      }) => {
-        value.set(newValue);
-      });
-    },
-    displayResetAction: true,
-    options: options,
-    label: label,
-    description: input.description,
-    note: input.helperText
-  });
+import { useSelectFromEditor } from "../BaseEditor/hooks/useSelectFromEditor.js";
+import { toTitleCaseLabel } from "../shared/toTitleCaseLabel.js";
+const FragmentSelectorInputRenderer = ({ value, onChange, label, input })=>{
+    const fragments = useSelectFromEditor((state)=>state.fragments ?? []);
+    const options = useMemo(()=>fragments.filter((fragment)=>"fixed" === fragment.type).sort().map((fragment)=>({
+                label: toTitleCaseLabel(fragment.name),
+                value: fragment.name
+            })), [
+        fragments
+    ]);
+    return /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
+        value: value,
+        onChange: (newValue)=>{
+            onChange(({ value })=>{
+                value.set(newValue);
+            });
+        },
+        displayResetAction: true,
+        options: options,
+        label: label,
+        description: input.description,
+        note: input.helperText
+    });
 };
+export { FragmentSelectorInputRenderer };
 
 //# sourceMappingURL=FragmentSelectorInput.js.map

package/inputRenderers/FragmentSelectorInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","Select","useSelectFromEditor","toTitleCaseLabel","FragmentSelectorInputRenderer","value","onChange","label","input","fragmentNames","state","fragments","options","sort","map","name","createElement","newValue","set","displayResetAction","description","note","helperText"],"sources":["FragmentSelectorInput.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { toTitleCaseLabel } from \"~/shared/toTitleCaseLabel\";\n\nexport const FragmentSelectorInputRenderer = ({\n    value,\n    onChange,\n    label,\n    input\n}: ElementInputRendererProps) => {\n    const fragmentNames = useSelectFromEditor<string[]>(state => state.fragments ?? []);\n    const options = useMemo(() => {\n        return fragmentNames.sort().map(name => ({\n            label: toTitleCaseLabel(name),\n            value: name\n        }));\n    }, [fragmentNames]);\n\n    return (\n        <Select\n            value={value}\n            onChange={newValue => {\n                onChange(({ value }) => {\n                    value.set(newValue);\n                });\n            }}\n            displayResetAction={true}\n            options={options}\n            label={label}\n            description={input.description}\n            note={input.helperText}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,SAASC,mBAAmB;AAC5B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,6BAA6B,GAAGA,CAAC;EAC1CC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC;AACuB,CAAC,KAAK;EAC7B,MAAMC,aAAa,GAAGP,mBAAmB,CAAWQ,KAAK,IAAIA,KAAK,CAACC,SAAS,IAAI,EAAE,CAAC;EACnF,MAAMC,OAAO,GAAGZ,OAAO,CAAC,MAAM;IAC1B,OAAOS,aAAa,CAACI,IAAI,CAAC,CAAC,CAACC,GAAG,CAACC,IAAI,KAAK;MACrCR,KAAK,EAAEJ,gBAAgB,CAACY,IAAI,CAAC;MAC7BV,KAAK,EAAEU;IACX,CAAC,CAAC,CAAC;EACP,CAAC,EAAE,CAACN,aAAa,CAAC,CAAC;EAEnB,oBACIV,KAAA,CAAAiB,aAAA,CAACf,MAAM;IACHI,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEW,QAAQ,IAAI;MAClBX,QAAQ,CAAC,CAAC;QAAED;MAAM,CAAC,KAAK;QACpBA,KAAK,CAACa,GAAG,CAACD,QAAQ,CAAC;MACvB,CAAC,CAAC;IACN,CAAE;IACFE,kBAAkB,EAAE,IAAK;IACzBP,OAAO,EAAEA,OAAQ;IACjBL,KAAK,EAAEA,KAAM;IACba,WAAW,EAAEZ,KAAK,CAACY,WAAY;IAC/BC,IAAI,EAAEb,KAAK,CAACc;EAAW,CAC1B,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/FragmentSelectorInput.js","sources":["../../src/inputRenderers/FragmentSelectorInput.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { toTitleCaseLabel } from \"~/shared/toTitleCaseLabel.js\";\n\ntype Fragment =\n    | { type: \"fixed\"; name: string }\n    | { type: \"component\"; component: string; inputs: Record<string, any> };\n\nexport const FragmentSelectorInputRenderer = ({\n    value,\n    onChange,\n    label,\n    input\n}: ElementInputRendererProps) => {\n    const fragments = useSelectFromEditor<Fragment[]>(state => state.fragments ?? []);\n\n    const options = useMemo(() => {\n        return fragments\n            .filter(fragment => fragment.type === \"fixed\")\n            .sort()\n            .map(fragment => ({\n                label: toTitleCaseLabel(fragment.name),\n                value: fragment.name\n            }));\n    }, [fragments]);\n\n    return (\n        <Select\n            size={\"md\"}\n            variant={\"secondary\"}\n            value={value}\n            onChange={newValue => {\n                onChange(({ value }) => {\n                    value.set(newValue);\n                });\n            }}\n            displayResetAction={true}\n            options={options}\n            label={label}\n            description={input.description}\n            note={input.helperText}\n        />\n    );\n};\n"],"names":["FragmentSelectorInputRenderer","value","onChange","label","input","fragments","useSelectFromEditor","state","options","useMemo","fragment","toTitleCaseLabel","Select","newValue"],"mappings":";;;;AAUO,MAAMA,gCAAgC,CAAC,EAC1CC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACmB;IACxB,MAAMC,YAAYC,oBAAgCC,CAAAA,QAASA,MAAM,SAAS,IAAI,EAAE;IAEhF,MAAMC,UAAUC,QAAQ,IACbJ,UACF,MAAM,CAACK,CAAAA,WAAYA,AAAkB,YAAlBA,SAAS,IAAI,EAChC,IAAI,GACJ,GAAG,CAACA,CAAAA,WAAa;gBACd,OAAOC,iBAAiBD,SAAS,IAAI;gBACrC,OAAOA,SAAS,IAAI;YACxB,KACL;QAACL;KAAU;IAEd,OAAO,WAAP,GACI,oBAACO,QAAMA;QACH,MAAM;QACN,SAAS;QACT,OAAOX;QACP,UAAUY,CAAAA;YACNX,SAAS,CAAC,EAAED,KAAK,EAAE;gBACfA,MAAM,GAAG,CAACY;YACd;QACJ;QACA,oBAAoB;QACpB,SAASL;QACT,OAAOL;QACP,aAAaC,MAAM,WAAW;QAC9B,MAAMA,MAAM,UAAU;;AAGlC"}

package/inputRenderers/GridLayoutInput.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ElementInputRendererProps } from "../BaseEditor";
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
 export declare const GridLayoutInputRenderer: ({ value, onChange }: ElementInputRendererProps) => React.JSX.Element;

package/inputRenderers/GridLayoutInput.js

@@ -1,63 +1,71 @@
-import React from "react";
+import react from "react";
 import { Grid } from "@webiny/admin-ui";
-import { ReactComponent as GridLayout12 } from "./assets/grid-12.svg";
-import { ReactComponent as GridLayout66 } from "./assets/grid-6-6.svg";
-import { ReactComponent as GridLayout84 } from "./assets/grid-8-4.svg";
-import { ReactComponent as GridLayout48 } from "./assets/grid-4-8.svg";
-import { ReactComponent as GridLayout444 } from "./assets/grid-4-4-4.svg";
-import { ReactComponent as GridLayout633 } from "./assets/grid-6-3-3.svg";
-import { ReactComponent as GridLayout336 } from "./assets/grid-3-3-6.svg";
-import { ReactComponent as GridLayout3333 } from "./assets/grid-3-3-3-3.svg";
-import { ReactComponent as GridLayout222222 } from "./assets/grid-2-2-2-2-2-2.svg";
-const presets = [{
-  layout: "12",
-  icon: /*#__PURE__*/React.createElement(GridLayout12, null)
-}, {
-  layout: "6-6",
-  icon: /*#__PURE__*/React.createElement(GridLayout66, null)
-}, {
-  layout: "8-4",
-  icon: /*#__PURE__*/React.createElement(GridLayout84, null)
-}, {
-  layout: "4-8",
-  icon: /*#__PURE__*/React.createElement(GridLayout48, null)
-}, {
-  layout: "4-4-4",
-  icon: /*#__PURE__*/React.createElement(GridLayout444, null)
-}, {
-  layout: "6-3-3",
-  icon: /*#__PURE__*/React.createElement(GridLayout633, null)
-}, {
-  layout: "3-3-6",
-  icon: /*#__PURE__*/React.createElement(GridLayout336, null)
-}, {
-  layout: "3-3-3-3",
-  icon: /*#__PURE__*/React.createElement(GridLayout3333, null)
-}, {
-  layout: "2-2-2-2-2-2",
-  icon: /*#__PURE__*/React.createElement(GridLayout222222, null)
-}];
-export const GridLayoutInputRenderer = ({
-  value,
-  onChange
-}) => {
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: "wby-gap-md"
-  }, presets.map(preset => /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 4,
-    key: preset.layout
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      filter: value !== preset.layout ? "grayscale(1)" : "none"
-    },
-    onClick: () => {
-      onChange(({
-        value
-      }) => {
-        value.set(preset.layout);
-      });
-    }
-  }, preset.icon))));
+import { ReactComponent } from "./assets/grid-12.js";
+import { ReactComponent as grid_6_6_js_ReactComponent } from "./assets/grid-6-6.js";
+import { ReactComponent as grid_8_4_js_ReactComponent } from "./assets/grid-8-4.js";
+import { ReactComponent as grid_4_8_js_ReactComponent } from "./assets/grid-4-8.js";
+import { ReactComponent as grid_4_4_4_js_ReactComponent } from "./assets/grid-4-4-4.js";
+import { ReactComponent as grid_6_3_3_js_ReactComponent } from "./assets/grid-6-3-3.js";
+import { ReactComponent as grid_3_3_6_js_ReactComponent } from "./assets/grid-3-3-6.js";
+import { ReactComponent as grid_3_3_3_3_js_ReactComponent } from "./assets/grid-3-3-3-3.js";
+import { ReactComponent as grid_2_2_2_2_2_2_js_ReactComponent } from "./assets/grid-2-2-2-2-2-2.js";
+const svgProps = {
+    width: 74,
+    height: 37
 };
+const presets = [
+    {
+        layout: "12",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, svgProps)
+    },
+    {
+        layout: "6-6",
+        icon: /*#__PURE__*/ react.createElement(grid_6_6_js_ReactComponent, svgProps)
+    },
+    {
+        layout: "8-4",
+        icon: /*#__PURE__*/ react.createElement(grid_8_4_js_ReactComponent, svgProps)
+    },
+    {
+        layout: "4-8",
+        icon: /*#__PURE__*/ react.createElement(grid_4_8_js_ReactComponent, svgProps)
+    },
+    {
+        layout: "4-4-4",
+        icon: /*#__PURE__*/ react.createElement(grid_4_4_4_js_ReactComponent, svgProps)
+    },
+    {
+        layout: "6-3-3",
+        icon: /*#__PURE__*/ react.createElement(grid_6_3_3_js_ReactComponent, svgProps)
+    },
+    {
+        layout: "3-3-6",
+        icon: /*#__PURE__*/ react.createElement(grid_3_3_6_js_ReactComponent, svgProps)
+    },
+    {
+        layout: "3-3-3-3",
+        icon: /*#__PURE__*/ react.createElement(grid_3_3_3_3_js_ReactComponent, svgProps)
+    },
+    {
+        layout: "2-2-2-2-2-2",
+        icon: /*#__PURE__*/ react.createElement(grid_2_2_2_2_2_2_js_ReactComponent, svgProps)
+    }
+];
+const GridLayoutInputRenderer = ({ value, onChange })=>/*#__PURE__*/ react.createElement(Grid, {
+        className: "gap-md"
+    }, presets.map((preset)=>/*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 4,
+            key: preset.layout
+        }, /*#__PURE__*/ react.createElement("div", {
+            style: {
+                filter: value !== preset.layout ? "grayscale(1)" : "none"
+            },
+            onClick: ()=>{
+                onChange(({ value })=>{
+                    value.set(preset.layout);
+                });
+            }
+        }, preset.icon))));
+export { GridLayoutInputRenderer };
 
 //# sourceMappingURL=GridLayoutInput.js.map

package/inputRenderers/GridLayoutInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Grid","ReactComponent","GridLayout12","GridLayout66","GridLayout84","GridLayout48","GridLayout444","GridLayout633","GridLayout336","GridLayout3333","GridLayout222222","presets","layout","icon","createElement","GridLayoutInputRenderer","value","onChange","className","map","preset","Column","span","key","style","filter","onClick","set"],"sources":["GridLayoutInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor\";\nimport { ReactComponent as GridLayout12 } from \"./assets/grid-12.svg\";\nimport { ReactComponent as GridLayout66 } from \"./assets/grid-6-6.svg\";\nimport { ReactComponent as GridLayout84 } from \"./assets/grid-8-4.svg\";\nimport { ReactComponent as GridLayout48 } from \"./assets/grid-4-8.svg\";\nimport { ReactComponent as GridLayout444 } from \"./assets/grid-4-4-4.svg\";\nimport { ReactComponent as GridLayout633 } from \"./assets/grid-6-3-3.svg\";\nimport { ReactComponent as GridLayout336 } from \"./assets/grid-3-3-6.svg\";\nimport { ReactComponent as GridLayout3333 } from \"./assets/grid-3-3-3-3.svg\";\nimport { ReactComponent as GridLayout222222 } from \"./assets/grid-2-2-2-2-2-2.svg\";\n\nconst presets = [\n    {\n        layout: \"12\",\n        icon: <GridLayout12 />\n    },\n    {\n        layout: \"6-6\",\n        icon: <GridLayout66 />\n    },\n    {\n        layout: \"8-4\",\n        icon: <GridLayout84 />\n    },\n    {\n        layout: \"4-8\",\n        icon: <GridLayout48 />\n    },\n    {\n        layout: \"4-4-4\",\n        icon: <GridLayout444 />\n    },\n    {\n        layout: \"6-3-3\",\n        icon: <GridLayout633 />\n    },\n    {\n        layout: \"3-3-6\",\n        icon: <GridLayout336 />\n    },\n    {\n        layout: \"3-3-3-3\",\n        icon: <GridLayout3333 />\n    },\n    {\n        layout: \"2-2-2-2-2-2\",\n        icon: <GridLayout222222 />\n    }\n];\n\nexport const GridLayoutInputRenderer = ({ value, onChange }: ElementInputRendererProps) => {\n    return (\n        <Grid className={\"wby-gap-md\"}>\n            {presets.map(preset => (\n                <Grid.Column span={4} key={preset.layout}>\n                    <div\n                        style={{ filter: value !== preset.layout ? \"grayscale(1)\" : \"none\" }}\n                        onClick={() => {\n                            onChange(({ value }) => {\n                                value.set(preset.layout);\n                            });\n                        }}\n                    >\n                        {preset.icon}\n                    </div>\n                </Grid.Column>\n            ))}\n        </Grid>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,SAASC,cAAc,IAAIC,YAAY;AACvC,SAASD,cAAc,IAAIE,YAAY;AACvC,SAASF,cAAc,IAAIG,YAAY;AACvC,SAASH,cAAc,IAAII,YAAY;AACvC,SAASJ,cAAc,IAAIK,aAAa;AACxC,SAASL,cAAc,IAAIM,aAAa;AACxC,SAASN,cAAc,IAAIO,aAAa;AACxC,SAASP,cAAc,IAAIQ,cAAc;AACzC,SAASR,cAAc,IAAIS,gBAAgB;AAE3C,MAAMC,OAAO,GAAG,CACZ;EACIC,MAAM,EAAE,IAAI;EACZC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACZ,YAAY,MAAE;AACzB,CAAC,EACD;EACIU,MAAM,EAAE,KAAK;EACbC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACX,YAAY,MAAE;AACzB,CAAC,EACD;EACIS,MAAM,EAAE,KAAK;EACbC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACV,YAAY,MAAE;AACzB,CAAC,EACD;EACIQ,MAAM,EAAE,KAAK;EACbC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACT,YAAY,MAAE;AACzB,CAAC,EACD;EACIO,MAAM,EAAE,OAAO;EACfC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACR,aAAa,MAAE;AAC1B,CAAC,EACD;EACIM,MAAM,EAAE,OAAO;EACfC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACP,aAAa,MAAE;AAC1B,CAAC,EACD;EACIK,MAAM,EAAE,OAAO;EACfC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACN,aAAa,MAAE;AAC1B,CAAC,EACD;EACII,MAAM,EAAE,SAAS;EACjBC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACL,cAAc,MAAE;AAC3B,CAAC,EACD;EACIG,MAAM,EAAE,aAAa;EACrBC,IAAI,eAAEd,KAAA,CAAAe,aAAA,CAACJ,gBAAgB,MAAE;AAC7B,CAAC,CACJ;AAED,OAAO,MAAMK,uBAAuB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAoC,CAAC,KAAK;EACvF,oBACIlB,KAAA,CAAAe,aAAA,CAACd,IAAI;IAACkB,SAAS,EAAE;EAAa,GACzBP,OAAO,CAACQ,GAAG,CAACC,MAAM,iBACfrB,KAAA,CAAAe,aAAA,CAACd,IAAI,CAACqB,MAAM;IAACC,IAAI,EAAE,CAAE;IAACC,GAAG,EAAEH,MAAM,CAACR;EAAO,gBACrCb,KAAA,CAAAe,aAAA;IACIU,KAAK,EAAE;MAAEC,MAAM,EAAET,KAAK,KAAKI,MAAM,CAACR,MAAM,GAAG,cAAc,GAAG;IAAO,CAAE;IACrEc,OAAO,EAAEA,CAAA,KAAM;MACXT,QAAQ,CAAC,CAAC;QAAED;MAAM,CAAC,KAAK;QACpBA,KAAK,CAACW,GAAG,CAACP,MAAM,CAACR,MAAM,CAAC;MAC5B,CAAC,CAAC;IACN;EAAE,GAEDQ,MAAM,CAACP,IACP,CACI,CAChB,CACC,CAAC;AAEf,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/GridLayoutInput.js","sources":["../../src/inputRenderers/GridLayoutInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { ReactComponent as GridLayout12 } from \"./assets/grid-12.svg\";\nimport { ReactComponent as GridLayout66 } from \"./assets/grid-6-6.svg\";\nimport { ReactComponent as GridLayout84 } from \"./assets/grid-8-4.svg\";\nimport { ReactComponent as GridLayout48 } from \"./assets/grid-4-8.svg\";\nimport { ReactComponent as GridLayout444 } from \"./assets/grid-4-4-4.svg\";\nimport { ReactComponent as GridLayout633 } from \"./assets/grid-6-3-3.svg\";\nimport { ReactComponent as GridLayout336 } from \"./assets/grid-3-3-6.svg\";\nimport { ReactComponent as GridLayout3333 } from \"./assets/grid-3-3-3-3.svg\";\nimport { ReactComponent as GridLayout222222 } from \"./assets/grid-2-2-2-2-2-2.svg\";\n\nconst svgProps = { width: 74, height: 37 };\n\nconst presets = [\n    {\n        layout: \"12\",\n        icon: <GridLayout12 {...svgProps} />\n    },\n    {\n        layout: \"6-6\",\n        icon: <GridLayout66 {...svgProps} />\n    },\n    {\n        layout: \"8-4\",\n        icon: <GridLayout84 {...svgProps} />\n    },\n    {\n        layout: \"4-8\",\n        icon: <GridLayout48 {...svgProps} />\n    },\n    {\n        layout: \"4-4-4\",\n        icon: <GridLayout444 {...svgProps} />\n    },\n    {\n        layout: \"6-3-3\",\n        icon: <GridLayout633 {...svgProps} />\n    },\n    {\n        layout: \"3-3-6\",\n        icon: <GridLayout336 {...svgProps} />\n    },\n    {\n        layout: \"3-3-3-3\",\n        icon: <GridLayout3333 {...svgProps} />\n    },\n    {\n        layout: \"2-2-2-2-2-2\",\n        icon: <GridLayout222222 {...svgProps} />\n    }\n];\n\nexport const GridLayoutInputRenderer = ({ value, onChange }: ElementInputRendererProps) => {\n    return (\n        <Grid className={\"gap-md\"}>\n            {presets.map(preset => (\n                <Grid.Column span={4} key={preset.layout}>\n                    <div\n                        style={{ filter: value !== preset.layout ? \"grayscale(1)\" : \"none\" }}\n                        onClick={() => {\n                            onChange(({ value }) => {\n                                value.set(preset.layout);\n                            });\n                        }}\n                    >\n                        {preset.icon}\n                    </div>\n                </Grid.Column>\n            ))}\n        </Grid>\n    );\n};\n"],"names":["svgProps","presets","GridLayout12","GridLayout66","GridLayout84","GridLayout48","GridLayout444","GridLayout633","GridLayout336","GridLayout3333","GridLayout222222","GridLayoutInputRenderer","value","onChange","Grid","preset"],"mappings":";;;;;;;;;;;AAaA,MAAMA,WAAW;IAAE,OAAO;IAAI,QAAQ;AAAG;AAEzC,MAAMC,UAAU;IACZ;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACC,gBAAiBF;IAC5B;IACA;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACG,4BAAiBH;IAC5B;IACA;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACI,4BAAiBJ;IAC5B;IACA;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACK,4BAAiBL;IAC5B;IACA;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACM,8BAAkBN;IAC7B;IACA;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACO,8BAAkBP;IAC7B;IACA;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACQ,8BAAkBR;IAC7B;IACA;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACS,gCAAmBT;IAC9B;IACA;QACI,QAAQ;QACR,MAAM,WAAN,GAAM,oBAACU,oCAAqBV;IAChC;CACH;AAEM,MAAMW,0BAA0B,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAA6B,GAC3E,WAAP,GACI,oBAACC,MAAIA;QAAC,WAAW;OACZb,QAAQ,GAAG,CAACc,CAAAA,SAAAA,WAAAA,GACT,oBAACD,KAAK,MAAM;YAAC,MAAM;YAAG,KAAKC,OAAO,MAAM;yBACpC,oBAAC;YACG,OAAO;gBAAE,QAAQH,UAAUG,OAAO,MAAM,GAAG,iBAAiB;YAAO;YACnE,SAAS;gBACLF,SAAS,CAAC,EAAED,KAAK,EAAE;oBACfA,MAAM,GAAG,CAACG,OAAO,MAAM;gBAC3B;YACJ;WAECA,OAAO,IAAI"}