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

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

@@ -0,0 +1 @@
+{"version":3,"names":["fieldsToData","fields","data","field","name","value","resolveItemTitle","item","index","label","itemTitle","fallback","find","f","String"],"sources":["resolveItemTitle.ts"],"sourcesContent":["import type { IFieldVM, IObjectFieldItemVM } from \"~/features/formModel/index.js\";\n\ntype ItemTitleSetting = string | ((data: Record<string, unknown>, index: number) => string);\n\nfunction fieldsToData(fields: IFieldVM[]): Record<string, unknown> {\n    const data: Record<string, unknown> = {};\n    for (const field of fields) {\n        data[field.name] = field.value;\n    }\n    return data;\n}\n\nexport function resolveItemTitle(\n    item: IObjectFieldItemVM,\n    index: number,\n    label: string | undefined,\n    itemTitle: ItemTitleSetting | undefined\n): string {\n    const fallback = `${label || \"Item\"} #${index + 1}`;\n\n    if (!itemTitle) {\n        return fallback;\n    }\n\n    if (typeof itemTitle === \"string\") {\n        const field = item.fields.find(f => f.name === itemTitle);\n        const value = field ? String(field.value ?? \"\") : \"\";\n        return value || fallback;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemTitle(data, index) || fallback;\n}\n"],"mappings":"AAIA,SAASA,YAAYA,CAACC,MAAkB,EAA2B;EAC/D,MAAMC,IAA6B,GAAG,CAAC,CAAC;EACxC,KAAK,MAAMC,KAAK,IAAIF,MAAM,EAAE;IACxBC,IAAI,CAACC,KAAK,CAACC,IAAI,CAAC,GAAGD,KAAK,CAACE,KAAK;EAClC;EACA,OAAOH,IAAI;AACf;AAEA,OAAO,SAASI,gBAAgBA,CAC5BC,IAAwB,EACxBC,KAAa,EACbC,KAAyB,EACzBC,SAAuC,EACjC;EACN,MAAMC,QAAQ,GAAG,GAAGF,KAAK,IAAI,MAAM,KAAKD,KAAK,GAAG,CAAC,EAAE;EAEnD,IAAI,CAACE,SAAS,EAAE;IACZ,OAAOC,QAAQ;EACnB;EAEA,IAAI,OAAOD,SAAS,KAAK,QAAQ,EAAE;IAC/B,MAAMP,KAAK,GAAGI,IAAI,CAACN,MAAM,CAACW,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACT,IAAI,KAAKM,SAAS,CAAC;IACzD,MAAML,KAAK,GAAGF,KAAK,GAAGW,MAAM,CAACX,KAAK,CAACE,KAAK,IAAI,EAAE,CAAC,GAAG,EAAE;IACpD,OAAOA,KAAK,IAAIM,QAAQ;EAC5B;EAEA,MAAMT,IAAI,GAAGF,YAAY,CAACO,IAAI,CAACN,MAAM,CAAC;EACtC,OAAOS,SAAS,CAACR,IAAI,EAAEM,KAAK,CAAC,IAAIG,QAAQ;AAC7C","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/PassthroughRenderer.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { createObjectFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { LayoutNodeRenderer } from "../../../features/formModel/FormView.js";
+export const PassthroughRenderer = createObjectFieldRenderer(({
+  field
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, field.layout.map((node, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
+    key: index,
+    node: node
+  })));
+});
+
+//# sourceMappingURL=PassthroughRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createObjectFieldRenderer","LayoutNodeRenderer","PassthroughRenderer","field","createElement","className","layout","map","node","index","key"],"sources":["PassthroughRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        passthrough: { fieldType: string; settings: undefined };\n    }\n}\n\nexport const PassthroughRenderer = createObjectFieldRenderer(({ field }) => {\n    return (\n        <div className=\"flex flex-col gap-4\">\n            {field.layout.map((node, index) => (\n                <LayoutNodeRenderer key={index} node={node} />\n            ))}\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,yBAAyB;AAClC,SAASC,kBAAkB;AAQ3B,OAAO,MAAMC,mBAAmB,GAAGF,yBAAyB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EACxE,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAAqB,GAC/BF,KAAK,CAACG,MAAM,CAACC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBAC1BV,KAAA,CAAAK,aAAA,CAACH,kBAAkB;IAACS,GAAG,EAAED,KAAM;IAACD,IAAI,EAAEA;EAAK,CAAE,CAChD,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        radioButtons: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+    }
+}
+export declare const RadioButtonsRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/RadioButtonsRenderer.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { RadioGroup } from "@webiny/admin-ui";
+export const RadioButtonsRenderer = createFieldRenderer(({
+  field
+}) => {
+  const options = field.options ?? [];
+  return /*#__PURE__*/React.createElement(RadioGroup, {
+    label: field.label,
+    description: field.description,
+    note: field.note,
+    required: field.required,
+    disabled: field.disabled,
+    validation: field.validation,
+    items: options.map(opt => ({
+      label: opt.label,
+      value: String(opt.value)
+    })),
+    value: field.value !== undefined ? String(field.value) : undefined,
+    onChange: value => {
+      field.onChange(value);
+      field.onBlur();
+    }
+  });
+});
+
+//# sourceMappingURL=RadioButtonsRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","RadioGroup","RadioButtonsRenderer","field","options","createElement","label","description","note","required","disabled","validation","items","map","opt","value","String","undefined","onChange","onBlur"],"sources":["RadioButtonsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { RadioGroup } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        radioButtons: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const RadioButtonsRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <RadioGroup\n            label={field.label}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            items={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value)\n            }))}\n            value={field.value !== undefined ? String(field.value) : undefined}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,UAAU,QAAQ,kBAAkB;AAS7C,OAAO,MAAMC,oBAAoB,GAAGF,mBAAmB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EACnE,MAAMC,OAAuB,GAAGD,KAAK,CAACC,OAAO,IAAI,EAAE;EAEnD,oBACIL,KAAA,CAAAM,aAAA,CAACJ,UAAU;IACPK,KAAK,EAAEH,KAAK,CAACG,KAAM;IACnBC,WAAW,EAAEJ,KAAK,CAACI,WAAY;IAC/BC,IAAI,EAAEL,KAAK,CAACK,IAAK;IACjBC,QAAQ,EAAEN,KAAK,CAACM,QAAS;IACzBC,QAAQ,EAAEP,KAAK,CAACO,QAAS;IACzBC,UAAU,EAAER,KAAK,CAACQ,UAAW;IAC7BC,KAAK,EAAER,OAAO,CAACS,GAAG,CAACC,GAAG,KAAK;MACvBR,KAAK,EAAEQ,GAAG,CAACR,KAAK;MAChBS,KAAK,EAAEC,MAAM,CAACF,GAAG,CAACC,KAAK;IAC3B,CAAC,CAAC,CAAE;IACJA,KAAK,EAAEZ,KAAK,CAACY,KAAK,KAAKE,SAAS,GAAGD,MAAM,CAACb,KAAK,CAACY,KAAK,CAAC,GAAGE,SAAU;IACnEC,QAAQ,EAAEH,KAAK,IAAI;MACfZ,KAAK,CAACe,QAAQ,CAACH,KAAK,CAAC;MACrBZ,KAAK,CAACgB,MAAM,CAAC,CAAC;IAClB;EAAE,CACL,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        dropdown: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+    }
+}
+export declare const SelectRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/SelectRenderer.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { Select } from "@webiny/admin-ui";
+export const SelectRenderer = createFieldRenderer(({
+  field
+}) => {
+  const options = field.options ?? [];
+  return /*#__PURE__*/React.createElement(Select, {
+    label: field.label,
+    placeholder: field.placeholder,
+    description: field.description,
+    note: field.note,
+    value: field.value != null ? String(field.value) : "",
+    onChange: value => {
+      field.onChange(value);
+      field.onBlur();
+    },
+    required: field.required,
+    disabled: field.disabled,
+    validation: field.validation,
+    options: options.map(opt => ({
+      label: opt.label,
+      value: String(opt.value),
+      disabled: opt.disabled
+    }))
+  });
+});
+
+//# sourceMappingURL=SelectRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","Select","SelectRenderer","field","options","createElement","label","placeholder","description","note","value","String","onChange","onBlur","required","disabled","validation","map","opt"],"sources":["SelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dropdown: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const SelectRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <Select\n            label={field.label}\n            placeholder={field.placeholder}\n            description={field.description}\n            note={field.note}\n            value={field.value != null ? String(field.value) : \"\"}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value),\n                disabled: opt.disabled\n            }))}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,MAAM,QAAQ,kBAAkB;AASzC,OAAO,MAAMC,cAAc,GAAGF,mBAAmB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EAC7D,MAAMC,OAAuB,GAAGD,KAAK,CAACC,OAAO,IAAI,EAAE;EAEnD,oBACIL,KAAA,CAAAM,aAAA,CAACJ,MAAM;IACHK,KAAK,EAAEH,KAAK,CAACG,KAAM;IACnBC,WAAW,EAAEJ,KAAK,CAACI,WAAY;IAC/BC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,IAAI,EAAEN,KAAK,CAACM,IAAK;IACjBC,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,IAAI,GAAGC,MAAM,CAACR,KAAK,CAACO,KAAK,CAAC,GAAG,EAAG;IACtDE,QAAQ,EAAEF,KAAK,IAAI;MACfP,KAAK,CAACS,QAAQ,CAACF,KAAK,CAAC;MACrBP,KAAK,CAACU,MAAM,CAAC,CAAC;IAClB,CAAE;IACFC,QAAQ,EAAEX,KAAK,CAACW,QAAS;IACzBC,QAAQ,EAAEZ,KAAK,CAACY,QAAS;IACzBC,UAAU,EAAEb,KAAK,CAACa,UAAW;IAC7BZ,OAAO,EAAEA,OAAO,CAACa,GAAG,CAACC,GAAG,KAAK;MACzBZ,KAAK,EAAEY,GAAG,CAACZ,KAAK;MAChBI,KAAK,EAAEC,MAAM,CAACO,GAAG,CAACR,KAAK,CAAC;MACxBK,QAAQ,EAAEG,GAAG,CAACH;IAClB,CAAC,CAAC;EAAE,CACP,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/SwitchRenderer.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","Switch","SwitchRenderer","field","createElement","checked","value","onChange","label","description","note","required","disabled","validation"],"sources":["SwitchRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Switch } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        switch: { fieldType: \"boolean\"; settings: undefined };\n    }\n}\n\nexport const SwitchRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <Switch\n            checked={!!field.value}\n            onChange={value => field.onChange(value)}\n            label={field.label}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,MAAM,QAAQ,kBAAkB;AAQzC,OAAO,MAAMC,cAAc,GAAGF,mBAAmB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EAC7D,oBACIJ,KAAA,CAAAK,aAAA,CAACH,MAAM;IACHI,OAAO,EAAE,CAAC,CAACF,KAAK,CAACG,KAAM;IACvBC,QAAQ,EAAED,KAAK,IAAIH,KAAK,CAACI,QAAQ,CAACD,KAAK,CAAE;IACzCE,KAAK,EAAEL,KAAK,CAACK,KAAM;IACnBC,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;EAAW,CAChC,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/TagsRenderer.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { Tags } from "@webiny/admin-ui";
+export const TagsRenderer = createFieldRenderer(({
+  field
+}) => {
+  const value = field.value ?? [];
+  return /*#__PURE__*/React.createElement(Tags, {
+    label: field.label,
+    placeholder: field.placeholder || "Add values",
+    description: field.description,
+    note: field.note,
+    required: field.required,
+    disabled: field.disabled,
+    validation: field.validation,
+    value: value,
+    onChange: value => field.onChange(value)
+  });
+});
+
+//# sourceMappingURL=TagsRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","Tags","TagsRenderer","field","value","createElement","label","placeholder","description","note","required","disabled","validation","onChange"],"sources":["TagsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Tags } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        tags: { fieldType: \"text\"; settings: undefined };\n    }\n}\n\nexport const TagsRenderer = createFieldRenderer(({ field }) => {\n    const value = (field.value as string[]) ?? [];\n\n    return (\n        <Tags\n            label={field.label}\n            placeholder={field.placeholder || \"Add values\"}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            value={value}\n            onChange={value => field.onChange(value)}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,IAAI,QAAQ,kBAAkB;AAQvC,OAAO,MAAMC,YAAY,GAAGF,mBAAmB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EAC3D,MAAMC,KAAK,GAAID,KAAK,CAACC,KAAK,IAAiB,EAAE;EAE7C,oBACIL,KAAA,CAAAM,aAAA,CAACJ,IAAI;IACDK,KAAK,EAAEH,KAAK,CAACG,KAAM;IACnBC,WAAW,EAAEJ,KAAK,CAACI,WAAW,IAAI,YAAa;IAC/CC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,IAAI,EAAEN,KAAK,CAACM,IAAK;IACjBC,QAAQ,EAAEP,KAAK,CAACO,QAAS;IACzBC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,UAAU,EAAET,KAAK,CAACS,UAAW;IAC7BR,KAAK,EAAEA,KAAM;IACbS,QAAQ,EAAET,KAAK,IAAID,KAAK,CAACU,QAAQ,CAACT,KAAK;EAAE,CAC5C,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/TextInputsRenderer.js

@@ -0,0 +1,48 @@
+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 TextInputsRenderer = createFieldRenderer(({
+  field
+}) => {
+  const values = 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,
+    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=TextInputsRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","ReactComponent","DeleteIcon","AddIcon","Button","DelayedOnChange","FormComponentDescription","Icon","Input","Separator","TextInputsRenderer","field","values","value","updateAt","index","val","next","onChange","createElement","className","labelPosition","variant","label","length","description","text","map","key","disabled","placeholder","onEnter","addItem","endIcon","icon","onClick","removeItem","rendererSettings","addItemLabel"],"sources":["TextInputsRenderer.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        textInputs: { fieldType: \"text\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const TextInputsRenderer = createFieldRenderer<\"textInputs\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n\n    const updateAt = (index: number, val: string) => {\n        const next = [...values];\n        next[index] = val;\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\n                    key={index}\n                    value={val}\n                    onChange={value => updateAt(index, value as string)}\n                >\n                    <Input\n                        disabled={field.disabled}\n                        label={`Value ${index + 1}`}\n                        placeholder={field.placeholder}\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,kBAAkB,GAAGV,mBAAmB,CAAe,CAAC;EAAEW;AAAM,CAAC,KAAK;EAC/E,MAAMC,MAAM,GAAID,KAAK,CAACE,KAAK,IAAiB,EAAE;EAE9C,MAAMC,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAW,KAAK;IAC7C,MAAMC,IAAI,GAAG,CAAC,GAAGL,MAAM,CAAC;IACxBK,IAAI,CAACF,KAAK,CAAC,GAAGC,GAAG;IACjBL,KAAK,CAACO,QAAQ,CAACD,IAAI,CAAC;EACxB,CAAC;EAED,oBACIlB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAuB,gBACnCrB,KAAA,CAAAoB,aAAA,CAACV,SAAS;IAACY,aAAa,EAAE,OAAQ;IAACC,OAAO,EAAE;EAAS,gBACjDvB,KAAA,CAAAoB,aAAA;IAAMC,SAAS,EAAE;EAA4C,GACxD,GAAGT,KAAK,CAACY,KAAK,IAAI,EAAE,IAAIX,MAAM,CAACY,MAAM,GAAG,IAAIZ,MAAM,CAACY,MAAM,GAAG,GAAG,EAAE,EAChE,CACC,CAAC,EACXb,KAAK,CAACc,WAAW,iBAAI1B,KAAA,CAAAoB,aAAA,CAACb,wBAAwB;IAACoB,IAAI,EAAEf,KAAK,CAACc;EAAY,CAAE,CAAC,EAC1Eb,MAAM,CAACe,GAAG,CAAC,CAACX,GAAG,EAAED,KAAK,kBACnBhB,KAAA,CAAAoB,aAAA,CAACd,eAAe;IACZuB,GAAG,EAAEb,KAAM;IACXF,KAAK,EAAEG,GAAI;IACXE,QAAQ,EAAEL,KAAK,IAAIC,QAAQ,CAACC,KAAK,EAAEF,KAAe;EAAE,gBAEpDd,KAAA,CAAAoB,aAAA,CAACX,KAAK;IACFqB,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBN,KAAK,EAAE,SAASR,KAAK,GAAG,CAAC,EAAG;IAC5Be,WAAW,EAAEnB,KAAK,CAACmB,WAAY;IAC/BC,OAAO,EAAEA,CAAA,KAAMpB,KAAK,CAACqB,OAAO,CAAC,EAAE,CAAE;IACjCC,OAAO,eACHlC,KAAA,CAAAoB,aAAA,CAACZ,IAAI;MACD2B,IAAI,eAAEnC,KAAA,CAAAoB,aAAA,CAACjB,UAAU,MAAE,CAAE;MACrBqB,KAAK,EAAE,QAAS;MAChBY,OAAO,EAAEA,CAAA,KAAMxB,KAAK,CAACyB,UAAU,CAACrB,KAAK,CAAE;MACvCK,SAAS,EAAE;IAAiB,CAC/B;EACJ,CACJ,CACY,CACpB,CAAC,eACFrB,KAAA,CAAAoB,aAAA,CAACf,MAAM;IACHyB,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBP,OAAO,EAAE,UAAW;IACpBY,IAAI,eAAEnC,KAAA,CAAAoB,aAAA,CAAChB,OAAO,MAAE,CAAE;IAClBuB,IAAI,EAAEf,KAAK,CAAC0B,gBAAgB,EAAEC,YAAY,IAAI,WAAY;IAC1DH,OAAO,EAAEA,CAAA,KAAMxB,KAAK,CAACqB,OAAO,CAAC,EAAE;EAAE,CACpC,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/TextareaRenderer.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","DelayedOnChange","Textarea","TextareaRenderer","field","createElement","value","onChange","label","placeholder","description","note","required","disabled","validation","onBlur","rows","rendererSettings"],"sources":["TextareaRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { Textarea } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textarea: { fieldType: \"text\"; settings?: { rows?: number } };\n    }\n}\n\nexport const TextareaRenderer = createFieldRenderer<\"textarea\">(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Textarea\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                rows={field.rendererSettings?.rows ?? 5}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,QAAQ,QAAQ,kBAAkB;AAQ3C,OAAO,MAAMC,gBAAgB,GAAGH,mBAAmB,CAAa,CAAC;EAAEI;AAAM,CAAC,KAAK;EAC3E,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,QAAQ;IACLM,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,EAAEZ,KAAK,CAACa,gBAAgB,EAAED,IAAI,IAAI;EAAE,CAC3C,CACY,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/TextareasRenderer.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { Button, DelayedOnChange, FormComponentDescription, IconButton, Separator, Textarea } from "@webiny/admin-ui";
+export const TextareasRenderer = createFieldRenderer(({
+  field
+}) => {
+  const values = 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("div", {
+    key: index,
+    className: "relative"
+  }, /*#__PURE__*/React.createElement(DelayedOnChange, {
+    value: val,
+    onChange: value => updateAt(index, value)
+  }, /*#__PURE__*/React.createElement(Textarea, {
+    disabled: field.disabled,
+    rows: 5,
+    label: `Value ${index + 1}`,
+    placeholder: field.placeholder
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-xl right-sm z-10"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "ghost",
+    size: "md",
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+    onClick: () => field.removeItem(index)
+  })))), /*#__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=TextareasRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","ReactComponent","DeleteIcon","AddIcon","Button","DelayedOnChange","FormComponentDescription","IconButton","Separator","Textarea","TextareasRenderer","field","values","value","updateAt","index","val","next","onChange","createElement","className","labelPosition","variant","label","length","description","text","map","key","disabled","rows","placeholder","size","icon","onClick","removeItem","rendererSettings","addItemLabel","addItem"],"sources":["TextareasRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DelayedOnChange,\n    FormComponentDescription,\n    IconButton,\n    Separator,\n    Textarea\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textareas: { fieldType: \"text\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const TextareasRenderer = createFieldRenderer<\"textareas\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n\n    const updateAt = (index: number, val: string) => {\n        const next = [...values];\n        next[index] = val;\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                <div key={index} className={\"relative\"}>\n                    <DelayedOnChange\n                        value={val}\n                        onChange={value => updateAt(index, value as string)}\n                    >\n                        <Textarea\n                            disabled={field.disabled}\n                            rows={5}\n                            label={`Value ${index + 1}`}\n                            placeholder={field.placeholder}\n                        />\n                    </DelayedOnChange>\n                    <div className={\"absolute top-xl right-sm z-10\"}>\n                        <IconButton\n                            variant={\"ghost\"}\n                            size={\"md\"}\n                            icon={<DeleteIcon />}\n                            onClick={() => field.removeItem(index)}\n                        />\n                    </div>\n                </div>\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,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,OAAO,QAAQ,uBAAuB;AACjE,SACIC,MAAM,EACNC,eAAe,EACfC,wBAAwB,EACxBC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACL,kBAAkB;AAQzB,OAAO,MAAMC,iBAAiB,GAAGV,mBAAmB,CAAc,CAAC;EAAEW;AAAM,CAAC,KAAK;EAC7E,MAAMC,MAAM,GAAID,KAAK,CAACE,KAAK,IAAiB,EAAE;EAE9C,MAAMC,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAW,KAAK;IAC7C,MAAMC,IAAI,GAAG,CAAC,GAAGL,MAAM,CAAC;IACxBK,IAAI,CAACF,KAAK,CAAC,GAAGC,GAAG;IACjBL,KAAK,CAACO,QAAQ,CAACD,IAAI,CAAC;EACxB,CAAC;EAED,oBACIlB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAuB,gBACnCrB,KAAA,CAAAoB,aAAA,CAACX,SAAS;IAACa,aAAa,EAAE,OAAQ;IAACC,OAAO,EAAE;EAAS,gBACjDvB,KAAA,CAAAoB,aAAA;IAAMC,SAAS,EAAE;EAA4C,GACxD,GAAGT,KAAK,CAACY,KAAK,IAAI,EAAE,IAAIX,MAAM,CAACY,MAAM,GAAG,IAAIZ,MAAM,CAACY,MAAM,GAAG,GAAG,EAAE,EAChE,CACC,CAAC,EACXb,KAAK,CAACc,WAAW,iBAAI1B,KAAA,CAAAoB,aAAA,CAACb,wBAAwB;IAACoB,IAAI,EAAEf,KAAK,CAACc;EAAY,CAAE,CAAC,EAC1Eb,MAAM,CAACe,GAAG,CAAC,CAACX,GAAG,EAAED,KAAK,kBACnBhB,KAAA,CAAAoB,aAAA;IAAKS,GAAG,EAAEb,KAAM;IAACK,SAAS,EAAE;EAAW,gBACnCrB,KAAA,CAAAoB,aAAA,CAACd,eAAe;IACZQ,KAAK,EAAEG,GAAI;IACXE,QAAQ,EAAEL,KAAK,IAAIC,QAAQ,CAACC,KAAK,EAAEF,KAAe;EAAE,gBAEpDd,KAAA,CAAAoB,aAAA,CAACV,QAAQ;IACLoB,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBC,IAAI,EAAE,CAAE;IACRP,KAAK,EAAE,SAASR,KAAK,GAAG,CAAC,EAAG;IAC5BgB,WAAW,EAAEpB,KAAK,CAACoB;EAAY,CAClC,CACY,CAAC,eAClBhC,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAgC,gBAC5CrB,KAAA,CAAAoB,aAAA,CAACZ,UAAU;IACPe,OAAO,EAAE,OAAQ;IACjBU,IAAI,EAAE,IAAK;IACXC,IAAI,eAAElC,KAAA,CAAAoB,aAAA,CAACjB,UAAU,MAAE,CAAE;IACrBgC,OAAO,EAAEA,CAAA,KAAMvB,KAAK,CAACwB,UAAU,CAACpB,KAAK;EAAE,CAC1C,CACA,CACJ,CACR,CAAC,eACFhB,KAAA,CAAAoB,aAAA,CAACf,MAAM;IACHyB,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBP,OAAO,EAAE,UAAW;IACpBW,IAAI,eAAElC,KAAA,CAAAoB,aAAA,CAAChB,OAAO,MAAE,CAAE;IAClBuB,IAAI,EAAEf,KAAK,CAACyB,gBAAgB,EAAEC,YAAY,IAAI,WAAY;IAC1DH,OAAO,EAAEA,CAAA,KAAMvB,KAAK,CAAC2B,OAAO,CAAC,EAAE;EAAE,CACpC,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/VerticalTabsRenderer.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { List, Heading, Text } from "@webiny/admin-ui";
+import { LayoutNodeRenderer, renderTabIcon } from "../../../features/formModel/FormView.js";
+export const VerticalTabsRenderer = observer(function VerticalTabsRenderer({
+  node
+}) {
+  const activeTab = node.tabs.find(t => t.id === node.activeTabId);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row flex-1 min-h-full shrink-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col",
+    style: {
+      width: 300
+    }
+  }, /*#__PURE__*/React.createElement(List, null, node.tabs.map(tab => /*#__PURE__*/React.createElement(List.Item, {
+    key: tab.id,
+    className: "fill-neutral-strong",
+    icon: renderTabIcon(tab.icon),
+    title: tab.label,
+    description: tab.description,
+    activated: tab.id === node.activeTabId,
+    onClick: () => node.setActiveTab(tab.id)
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col flex-1 px-md border-l border-neutral-dimmed"
+  }, activeTab && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "p-md"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: 4,
+    className: "text-neutral-primary"
+  }, activeTab.label), activeTab.description && /*#__PURE__*/React.createElement(Text, {
+    size: "sm"
+  }, activeTab.description)), /*#__PURE__*/React.createElement("div", {
+    className: "p-md flex flex-col gap-4"
+  }, activeTab.layout.map((childNode, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
+    key: index,
+    node: childNode
+  }))))));
+});
+
+//# sourceMappingURL=VerticalTabsRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","List","Heading","Text","LayoutNodeRenderer","renderTabIcon","VerticalTabsRenderer","node","activeTab","tabs","find","t","id","activeTabId","createElement","className","style","width","map","tab","Item","key","icon","title","label","description","activated","onClick","setActiveTab","Fragment","level","size","layout","childNode","index"],"sources":["VerticalTabsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { List, Heading, Text } from \"@webiny/admin-ui\";\nimport { LayoutNodeRenderer, renderTabIcon } from \"~/features/formModel/FormView.js\";\nimport type { TabsNodeRendererProps } from \"~/features/formModel/FormView.js\";\n\nexport const VerticalTabsRenderer = observer(function VerticalTabsRenderer({\n    node\n}: TabsNodeRendererProps) {\n    const activeTab = node.tabs.find(t => t.id === node.activeTabId);\n\n    return (\n        <div className={\"flex flex-row flex-1 min-h-full shrink-0\"}>\n            <div className={\"flex flex-col\"} style={{ width: 300 }}>\n                <List>\n                    {node.tabs.map(tab => (\n                        <List.Item\n                            key={tab.id}\n                            className={\"fill-neutral-strong\"}\n                            icon={renderTabIcon(tab.icon)}\n                            title={tab.label}\n                            description={tab.description}\n                            activated={tab.id === node.activeTabId}\n                            onClick={() => node.setActiveTab(tab.id)}\n                        />\n                    ))}\n                </List>\n            </div>\n            <div className={\"flex flex-col flex-1 px-md border-l border-neutral-dimmed\"}>\n                {activeTab && (\n                    <>\n                        <div className={\"p-md\"}>\n                            <Heading level={4} className={\"text-neutral-primary\"}>\n                                {activeTab.label}\n                            </Heading>\n                            {activeTab.description && (\n                                <Text size={\"sm\"}>{activeTab.description}</Text>\n                            )}\n                        </div>\n                        <div className={\"p-md flex flex-col gap-4\"}>\n                            {activeTab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    </>\n                )}\n            </div>\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,IAAI,EAAEC,OAAO,EAAEC,IAAI,QAAQ,kBAAkB;AACtD,SAASC,kBAAkB,EAAEC,aAAa;AAG1C,OAAO,MAAMC,oBAAoB,GAAGN,QAAQ,CAAC,SAASM,oBAAoBA,CAAC;EACvEC;AACmB,CAAC,EAAE;EACtB,MAAMC,SAAS,GAAGD,IAAI,CAACE,IAAI,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,KAAKL,IAAI,CAACM,WAAW,CAAC;EAEhE,oBACId,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAA2C,gBACvDhB,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE,eAAgB;IAACC,KAAK,EAAE;MAAEC,KAAK,EAAE;IAAI;EAAE,gBACnDlB,KAAA,CAAAe,aAAA,CAACb,IAAI,QACAM,IAAI,CAACE,IAAI,CAACS,GAAG,CAACC,GAAG,iBACdpB,KAAA,CAAAe,aAAA,CAACb,IAAI,CAACmB,IAAI;IACNC,GAAG,EAAEF,GAAG,CAACP,EAAG;IACZG,SAAS,EAAE,qBAAsB;IACjCO,IAAI,EAAEjB,aAAa,CAACc,GAAG,CAACG,IAAI,CAAE;IAC9BC,KAAK,EAAEJ,GAAG,CAACK,KAAM;IACjBC,WAAW,EAAEN,GAAG,CAACM,WAAY;IAC7BC,SAAS,EAAEP,GAAG,CAACP,EAAE,KAAKL,IAAI,CAACM,WAAY;IACvCc,OAAO,EAAEA,CAAA,KAAMpB,IAAI,CAACqB,YAAY,CAACT,GAAG,CAACP,EAAE;EAAE,CAC5C,CACJ,CACC,CACL,CAAC,eACNb,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAA4D,GACvEP,SAAS,iBACNT,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAA8B,QAAA,qBACI9B,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAAO,gBACnBhB,KAAA,CAAAe,aAAA,CAACZ,OAAO;IAAC4B,KAAK,EAAE,CAAE;IAACf,SAAS,EAAE;EAAuB,GAChDP,SAAS,CAACgB,KACN,CAAC,EACThB,SAAS,CAACiB,WAAW,iBAClB1B,KAAA,CAAAe,aAAA,CAACX,IAAI;IAAC4B,IAAI,EAAE;EAAK,GAAEvB,SAAS,CAACiB,WAAkB,CAElD,CAAC,eACN1B,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAA2B,GACtCP,SAAS,CAACwB,MAAM,CAACd,GAAG,CAAC,CAACe,SAAS,EAAEC,KAAK,kBACnCnC,KAAA,CAAAe,aAAA,CAACV,kBAAkB;IAACiB,GAAG,EAAEa,KAAM;IAAC3B,IAAI,EAAE0B;EAAU,CAAE,CACrD,CACA,CACP,CAEL,CACJ,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/base/Base/LexicalPreset.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const LexicalPreset: () => React.JSX.Element;

package/base/Base/LexicalPreset.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { LexicalEditorConfig } from "@webiny/lexical-editor/components/LexicalEditorConfig/LexicalEditorConfig.js";
+import { FloatingLinkEditorPlugin } from "@webiny/lexical-editor";
+import { AdminConfig } from "../../config/AdminConfig.js";
+import { LexicalTheme } from "../../config/AdminConfig/LexicalTheme.js";
+import { LexicalLinkForm } from "../../components/index.js";
+const {
+  Color,
+  Typography
+} = LexicalTheme;
+export const LexicalPreset = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminConfig, null, /*#__PURE__*/React.createElement(Color, {
+    id: "color1",
+    label: "Primary color",
+    value: "var(--wa-theme-color1)"
+  }), /*#__PURE__*/React.createElement(Color, {
+    id: "color2",
+    label: "Secondary color",
+    value: "var(--wa-theme-color2)"
+  }), /*#__PURE__*/React.createElement(Color, {
+    id: "color3",
+    label: "Regular color",
+    value: "var(--wa-theme-color3)"
+  }), /*#__PURE__*/React.createElement(Typography.Heading, {
+    id: "heading1",
+    label: "Heading 1",
+    tag: "h1",
+    className: "wa-heading-1"
+  }), /*#__PURE__*/React.createElement(Typography.Heading, {
+    id: "heading2",
+    label: "Heading 2",
+    tag: "h2",
+    className: "wa-heading-2"
+  }), /*#__PURE__*/React.createElement(Typography.Heading, {
+    id: "heading3",
+    label: "Heading 3",
+    tag: "h3",
+    className: "wa-heading-3"
+  }), /*#__PURE__*/React.createElement(Typography.Paragraph, {
+    id: "paragraph1",
+    label: "Paragraph",
+    tag: "p",
+    className: "wa-paragraph-1"
+  }), /*#__PURE__*/React.createElement(Typography.Quote, {
+    id: "quote",
+    label: "Quote",
+    tag: "blockquote",
+    className: "wa-blockquote-1"
+  }), /*#__PURE__*/React.createElement(Typography.List, {
+    id: "list1",
+    label: "Unordered list",
+    tag: "ul",
+    className: "wa-unordered-list-1"
+  }), /*#__PURE__*/React.createElement(Typography.List, {
+    id: "list2",
+    label: "Ordered list",
+    tag: "ol",
+    className: "wa-ordered-list-1"
+  })), /*#__PURE__*/React.createElement(LexicalEditorConfig, null, /*#__PURE__*/React.createElement(LexicalEditorConfig.Plugin, {
+    name: "floatingLinkEditor",
+    element: /*#__PURE__*/React.createElement(FloatingLinkEditorPlugin, {
+      LinkForm: LexicalLinkForm
+    })
+  })));
+};
+
+//# sourceMappingURL=LexicalPreset.js.map

package/base/Base/LexicalPreset.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","LexicalEditorConfig","FloatingLinkEditorPlugin","AdminConfig","LexicalTheme","LexicalLinkForm","Color","Typography","LexicalPreset","createElement","Fragment","id","label","value","Heading","tag","className","Paragraph","Quote","List","Plugin","name","element","LinkForm"],"sources":["LexicalPreset.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditorConfig } from \"@webiny/lexical-editor/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { FloatingLinkEditorPlugin } from \"@webiny/lexical-editor\";\nimport { AdminConfig } from \"../../config/AdminConfig.js\";\nimport { LexicalTheme } from \"~/config/AdminConfig/LexicalTheme.js\";\nimport { LexicalLinkForm } from \"~/components/index.js\";\n\nconst { Color, Typography } = LexicalTheme;\n\nexport const LexicalPreset = () => {\n    return (\n        <>\n            <AdminConfig>\n                {/* Colors */}\n                <Color id={\"color1\"} label=\"Primary color\" value={\"var(--wa-theme-color1)\"} />\n                <Color id={\"color2\"} label=\"Secondary color\" value={\"var(--wa-theme-color2)\"} />\n                <Color id={\"color3\"} label=\"Regular color\" value={\"var(--wa-theme-color3)\"} />\n                {/* Typography */}\n                <Typography.Heading\n                    id={\"heading1\"}\n                    label={\"Heading 1\"}\n                    tag={\"h1\"}\n                    className={\"wa-heading-1\"}\n                />\n                <Typography.Heading\n                    id={\"heading2\"}\n                    label={\"Heading 2\"}\n                    tag={\"h2\"}\n                    className={\"wa-heading-2\"}\n                />\n                <Typography.Heading\n                    id={\"heading3\"}\n                    label={\"Heading 3\"}\n                    tag={\"h3\"}\n                    className={\"wa-heading-3\"}\n                />\n\n                <Typography.Paragraph\n                    id={\"paragraph1\"}\n                    label={\"Paragraph\"}\n                    tag={\"p\"}\n                    className={\"wa-paragraph-1\"}\n                />\n\n                <Typography.Quote\n                    id={\"quote\"}\n                    label={\"Quote\"}\n                    tag={\"blockquote\"}\n                    className={\"wa-blockquote-1\"}\n                />\n                <Typography.List\n                    id={\"list1\"}\n                    label={\"Unordered list\"}\n                    tag={\"ul\"}\n                    className={\"wa-unordered-list-1\"}\n                />\n                <Typography.List\n                    id={\"list2\"}\n                    label={\"Ordered list\"}\n                    tag={\"ol\"}\n                    className={\"wa-ordered-list-1\"}\n                />\n            </AdminConfig>\n            <LexicalEditorConfig>\n                <LexicalEditorConfig.Plugin\n                    name={\"floatingLinkEditor\"}\n                    element={<FloatingLinkEditorPlugin LinkForm={LexicalLinkForm} />}\n                />\n            </LexicalEditorConfig>\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,8EAA8E;AAClH,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,WAAW;AACpB,SAASC,YAAY;AACrB,SAASC,eAAe;AAExB,MAAM;EAAEC,KAAK;EAAEC;AAAW,CAAC,GAAGH,YAAY;AAE1C,OAAO,MAAMI,aAAa,GAAGA,CAAA,KAAM;EAC/B,oBACIR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACIV,KAAA,CAAAS,aAAA,CAACN,WAAW,qBAERH,KAAA,CAAAS,aAAA,CAACH,KAAK;IAACK,EAAE,EAAE,QAAS;IAACC,KAAK,EAAC,eAAe;IAACC,KAAK,EAAE;EAAyB,CAAE,CAAC,eAC9Eb,KAAA,CAAAS,aAAA,CAACH,KAAK;IAACK,EAAE,EAAE,QAAS;IAACC,KAAK,EAAC,iBAAiB;IAACC,KAAK,EAAE;EAAyB,CAAE,CAAC,eAChFb,KAAA,CAAAS,aAAA,CAACH,KAAK;IAACK,EAAE,EAAE,QAAS;IAACC,KAAK,EAAC,eAAe;IAACC,KAAK,EAAE;EAAyB,CAAE,CAAC,eAE9Eb,KAAA,CAAAS,aAAA,CAACF,UAAU,CAACO,OAAO;IACfH,EAAE,EAAE,UAAW;IACfC,KAAK,EAAE,WAAY;IACnBG,GAAG,EAAE,IAAK;IACVC,SAAS,EAAE;EAAe,CAC7B,CAAC,eACFhB,KAAA,CAAAS,aAAA,CAACF,UAAU,CAACO,OAAO;IACfH,EAAE,EAAE,UAAW;IACfC,KAAK,EAAE,WAAY;IACnBG,GAAG,EAAE,IAAK;IACVC,SAAS,EAAE;EAAe,CAC7B,CAAC,eACFhB,KAAA,CAAAS,aAAA,CAACF,UAAU,CAACO,OAAO;IACfH,EAAE,EAAE,UAAW;IACfC,KAAK,EAAE,WAAY;IACnBG,GAAG,EAAE,IAAK;IACVC,SAAS,EAAE;EAAe,CAC7B,CAAC,eAEFhB,KAAA,CAAAS,aAAA,CAACF,UAAU,CAACU,SAAS;IACjBN,EAAE,EAAE,YAAa;IACjBC,KAAK,EAAE,WAAY;IACnBG,GAAG,EAAE,GAAI;IACTC,SAAS,EAAE;EAAiB,CAC/B,CAAC,eAEFhB,KAAA,CAAAS,aAAA,CAACF,UAAU,CAACW,KAAK;IACbP,EAAE,EAAE,OAAQ;IACZC,KAAK,EAAE,OAAQ;IACfG,GAAG,EAAE,YAAa;IAClBC,SAAS,EAAE;EAAkB,CAChC,CAAC,eACFhB,KAAA,CAAAS,aAAA,CAACF,UAAU,CAACY,IAAI;IACZR,EAAE,EAAE,OAAQ;IACZC,KAAK,EAAE,gBAAiB;IACxBG,GAAG,EAAE,IAAK;IACVC,SAAS,EAAE;EAAsB,CACpC,CAAC,eACFhB,KAAA,CAAAS,aAAA,CAACF,UAAU,CAACY,IAAI;IACZR,EAAE,EAAE,OAAQ;IACZC,KAAK,EAAE,cAAe;IACtBG,GAAG,EAAE,IAAK;IACVC,SAAS,EAAE;EAAoB,CAClC,CACQ,CAAC,eACdhB,KAAA,CAAAS,aAAA,CAACR,mBAAmB,qBAChBD,KAAA,CAAAS,aAAA,CAACR,mBAAmB,CAACmB,MAAM;IACvBC,IAAI,EAAE,oBAAqB;IAC3BC,OAAO,eAAEtB,KAAA,CAAAS,aAAA,CAACP,wBAAwB;MAACqB,QAAQ,EAAElB;IAAgB,CAAE;EAAE,CACpE,CACgB,CACvB,CAAC;AAEX,CAAC","ignoreList":[]}

package/base/Base/Menus/SupportMenuItems.d.ts

@@ -1,2 +1,2 @@
-import React from "react";
-export declare const SupportMenuItems: () => (React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null)[];
+import { type ReactElement } from "react";
+export declare const SupportMenuItems: () => ReactElement | null;

package/base/Base/Menus/SupportMenuItems.js

@@ -1,12 +1,10 @@
 import React from "react";
-import { AdminConfig } from "../../../config/AdminConfig";
-const {
-  useAdminConfig
-} = AdminConfig;
+import { useAdminConfig } from "../../../config/AdminConfig.js";
 export const SupportMenuItems = () => {
   const {
     supportMenus
   } = useAdminConfig();
+  // @ts-expect-error Fix with React 19.
   return supportMenus.map(menu => {
     if (! /*#__PURE__*/React.isValidElement(menu.element)) {
       return null;

package/base/Base/Menus/SupportMenuItems.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AdminConfig","useAdminConfig","SupportMenuItems","supportMenus","map","menu","isValidElement","element","cloneElement","key","name"],"sources":["SupportMenuItems.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig } from \"~/config/AdminConfig\";\n\nconst { useAdminConfig } = AdminConfig;\n\nexport const SupportMenuItems = () => {\n    const { supportMenus } = useAdminConfig();\n    return supportMenus.map(menu => {\n        if (!React.isValidElement(menu.element)) {\n            return null;\n        }\n\n        return React.cloneElement(menu.element, { key: menu.name });\n    });\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW;AAEpB,MAAM;EAAEC;AAAe,CAAC,GAAGD,WAAW;AAEtC,OAAO,MAAME,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAa,CAAC,GAAGF,cAAc,CAAC,CAAC;EACzC,OAAOE,YAAY,CAACC,GAAG,CAACC,IAAI,IAAI;IAC5B,IAAI,eAACN,KAAK,CAACO,cAAc,CAACD,IAAI,CAACE,OAAO,CAAC,EAAE;MACrC,OAAO,IAAI;IACf;IAEA,oBAAOR,KAAK,CAACS,YAAY,CAACH,IAAI,CAACE,OAAO,EAAE;MAAEE,GAAG,EAAEJ,IAAI,CAACK;IAAK,CAAC,CAAC;EAC/D,CAAC,CAAC;AACN,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useAdminConfig","SupportMenuItems","supportMenus","map","menu","isValidElement","element","cloneElement","key","name"],"sources":["SupportMenuItems.tsx"],"sourcesContent":["import React, { type ReactElement } from \"react\";\nimport { useAdminConfig } from \"~/config/AdminConfig.js\";\n\nexport const SupportMenuItems = (): ReactElement | null => {\n    const { supportMenus } = useAdminConfig();\n    // @ts-expect-error Fix with React 19.\n    return supportMenus.map(menu => {\n        if (!React.isValidElement(menu.element)) {\n            return null;\n        }\n\n        return React.cloneElement(menu.element, { key: menu.name });\n    });\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SAASC,cAAc;AAEvB,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAA2B;EACvD,MAAM;IAAEC;EAAa,CAAC,GAAGF,cAAc,CAAC,CAAC;EACzC;EACA,OAAOE,YAAY,CAACC,GAAG,CAACC,IAAI,IAAI;IAC5B,IAAI,eAACL,KAAK,CAACM,cAAc,CAACD,IAAI,CAACE,OAAO,CAAC,EAAE;MACrC,OAAO,IAAI;IACf;IAEA,oBAAOP,KAAK,CAACQ,YAAY,CAACH,IAAI,CAACE,OAAO,EAAE;MAAEE,GAAG,EAAEJ,IAAI,CAACK;IAAK,CAAC,CAAC;EAC/D,CAAC,CAAC;AACN,CAAC","ignoreList":[]}