@webiny/app-admin 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/CheckboxesRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/CheckboxesRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { CheckboxGroup } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        checkboxes: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const CheckboxesRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n    const value = (field.value as (string | number)[]) ?? [];\n\n    return (\n        <CheckboxGroup\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: opt.value\n            }))}\n            value={value}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"names":["CheckboxesRenderer","createFieldRenderer","field","options","value","CheckboxGroup","opt"],"mappings":";;;AAWO,MAAMA,qBAAqBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAC5D,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IACnD,MAAME,QAASF,MAAM,KAAK,IAA4B,EAAE;IAExD,OAAO,WAAP,GACI,oBAACG,eAAaA;QACV,OAAOH,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,OAAOC,QAAQ,GAAG,CAACG,CAAAA,MAAQ;gBACvB,OAAOA,IAAI,KAAK;gBAChB,OAAOA,IAAI,KAAK;YACpB;QACA,OAAOF;QACP,UAAUA,CAAAA;YACNF,MAAM,QAAQ,CAACE;YACfF,MAAM,MAAM;QAChB;;AAGZ"}
+{"version":3,"file":"base/Base/FieldRenderers/CheckboxesRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/CheckboxesRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { CheckboxGroup } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        checkboxes: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const CheckboxesRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n    const value = (field.value as (string | number)[]) ?? [];\n\n    return (\n        <CheckboxGroup\n            label={field.label}\n            hint={field.help}\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: opt.value\n            }))}\n            value={value}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"names":["CheckboxesRenderer","createFieldRenderer","field","options","value","CheckboxGroup","opt"],"mappings":";;;AAWO,MAAMA,qBAAqBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAC5D,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IACnD,MAAME,QAASF,MAAM,KAAK,IAA4B,EAAE;IAExD,OAAO,WAAP,GACI,oBAACG,eAAaA;QACV,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,OAAOC,QAAQ,GAAG,CAACG,CAAAA,MAAQ;gBACvB,OAAOA,IAAI,KAAK;gBAChB,OAAOA,IAAI,KAAK;YACpB;QACA,OAAOF;QACP,UAAUA,CAAAA;YACNF,MAAM,QAAQ,CAACE;YACfF,MAAM,MAAM;QAChB;;AAGZ"}

package/base/Base/FieldRenderers/DateTimeInputsRenderer.js

@@ -2,7 +2,7 @@ import react from "react";
 import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
 import { ReactComponent } from "@webiny/icons/delete.svg";
 import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
-import { Button, DatePickerPrimitive, FormComponentDescription, IconButton, Separator } from "@webiny/admin-ui";
+import { Button, DatePickerPrimitive, FormComponentDescription, FormComponentErrorMessage, IconButton, Separator } from "@webiny/admin-ui";
 const PICKER_TYPE_MAP = {
     date: "date",
     time: "time",
@@ -59,6 +59,10 @@ const DateTimeInputsRenderer = createFieldRenderer(({ field })=>{
         icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
         text: field.rendererSettings?.addItemLabel ?? "Add Value",
         onClick: ()=>field.addItem("")
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: field.validation.message,
+        invalid: false === field.validation.isValid,
+        disabled: field.disabled
     }));
 });
 export { DateTimeInputsRenderer };

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/DateTimeInputsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/DateTimeInputsRenderer.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    DatePickerPrimitive,\n    type DatePickerPrimitiveProps,\n    FormComponentDescription,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dateTimeInputs: {\n            fieldType: \"datetime\";\n            settings: {\n                type:\n                    | \"date\"\n                    | \"time\"\n                    | \"dateTimeLocal\"\n                    | \"dateTimeTz\"\n                    | \"dateTimeWithoutTimezone\"\n                    | \"dateTimeWithTimezone\"\n                    | \"month\"\n                    | \"week\";\n                addItemLabel?: string;\n                displayFormat?: string;\n                weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n            };\n        };\n    }\n}\n\ntype StringPickerType = \"date\" | \"time\" | \"dateTimeLocal\" | \"dateTimeTz\" | \"month\" | \"week\";\n\nconst PICKER_TYPE_MAP: Record<string, StringPickerType> = {\n    date: \"date\",\n    time: \"time\",\n    dateTimeLocal: \"dateTimeLocal\",\n    dateTimeTz: \"dateTimeTz\",\n    dateTimeWithoutTimezone: \"dateTimeLocal\",\n    dateTimeWithTimezone: \"dateTimeTz\",\n    month: \"month\",\n    week: \"week\"\n};\n\nexport const DateTimeInputsRenderer = createFieldRenderer<\"dateTimeInputs\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n    const settingsType = field.rendererSettings?.type ?? \"date\";\n    const pickerType: StringPickerType = PICKER_TYPE_MAP[settingsType] ?? \"date\";\n\n    const updateAt = (index: number, val: string | undefined) => {\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=\"flex items-center gap-sm\">\n                    <div className=\"flex-1\">\n                        <DatePickerPrimitive\n                            {...({\n                                type: pickerType,\n                                value: val || undefined,\n                                onChange: (v: string | undefined) => updateAt(index, v),\n                                disabled: field.disabled,\n                                displayFormat: field.rendererSettings?.displayFormat,\n                                weekStartsOn: field.rendererSettings?.weekStartsOn\n                            } as DatePickerPrimitiveProps)}\n                        />\n                    </div>\n                    <IconButton\n                        icon={<DeleteIcon />}\n                        onClick={e => {\n                            e.stopPropagation();\n                            field.removeItem(index);\n                        }}\n                        size=\"lg\"\n                        variant=\"ghost\"\n                    />\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"],"names":["PICKER_TYPE_MAP","DateTimeInputsRenderer","createFieldRenderer","field","values","settingsType","pickerType","updateAt","index","val","next","Separator","FormComponentDescription","DatePickerPrimitive","undefined","v","IconButton","DeleteIcon","e","Button","AddIcon"],"mappings":";;;;;AAqCA,MAAMA,kBAAoD;IACtD,MAAM;IACN,MAAM;IACN,eAAe;IACf,YAAY;IACZ,yBAAyB;IACzB,sBAAsB;IACtB,OAAO;IACP,MAAM;AACV;AAEO,MAAMC,yBAAyBC,oBAAsC,CAAC,EAAEC,KAAK,EAAE;IAClF,MAAMC,SAAUD,MAAM,KAAK,IAAiB,EAAE;IAC9C,MAAME,eAAeF,MAAM,gBAAgB,EAAE,QAAQ;IACrD,MAAMG,aAA+BN,eAAe,CAACK,aAAa,IAAI;IAEtE,MAAME,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIN;SAAO;QACxBM,IAAI,CAACF,MAAM,GAAGC,OAAO;QACrBN,MAAM,QAAQ,CAACO;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,WAASA;QAAC,eAAc;QAAQ,SAAQ;qBACrC,oBAAC;QAAK,WAAU;OACX,GAAGR,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACS,0BAAwBA;QAAC,MAAMT,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACK,KAAKD,QAAAA,WAAAA,GACd,oBAAC;YAAI,KAAKA;YAAO,WAAU;yBACvB,oBAAC;YAAI,WAAU;yBACX,oBAACK,qBACQ;YACD,MAAMP;YACN,OAAOG,OAAOK;YACd,UAAU,CAACC,IAA0BR,SAASC,OAAOO;YACrD,UAAUZ,MAAM,QAAQ;YACxB,eAAeA,MAAM,gBAAgB,EAAE;YACvC,cAAcA,MAAM,gBAAgB,EAAE;QAC1C,mBAGR,oBAACa,YAAUA;YACP,oBAAM,oBAACC,gBAAUA;YACjB,SAASC,CAAAA;gBACLA,EAAE,eAAe;gBACjBf,MAAM,UAAU,CAACK;YACrB;YACA,MAAK;YACL,SAAQ;4BAIpB,oBAACW,QAAMA;QACH,UAAUhB,MAAM,QAAQ;QACxB,SAAQ;QACR,oBAAM,oBAACiB,wBAAOA;QACd,MAAMjB,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;;AAI7C"}
+{"version":3,"file":"base/Base/FieldRenderers/DateTimeInputsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/DateTimeInputsRenderer.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    DatePickerPrimitive,\n    type DatePickerPrimitiveProps,\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dateTimeInputs: {\n            fieldType: \"datetime\";\n            settings: {\n                type:\n                    | \"date\"\n                    | \"time\"\n                    | \"dateTimeLocal\"\n                    | \"dateTimeTz\"\n                    | \"dateTimeWithoutTimezone\"\n                    | \"dateTimeWithTimezone\"\n                    | \"month\"\n                    | \"week\";\n                addItemLabel?: string;\n                displayFormat?: string;\n                weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n            };\n        };\n    }\n}\n\ntype StringPickerType = \"date\" | \"time\" | \"dateTimeLocal\" | \"dateTimeTz\" | \"month\" | \"week\";\n\nconst PICKER_TYPE_MAP: Record<string, StringPickerType> = {\n    date: \"date\",\n    time: \"time\",\n    dateTimeLocal: \"dateTimeLocal\",\n    dateTimeTz: \"dateTimeTz\",\n    dateTimeWithoutTimezone: \"dateTimeLocal\",\n    dateTimeWithTimezone: \"dateTimeTz\",\n    month: \"month\",\n    week: \"week\"\n};\n\nexport const DateTimeInputsRenderer = createFieldRenderer<\"dateTimeInputs\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n    const settingsType = field.rendererSettings?.type ?? \"date\";\n    const pickerType: StringPickerType = PICKER_TYPE_MAP[settingsType] ?? \"date\";\n\n    const updateAt = (index: number, val: string | undefined) => {\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=\"flex items-center gap-sm\">\n                    <div className=\"flex-1\">\n                        <DatePickerPrimitive\n                            {...({\n                                type: pickerType,\n                                value: val || undefined,\n                                onChange: (v: string | undefined) => updateAt(index, v),\n                                disabled: field.disabled,\n                                displayFormat: field.rendererSettings?.displayFormat,\n                                weekStartsOn: field.rendererSettings?.weekStartsOn\n                            } as DatePickerPrimitiveProps)}\n                        />\n                    </div>\n                    <IconButton\n                        icon={<DeleteIcon />}\n                        onClick={e => {\n                            e.stopPropagation();\n                            field.removeItem(index);\n                        }}\n                        size=\"lg\"\n                        variant=\"ghost\"\n                    />\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            <FormComponentErrorMessage\n                text={field.validation.message}\n                invalid={field.validation.isValid === false}\n                disabled={field.disabled}\n            />\n        </div>\n    );\n});\n"],"names":["PICKER_TYPE_MAP","DateTimeInputsRenderer","createFieldRenderer","field","values","settingsType","pickerType","updateAt","index","val","next","Separator","FormComponentDescription","DatePickerPrimitive","undefined","v","IconButton","DeleteIcon","e","Button","AddIcon","FormComponentErrorMessage"],"mappings":";;;;;AAsCA,MAAMA,kBAAoD;IACtD,MAAM;IACN,MAAM;IACN,eAAe;IACf,YAAY;IACZ,yBAAyB;IACzB,sBAAsB;IACtB,OAAO;IACP,MAAM;AACV;AAEO,MAAMC,yBAAyBC,oBAAsC,CAAC,EAAEC,KAAK,EAAE;IAClF,MAAMC,SAAUD,MAAM,KAAK,IAAiB,EAAE;IAC9C,MAAME,eAAeF,MAAM,gBAAgB,EAAE,QAAQ;IACrD,MAAMG,aAA+BN,eAAe,CAACK,aAAa,IAAI;IAEtE,MAAME,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIN;SAAO;QACxBM,IAAI,CAACF,MAAM,GAAGC,OAAO;QACrBN,MAAM,QAAQ,CAACO;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,WAASA;QAAC,eAAc;QAAQ,SAAQ;qBACrC,oBAAC;QAAK,WAAU;OACX,GAAGR,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACS,0BAAwBA;QAAC,MAAMT,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACK,KAAKD,QAAAA,WAAAA,GACd,oBAAC;YAAI,KAAKA;YAAO,WAAU;yBACvB,oBAAC;YAAI,WAAU;yBACX,oBAACK,qBACQ;YACD,MAAMP;YACN,OAAOG,OAAOK;YACd,UAAU,CAACC,IAA0BR,SAASC,OAAOO;YACrD,UAAUZ,MAAM,QAAQ;YACxB,eAAeA,MAAM,gBAAgB,EAAE;YACvC,cAAcA,MAAM,gBAAgB,EAAE;QAC1C,mBAGR,oBAACa,YAAUA;YACP,oBAAM,oBAACC,gBAAUA;YACjB,SAASC,CAAAA;gBACLA,EAAE,eAAe;gBACjBf,MAAM,UAAU,CAACK;YACrB;YACA,MAAK;YACL,SAAQ;4BAIpB,oBAACW,QAAMA;QACH,UAAUhB,MAAM,QAAQ;QACxB,SAAQ;QACR,oBAAM,oBAACiB,wBAAOA;QACd,MAAMjB,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;sBAEjC,oBAACkB,2BAAyBA;QACtB,MAAMlB,MAAM,UAAU,CAAC,OAAO;QAC9B,SAASA,AAA6B,UAA7BA,MAAM,UAAU,CAAC,OAAO;QACjC,UAAUA,MAAM,QAAQ;;AAIxC"}

package/base/Base/FieldRenderers/FilePickerRenderer.js

@@ -11,9 +11,11 @@ const FilePickerRenderer = createFieldRenderer(({ field })=>{
         scope: settings?.scope,
         render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
                 label: field.label,
+                hint: field.help,
                 description: field.description,
                 type: "area",
                 value: toFilePickerValue(field.value),
+                validation: field.validation,
                 onSelectItem: ()=>showFileManager((file)=>{
                         field.onChange(fileManagerItemToValue(file));
                     }),

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/FilePickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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"],"names":["FilePickerRenderer","createFieldRenderer","field","settings","FileManager","showFileManager","FilePicker","toFilePickerValue","file","fileManagerItemToValue","undefined","value","img"],"mappings":";;;;AAcO,MAAMA,qBAAqBC,oBAAkC,CAAC,EAAEC,KAAK,EAAE;IAC1E,MAAMC,WAAWD,MAAM,gBAAgB;IAEvC,OAAO,WAAP,GACI,oBAACE,aAAWA;QACR,QAAQD,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEE,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,OAAOJ,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOK,kBAAkBL,MAAM,KAAK;gBACpC,cAAc,IACVG,gBAAgB,CAACG;wBACbN,MAAM,QAAQ,CAACO,uBAAuBD;oBAC1C;gBAEJ,cAAc,IAAMN,MAAM,QAAQ,CAACQ;;;AAKvD;AAEA,MAAMH,oBAAoB,CAACI;IACvB,MAAMC,MAAMD;IACZ,IAAI,CAACC,KAAK,KACN;IAEJ,OAAO;QAAE,KAAKA,IAAI,GAAG;QAAE,MAAMA,IAAI,IAAI;QAAE,UAAUA,IAAI,QAAQ;IAAC;AAClE;AAEA,MAAMH,yBAAyB,CAACD,OACrB;QACH,IAAIA,KAAK,EAAE;QACX,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,UAAUA,KAAK,IAAI;QACnB,KAAKA,KAAK,GAAG,IAAI;QACjB,OAAOA,KAAK,KAAK;QACjB,QAAQA,KAAK,MAAM;IACvB"}
+{"version":3,"file":"base/Base/FieldRenderers/FilePickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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                    hint={field.help}\n                    description={field.description}\n                    type=\"area\"\n                    value={toFilePickerValue(field.value)}\n                    validation={field.validation}\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"],"names":["FilePickerRenderer","createFieldRenderer","field","settings","FileManager","showFileManager","FilePicker","toFilePickerValue","file","fileManagerItemToValue","undefined","value","img"],"mappings":";;;;AAcO,MAAMA,qBAAqBC,oBAAkC,CAAC,EAAEC,KAAK,EAAE;IAC1E,MAAMC,WAAWD,MAAM,gBAAgB;IAEvC,OAAO,WAAP,GACI,oBAACE,aAAWA;QACR,QAAQD,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEE,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,OAAOJ,MAAM,KAAK;gBAClB,MAAMA,MAAM,IAAI;gBAChB,aAAaA,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOK,kBAAkBL,MAAM,KAAK;gBACpC,YAAYA,MAAM,UAAU;gBAC5B,cAAc,IACVG,gBAAgB,CAACG;wBACbN,MAAM,QAAQ,CAACO,uBAAuBD;oBAC1C;gBAEJ,cAAc,IAAMN,MAAM,QAAQ,CAACQ;;;AAKvD;AAEA,MAAMH,oBAAoB,CAACI;IACvB,MAAMC,MAAMD;IACZ,IAAI,CAACC,KAAK,KACN;IAEJ,OAAO;QAAE,KAAKA,IAAI,GAAG;QAAE,MAAMA,IAAI,IAAI;QAAE,UAAUA,IAAI,QAAQ;IAAC;AAClE;AAEA,MAAMH,yBAAyB,CAACD,OACrB;QACH,IAAIA,KAAK,EAAE;QACX,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,UAAUA,KAAK,IAAI;QACnB,KAAKA,KAAK,GAAG,IAAI;QACjB,OAAOA,KAAK,KAAK;QACjB,QAAQA,KAAK,MAAM;IACvB"}

package/base/Base/FieldRenderers/FileUrlPickerRenderer.js

@@ -6,6 +6,7 @@ const FileUrlPickerRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ rea
         images: true,
         render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
                 label: field.label,
+                hint: field.help,
                 description: field.description,
                 type: "area",
                 value: field.value,

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/FileUrlPickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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"],"names":["FileUrlPickerRenderer","createFieldRenderer","field","FileManager","showFileManager","FilePicker","file","undefined"],"mappings":";;;;AAYO,MAAMA,wBAAwBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GACxD,WAAP,GACI,oBAACC,aAAWA;QACR,QAAQ;QACR,QAAQ,CAAC,EAAEC,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,OAAOH,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOA,MAAM,KAAK;gBAClB,cAAc,IACVE,gBAAgB,CAACE;wBACbJ,MAAM,QAAQ,CAACI,KAAK,GAAG,IAAI;oBAC/B;gBAEJ,cAAc,IAAMJ,MAAM,QAAQ,CAACK"}
+{"version":3,"file":"base/Base/FieldRenderers/FileUrlPickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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                    hint={field.help}\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"],"names":["FileUrlPickerRenderer","createFieldRenderer","field","FileManager","showFileManager","FilePicker","file","undefined"],"mappings":";;;;AAYO,MAAMA,wBAAwBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GACxD,WAAP,GACI,oBAACC,aAAWA;QACR,QAAQ;QACR,QAAQ,CAAC,EAAEC,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,OAAOH,MAAM,KAAK;gBAClB,MAAMA,MAAM,IAAI;gBAChB,aAAaA,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOA,MAAM,KAAK;gBAClB,cAAc,IACVE,gBAAgB,CAACE;wBACbJ,MAAM,QAAQ,CAACI,KAAK,GAAG,IAAI;oBAC/B;gBAEJ,cAAc,IAAMJ,MAAM,QAAQ,CAACK"}

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

@@ -1,5 +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;
+export declare const HorizontalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & React.NamedExoticComponent<TabsNodeRendererProps> & {
+    readonly type: ({ node }: TabsNodeRendererProps) => React.JSX.Element;
 };

package/base/Base/FieldRenderers/HorizontalTabsRenderer.js

@@ -4,6 +4,7 @@ import { Tabs } from "@webiny/admin-ui";
 import { LayoutNodeRenderer, renderTabIcon } from "../../../features/formModel/FormView.js";
 const HorizontalTabsRenderer_HorizontalTabsRenderer = observer(function({ node }) {
     return /*#__PURE__*/ react.createElement(Tabs, {
+        ...node.rendererSettings,
         value: node.activeTabId,
         onValueChange: (id)=>node.setActiveTab(id),
         tabs: node.tabs.map((tab)=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
@@ -13,7 +14,7 @@ const HorizontalTabsRenderer_HorizontalTabsRenderer = observer(function({ node }
                 trigger: tab.label,
                 disabled: tab.disabled,
                 content: /*#__PURE__*/ react.createElement("div", {
-                    className: "flex flex-col gap-4 mt-md"
+                    className: "flex flex-col gap-4"
                 }, tab.layout.map((childNode, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
                         key: index,
                         node: childNode

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/HorizontalTabsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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"],"names":["HorizontalTabsRenderer","observer","node","Tabs","id","tab","renderTabIcon","childNode","index","LayoutNodeRenderer"],"mappings":";;;;AAMO,MAAMA,gDAAyBC,SAAS,SAAgC,EAC3EC,IAAI,EACgB;IACpB,OAAO,WAAP,GACI,oBAACC,MAAIA;QACD,OAAOD,KAAK,WAAW;QACvB,eAAeE,CAAAA,KAAMF,KAAK,YAAY,CAACE;QACvC,MAAMF,KAAK,IAAI,CAAC,GAAG,CAACG,CAAAA,MAAAA,WAAAA,GAChB,oBAACF,KAAK,GAAG;gBACL,KAAKE,IAAI,EAAE;gBACX,OAAOA,IAAI,EAAE;gBACb,MAAMC,cAAcD,IAAI,IAAI;gBAC5B,SAASA,IAAI,KAAK;gBAClB,UAAUA,IAAI,QAAQ;gBACtB,uBACI,oBAAC;oBAAI,WAAW;mBACXA,IAAI,MAAM,CAAC,GAAG,CAAC,CAACE,WAAWC,QAAAA,WAAAA,GACxB,oBAACC,oBAAkBA;wBAAC,KAAKD;wBAAO,MAAMD;;;;AAQtE"}
+{"version":3,"file":"base/Base/FieldRenderers/HorizontalTabsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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            {...(node.rendererSettings as Record<string, any>)}\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\"}>\n                            {tab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    }\n                />\n            ))}\n        />\n    );\n});\n"],"names":["HorizontalTabsRenderer","observer","node","Tabs","id","tab","renderTabIcon","childNode","index","LayoutNodeRenderer"],"mappings":";;;;AAMO,MAAMA,gDAAyBC,SAAS,SAAgC,EAC3EC,IAAI,EACgB;IACpB,OAAO,WAAP,GACI,oBAACC,MAAIA;QACA,GAAID,KAAK,gBAAgB;QAC1B,OAAOA,KAAK,WAAW;QACvB,eAAeE,CAAAA,KAAMF,KAAK,YAAY,CAACE;QACvC,MAAMF,KAAK,IAAI,CAAC,GAAG,CAACG,CAAAA,MAAAA,WAAAA,GAChB,oBAACF,KAAK,GAAG;gBACL,KAAKE,IAAI,EAAE;gBACX,OAAOA,IAAI,EAAE;gBACb,MAAMC,cAAcD,IAAI,IAAI;gBAC5B,SAASA,IAAI,KAAK;gBAClB,UAAUA,IAAI,QAAQ;gBACtB,uBACI,oBAAC;oBAAI,WAAW;mBACXA,IAAI,MAAM,CAAC,GAAG,CAAC,CAACE,WAAWC,QAAAA,WAAAA,GACxB,oBAACC,oBAAkBA;wBAAC,KAAKD;wBAAO,MAAMD;;;;AAQtE"}

package/base/Base/FieldRenderers/InputRenderer.js

@@ -6,11 +6,13 @@ const InputRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.creat
         onChange: (value)=>field.onChange(value)
     }, /*#__PURE__*/ react.createElement(Input, {
         label: field.label,
+        hint: field.help,
         placeholder: field.placeholder,
         description: field.description,
         note: field.note,
         required: field.required,
         disabled: field.disabled,
+        autoFocus: field.autoFocus,
         validation: field.validation,
         onBlur: ()=>field.onBlur()
     })));

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/InputRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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"],"names":["InputRenderer","createFieldRenderer","field","DelayedOnChange","value","Input"],"mappings":";;;AAWO,MAAMA,gBAAgBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GAChD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,OAAKA;QACF,OAAOH,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM"}
+{"version":3,"file":"base/Base/FieldRenderers/InputRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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                hint={field.help}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                autoFocus={field.autoFocus}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"names":["InputRenderer","createFieldRenderer","field","DelayedOnChange","value","Input"],"mappings":";;;AAWO,MAAMA,gBAAgBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GAChD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,OAAKA;QACF,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,WAAWA,MAAM,SAAS;QAC1B,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM"}

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

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

package/base/Base/FieldRenderers/LexicalEditorsRenderer.js

@@ -0,0 +1,78 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { StaticToolbar } from "@webiny/lexical-editor";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { LexicalEditor } from "../../../components/LexicalEditor/LexicalEditor.js";
+import { Button, FormComponentDescription, FormComponentErrorMessage, FormComponentNote, IconButton, Separator } from "@webiny/admin-ui";
+const placeholderStyles = {
+    position: "absolute",
+    top: 40,
+    left: 25
+};
+const contentEditableStyles = {
+    minHeight: 200,
+    display: "block",
+    padding: 10
+};
+const styles = {
+    backgroundColor: "#fff",
+    border: "1px solid #e1e1e1",
+    padding: "10px 14px",
+    minHeight: 200,
+    maxHeight: 350
+};
+const LexicalEditorsRenderer = 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(LexicalEditor, {
+            placeholder: field.placeholder || "Enter your text here...",
+            staticToolbar: /*#__PURE__*/ react.createElement(StaticToolbar, null),
+            placeholderStyles: placeholderStyles,
+            contentEditableStyles: contentEditableStyles,
+            styles: styles,
+            value: val,
+            onChange: (value)=>updateAt(index, value)
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "absolute top-sm right-sm z-10"
+        }, /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "md",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: ()=>field.removeItem(index)
+        })))), /*#__PURE__*/ react.createElement(Button, {
+        disabled: field.disabled,
+        variant: "tertiary",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        text: field.rendererSettings?.addItemLabel ?? "Add Value",
+        onClick: ()=>field.addItem(void 0)
+    }), field.note ? /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: field.note,
+        disabled: field.disabled
+    }) : null, /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: field.validation.message,
+        invalid: false === field.validation.isValid,
+        disabled: field.disabled
+    }));
+});
+export { LexicalEditorsRenderer };
+
+//# sourceMappingURL=LexicalEditorsRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/LexicalEditorsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/LexicalEditorsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { LexicalEditor } from \"~/components/LexicalEditor/LexicalEditor.js\";\nimport type { RichTextValueWithHtml } from \"~/components/LexicalEditor/lexicalValueWithHtml.js\";\nimport {\n    Button,\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentNote,\n    IconButton,\n    Separator\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        lexicalEditors: {\n            fieldType: \"lexical\";\n            settings?: { addItemLabel?: string };\n        };\n    }\n}\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350\n};\n\nexport const LexicalEditorsRenderer = createFieldRenderer<\"lexicalEditors\">(({ field }) => {\n    const values = (field.value as RichTextValueWithHtml[]) ?? [];\n\n    const updateAt = (index: number, val: RichTextValueWithHtml | undefined) => {\n        const next = [...values];\n        next[index] = val as RichTextValueWithHtml;\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                    <LexicalEditor\n                        placeholder={field.placeholder || \"Enter your text here...\"}\n                        staticToolbar={<StaticToolbar />}\n                        placeholderStyles={placeholderStyles}\n                        contentEditableStyles={contentEditableStyles}\n                        styles={styles}\n                        value={val}\n                        onChange={value => updateAt(index, value as RichTextValueWithHtml)}\n                    />\n                    <div className={\"absolute top-sm 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(undefined)}\n            />\n            {field.note ? <FormComponentNote text={field.note} disabled={field.disabled} /> : null}\n            <FormComponentErrorMessage\n                text={field.validation.message}\n                invalid={field.validation.isValid === false}\n                disabled={field.disabled}\n            />\n        </div>\n    );\n});\n"],"names":["placeholderStyles","contentEditableStyles","styles","LexicalEditorsRenderer","createFieldRenderer","field","values","updateAt","index","val","next","Separator","FormComponentDescription","LexicalEditor","StaticToolbar","value","IconButton","DeleteIcon","Button","AddIcon","undefined","FormComponentNote","FormComponentErrorMessage"],"mappings":";;;;;;;AAyBA,MAAMA,oBAAyC;IAAE,UAAU;IAAY,KAAK;IAAI,MAAM;AAAG;AAEzF,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,WAAW;AACf;AAEO,MAAMC,yBAAyBC,oBAAsC,CAAC,EAAEC,KAAK,EAAE;IAClF,MAAMC,SAAUD,MAAM,KAAK,IAAgC,EAAE;IAE7D,MAAME,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIJ;SAAO;QACxBI,IAAI,CAACF,MAAM,GAAGC;QACdJ,MAAM,QAAQ,CAACK;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ,GAAGN,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACO,0BAAwBA;QAAC,MAAMP,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACG,KAAKD,QAAAA,WAAAA,GACd,oBAAC;YAAI,KAAKA;YAAO,WAAW;yBACxB,oBAACK,eAAaA;YACV,aAAaR,MAAM,WAAW,IAAI;YAClC,6BAAe,oBAACS,eAAaA;YAC7B,mBAAmBd;YACnB,uBAAuBC;YACvB,QAAQC;YACR,OAAOO;YACP,UAAUM,CAAAA,QAASR,SAASC,OAAOO;0BAEvC,oBAAC;YAAI,WAAW;yBACZ,oBAACC,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAUA;YACjB,SAAS,IAAMZ,MAAM,UAAU,CAACG;6BAKhD,oBAACU,QAAMA;QACH,UAAUb,MAAM,QAAQ;QACxB,SAAS;QACT,oBAAM,oBAACc,wBAAOA;QACd,MAAMd,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAACe;QAEhCf,MAAM,IAAI,GAAG,WAAH,GAAG,oBAACgB,mBAAiBA;QAAC,MAAMhB,MAAM,IAAI;QAAE,UAAUA,MAAM,QAAQ;SAAO,oBAClF,oBAACiB,2BAAyBA;QACtB,MAAMjB,MAAM,UAAU,CAAC,OAAO;QAC9B,SAASA,AAA6B,UAA7BA,MAAM,UAAU,CAAC,OAAO;QACjC,UAAUA,MAAM,QAAQ;;AAIxC"}

package/base/Base/FieldRenderers/LexicalRenderer.js

@@ -5,18 +5,22 @@ import { LexicalEditor } from "../../../components/LexicalEditor/LexicalEditor.j
 import { FormComponentDescription, FormComponentLabel, FormComponentNote } from "@webiny/admin-ui";
 const placeholderStyles = {
     position: "absolute",
-    top: 40,
-    left: 25
+    top: 0,
+    left: 0,
+    padding: "8px 12px",
+    marginTop: 0,
+    color: "var(--text-color-neutral-muted)"
 };
 const contentEditableStyles = {
     minHeight: 200,
     display: "block",
-    padding: 10
+    padding: "8px 12px"
 };
 const styles = {
-    backgroundColor: "#fff",
-    border: "1px solid #e1e1e1",
-    padding: "10px 14px",
+    backgroundColor: "var(--color-neutral-base)",
+    border: "1px solid var(--border-color-neutral-muted)",
+    borderTop: "none",
+    borderRadius: "0 0 var(--radius-md) var(--radius-md)",
     minHeight: 200,
     maxHeight: 350
 };

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/LexicalRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/LexicalRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { LexicalEditor } from \"~/components/LexicalEditor/LexicalEditor.js\";\nimport type { RichTextValueWithHtml } from \"~/components/LexicalEditor/lexicalValueWithHtml.js\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport { FormComponentDescription } from \"@webiny/admin-ui\";\nimport { FormComponentNote } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        lexical: {\n            fieldType: \"lexical\";\n            settings: undefined;\n        };\n    }\n}\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350\n};\n\nexport const LexicalRenderer = createFieldRenderer<\"lexical\">(({ field }) => {\n    const value = field.value as RichTextValueWithHtml | undefined;\n    const toolbar = <StaticToolbar />;\n\n    return (\n        <>\n            <FormComponentLabel text={field.label} hint={field.help} disabled={field.disabled} />\n            <FormComponentDescription text={field.description} disabled={field.disabled} />\n            <LexicalEditor\n                placeholder={field.placeholder || \"Enter your text here...\"}\n                staticToolbar={toolbar}\n                placeholderStyles={placeholderStyles}\n                contentEditableStyles={contentEditableStyles}\n                styles={styles}\n                value={value}\n                onChange={value => field.onChange(value)}\n            />\n            {field.note ? <FormComponentNote text={field.note} disabled={field.disabled} /> : null}\n        </>\n    );\n});\n"],"names":["placeholderStyles","contentEditableStyles","styles","LexicalRenderer","createFieldRenderer","field","value","toolbar","StaticToolbar","FormComponentLabel","FormComponentDescription","LexicalEditor","FormComponentNote"],"mappings":";;;;;AAkBA,MAAMA,oBAAyC;IAAE,UAAU;IAAY,KAAK;IAAI,MAAM;AAAG;AAEzF,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,WAAW;AACf;AAEO,MAAMC,kBAAkBC,oBAA+B,CAAC,EAAEC,KAAK,EAAE;IACpE,MAAMC,QAAQD,MAAM,KAAK;IACzB,MAAME,UAAU,WAAVA,GAAU,oBAACC,eAAaA;IAE9B,OAAO,WAAP,GACI,wDACI,oBAACC,oBAAkBA;QAAC,MAAMJ,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;QAAE,UAAUA,MAAM,QAAQ;sBACjF,oBAACK,0BAAwBA;QAAC,MAAML,MAAM,WAAW;QAAE,UAAUA,MAAM,QAAQ;sBAC3E,oBAACM,eAAaA;QACV,aAAaN,MAAM,WAAW,IAAI;QAClC,eAAeE;QACf,mBAAmBP;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOI;QACP,UAAUA,CAAAA,QAASD,MAAM,QAAQ,CAACC;QAErCD,MAAM,IAAI,GAAG,WAAH,GAAG,oBAACO,mBAAiBA;QAAC,MAAMP,MAAM,IAAI;QAAE,UAAUA,MAAM,QAAQ;SAAO;AAG9F"}
+{"version":3,"file":"base/Base/FieldRenderers/LexicalRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/LexicalRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { LexicalEditor } from \"~/components/LexicalEditor/LexicalEditor.js\";\nimport type { RichTextValueWithHtml } from \"~/components/LexicalEditor/lexicalValueWithHtml.js\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport { FormComponentDescription } from \"@webiny/admin-ui\";\nimport { FormComponentNote } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        lexical: {\n            fieldType: \"lexical\";\n            settings: undefined;\n        };\n    }\n}\n\n// Overlay the contentEditable: same origin + same padding as `contentEditableStyles`, and\n// neutralize the Placeholder component's default -20px margin. This makes the placeholder's\n// first line land exactly on the editor's text start.\nconst placeholderStyles: React.CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    padding: \"8px 12px\",\n    marginTop: 0,\n    // Font size/family come from the paragraph typography class (applied by RichTextEditor);\n    // keep the placeholder muted.\n    color: \"var(--text-color-neutral-muted)\"\n};\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: \"8px 12px\"\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"var(--color-neutral-base)\",\n    border: \"1px solid var(--border-color-neutral-muted)\",\n    // The static toolbar sits directly above and carries the top border, so the body\n    // drops its top border and rounds only the bottom corners — together one seamless\n    // rounded container, no internal divider (matches Figma).\n    borderTop: \"none\",\n    borderRadius: \"0 0 var(--radius-md) var(--radius-md)\",\n    // Padding lives on the contentEditable only (avoids doubled inset).\n    minHeight: 200,\n    maxHeight: 350\n};\n\nexport const LexicalRenderer = createFieldRenderer<\"lexical\">(({ field }) => {\n    const value = field.value as RichTextValueWithHtml | undefined;\n    const toolbar = <StaticToolbar />;\n\n    return (\n        <>\n            <FormComponentLabel text={field.label} hint={field.help} disabled={field.disabled} />\n            <FormComponentDescription text={field.description} disabled={field.disabled} />\n            <LexicalEditor\n                placeholder={field.placeholder || \"Enter your text here...\"}\n                staticToolbar={toolbar}\n                placeholderStyles={placeholderStyles}\n                contentEditableStyles={contentEditableStyles}\n                styles={styles}\n                value={value}\n                onChange={value => field.onChange(value)}\n            />\n            {field.note ? <FormComponentNote text={field.note} disabled={field.disabled} /> : null}\n        </>\n    );\n});\n"],"names":["placeholderStyles","contentEditableStyles","styles","LexicalRenderer","createFieldRenderer","field","value","toolbar","StaticToolbar","FormComponentLabel","FormComponentDescription","LexicalEditor","FormComponentNote"],"mappings":";;;;;AAqBA,MAAMA,oBAAyC;IAC3C,UAAU;IACV,KAAK;IACL,MAAM;IACN,SAAS;IACT,WAAW;IAGX,OAAO;AACX;AAEA,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IAIR,WAAW;IACX,cAAc;IAEd,WAAW;IACX,WAAW;AACf;AAEO,MAAMC,kBAAkBC,oBAA+B,CAAC,EAAEC,KAAK,EAAE;IACpE,MAAMC,QAAQD,MAAM,KAAK;IACzB,MAAME,UAAU,WAAVA,GAAU,oBAACC,eAAaA;IAE9B,OAAO,WAAP,GACI,wDACI,oBAACC,oBAAkBA;QAAC,MAAMJ,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;QAAE,UAAUA,MAAM,QAAQ;sBACjF,oBAACK,0BAAwBA;QAAC,MAAML,MAAM,WAAW;QAAE,UAAUA,MAAM,QAAQ;sBAC3E,oBAACM,eAAaA;QACV,aAAaN,MAAM,WAAW,IAAI;QAClC,eAAeE;QACf,mBAAmBP;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOI;QACP,UAAUA,CAAAA,QAASD,MAAM,QAAQ,CAACC;QAErCD,MAAM,IAAI,GAAG,WAAH,GAAG,oBAACO,mBAAiBA;QAAC,MAAMP,MAAM,IAAI;QAAE,UAAUA,MAAM,QAAQ;SAAO;AAG9F"}

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

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

package/base/Base/FieldRenderers/MultiAutoCompleteRenderer.js

@@ -0,0 +1,29 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+const MultiAutoCompleteRenderer = createFieldRenderer(({ field })=>{
+    const options = field.options ?? [];
+    const values = field.value ?? [];
+    return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+        label: field.label,
+        description: field.description,
+        note: field.note,
+        hint: field.help,
+        disabled: field.disabled,
+        required: field.required,
+        validation: field.validation,
+        uniqueValues: true,
+        options: options.map((opt)=>({
+                label: opt.label,
+                value: String(opt.value)
+            })),
+        values: values,
+        onValuesChange: (selected)=>{
+            field.onChange(selected.length > 0 ? selected : null);
+            field.onBlur();
+        }
+    });
+});
+export { MultiAutoCompleteRenderer };
+
+//# sourceMappingURL=MultiAutoCompleteRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/MultiAutoCompleteRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/MultiAutoCompleteRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        multiAutoComplete: { fieldType: \"text\"; options: true; settings: undefined };\n    }\n}\n\nexport const MultiAutoCompleteRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n    const values = (field.value as string[] | null) ?? [];\n\n    return (\n        <MultiAutoComplete\n            label={field.label}\n            description={field.description}\n            note={field.note}\n            hint={field.help}\n            disabled={field.disabled}\n            required={field.required}\n            validation={field.validation}\n            uniqueValues\n            options={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value)\n            }))}\n            values={values}\n            onValuesChange={selected => {\n                field.onChange(selected.length > 0 ? selected : null);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"names":["MultiAutoCompleteRenderer","createFieldRenderer","field","options","values","MultiAutoComplete","opt","String","selected"],"mappings":";;;AAWO,MAAMA,4BAA4BC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACnE,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IACnD,MAAME,SAAUF,MAAM,KAAK,IAAwB,EAAE;IAErD,OAAO,WAAP,GACI,oBAACG,mBAAiBA;QACd,OAAOH,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B;QACA,SAASC,QAAQ,GAAG,CAACG,CAAAA,MAAQ;gBACzB,OAAOA,IAAI,KAAK;gBAChB,OAAOC,OAAOD,IAAI,KAAK;YAC3B;QACA,QAAQF;QACR,gBAAgBI,CAAAA;YACZN,MAAM,QAAQ,CAACM,SAAS,MAAM,GAAG,IAAIA,WAAW;YAChDN,MAAM,MAAM;QAChB;;AAGZ"}

package/base/Base/FieldRenderers/MultiFilePickerRenderer.js

@@ -35,11 +35,14 @@ const MultiFilePickerRenderer = createFieldRenderer(({ field })=>{
             const selectFiles = (replaceIndex = -1)=>{
                 showFileManager((files)=>{
                     const newValues = files.map(fileManagerItemToValue);
-                    if (-1 === replaceIndex) field.onChange([
-                        ...currentValues,
-                        ...newValues
-                    ]);
-                    else field.onChange([
+                    if (-1 === replaceIndex) {
+                        const existingIds = new Set(currentValues.map((v)=>v.id));
+                        const unique = newValues.filter((v)=>!existingIds.has(v.id));
+                        field.onChange([
+                            ...currentValues,
+                            ...unique
+                        ]);
+                    } else field.onChange([
                         ...currentValues.slice(0, replaceIndex),
                         ...newValues,
                         ...currentValues.slice(replaceIndex + 1)

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/MultiFilePickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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"],"names":["toFilePickerValues","value","Array","item","fileManagerItemToValue","file","MultiFilePickerRenderer","createFieldRenderer","field","settings","values","currentValues","FileManager","showFileManager","selectFiles","replaceIndex","files","newValues","MultiFilePicker","_","index"],"mappings":";;;;AAeA,MAAMA,qBAAqB,CAACC;IACxB,IAAI,CAACC,MAAM,OAAO,CAACD,QACf,OAAO,EAAE;IAEb,OAAOA,MACF,MAAM,CAAC,CAACE,OAAoBA,MAAM,KAClC,GAAG,CAAC,CAACA,OAAqB;YACvB,IAAIA,KAAK,EAAE;YACX,KAAKA,KAAK,GAAG;YACb,MAAMA,KAAK,IAAI;YACf,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;QACnB;AACR;AAEA,MAAMC,yBAAyB,CAACC,OAA0C;QACtE,IAAIA,KAAK,EAAE;QACX,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,UAAUA,KAAK,IAAI;QACnB,KAAKA,KAAK,GAAG,IAAI;QACjB,OAAOA,KAAK,KAAK;QACjB,QAAQA,KAAK,MAAM;IACvB;AAEO,MAAMC,0BAA0BC,oBAAuC,CAAC,EAAEC,KAAK,EAAE;IACpF,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,SAASV,mBAAmBQ,MAAM,KAAK;IAC7C,MAAMG,gBAAiBT,MAAM,OAAO,CAACM,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG,EAAE;IAEpE,OAAO,WAAP,GACI,oBAACI,aAAWA;QACR;QACA,QAAQH,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEI,eAAe,EAAE;YACxB,MAAMC,cAAc,CAACC,eAAe,EAAE;gBAClCF,gBAAgB,CAACG;oBACb,MAAMC,YAAYD,MAAM,GAAG,CAACZ;oBAC5B,IAAIW,AAAiB,OAAjBA,cACAP,MAAM,QAAQ,CAAC;2BAAIG;2BAAkBM;qBAAU;yBAE/CT,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGI;2BACvBE;2BACAN,cAAc,KAAK,CAACI,eAAe;qBACzC;gBAET;YACJ;YAEA,OAAO,WAAP,GACI,oBAACG,iBAAeA;gBACZ,OAAOV,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAMA,MAAM,IAAI;gBAChB,MAAMA,MAAM,IAAI;gBAChB,QAAQE;gBACR,MAAK;gBACL,cAAc,IAAMI;gBACpB,eAAe,CAACK,GAAGC,QAAUN,YAAYM;gBACzC,cAAc,CAACD,GAAGC;oBACdZ,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGS;2BACvBT,cAAc,KAAK,CAACS,QAAQ;qBAClC;gBACL;;QAGZ;;AAGZ"}
+{"version":3,"file":"base/Base/FieldRenderers/MultiFilePickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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                            const existingIds = new Set(currentValues.map(v => v.id));\n                            const unique = newValues.filter(v => !existingIds.has(v.id));\n                            field.onChange([...currentValues, ...unique]);\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"],"names":["toFilePickerValues","value","Array","item","fileManagerItemToValue","file","MultiFilePickerRenderer","createFieldRenderer","field","settings","values","currentValues","FileManager","showFileManager","selectFiles","replaceIndex","files","newValues","existingIds","Set","v","unique","MultiFilePicker","_","index"],"mappings":";;;;AAeA,MAAMA,qBAAqB,CAACC;IACxB,IAAI,CAACC,MAAM,OAAO,CAACD,QACf,OAAO,EAAE;IAEb,OAAOA,MACF,MAAM,CAAC,CAACE,OAAoBA,MAAM,KAClC,GAAG,CAAC,CAACA,OAAqB;YACvB,IAAIA,KAAK,EAAE;YACX,KAAKA,KAAK,GAAG;YACb,MAAMA,KAAK,IAAI;YACf,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;QACnB;AACR;AAEA,MAAMC,yBAAyB,CAACC,OAA0C;QACtE,IAAIA,KAAK,EAAE;QACX,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,UAAUA,KAAK,IAAI;QACnB,KAAKA,KAAK,GAAG,IAAI;QACjB,OAAOA,KAAK,KAAK;QACjB,QAAQA,KAAK,MAAM;IACvB;AAEO,MAAMC,0BAA0BC,oBAAuC,CAAC,EAAEC,KAAK,EAAE;IACpF,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,SAASV,mBAAmBQ,MAAM,KAAK;IAC7C,MAAMG,gBAAiBT,MAAM,OAAO,CAACM,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG,EAAE;IAEpE,OAAO,WAAP,GACI,oBAACI,aAAWA;QACR;QACA,QAAQH,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEI,eAAe,EAAE;YACxB,MAAMC,cAAc,CAACC,eAAe,EAAE;gBAClCF,gBAAgB,CAACG;oBACb,MAAMC,YAAYD,MAAM,GAAG,CAACZ;oBAC5B,IAAIW,AAAiB,OAAjBA,cAAqB;wBACrB,MAAMG,cAAc,IAAIC,IAAIR,cAAc,GAAG,CAACS,CAAAA,IAAKA,EAAE,EAAE;wBACvD,MAAMC,SAASJ,UAAU,MAAM,CAACG,CAAAA,IAAK,CAACF,YAAY,GAAG,CAACE,EAAE,EAAE;wBAC1DZ,MAAM,QAAQ,CAAC;+BAAIG;+BAAkBU;yBAAO;oBAChD,OACIb,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGI;2BACvBE;2BACAN,cAAc,KAAK,CAACI,eAAe;qBACzC;gBAET;YACJ;YAEA,OAAO,WAAP,GACI,oBAACO,iBAAeA;gBACZ,OAAOd,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAMA,MAAM,IAAI;gBAChB,MAAMA,MAAM,IAAI;gBAChB,QAAQE;gBACR,MAAK;gBACL,cAAc,IAAMI;gBACpB,eAAe,CAACS,GAAGC,QAAUV,YAAYU;gBACzC,cAAc,CAACD,GAAGC;oBACdhB,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGa;2BACvBb,cAAc,KAAK,CAACa,QAAQ;qBAClC;gBACL;;QAGZ;;AAGZ"}

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

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

package/base/Base/FieldRenderers/MultiSelectRenderer.js

@@ -0,0 +1,31 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { MultiSelect } from "@webiny/admin-ui";
+const MultiSelectRenderer = createFieldRenderer(({ field })=>{
+    const options = field.options ?? [];
+    const value = field.value ?? [];
+    return /*#__PURE__*/ react.createElement(MultiSelect, {
+        label: field.label,
+        hint: field.help,
+        placeholder: field.placeholder,
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        showSelectionCount: field.rendererSettings?.showSelectionCount,
+        options: options.map((opt)=>({
+                label: opt.label,
+                value: String(opt.value),
+                disabled: opt.disabled
+            })),
+        value: value,
+        onChange: (values)=>{
+            field.onChange(values);
+            field.onBlur();
+        }
+    });
+});
+export { MultiSelectRenderer };
+
+//# sourceMappingURL=MultiSelectRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/MultiSelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/MultiSelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { MultiSelect } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        multiSelect: {\n            fieldType: \"text\" | \"number\";\n            options: true;\n            settings?: { showSelectionCount?: boolean };\n        };\n    }\n}\n\nexport const MultiSelectRenderer = createFieldRenderer<\"multiSelect\">(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n    const value = (field.value as string[]) ?? [];\n\n    return (\n        <MultiSelect\n            label={field.label}\n            hint={field.help}\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            showSelectionCount={field.rendererSettings?.showSelectionCount}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value),\n                disabled: opt.disabled\n            }))}\n            value={value}\n            onChange={values => {\n                field.onChange(values);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"names":["MultiSelectRenderer","createFieldRenderer","field","options","value","MultiSelect","opt","String","values"],"mappings":";;;AAeO,MAAMA,sBAAsBC,oBAAmC,CAAC,EAAEC,KAAK,EAAE;IAC5E,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IACnD,MAAME,QAASF,MAAM,KAAK,IAAiB,EAAE;IAE7C,OAAO,WAAP,GACI,oBAACG,aAAWA;QACR,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,oBAAoBA,MAAM,gBAAgB,EAAE;QAC5C,SAASC,QAAQ,GAAG,CAACG,CAAAA,MAAQ;gBACzB,OAAOA,IAAI,KAAK;gBAChB,OAAOC,OAAOD,IAAI,KAAK;gBACvB,UAAUA,IAAI,QAAQ;YAC1B;QACA,OAAOF;QACP,UAAUI,CAAAA;YACNN,MAAM,QAAQ,CAACM;YACfN,MAAM,MAAM;QAChB;;AAGZ"}

package/base/Base/FieldRenderers/NumberInputRenderer.js

@@ -6,6 +6,7 @@ const NumberInputRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react
         onChange: (value)=>field.onChange(value)
     }, /*#__PURE__*/ react.createElement(Input, {
         label: field.label,
+        hint: field.help,
         placeholder: field.placeholder,
         description: field.description,
         note: field.note,

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/NumberInputRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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"],"names":["NumberInputRenderer","createFieldRenderer","field","DelayedOnChange","value","Input"],"mappings":";;;AAUO,MAAMA,sBAAsBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GACtD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,OAAKA;QACF,OAAOH,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM;QAC1B,MAAK"}
+{"version":3,"file":"base/Base/FieldRenderers/NumberInputRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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                hint={field.help}\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"],"names":["NumberInputRenderer","createFieldRenderer","field","DelayedOnChange","value","Input"],"mappings":";;;AAUO,MAAMA,sBAAsBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GACtD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,OAAKA;QACF,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM;QAC1B,MAAK"}

package/base/Base/FieldRenderers/NumberInputsRenderer.js

@@ -2,7 +2,7 @@ import react from "react";
 import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
 import { ReactComponent } from "@webiny/icons/delete.svg";
 import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
-import { Button, DelayedOnChange, FormComponentDescription, Icon, Input, Separator } from "@webiny/admin-ui";
+import { Button, DelayedOnChange, FormComponentDescription, FormComponentErrorMessage, IconButton, Input, Separator } from "@webiny/admin-ui";
 const NumberInputsRenderer = createFieldRenderer(({ field })=>{
     const values = Array.isArray(field.value) ? field.value : [];
     const updateAt = (index, val)=>{
@@ -21,8 +21,12 @@ const NumberInputsRenderer = createFieldRenderer(({ field })=>{
         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, {
+    }), values.map((val, index)=>/*#__PURE__*/ react.createElement("div", {
             key: index,
+            className: "flex items-end gap-sm"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex-1"
+        }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
             value: val,
             onChange: (value)=>updateAt(index, value)
         }, /*#__PURE__*/ react.createElement(Input, {
@@ -30,19 +34,25 @@ const NumberInputsRenderer = createFieldRenderer(({ field })=>{
             label: `Value ${index + 1}`,
             placeholder: field.placeholder,
             type: "number",
-            onEnter: ()=>field.addItem(""),
-            endIcon: /*#__PURE__*/ react.createElement(Icon, {
-                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-                label: "Delete",
-                onClick: ()=>field.removeItem(index),
-                className: "cursor-pointer"
-            })
+            onEnter: ()=>field.addItem("")
+        }))), /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: (e)=>{
+                e.stopPropagation();
+                field.removeItem(index);
+            },
+            size: "lg",
+            variant: "ghost"
         }))), /*#__PURE__*/ react.createElement(Button, {
         disabled: field.disabled,
         variant: "tertiary",
         icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
         text: field.rendererSettings?.addItemLabel ?? "Add Value",
         onClick: ()=>field.addItem("")
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: field.validation.message,
+        invalid: false === field.validation.isValid,
+        disabled: field.disabled
     }));
 });
 export { NumberInputsRenderer };