@webiny/app-admin 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/base/Base/FieldRenderers/FilePickerRenderer.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { FileManager } from "../../ui/FileManager.js";
+import { FilePicker } from "@webiny/admin-ui";
+export const FilePickerRenderer = createFieldRenderer(({
+  field
+}) => {
+  const settings = field.rendererSettings;
+  return /*#__PURE__*/React.createElement(FileManager, {
+    images: settings?.images,
+    accept: settings?.accept,
+    own: settings?.own,
+    scope: settings?.scope,
+    render: ({
+      showFileManager
+    }) => /*#__PURE__*/React.createElement(FilePicker, {
+      label: field.label,
+      description: field.description,
+      type: "area",
+      value: toFilePickerValue(field.value),
+      onSelectItem: () => showFileManager(file => {
+        field.onChange(fileManagerItemToValue(file));
+      }),
+      onRemoveItem: () => field.onChange(undefined)
+    })
+  });
+});
+const toFilePickerValue = value => {
+  const img = value;
+  if (!img?.src) {
+    return undefined;
+  }
+  return {
+    url: img.src,
+    name: img.name,
+    mimeType: img.mimeType
+  };
+};
+const fileManagerItemToValue = file => {
+  return {
+    id: file.id,
+    name: file.name,
+    size: file.size,
+    mimeType: file.type,
+    src: file.src || "",
+    width: file.width,
+    height: file.height
+  };
+};
+
+//# sourceMappingURL=FilePickerRenderer.js.map

package/base/Base/FieldRenderers/FilePickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","FileManager","FilePicker","FilePickerRenderer","field","settings","rendererSettings","createElement","images","accept","own","scope","render","showFileManager","label","description","type","value","toFilePickerValue","onSelectItem","file","onChange","fileManagerItemToValue","onRemoveItem","undefined","img","src","url","name","mimeType","id","size","width","height"],"sources":["FilePickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { FilePicker, type FileItemDto } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport type { FileValue } from \"~/features/formModel/abstractions.js\";\nimport type { FileFieldSettings } from \"~/features/formModel/fieldTypes/FileFieldType.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        filePicker: { fieldType: \"file\"; settings: FileFieldSettings };\n    }\n}\n\nexport const FilePickerRenderer = createFieldRenderer<\"filePicker\">(({ field }) => {\n    const settings = field.rendererSettings as FileFieldSettings | undefined;\n\n    return (\n        <FileManager\n            images={settings?.images}\n            accept={settings?.accept}\n            own={settings?.own}\n            scope={settings?.scope}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    label={field.label}\n                    description={field.description}\n                    type=\"area\"\n                    value={toFilePickerValue(field.value)}\n                    onSelectItem={() =>\n                        showFileManager((file: FileManagerFileItem) => {\n                            field.onChange(fileManagerItemToValue(file));\n                        })\n                    }\n                    onRemoveItem={() => field.onChange(undefined)}\n                />\n            )}\n        />\n    );\n});\n\nconst toFilePickerValue = (value: unknown): FileItemDto | undefined => {\n    const img = value as FileValue | undefined;\n    if (!img?.src) {\n        return undefined;\n    }\n    return { url: img.src, name: img.name, mimeType: img.mimeType };\n};\n\nconst fileManagerItemToValue = (file: FileManagerFileItem) => {\n    return {\n        id: file.id,\n        name: file.name,\n        size: file.size,\n        mimeType: file.type,\n        src: file.src || \"\",\n        width: file.width,\n        height: file.height\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,WAAW;AACpB,SAASC,UAAU,QAA0B,kBAAkB;AAW/D,OAAO,MAAMC,kBAAkB,GAAGH,mBAAmB,CAAe,CAAC;EAAEI;AAAM,CAAC,KAAK;EAC/E,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAiD;EAExE,oBACIP,KAAA,CAAAQ,aAAA,CAACN,WAAW;IACRO,MAAM,EAAEH,QAAQ,EAAEG,MAAO;IACzBC,MAAM,EAAEJ,QAAQ,EAAEI,MAAO;IACzBC,GAAG,EAAEL,QAAQ,EAAEK,GAAI;IACnBC,KAAK,EAAEN,QAAQ,EAAEM,KAAM;IACvBC,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxBd,KAAA,CAAAQ,aAAA,CAACL,UAAU;MACPY,KAAK,EAAEV,KAAK,CAACU,KAAM;MACnBC,WAAW,EAAEX,KAAK,CAACW,WAAY;MAC/BC,IAAI,EAAC,MAAM;MACXC,KAAK,EAAEC,iBAAiB,CAACd,KAAK,CAACa,KAAK,CAAE;MACtCE,YAAY,EAAEA,CAAA,KACVN,eAAe,CAAEO,IAAyB,IAAK;QAC3ChB,KAAK,CAACiB,QAAQ,CAACC,sBAAsB,CAACF,IAAI,CAAC,CAAC;MAChD,CAAC,CACJ;MACDG,YAAY,EAAEA,CAAA,KAAMnB,KAAK,CAACiB,QAAQ,CAACG,SAAS;IAAE,CACjD;EACH,CACL,CAAC;AAEV,CAAC,CAAC;AAEF,MAAMN,iBAAiB,GAAID,KAAc,IAA8B;EACnE,MAAMQ,GAAG,GAAGR,KAA8B;EAC1C,IAAI,CAACQ,GAAG,EAAEC,GAAG,EAAE;IACX,OAAOF,SAAS;EACpB;EACA,OAAO;IAAEG,GAAG,EAAEF,GAAG,CAACC,GAAG;IAAEE,IAAI,EAAEH,GAAG,CAACG,IAAI;IAAEC,QAAQ,EAAEJ,GAAG,CAACI;EAAS,CAAC;AACnE,CAAC;AAED,MAAMP,sBAAsB,GAAIF,IAAyB,IAAK;EAC1D,OAAO;IACHU,EAAE,EAAEV,IAAI,CAACU,EAAE;IACXF,IAAI,EAAER,IAAI,CAACQ,IAAI;IACfG,IAAI,EAAEX,IAAI,CAACW,IAAI;IACfF,QAAQ,EAAET,IAAI,CAACJ,IAAI;IACnBU,GAAG,EAAEN,IAAI,CAACM,GAAG,IAAI,EAAE;IACnBM,KAAK,EAAEZ,IAAI,CAACY,KAAK;IACjBC,MAAM,EAAEb,IAAI,CAACa;EACjB,CAAC;AACL,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/FileUrlPickerRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        fileUrlPicker: {
+            fieldType: "fileUrl";
+            settings: undefined;
+        };
+    }
+}
+export declare const FileUrlPickerRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/FileUrlPickerRenderer.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { FileManager } from "../../ui/FileManager.js";
+import { FilePicker } from "@webiny/admin-ui";
+export const FileUrlPickerRenderer = createFieldRenderer(({
+  field
+}) => {
+  return /*#__PURE__*/React.createElement(FileManager, {
+    images: true,
+    render: ({
+      showFileManager
+    }) => /*#__PURE__*/React.createElement(FilePicker, {
+      label: field.label,
+      description: field.description,
+      type: "area",
+      value: field.value,
+      onSelectItem: () => showFileManager(file => {
+        field.onChange(file.src || "");
+      }),
+      onRemoveItem: () => field.onChange(undefined)
+    })
+  });
+});
+
+//# sourceMappingURL=FileUrlPickerRenderer.js.map

package/base/Base/FieldRenderers/FileUrlPickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","FileManager","FilePicker","FileUrlPickerRenderer","field","createElement","images","render","showFileManager","label","description","type","value","onSelectItem","file","onChange","src","onRemoveItem","undefined"],"sources":["FileUrlPickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        fileUrlPicker: { fieldType: \"fileUrl\"; settings: undefined };\n    }\n}\n\nexport const FileUrlPickerRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <FileManager\n            images={true}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    label={field.label}\n                    description={field.description}\n                    type=\"area\"\n                    value={field.value as string | undefined}\n                    onSelectItem={() =>\n                        showFileManager((file: FileManagerFileItem) => {\n                            field.onChange(file.src || \"\");\n                        })\n                    }\n                    onRemoveItem={() => field.onChange(undefined)}\n                />\n            )}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,WAAW;AACpB,SAASC,UAAU,QAAQ,kBAAkB;AAS7C,OAAO,MAAMC,qBAAqB,GAAGH,mBAAmB,CAAC,CAAC;EAAEI;AAAM,CAAC,KAAK;EACpE,oBACIL,KAAA,CAAAM,aAAA,CAACJ,WAAW;IACRK,MAAM,EAAE,IAAK;IACbC,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxBT,KAAA,CAAAM,aAAA,CAACH,UAAU;MACPO,KAAK,EAAEL,KAAK,CAACK,KAAM;MACnBC,WAAW,EAAEN,KAAK,CAACM,WAAY;MAC/BC,IAAI,EAAC,MAAM;MACXC,KAAK,EAAER,KAAK,CAACQ,KAA4B;MACzCC,YAAY,EAAEA,CAAA,KACVL,eAAe,CAAEM,IAAyB,IAAK;QAC3CV,KAAK,CAACW,QAAQ,CAACD,IAAI,CAACE,GAAG,IAAI,EAAE,CAAC;MAClC,CAAC,CACJ;MACDC,YAAY,EAAEA,CAAA,KAAMb,KAAK,CAACW,QAAQ,CAACG,SAAS;IAAE,CACjD;EACH,CACL,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/HiddenRenderer.d.ts

@@ -0,0 +1,12 @@
+import type { IFieldVM } from "../../../features/formModel/index.js";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        hidden: {
+            fieldType: string;
+            settings: undefined;
+        };
+    }
+}
+export declare const HiddenRenderer: (_props: {
+    field: IFieldVM;
+}) => null;

package/base/Base/FieldRenderers/HiddenRenderer.js

@@ -0,0 +1,5 @@
+export const HiddenRenderer = _props => {
+  return null;
+};
+
+//# sourceMappingURL=HiddenRenderer.js.map

package/base/Base/FieldRenderers/HiddenRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HiddenRenderer","_props"],"sources":["HiddenRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IFieldVM } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        hidden: { fieldType: string; settings: undefined };\n    }\n}\n\nexport const HiddenRenderer = (_props: { field: IFieldVM }) => {\n    return null;\n};\n"],"mappings":"AASA,OAAO,MAAMA,cAAc,GAAIC,MAA2B,IAAK;EAC3D,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/HorizontalTabsRenderer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { TabsNodeRendererProps } from "../../../features/formModel/FormView.js";
+export declare const HorizontalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & {
+    displayName: string;
+};

package/base/Base/FieldRenderers/HorizontalTabsRenderer.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Tabs } from "@webiny/admin-ui";
+import { LayoutNodeRenderer, renderTabIcon } from "../../../features/formModel/FormView.js";
+export const HorizontalTabsRenderer = observer(function HorizontalTabsRenderer({
+  node
+}) {
+  return /*#__PURE__*/React.createElement(Tabs, {
+    value: node.activeTabId,
+    onValueChange: id => node.setActiveTab(id),
+    tabs: node.tabs.map(tab => /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: tab.id,
+      value: tab.id,
+      icon: renderTabIcon(tab.icon),
+      trigger: tab.label,
+      disabled: tab.disabled,
+      content: /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col gap-4 mt-md"
+      }, tab.layout.map((childNode, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
+        key: index,
+        node: childNode
+      })))
+    }))
+  });
+});
+
+//# sourceMappingURL=HorizontalTabsRenderer.js.map

package/base/Base/FieldRenderers/HorizontalTabsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","Tabs","LayoutNodeRenderer","renderTabIcon","HorizontalTabsRenderer","node","createElement","value","activeTabId","onValueChange","id","setActiveTab","tabs","map","tab","Tab","key","icon","trigger","label","disabled","content","className","layout","childNode","index"],"sources":["HorizontalTabsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { LayoutNodeRenderer, renderTabIcon } from \"~/features/formModel/FormView.js\";\nimport type { TabsNodeRendererProps } from \"~/features/formModel/FormView.js\";\n\nexport const HorizontalTabsRenderer = observer(function HorizontalTabsRenderer({\n    node\n}: TabsNodeRendererProps) {\n    return (\n        <Tabs\n            value={node.activeTabId}\n            onValueChange={id => node.setActiveTab(id)}\n            tabs={node.tabs.map(tab => (\n                <Tabs.Tab\n                    key={tab.id}\n                    value={tab.id}\n                    icon={renderTabIcon(tab.icon)}\n                    trigger={tab.label}\n                    disabled={tab.disabled}\n                    content={\n                        <div className={\"flex flex-col gap-4 mt-md\"}>\n                            {tab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    }\n                />\n            ))}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,kBAAkB,EAAEC,aAAa;AAG1C,OAAO,MAAMC,sBAAsB,GAAGJ,QAAQ,CAAC,SAASI,sBAAsBA,CAAC;EAC3EC;AACmB,CAAC,EAAE;EACtB,oBACIN,KAAA,CAAAO,aAAA,CAACL,IAAI;IACDM,KAAK,EAAEF,IAAI,CAACG,WAAY;IACxBC,aAAa,EAAEC,EAAE,IAAIL,IAAI,CAACM,YAAY,CAACD,EAAE,CAAE;IAC3CE,IAAI,EAAEP,IAAI,CAACO,IAAI,CAACC,GAAG,CAACC,GAAG,iBACnBf,KAAA,CAAAO,aAAA,CAACL,IAAI,CAACc,GAAG;MACLC,GAAG,EAAEF,GAAG,CAACJ,EAAG;MACZH,KAAK,EAAEO,GAAG,CAACJ,EAAG;MACdO,IAAI,EAAEd,aAAa,CAACW,GAAG,CAACG,IAAI,CAAE;MAC9BC,OAAO,EAAEJ,GAAG,CAACK,KAAM;MACnBC,QAAQ,EAAEN,GAAG,CAACM,QAAS;MACvBC,OAAO,eACHtB,KAAA,CAAAO,aAAA;QAAKgB,SAAS,EAAE;MAA4B,GACvCR,GAAG,CAACS,MAAM,CAACV,GAAG,CAAC,CAACW,SAAS,EAAEC,KAAK,kBAC7B1B,KAAA,CAAAO,aAAA,CAACJ,kBAAkB;QAACc,GAAG,EAAES,KAAM;QAACpB,IAAI,EAAEmB;MAAU,CAAE,CACrD,CACA;IACR,CACJ,CACJ;EAAE,CACN,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/InputRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        textInput: {
+            fieldType: "text";
+            settings: undefined;
+        };
+    }
+}
+export declare const InputRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/InputRenderer.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { Input } from "@webiny/admin-ui";
+import { DelayedOnChange } from "@webiny/admin-ui";
+export const InputRenderer = createFieldRenderer(({
+  field
+}) => {
+  return /*#__PURE__*/React.createElement(DelayedOnChange, {
+    value: field.value,
+    onChange: value => field.onChange(value)
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: field.label,
+    placeholder: field.placeholder,
+    description: field.description,
+    note: field.note,
+    required: field.required,
+    disabled: field.disabled,
+    validation: field.validation,
+    onBlur: () => field.onBlur()
+  }));
+});
+
+//# sourceMappingURL=InputRenderer.js.map

package/base/Base/FieldRenderers/InputRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","Input","DelayedOnChange","InputRenderer","field","createElement","value","onChange","label","placeholder","description","note","required","disabled","validation","onBlur"],"sources":["InputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textInput: { fieldType: \"text\"; settings: undefined };\n    }\n}\n\nexport const InputRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,eAAe,QAAQ,kBAAkB;AAQlD,OAAO,MAAMC,aAAa,GAAGH,mBAAmB,CAAC,CAAC;EAAEI;AAAM,CAAC,KAAK;EAC5D,oBACIL,KAAA,CAAAM,aAAA,CAACH,eAAe;IAACI,KAAK,EAAEF,KAAK,CAACE,KAAM;IAACC,QAAQ,EAAED,KAAK,IAAIF,KAAK,CAACG,QAAQ,CAACD,KAAK;EAAE,gBAC1EP,KAAA,CAAAM,aAAA,CAACJ,KAAK;IACFO,KAAK,EAAEJ,KAAK,CAACI,KAAM;IACnBC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,WAAW,EAAEN,KAAK,CAACM,WAAY;IAC/BC,IAAI,EAAEP,KAAK,CAACO,IAAK;IACjBC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBC,UAAU,EAAEV,KAAK,CAACU,UAAW;IAC7BC,MAAM,EAAEA,CAAA,KAAMX,KAAK,CAACW,MAAM,CAAC;EAAE,CAChC,CACY,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/MultiFilePickerRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { FileFieldSettings } from "../../../features/formModel/fieldTypes/FileFieldType.js";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        multiFilePicker: {
+            fieldType: "file";
+            settings: FileFieldSettings;
+        };
+    }
+}
+export declare const MultiFilePickerRenderer: React.ComponentType<{
+    field: import("~/features/formModel/abstractions.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/MultiFilePickerRenderer.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { FileManager } from "../../ui/FileManager.js";
+import { MultiFilePicker } from "@webiny/admin-ui";
+const toFilePickerValues = value => {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter(item => item?.src).map(item => ({
+    id: item.id,
+    url: item.src,
+    name: item.name,
+    mimeType: item.mimeType,
+    size: item.size
+  }));
+};
+const fileManagerItemToValue = file => ({
+  id: file.id,
+  name: file.name,
+  size: file.size,
+  mimeType: file.type,
+  src: file.src || "",
+  width: file.width,
+  height: file.height
+});
+export const MultiFilePickerRenderer = createFieldRenderer(({
+  field
+}) => {
+  const settings = field.rendererSettings;
+  const values = toFilePickerValues(field.value);
+  const currentValues = Array.isArray(field.value) ? field.value : [];
+  return /*#__PURE__*/React.createElement(FileManager, {
+    multiple: true,
+    images: settings?.images,
+    accept: settings?.accept,
+    own: settings?.own,
+    scope: settings?.scope,
+    render: ({
+      showFileManager
+    }) => {
+      const selectFiles = (replaceIndex = -1) => {
+        showFileManager(files => {
+          const newValues = files.map(fileManagerItemToValue);
+          if (replaceIndex === -1) {
+            field.onChange([...currentValues, ...newValues]);
+          } else {
+            field.onChange([...currentValues.slice(0, replaceIndex), ...newValues, ...currentValues.slice(replaceIndex + 1)]);
+          }
+        });
+      };
+      return /*#__PURE__*/React.createElement(MultiFilePicker, {
+        label: field.label,
+        description: field.description,
+        note: field.note,
+        hint: field.help,
+        values: values,
+        type: "compact",
+        onSelectItem: () => selectFiles(),
+        onReplaceItem: (_, index) => selectFiles(index),
+        onRemoveItem: (_, index) => {
+          field.onChange([...currentValues.slice(0, index), ...currentValues.slice(index + 1)]);
+        }
+      });
+    }
+  });
+});
+
+//# sourceMappingURL=MultiFilePickerRenderer.js.map

package/base/Base/FieldRenderers/MultiFilePickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","FileManager","MultiFilePicker","toFilePickerValues","value","Array","isArray","filter","item","src","map","id","url","name","mimeType","size","fileManagerItemToValue","file","type","width","height","MultiFilePickerRenderer","field","settings","rendererSettings","values","currentValues","createElement","multiple","images","accept","own","scope","render","showFileManager","selectFiles","replaceIndex","files","newValues","onChange","slice","label","description","note","hint","help","onSelectItem","onReplaceItem","_","index","onRemoveItem"],"sources":["MultiFilePickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { MultiFilePicker } from \"@webiny/admin-ui\";\nimport type { FileItemDto } from \"@webiny/admin-ui\";\nimport type { FileValue } from \"~/features/formModel/abstractions.js\";\nimport type { FileFieldSettings } from \"~/features/formModel/fieldTypes/FileFieldType.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        multiFilePicker: { fieldType: \"file\"; settings: FileFieldSettings };\n    }\n}\n\nconst toFilePickerValues = (value: unknown): FileItemDto[] => {\n    if (!Array.isArray(value)) {\n        return [];\n    }\n    return value\n        .filter((item: FileValue) => item?.src)\n        .map((item: FileValue) => ({\n            id: item.id,\n            url: item.src,\n            name: item.name,\n            mimeType: item.mimeType,\n            size: item.size\n        }));\n};\n\nconst fileManagerItemToValue = (file: FileManagerFileItem): FileValue => ({\n    id: file.id,\n    name: file.name,\n    size: file.size,\n    mimeType: file.type,\n    src: file.src || \"\",\n    width: file.width,\n    height: file.height\n});\n\nexport const MultiFilePickerRenderer = createFieldRenderer<\"multiFilePicker\">(({ field }) => {\n    const settings = field.rendererSettings as FileFieldSettings | undefined;\n    const values = toFilePickerValues(field.value);\n    const currentValues = (Array.isArray(field.value) ? field.value : []) as FileValue[];\n\n    return (\n        <FileManager\n            multiple\n            images={settings?.images}\n            accept={settings?.accept}\n            own={settings?.own}\n            scope={settings?.scope}\n            render={({ showFileManager }) => {\n                const selectFiles = (replaceIndex = -1) => {\n                    showFileManager((files: FileManagerFileItem[]) => {\n                        const newValues = files.map(fileManagerItemToValue);\n                        if (replaceIndex === -1) {\n                            field.onChange([...currentValues, ...newValues]);\n                        } else {\n                            field.onChange([\n                                ...currentValues.slice(0, replaceIndex),\n                                ...newValues,\n                                ...currentValues.slice(replaceIndex + 1)\n                            ]);\n                        }\n                    });\n                };\n\n                return (\n                    <MultiFilePicker\n                        label={field.label}\n                        description={field.description}\n                        note={field.note}\n                        hint={field.help}\n                        values={values}\n                        type=\"compact\"\n                        onSelectItem={() => selectFiles()}\n                        onReplaceItem={(_, index) => selectFiles(index)}\n                        onRemoveItem={(_, index) => {\n                            field.onChange([\n                                ...currentValues.slice(0, index),\n                                ...currentValues.slice(index + 1)\n                            ]);\n                        }}\n                    />\n                );\n            }}\n        />\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/base/Base/FieldRenderers/NumberInputRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        numberInput: {
+            fieldType: "number";
+            settings: undefined;
+        };
+    }
+}
+export declare const NumberInputRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/NumberInputRenderer.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { DelayedOnChange, Input } from "@webiny/admin-ui";
+export const NumberInputRenderer = createFieldRenderer(({
+  field
+}) => {
+  return /*#__PURE__*/React.createElement(DelayedOnChange, {
+    value: field.value,
+    onChange: value => field.onChange(value)
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: field.label,
+    placeholder: field.placeholder,
+    description: field.description,
+    note: field.note,
+    required: field.required,
+    disabled: field.disabled,
+    validation: field.validation,
+    onBlur: () => field.onBlur(),
+    type: "number"
+  }));
+});
+
+//# sourceMappingURL=NumberInputRenderer.js.map

package/base/Base/FieldRenderers/NumberInputRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","DelayedOnChange","Input","NumberInputRenderer","field","createElement","value","onChange","label","placeholder","description","note","required","disabled","validation","onBlur","type"],"sources":["NumberInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        numberInput: { fieldType: \"number\"; settings: undefined };\n    }\n}\n\nexport const NumberInputRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n                type=\"number\"\n            />\n        </DelayedOnChange>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,eAAe,EAAEC,KAAK,QAAQ,kBAAkB;AAQzD,OAAO,MAAMC,mBAAmB,GAAGH,mBAAmB,CAAC,CAAC;EAAEI;AAAM,CAAC,KAAK;EAClE,oBACIL,KAAA,CAAAM,aAAA,CAACJ,eAAe;IAACK,KAAK,EAAEF,KAAK,CAACE,KAAM;IAACC,QAAQ,EAAED,KAAK,IAAIF,KAAK,CAACG,QAAQ,CAACD,KAAK;EAAE,gBAC1EP,KAAA,CAAAM,aAAA,CAACH,KAAK;IACFM,KAAK,EAAEJ,KAAK,CAACI,KAAM;IACnBC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,WAAW,EAAEN,KAAK,CAACM,WAAY;IAC/BC,IAAI,EAAEP,KAAK,CAACO,IAAK;IACjBC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBC,UAAU,EAAEV,KAAK,CAACU,UAAW;IAC7BC,MAAM,EAAEA,CAAA,KAAMX,KAAK,CAACW,MAAM,CAAC,CAAE;IAC7BC,IAAI,EAAC;EAAQ,CAChB,CACY,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/NumberInputsRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        numberInputs: {
+            fieldType: "number";
+            settings?: {
+                addItemLabel?: string;
+            };
+        };
+    }
+}
+export declare const NumberInputsRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/NumberInputsRenderer.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { Button, DelayedOnChange, FormComponentDescription, Icon, Input, Separator } from "@webiny/admin-ui";
+export const NumberInputsRenderer = createFieldRenderer(({
+  field
+}) => {
+  const values = Array.isArray(field.value) ? field.value : [];
+  const updateAt = (index, val) => {
+    const next = [...values];
+    next[index] = val;
+    field.onChange(next);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-sm"
+  }, /*#__PURE__*/React.createElement(Separator, {
+    labelPosition: "start",
+    variant: "accent"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-accent-primary text-lg font-semibold"
+  }, `${field.label ?? ""} ${values.length ? `(${values.length})` : ""}`)), field.description && /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: field.description
+  }), values.map((val, index) => /*#__PURE__*/React.createElement(DelayedOnChange, {
+    key: index,
+    value: val,
+    onChange: value => updateAt(index, value)
+  }, /*#__PURE__*/React.createElement(Input, {
+    disabled: field.disabled,
+    label: `Value ${index + 1}`,
+    placeholder: field.placeholder,
+    type: "number",
+    onEnter: () => field.addItem(""),
+    endIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+      label: "Delete",
+      onClick: () => field.removeItem(index),
+      className: "cursor-pointer"
+    })
+  }))), /*#__PURE__*/React.createElement(Button, {
+    disabled: field.disabled,
+    variant: "tertiary",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null),
+    text: field.rendererSettings?.addItemLabel ?? "Add Value",
+    onClick: () => field.addItem("")
+  }));
+});
+
+//# sourceMappingURL=NumberInputsRenderer.js.map

package/base/Base/FieldRenderers/NumberInputsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","ReactComponent","DeleteIcon","AddIcon","Button","DelayedOnChange","FormComponentDescription","Icon","Input","Separator","NumberInputsRenderer","field","values","Array","isArray","value","updateAt","index","val","next","onChange","createElement","className","labelPosition","variant","label","length","description","text","map","key","disabled","placeholder","type","onEnter","addItem","endIcon","icon","onClick","removeItem","rendererSettings","addItemLabel"],"sources":["NumberInputsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DelayedOnChange,\n    FormComponentDescription,\n    Icon,\n    Input,\n    Separator\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        numberInputs: { fieldType: \"number\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const NumberInputsRenderer = createFieldRenderer<\"numberInputs\">(({ field }) => {\n    const values = Array.isArray(field.value) ? field.value : [];\n\n    const updateAt = (index: number, val: unknown) => {\n        const next = [...values];\n        next[index] = val as number;\n        field.onChange(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                <span className={\"text-accent-primary text-lg font-semibold\"}>\n                    {`${field.label ?? \"\"} ${values.length ? `(${values.length})` : \"\"}`}\n                </span>\n            </Separator>\n            {field.description && <FormComponentDescription text={field.description} />}\n            {values.map((val, index) => (\n                <DelayedOnChange key={index} value={val} onChange={value => updateAt(index, value)}>\n                    <Input\n                        disabled={field.disabled}\n                        label={`Value ${index + 1}`}\n                        placeholder={field.placeholder}\n                        type=\"number\"\n                        onEnter={() => field.addItem(\"\")}\n                        endIcon={\n                            <Icon\n                                icon={<DeleteIcon />}\n                                label={\"Delete\"}\n                                onClick={() => field.removeItem(index)}\n                                className={\"cursor-pointer\"}\n                            />\n                        }\n                    />\n                </DelayedOnChange>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant={\"tertiary\"}\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASD,cAAc,IAAIE,OAAO,QAAQ,uBAAuB;AACjE,SACIC,MAAM,EACNC,eAAe,EACfC,wBAAwB,EACxBC,IAAI,EACJC,KAAK,EACLC,SAAS,QACN,kBAAkB;AAQzB,OAAO,MAAMC,oBAAoB,GAAGV,mBAAmB,CAAiB,CAAC;EAAEW;AAAM,CAAC,KAAK;EACnF,MAAMC,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAACI,KAAK,CAAC,GAAGJ,KAAK,CAACI,KAAK,GAAG,EAAE;EAE5D,MAAMC,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAY,KAAK;IAC9C,MAAMC,IAAI,GAAG,CAAC,GAAGP,MAAM,CAAC;IACxBO,IAAI,CAACF,KAAK,CAAC,GAAGC,GAAa;IAC3BP,KAAK,CAACS,QAAQ,CAACD,IAAI,CAAC;EACxB,CAAC;EAED,oBACIpB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAE;EAAuB,gBACnCvB,KAAA,CAAAsB,aAAA,CAACZ,SAAS;IAACc,aAAa,EAAE,OAAQ;IAACC,OAAO,EAAE;EAAS,gBACjDzB,KAAA,CAAAsB,aAAA;IAAMC,SAAS,EAAE;EAA4C,GACxD,GAAGX,KAAK,CAACc,KAAK,IAAI,EAAE,IAAIb,MAAM,CAACc,MAAM,GAAG,IAAId,MAAM,CAACc,MAAM,GAAG,GAAG,EAAE,EAChE,CACC,CAAC,EACXf,KAAK,CAACgB,WAAW,iBAAI5B,KAAA,CAAAsB,aAAA,CAACf,wBAAwB;IAACsB,IAAI,EAAEjB,KAAK,CAACgB;EAAY,CAAE,CAAC,EAC1Ef,MAAM,CAACiB,GAAG,CAAC,CAACX,GAAG,EAAED,KAAK,kBACnBlB,KAAA,CAAAsB,aAAA,CAAChB,eAAe;IAACyB,GAAG,EAAEb,KAAM;IAACF,KAAK,EAAEG,GAAI;IAACE,QAAQ,EAAEL,KAAK,IAAIC,QAAQ,CAACC,KAAK,EAAEF,KAAK;EAAE,gBAC/EhB,KAAA,CAAAsB,aAAA,CAACb,KAAK;IACFuB,QAAQ,EAAEpB,KAAK,CAACoB,QAAS;IACzBN,KAAK,EAAE,SAASR,KAAK,GAAG,CAAC,EAAG;IAC5Be,WAAW,EAAErB,KAAK,CAACqB,WAAY;IAC/BC,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAMvB,KAAK,CAACwB,OAAO,CAAC,EAAE,CAAE;IACjCC,OAAO,eACHrC,KAAA,CAAAsB,aAAA,CAACd,IAAI;MACD8B,IAAI,eAAEtC,KAAA,CAAAsB,aAAA,CAACnB,UAAU,MAAE,CAAE;MACrBuB,KAAK,EAAE,QAAS;MAChBa,OAAO,EAAEA,CAAA,KAAM3B,KAAK,CAAC4B,UAAU,CAACtB,KAAK,CAAE;MACvCK,SAAS,EAAE;IAAiB,CAC/B;EACJ,CACJ,CACY,CACpB,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACjB,MAAM;IACH2B,QAAQ,EAAEpB,KAAK,CAACoB,QAAS;IACzBP,OAAO,EAAE,UAAW;IACpBa,IAAI,eAAEtC,KAAA,CAAAsB,aAAA,CAAClB,OAAO,MAAE,CAAE;IAClByB,IAAI,EAAEjB,KAAK,CAAC6B,gBAAgB,EAAEC,YAAY,IAAI,WAAY;IAC1DH,OAAO,EAAEA,CAAA,KAAM3B,KAAK,CAACwB,OAAO,CAAC,EAAE;EAAE,CACpC,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        dynamicZone: {
+            fieldType: "object";
+            settings?: {
+                container?: boolean;
+            };
+        };
+    }
+}
+export declare const DynamicZoneRenderer: React.ComponentType<{
+    field: import("../../../../index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { SingleValueDynamicZone } from "./SingleValueDynamicZone.js";
+import { MultiValueDynamicZone } from "./MultiValueDynamicZone.js";
+export const DynamicZoneRenderer = createObjectFieldRenderer(({
+  field
+}) => {
+  if (field.isList) {
+    return /*#__PURE__*/React.createElement(MultiValueDynamicZone, {
+      field: field,
+      showContainer: field.rendererSettings?.container !== false
+    });
+  }
+  return /*#__PURE__*/React.createElement(SingleValueDynamicZone, {
+    field: field,
+    showContainer: field.rendererSettings?.container !== false
+  });
+});
+
+//# sourceMappingURL=DynamicZoneRenderer.js.map

package/base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createObjectFieldRenderer","SingleValueDynamicZone","MultiValueDynamicZone","DynamicZoneRenderer","field","isList","createElement","showContainer","rendererSettings","container"],"sources":["DynamicZoneRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { SingleValueDynamicZone } from \"./SingleValueDynamicZone.js\";\nimport { MultiValueDynamicZone } from \"./MultiValueDynamicZone.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dynamicZone: {\n            fieldType: \"object\";\n            settings?: {\n                container?: boolean;\n            };\n        };\n    }\n}\n\nexport const DynamicZoneRenderer = createObjectFieldRenderer<\"dynamicZone\">(({ field }) => {\n    if (field.isList) {\n        return (\n            <MultiValueDynamicZone\n                field={field}\n                showContainer={field.rendererSettings?.container !== false}\n            />\n        );\n    }\n\n    return (\n        <SingleValueDynamicZone\n            field={field}\n            showContainer={field.rendererSettings?.container !== false}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,yBAAyB;AAClC,SAASC,sBAAsB;AAC/B,SAASC,qBAAqB;AAa9B,OAAO,MAAMC,mBAAmB,GAAGH,yBAAyB,CAAgB,CAAC;EAAEI;AAAM,CAAC,KAAK;EACvF,IAAIA,KAAK,CAACC,MAAM,EAAE;IACd,oBACIN,KAAA,CAAAO,aAAA,CAACJ,qBAAqB;MAClBE,KAAK,EAAEA,KAAM;MACbG,aAAa,EAAEH,KAAK,CAACI,gBAAgB,EAAEC,SAAS,KAAK;IAAM,CAC9D,CAAC;EAEV;EAEA,oBACIV,KAAA,CAAAO,aAAA,CAACL,sBAAsB;IACnBG,KAAK,EAAEA,KAAM;IACbG,aAAa,EAAEH,KAAK,CAACI,gBAAgB,EAAEC,SAAS,KAAK;EAAM,CAC9D,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        keyValueTags: {
+            fieldType: "object";
+            settings?: {
+                addItemLabel?: string;
+            };
+        };
+    }
+}
+export declare const KeyValueTagsRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { Button, FormComponentDescription, FormComponentLabel, IconButton } from "@webiny/admin-ui";
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { NestedLayout } from "./ObjectFieldComponents.js";
+export const KeyValueTagsRenderer = createObjectFieldRenderer(({
+  field
+}) => {
+  if (!field.isList) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(KeyValueTagsList, {
+    field: field
+  });
+});
+const KeyValueTagsList = createObjectFieldRenderer(({
+  field
+}) => {
+  const settings = field.rendererSettings;
+  const hasItems = field.items.length > 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, field.label && /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: field.label
+  }), field.description && /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: field.description
+  }), hasItems ? /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-md"
+  }, field.items.map(item => /*#__PURE__*/React.createElement(TagRow, {
+    key: item.key,
+    item: item,
+    disabled: field.disabled
+  }))) : null, !field.disabled ? /*#__PURE__*/React.createElement("div", {
+    className: "mt-md"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => field.addItem(),
+    text: settings?.addItemLabel ?? "Add tag",
+    variant: "secondary",
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  })) : null);
+});
+const TagRow = observer(({
+  item,
+  disabled
+}) => {
+  const inlineLayout = [{
+    type: "row",
+    fields: item.fields
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-1 gap-md"
+  }, /*#__PURE__*/React.createElement(NestedLayout, {
+    layout: inlineLayout
+  })), !disabled && /*#__PURE__*/React.createElement(IconButton, {
+    variant: "ghost",
+    size: "lg",
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+    onClick: () => item.remove()
+  }));
+});
+
+//# sourceMappingURL=KeyValueTagsRenderer.js.map

package/base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","ReactComponent","AddIcon","DeleteIcon","Button","FormComponentDescription","FormComponentLabel","IconButton","createObjectFieldRenderer","NestedLayout","KeyValueTagsRenderer","field","isList","createElement","KeyValueTagsList","settings","rendererSettings","hasItems","items","length","Fragment","label","text","description","className","map","item","TagRow","key","disabled","onClick","addItem","addItemLabel","variant","size","icon","inlineLayout","type","fields","layout","remove"],"sources":["KeyValueTagsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { Button, FormComponentDescription, FormComponentLabel, IconButton } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport type { IObjectFieldItemVM } from \"~/features/formModel/index.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        keyValueTags: {\n            fieldType: \"object\";\n            settings?: { addItemLabel?: string };\n        };\n    }\n}\n\nexport const KeyValueTagsRenderer = createObjectFieldRenderer(({ field }) => {\n    if (!field.isList) {\n        return null;\n    }\n\n    return <KeyValueTagsList field={field} />;\n});\n\nconst KeyValueTagsList = createObjectFieldRenderer<\"keyValueTags\">(({ field }) => {\n    const settings = field.rendererSettings;\n\n    const hasItems = field.items.length > 0;\n\n    return (\n        <>\n            {field.label && <FormComponentLabel text={field.label} />}\n            {field.description && <FormComponentDescription text={field.description} />}\n            {hasItems ? (\n                <div className={\"flex flex-col gap-md\"}>\n                    {field.items.map(item => (\n                        <TagRow key={item.key} item={item} disabled={field.disabled} />\n                    ))}\n                </div>\n            ) : null}\n            {!field.disabled ? (\n                <div className={\"mt-md\"}>\n                    <Button\n                        onClick={() => field.addItem()}\n                        text={settings?.addItemLabel ?? \"Add tag\"}\n                        variant={\"secondary\"}\n                        size={\"sm\"}\n                        icon={<AddIcon />}\n                    />\n                </div>\n            ) : null}\n        </>\n    );\n});\n\nconst TagRow = observer(({ item, disabled }: { item: IObjectFieldItemVM; disabled: boolean }) => {\n    const inlineLayout = [{ type: \"row\" as const, fields: item.fields }];\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <div className={\"flex-1 gap-md\"}>\n                <NestedLayout layout={inlineLayout} />\n            </div>\n            {!disabled && (\n                <IconButton\n                    variant={\"ghost\"}\n                    size={\"lg\"}\n                    icon={<DeleteIcon />}\n                    onClick={() => item.remove()}\n                />\n            )}\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AACjE,SAASD,cAAc,IAAIE,UAAU,QAAQ,0BAA0B;AACvE,SAASC,MAAM,EAAEC,wBAAwB,EAAEC,kBAAkB,EAAEC,UAAU,QAAQ,kBAAkB;AACnG,SAASC,yBAAyB;AAElC,SAASC,YAAY;AAWrB,OAAO,MAAMC,oBAAoB,GAAGF,yBAAyB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EACzE,IAAI,CAACA,KAAK,CAACC,MAAM,EAAE;IACf,OAAO,IAAI;EACf;EAEA,oBAAOb,KAAA,CAAAc,aAAA,CAACC,gBAAgB;IAACH,KAAK,EAAEA;EAAM,CAAE,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAMG,gBAAgB,GAAGN,yBAAyB,CAAiB,CAAC;EAAEG;AAAM,CAAC,KAAK;EAC9E,MAAMI,QAAQ,GAAGJ,KAAK,CAACK,gBAAgB;EAEvC,MAAMC,QAAQ,GAAGN,KAAK,CAACO,KAAK,CAACC,MAAM,GAAG,CAAC;EAEvC,oBACIpB,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAqB,QAAA,QACKT,KAAK,CAACU,KAAK,iBAAItB,KAAA,CAAAc,aAAA,CAACP,kBAAkB;IAACgB,IAAI,EAAEX,KAAK,CAACU;EAAM,CAAE,CAAC,EACxDV,KAAK,CAACY,WAAW,iBAAIxB,KAAA,CAAAc,aAAA,CAACR,wBAAwB;IAACiB,IAAI,EAAEX,KAAK,CAACY;EAAY,CAAE,CAAC,EAC1EN,QAAQ,gBACLlB,KAAA,CAAAc,aAAA;IAAKW,SAAS,EAAE;EAAuB,GAClCb,KAAK,CAACO,KAAK,CAACO,GAAG,CAACC,IAAI,iBACjB3B,KAAA,CAAAc,aAAA,CAACc,MAAM;IAACC,GAAG,EAAEF,IAAI,CAACE,GAAI;IAACF,IAAI,EAAEA,IAAK;IAACG,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CACjE,CACA,CAAC,GACN,IAAI,EACP,CAAClB,KAAK,CAACkB,QAAQ,gBACZ9B,KAAA,CAAAc,aAAA;IAAKW,SAAS,EAAE;EAAQ,gBACpBzB,KAAA,CAAAc,aAAA,CAACT,MAAM;IACH0B,OAAO,EAAEA,CAAA,KAAMnB,KAAK,CAACoB,OAAO,CAAC,CAAE;IAC/BT,IAAI,EAAEP,QAAQ,EAAEiB,YAAY,IAAI,SAAU;IAC1CC,OAAO,EAAE,WAAY;IACrBC,IAAI,EAAE,IAAK;IACXC,IAAI,eAAEpC,KAAA,CAAAc,aAAA,CAACX,OAAO,MAAE;EAAE,CACrB,CACA,CAAC,GACN,IACN,CAAC;AAEX,CAAC,CAAC;AAEF,MAAMyB,MAAM,GAAG3B,QAAQ,CAAC,CAAC;EAAE0B,IAAI;EAAEG;AAA0D,CAAC,KAAK;EAC7F,MAAMO,YAAY,GAAG,CAAC;IAAEC,IAAI,EAAE,KAAc;IAAEC,MAAM,EAAEZ,IAAI,CAACY;EAAO,CAAC,CAAC;EAEpE,oBACIvC,KAAA,CAAAc,aAAA;IAAKW,SAAS,EAAE;EAA2B,gBACvCzB,KAAA,CAAAc,aAAA;IAAKW,SAAS,EAAE;EAAgB,gBAC5BzB,KAAA,CAAAc,aAAA,CAACJ,YAAY;IAAC8B,MAAM,EAAEH;EAAa,CAAE,CACpC,CAAC,EACL,CAACP,QAAQ,iBACN9B,KAAA,CAAAc,aAAA,CAACN,UAAU;IACP0B,OAAO,EAAE,OAAQ;IACjBC,IAAI,EAAE,IAAK;IACXC,IAAI,eAAEpC,KAAA,CAAAc,aAAA,CAACV,UAAU,MAAE,CAAE;IACrB2B,OAAO,EAAEA,CAAA,KAAMJ,IAAI,CAACc,MAAM,CAAC;EAAE,CAChC,CAEJ,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { IObjectFieldVM } from "../../../../features/formModel/index.js";
+interface MultiValueDynamicZoneProps {
+    field: IObjectFieldVM;
+    showContainer?: boolean;
+}
+export declare const MultiValueDynamicZone: (({ field, showContainer }: MultiValueDynamicZoneProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};