@webiny/app-headless-cms 6.0.0-beta.0 → 6.0.0-rc.0

package/admin/plugins/fields/boolean.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_toggle_on","_i18n","_Grid","_form","_Radio","_templateObject","_templateObject2","_templateObject3","t","i18n","ns","Options","_ref","onChange","initialValue","value","default","createElement","RadioGroup","label","Fragment","Radio","plugin","type","name","field","_taggedTemplateLiteral2","description","icon","ReactComponent","allowMultipleValues","allowPredefinedValues","multipleValuesLabel","createField","validation","renderer","settings","defaultValue","renderSettings","Grid","Cell","span","Bind","bind","_default","exports"],"sources":["boolean.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as BooleanIcon } from \"@material-design-icons/svg/outlined/toggle_on.svg\";\nimport { CmsModelFieldTypePlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Bind } from \"@webiny/form\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\ninterface OptionsProps {\n    onChange: (value: boolean) => void;\n    value?: boolean | \"true\" | \"false\";\n}\n\nconst Options = ({ onChange, value: initialValue }: OptionsProps) => {\n    const value = initialValue === true || initialValue === \"true\";\n\n    return (\n        <RadioGroup label={\"Default value\"}>\n            {() => {\n                return (\n                    <>\n                        <div>\n                            <Radio\n                                label=\"True\"\n                                value={value}\n                                onChange={() => {\n                                    onChange(true);\n                                }}\n                            />\n                        </div>\n                        <div>\n                            <Radio\n                                label=\"False\"\n                                value={!value}\n                                onChange={() => {\n                                    onChange(false);\n                                }}\n                            />\n                        </div>\n                    </>\n                );\n            }}\n        </RadioGroup>\n    );\n};\n\nconst plugin: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-boolean\",\n    field: {\n        type: \"boolean\",\n        label: t`Boolean`,\n        description: t`Store boolean (\"yes\" or \"no\" ) values.`,\n        icon: <BooleanIcon />,\n        allowMultipleValues: false,\n        allowPredefinedValues: false,\n        multipleValuesLabel: t`Use as a list of booleans`,\n        createField() {\n            return {\n                type: this.type,\n                validation: [],\n                renderer: {\n                    name: \"\"\n                },\n                settings: {\n                    defaultValue: false\n                }\n            };\n        },\n        renderSettings() {\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <Bind name={\"settings.defaultValue\"}>\n                            {bind => {\n                                return <Options onChange={bind.onChange} value={bind.value} />;\n                            }}\n                        </Bind>\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","BooleanIcon","i18n","Bind","Grid","RadioGroup","t","ns","Options","onChange","value","initialValue","createElement","label","String","items","plugin","type","name","field","description","icon","allowList","allowPredefinedValues","listLabel","createField","validation","renderer","settings","defaultValue","renderSettings","Column","span","bind"],"sources":["boolean.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as BooleanIcon } from \"@webiny/icons/toggle_on.svg\";\nimport type { CmsModelFieldTypePlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Bind } from \"@webiny/form\";\nimport { Grid, RadioGroup } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\ninterface OptionsProps {\n    onChange: (value: boolean) => void;\n    value?: boolean | \"true\" | \"false\";\n}\n\nconst Options = ({ onChange, value: initialValue }: OptionsProps) => {\n    const value = initialValue === true || initialValue === \"true\";\n\n    return (\n        <RadioGroup\n            label={\"Default value\"}\n            value={String(value)}\n            onChange={value => {\n                onChange(value === \"true\");\n            }}\n            items={[\n                { value: \"true\", label: \"True\" },\n                { value: \"false\", label: \"False\" }\n            ]}\n        />\n    );\n};\n\nconst plugin: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-boolean\",\n    field: {\n        type: \"boolean\",\n        label: t`Boolean`,\n        description: t`Store boolean (\"yes\" or \"no\" ) values.`,\n        icon: <BooleanIcon />,\n        allowList: false,\n        allowPredefinedValues: false,\n        listLabel: t`Use as a list of booleans`,\n        createField() {\n            return {\n                type: this.type,\n                validation: [],\n                renderer: {\n                    name: \"\"\n                },\n                settings: {\n                    defaultValue: false\n                }\n            };\n        },\n        renderSettings() {\n            return (\n                <Grid>\n                    <Grid.Column span={12}>\n                        <Bind name={\"settings.defaultValue\"}>\n                            {bind => {\n                                return <Options onChange={bind.onChange} value={bind.value} />;\n                            }}\n                        </Bind>\n                    </Grid.Column>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,WAAW,QAAQ,6BAA6B;AAE3E,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,IAAI,EAAEC,UAAU,QAAQ,kBAAkB;AAEnD,MAAMC,CAAC,GAAGJ,IAAI,CAACK,EAAE,CAAC,+BAA+B,CAAC;AAOlD,MAAMC,OAAO,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK,EAAEC;AAA2B,CAAC,KAAK;EACjE,MAAMD,KAAK,GAAGC,YAAY,KAAK,IAAI,IAAIA,YAAY,KAAK,MAAM;EAE9D,oBACIZ,KAAA,CAAAa,aAAA,CAACP,UAAU;IACPQ,KAAK,EAAE,eAAgB;IACvBH,KAAK,EAAEI,MAAM,CAACJ,KAAK,CAAE;IACrBD,QAAQ,EAAEC,KAAK,IAAI;MACfD,QAAQ,CAACC,KAAK,KAAK,MAAM,CAAC;IAC9B,CAAE;IACFK,KAAK,EAAE,CACH;MAAEL,KAAK,EAAE,MAAM;MAAEG,KAAK,EAAE;IAAO,CAAC,EAChC;MAAEH,KAAK,EAAE,OAAO;MAAEG,KAAK,EAAE;IAAQ,CAAC;EACpC,CACL,CAAC;AAEV,CAAC;AAED,MAAMG,MAA+B,GAAG;EACpCC,IAAI,EAAE,uBAAuB;EAC7BC,IAAI,EAAE,+BAA+B;EACrCC,KAAK,EAAE;IACHF,IAAI,EAAE,SAAS;IACfJ,KAAK,EAAEP,CAAC,SAAS;IACjBc,WAAW,EAAEd,CAAC,wCAAwC;IACtDe,IAAI,eAAEtB,KAAA,CAAAa,aAAA,CAACX,WAAW,MAAE,CAAC;IACrBqB,SAAS,EAAE,KAAK;IAChBC,qBAAqB,EAAE,KAAK;IAC5BC,SAAS,EAAElB,CAAC,2BAA2B;IACvCmB,WAAWA,CAAA,EAAG;MACV,OAAO;QACHR,IAAI,EAAE,IAAI,CAACA,IAAI;QACfS,UAAU,EAAE,EAAE;QACdC,QAAQ,EAAE;UACNT,IAAI,EAAE;QACV,CAAC;QACDU,QAAQ,EAAE;UACNC,YAAY,EAAE;QAClB;MACJ,CAAC;IACL,CAAC;IACDC,cAAcA,CAAA,EAAG;MACb,oBACI/B,KAAA,CAAAa,aAAA,CAACR,IAAI,qBACDL,KAAA,CAAAa,aAAA,CAACR,IAAI,CAAC2B,MAAM;QAACC,IAAI,EAAE;MAAG,gBAClBjC,KAAA,CAAAa,aAAA,CAACT,IAAI;QAACe,IAAI,EAAE;MAAwB,GAC/Be,IAAI,IAAI;QACL,oBAAOlC,KAAA,CAAAa,aAAA,CAACJ,OAAO;UAACC,QAAQ,EAAEwB,IAAI,CAACxB,QAAS;UAACC,KAAK,EAAEuB,IAAI,CAACvB;QAAM,CAAE,CAAC;MAClE,CACE,CACG,CACX,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAeM,MAAM","ignoreList":[]}

package/admin/plugins/fields/dateTime.d.ts

@@ -1,3 +1,3 @@
-import { CmsModelFieldTypePlugin } from "../../../types";
+import type { CmsModelFieldTypePlugin } from "../../../types.js";
 declare const plugin: CmsModelFieldTypePlugin;
 export default plugin;

package/admin/plugins/fields/dateTime.js

@@ -1,74 +1,66 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _get = _interopRequireDefault(require("lodash/get"));
-var _Grid = require("@webiny/ui/Grid");
-var _Select = require("@webiny/ui/Select");
-var _i18n = require("@webiny/app/i18n");
-var _scheduleBlack24px = require("./icons/schedule-black-24px.svg");
-var _hooks = require("../../hooks");
-var _form = require("@webiny/form");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
-var t = _i18n.i18n.ns("app-headless-cms/admin/fields");
-var DateTimeSettings = function DateTimeSettings() {
-  var _useModel = (0, _hooks.useModel)(),
-    model = _useModel.model;
-  var _useModelField = (0, _hooks.useModelField)(),
-    field = _useModelField.field;
-  var lockedFields = model.lockedFields || [];
-  var fieldId = (0, _get.default)(field, "fieldId", null);
-  var lockedField = lockedFields.find(function (lockedField) {
-    return lockedField.fieldId === fieldId;
-  });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+import React from "react";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { ReactComponent as DateTimeIcon } from "./icons/schedule-black-24px.svg";
+import { Bind } from "@webiny/form";
+import { Grid, Label, Select } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/fields");
+const DateTimeSettings = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
     span: 6
-  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+  }, /*#__PURE__*/React.createElement(Bind, {
     name: "settings.type"
-  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Format"]))),
-    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Cannot be changed later"]))),
-    disabled: lockedField && Boolean(lockedField.formatType)
-  }, /*#__PURE__*/_react.default.createElement("option", {
-    value: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["date"])))
-  }, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Date only"])))), /*#__PURE__*/_react.default.createElement("option", {
-    value: t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["time"])))
-  }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Time only"])))), /*#__PURE__*/_react.default.createElement("option", {
-    value: t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["dateTimeWithTimezone"])))
-  }, t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Date and time with timezone"])))), /*#__PURE__*/_react.default.createElement("option", {
-    value: t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["dateTimeWithoutTimezone"])))
-  }, t(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["Date and time without timezone"]))))))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: /*#__PURE__*/React.createElement(Label, {
+      text: t`Format`,
+      description: t`(cannot be changed later)`
+    }),
+    options: [{
+      value: "date",
+      label: t`Date only`
+    }, {
+      value: "time",
+      label: t`Time only`
+    }, {
+      value: "dateTimeWithTimezone",
+      label: t`Date and time with timezone`
+    }, {
+      value: "dateTimeWithoutTimezone",
+      label: t`Date and time without timezone`
+    }],
+    size: "lg"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
     span: 6
-  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+  }, /*#__PURE__*/React.createElement(Bind, {
     name: "settings.defaultSetValue"
-  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    label: t(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["Default Admin UI value"]))),
-    description: "Affects the Admin UI only"
-  }, /*#__PURE__*/_react.default.createElement("option", {
-    value: t(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["null"])))
-  }, t(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["Leave empty (null value)"])))), /*#__PURE__*/_react.default.createElement("option", {
-    value: t(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["current"])))
-  }, t(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["Current date/time"])))))))));
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: /*#__PURE__*/React.createElement(Label, {
+      text: t`Default Admin UI value`,
+      hint: t`Affects the Admin UI only`
+    }),
+    options: [{
+      value: t`null`,
+      label: t`Leave empty (null value)`
+    }, {
+      value: t`current`,
+      label: t`Current date/time`
+    }],
+    size: "lg"
+  })))));
 };
-var plugin = {
+const plugin = {
   type: "cms-editor-field-type",
   name: "cms-editor-field-type-dateTime",
   field: {
     type: "datetime",
-    label: t(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["Date/Time"]))),
-    description: t(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["Store date and time."]))),
-    icon: /*#__PURE__*/_react.default.createElement(_scheduleBlack24px.ReactComponent, null),
+    label: t`Date/Time`,
+    description: t`Store date and time.`,
+    icon: /*#__PURE__*/React.createElement(DateTimeIcon, null),
     validators: ["required", "dateGte", "dateLte"],
-    allowMultipleValues: true,
+    allowList: true,
     allowPredefinedValues: false,
     // TODO: implement "renderPredefinedValues" and set to true.
-    multipleValuesLabel: t(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["Use as a list of dates and times"]))),
-    createField: function createField() {
+    listLabel: t`Use as a list of dates and times`,
+    createField() {
       return {
         type: this.type,
         settings: {
@@ -80,11 +72,11 @@ var plugin = {
         }
       };
     },
-    renderSettings: function renderSettings() {
-      return /*#__PURE__*/_react.default.createElement(DateTimeSettings, null);
+    renderSettings() {
+      return /*#__PURE__*/React.createElement(DateTimeSettings, null);
     }
   }
 };
-var _default = exports.default = plugin;
+export default plugin;
 
 //# sourceMappingURL=dateTime.js.map

package/admin/plugins/fields/dateTime.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_get","_Grid","_Select","_i18n","_scheduleBlack24px","_hooks","_form","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","t","i18n","ns","DateTimeSettings","_useModel","useModel","model","_useModelField","useModelField","field","lockedFields","fieldId","get","lockedField","find","default","createElement","Fragment","Grid","Cell","span","Bind","name","Select","label","_taggedTemplateLiteral2","description","disabled","Boolean","formatType","value","plugin","type","icon","ReactComponent","validators","allowMultipleValues","allowPredefinedValues","multipleValuesLabel","createField","settings","validation","renderer","renderSettings","_default","exports"],"sources":["dateTime.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport { CmsModelField, CmsModelFieldTypePlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DateTimeIcon } from \"./icons/schedule-black-24px.svg\";\nimport { useModel, useModelField } from \"~/admin/hooks\";\nimport { Bind } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\nconst DateTimeSettings = () => {\n    const { model } = useModel();\n    const { field } = useModelField();\n    const lockedFields = model.lockedFields || [];\n    const fieldId = get(field, \"fieldId\", null);\n    const lockedField = lockedFields.find(\n        lockedField => lockedField.fieldId === fieldId\n    ) as CmsModelField<{\n        formatType: string;\n    }>;\n\n    return (\n        <>\n            <Grid>\n                <Cell span={6}>\n                    <Bind name={\"settings.type\"}>\n                        <Select\n                            label={t`Format`}\n                            description={t`Cannot be changed later`}\n                            disabled={lockedField && Boolean(lockedField.formatType)}\n                        >\n                            <option value={t`date`}>{t`Date only`}</option>\n                            <option value={t`time`}>{t`Time only`}</option>\n                            <option\n                                value={t`dateTimeWithTimezone`}\n                            >{t`Date and time with timezone`}</option>\n                            <option\n                                value={t`dateTimeWithoutTimezone`}\n                            >{t`Date and time without timezone`}</option>\n                        </Select>\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"settings.defaultSetValue\"}>\n                        <Select\n                            label={t`Default Admin UI value`}\n                            description={\"Affects the Admin UI only\"}\n                        >\n                            <option value={t`null`}>{t`Leave empty (null value)`}</option>\n                            <option value={t`current`}>{t`Current date/time`}</option>\n                        </Select>\n                    </Bind>\n                </Cell>\n            </Grid>\n        </>\n    );\n};\n\nconst plugin: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-dateTime\",\n    field: {\n        type: \"datetime\",\n        label: t`Date/Time`,\n        description: t`Store date and time.`,\n        icon: <DateTimeIcon />,\n        validators: [\"required\", \"dateGte\", \"dateLte\"],\n        allowMultipleValues: true,\n        allowPredefinedValues: false, // TODO: implement \"renderPredefinedValues\" and set to true.\n        multipleValuesLabel: t`Use as a list of dates and times`,\n        createField() {\n            return {\n                type: this.type,\n                settings: {\n                    type: \"date\"\n                },\n                validation: [],\n                renderer: {\n                    name: \"\"\n                }\n            };\n        },\n        renderSettings() {\n            return <DateTimeSettings />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","i18n","ReactComponent","DateTimeIcon","Bind","Grid","Label","Select","t","ns","DateTimeSettings","createElement","Fragment","Column","span","name","label","text","description","options","value","size","hint","plugin","type","field","icon","validators","allowList","allowPredefinedValues","listLabel","createField","settings","validation","renderer","renderSettings"],"sources":["dateTime.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { CmsModelFieldTypePlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DateTimeIcon } from \"./icons/schedule-black-24px.svg\";\nimport { Bind } from \"@webiny/form\";\nimport { Grid, Label, Select } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\nconst DateTimeSettings = () => {\n    return (\n        <>\n            <Grid>\n                <Grid.Column span={6}>\n                    <Bind name={\"settings.type\"}>\n                        <Select\n                            label={\n                                <Label\n                                    text={t`Format`}\n                                    description={t`(cannot be changed later)`}\n                                />\n                            }\n                            options={[\n                                { value: \"date\", label: t`Date only` },\n                                { value: \"time\", label: t`Time only` },\n                                {\n                                    value: \"dateTimeWithTimezone\",\n                                    label: t`Date and time with timezone`\n                                },\n                                {\n                                    value: \"dateTimeWithoutTimezone\",\n                                    label: t`Date and time without timezone`\n                                }\n                            ]}\n                            size={\"lg\"}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Bind name={\"settings.defaultSetValue\"}>\n                        <Select\n                            label={\n                                <Label\n                                    text={t`Default Admin UI value`}\n                                    hint={t`Affects the Admin UI only`}\n                                />\n                            }\n                            options={[\n                                { value: t`null`, label: t`Leave empty (null value)` },\n                                { value: t`current`, label: t`Current date/time` }\n                            ]}\n                            size={\"lg\"}\n                        />\n                    </Bind>\n                </Grid.Column>\n            </Grid>\n        </>\n    );\n};\n\nconst plugin: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-dateTime\",\n    field: {\n        type: \"datetime\",\n        label: t`Date/Time`,\n        description: t`Store date and time.`,\n        icon: <DateTimeIcon />,\n        validators: [\"required\", \"dateGte\", \"dateLte\"],\n        allowList: true,\n        allowPredefinedValues: false, // TODO: implement \"renderPredefinedValues\" and set to true.\n        listLabel: t`Use as a list of dates and times`,\n        createField() {\n            return {\n                type: this.type,\n                settings: {\n                    type: \"date\"\n                },\n                validation: [],\n                renderer: {\n                    name: \"\"\n                }\n            };\n        },\n        renderSettings() {\n            return <DateTimeSettings />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fields/dynamicZone/AddTemplate.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsDynamicZoneTemplate } from "../../../../types";
+import type { CmsDynamicZoneTemplate } from "../../../../types.js";
 interface AddTemplateProps {
     onTemplate: UseAddTemplateParams["onTemplate"];
 }

package/admin/plugins/fields/dynamicZone/AddTemplate.js

@@ -1,121 +1,80 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AddTemplateIcon = exports.AddTemplateButton = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireWildcard(require("react"));
-var _Button = require("@webiny/ui/Button");
-var _TemplateDialog = require("./TemplateDialog");
-var _Typography = require("@webiny/ui/Typography");
-var _info = require("@material-design-icons/svg/outlined/info.svg");
-var _add_circle_outline = require("@material-design-icons/svg/round/add_circle_outline.svg");
-var _Elevation = require("@webiny/ui/Elevation");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var AddTemplateButtonContainer = /*#__PURE__*/(0, _base.default)(_Elevation.Elevation, process.env.NODE_ENV === "production" ? {
-  target: "e34m0te2"
-} : {
-  target: "e34m0te2",
-  label: "AddTemplateButtonContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1mw0icp",
-  styles: "padding:25px 0 20px;text-align:center"
-} : {
-  name: "1mw0icp",
-  styles: "padding:25px 0 20px;text-align:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFkZFRlbXBsYXRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVb0QiLCJmaWxlIjoiQWRkVGVtcGxhdGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IENtc0R5bmFtaWNab25lVGVtcGxhdGUgfSBmcm9tIFwifi90eXBlc1wiO1xuaW1wb3J0IHsgQnV0dG9uU2Vjb25kYXJ5LCBJY29uQnV0dG9uIH0gZnJvbSBcIkB3ZWJpbnkvdWkvQnV0dG9uXCI7XG5pbXBvcnQgeyBUZW1wbGF0ZURpYWxvZyB9IGZyb20gXCIuL1RlbXBsYXRlRGlhbG9nXCI7XG5pbXBvcnQgeyBUeXBvZ3JhcGh5IH0gZnJvbSBcIkB3ZWJpbnkvdWkvVHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgUmVhY3RDb21wb25lbnQgYXMgSW5mb0ljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvb3V0bGluZWQvaW5mby5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIEFkZEljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvcm91bmQvYWRkX2NpcmNsZV9vdXRsaW5lLnN2Z1wiO1xuaW1wb3J0IHsgRWxldmF0aW9uIH0gZnJvbSBcIkB3ZWJpbnkvdWkvRWxldmF0aW9uXCI7XG5cbmNvbnN0IEFkZFRlbXBsYXRlQnV0dG9uQ29udGFpbmVyID0gc3R5bGVkKEVsZXZhdGlvbilgXG4gICAgcGFkZGluZzogMjVweCAwIDIwcHg7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuYDtcblxuLyoqXG4gKiBUaGlzIGhhY2tpbmcgaXMgbmVlZGVkIHRvIHBvc2l0aW9uIHRoZSBidXR0b24gZXhhY3RseSBpbiB0aGUgbWlkZGxlIG9mIGF2YWlsYWJsZSBhcmVhIGFuZCBub3Qgc3RyZXRjaCB0aGUgcGFyZW50IGVsZW1lbnQuXG4gKi9cbmNvbnN0IEFkZFRlbXBsYXRlSWNvbkNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgIGhlaWdodDogMzZweDtcblxuICAgID4gYnV0dG9uIHtcbiAgICAgICAgbWFyZ2luLWxlZnQ6IC0yNHB4O1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgfVxuYDtcblxuY29uc3QgSW5mbyA9IHN0eWxlZC5kaXZgXG4gICAgbWFyZ2luLXRvcDogOHB4O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgID4gc3ZnIHtcbiAgICAgICAgd2lkdGg6IDIwcHg7XG4gICAgICAgIG1hcmdpbi1yaWdodDogNXB4O1xuICAgIH1cbmA7XG5cbmludGVyZmFjZSBBZGRUZW1wbGF0ZVByb3BzIHtcbiAgICBvblRlbXBsYXRlOiBVc2VBZGRUZW1wbGF0ZVBhcmFtc1tcIm9uVGVtcGxhdGVcIl07XG59XG5cbmludGVyZmFjZSBVc2VBZGRUZW1wbGF0ZVBhcmFtcyB7XG4gICAgb25UZW1wbGF0ZTogKHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlKSA9PiB2b2lkO1xufVxuXG5mdW5jdGlvbiB1c2VBZGRUZW1wbGF0ZShwYXJhbXM6IFVzZUFkZFRlbXBsYXRlUGFyYW1zKSB7XG4gICAgY29uc3QgW3Nob3dUZW1wbGF0ZURpYWxvZywgc2V0U2hvd1RlbXBsYXRlRGlhbG9nXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICAgIGNvbnN0IGFkZFRlbXBsYXRlID0gKCkgPT4ge1xuICAgICAgICBzZXRTaG93VGVtcGxhdGVEaWFsb2codHJ1ZSk7XG4gICAgfTtcblxuICAgIGNvbnN0IG9uVGVtcGxhdGUgPSAodGVtcGxhdGU6IENtc0R5bmFtaWNab25lVGVtcGxhdGUpID0+IHtcbiAgICAgICAgcGFyYW1zLm9uVGVtcGxhdGUodGVtcGxhdGUpO1xuICAgIH07XG5cbiAgICBjb25zdCBvbkRpYWxvZ0Nsb3NlID0gKCkgPT4ge1xuICAgICAgICBzZXRTaG93VGVtcGxhdGVEaWFsb2coZmFsc2UpO1xuICAgIH07XG5cbiAgICByZXR1cm4ge1xuICAgICAgICBhZGRUZW1wbGF0ZSxcbiAgICAgICAgb25UZW1wbGF0ZSxcbiAgICAgICAgb25EaWFsb2dDbG9zZSxcbiAgICAgICAgc2hvd1RlbXBsYXRlRGlhbG9nXG4gICAgfTtcbn1cblxuZXhwb3J0IGNvbnN0IEFkZFRlbXBsYXRlQnV0dG9uID0gKHByb3BzOiBBZGRUZW1wbGF0ZVByb3BzKSA9PiB7XG4gICAgY29uc3QgeyBhZGRUZW1wbGF0ZSwgb25UZW1wbGF0ZSwgc2hvd1RlbXBsYXRlRGlhbG9nLCBvbkRpYWxvZ0Nsb3NlIH0gPSB1c2VBZGRUZW1wbGF0ZSh7XG4gICAgICAgIG9uVGVtcGxhdGU6IHByb3BzLm9uVGVtcGxhdGVcbiAgICB9KTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxBZGRUZW1wbGF0ZUJ1dHRvbkNvbnRhaW5lciB6PXsyfT5cbiAgICAgICAgICAgIHtzaG93VGVtcGxhdGVEaWFsb2cgPyAoXG4gICAgICAgICAgICAgICAgPFRlbXBsYXRlRGlhbG9nIG9uVGVtcGxhdGU9e29uVGVtcGxhdGV9IG9uQ2xvc2U9e29uRGlhbG9nQ2xvc2V9IC8+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIDxCdXR0b25TZWNvbmRhcnkgb25DbGljaz17YWRkVGVtcGxhdGV9PisgQWRkIGEgdGVtcGxhdGU8L0J1dHRvblNlY29uZGFyeT5cbiAgICAgICAgICAgIDxJbmZvPlxuICAgICAgICAgICAgICAgIDxJbmZvSWNvbiAvPlxuICAgICAgICAgICAgICAgIDxUeXBvZ3JhcGh5IHVzZT17XCJjYXB0aW9uXCJ9PlxuICAgICAgICAgICAgICAgICAgICBDbGljayBoZXJlIHRvIGxlYXJuIGhvdyB0ZW1wbGF0ZXMgYW5kIGR5bmFtaWMgem9uZXMgd29ya1xuICAgICAgICAgICAgICAgIDwvVHlwb2dyYXBoeT5cbiAgICAgICAgICAgIDwvSW5mbz5cbiAgICAgICAgPC9BZGRUZW1wbGF0ZUJ1dHRvbkNvbnRhaW5lcj5cbiAgICApO1xufTtcblxuZXhwb3J0IGNvbnN0IEFkZFRlbXBsYXRlSWNvbiA9IChwcm9wczogQWRkVGVtcGxhdGVQcm9wcykgPT4ge1xuICAgIGNvbnN0IHsgYWRkVGVtcGxhdGUsIG9uVGVtcGxhdGUsIHNob3dUZW1wbGF0ZURpYWxvZywgb25EaWFsb2dDbG9zZSB9ID0gdXNlQWRkVGVtcGxhdGUoe1xuICAgICAgICBvblRlbXBsYXRlOiBwcm9wcy5vblRlbXBsYXRlXG4gICAgfSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8QWRkVGVtcGxhdGVJY29uQ29udGFpbmVyPlxuICAgICAgICAgICAge3Nob3dUZW1wbGF0ZURpYWxvZyA/IChcbiAgICAgICAgICAgICAgICA8VGVtcGxhdGVEaWFsb2cgb25UZW1wbGF0ZT17b25UZW1wbGF0ZX0gb25DbG9zZT17b25EaWFsb2dDbG9zZX0gLz5cbiAgICAgICAgICAgICkgOiBudWxsfVxuICAgICAgICAgICAgPEljb25CdXR0b24gb25DbGljaz17YWRkVGVtcGxhdGV9IGljb249ezxBZGRJY29uIC8+fSAvPlxuICAgICAgICA8L0FkZFRlbXBsYXRlSWNvbkNvbnRhaW5lcj5cbiAgICApO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/**
- * This hacking is needed to position the button exactly in the middle of available area and not stretch the parent element.
- */
-var AddTemplateIconContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e34m0te1"
-} : {
-  target: "e34m0te1",
-  label: "AddTemplateIconContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "btmgo5",
-  styles: "text-align:center;height:36px;>button{margin-left:-24px;position:absolute;}"
-} : {
-  name: "btmgo5",
-  styles: "text-align:center;height:36px;>button{margin-left:-24px;position:absolute;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFkZFRlbXBsYXRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjJDIiwiZmlsZSI6IkFkZFRlbXBsYXRlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBDbXNEeW5hbWljWm9uZVRlbXBsYXRlIH0gZnJvbSBcIn4vdHlwZXNcIjtcbmltcG9ydCB7IEJ1dHRvblNlY29uZGFyeSwgSWNvbkJ1dHRvbiB9IGZyb20gXCJAd2ViaW55L3VpL0J1dHRvblwiO1xuaW1wb3J0IHsgVGVtcGxhdGVEaWFsb2cgfSBmcm9tIFwiLi9UZW1wbGF0ZURpYWxvZ1wiO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gXCJAd2ViaW55L3VpL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIEluZm9JY29uIH0gZnJvbSBcIkBtYXRlcmlhbC1kZXNpZ24taWNvbnMvc3ZnL291dGxpbmVkL2luZm8uc3ZnXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBBZGRJY29uIH0gZnJvbSBcIkBtYXRlcmlhbC1kZXNpZ24taWNvbnMvc3ZnL3JvdW5kL2FkZF9jaXJjbGVfb3V0bGluZS5zdmdcIjtcbmltcG9ydCB7IEVsZXZhdGlvbiB9IGZyb20gXCJAd2ViaW55L3VpL0VsZXZhdGlvblwiO1xuXG5jb25zdCBBZGRUZW1wbGF0ZUJ1dHRvbkNvbnRhaW5lciA9IHN0eWxlZChFbGV2YXRpb24pYFxuICAgIHBhZGRpbmc6IDI1cHggMCAyMHB4O1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbi8qKlxuICogVGhpcyBoYWNraW5nIGlzIG5lZWRlZCB0byBwb3NpdGlvbiB0aGUgYnV0dG9uIGV4YWN0bHkgaW4gdGhlIG1pZGRsZSBvZiBhdmFpbGFibGUgYXJlYSBhbmQgbm90IHN0cmV0Y2ggdGhlIHBhcmVudCBlbGVtZW50LlxuICovXG5jb25zdCBBZGRUZW1wbGF0ZUljb25Db250YWluZXIgPSBzdHlsZWQuZGl2YFxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBoZWlnaHQ6IDM2cHg7XG5cbiAgICA+IGJ1dHRvbiB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAtMjRweDtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIH1cbmA7XG5cbmNvbnN0IEluZm8gPSBzdHlsZWQuZGl2YFxuICAgIG1hcmdpbi10b3A6IDhweDtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICA+IHN2ZyB7XG4gICAgICAgIHdpZHRoOiAyMHB4O1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgICB9XG5gO1xuXG5pbnRlcmZhY2UgQWRkVGVtcGxhdGVQcm9wcyB7XG4gICAgb25UZW1wbGF0ZTogVXNlQWRkVGVtcGxhdGVQYXJhbXNbXCJvblRlbXBsYXRlXCJdO1xufVxuXG5pbnRlcmZhY2UgVXNlQWRkVGVtcGxhdGVQYXJhbXMge1xuICAgIG9uVGVtcGxhdGU6ICh0ZW1wbGF0ZTogQ21zRHluYW1pY1pvbmVUZW1wbGF0ZSkgPT4gdm9pZDtcbn1cblxuZnVuY3Rpb24gdXNlQWRkVGVtcGxhdGUocGFyYW1zOiBVc2VBZGRUZW1wbGF0ZVBhcmFtcykge1xuICAgIGNvbnN0IFtzaG93VGVtcGxhdGVEaWFsb2csIHNldFNob3dUZW1wbGF0ZURpYWxvZ10gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgICBjb25zdCBhZGRUZW1wbGF0ZSA9ICgpID0+IHtcbiAgICAgICAgc2V0U2hvd1RlbXBsYXRlRGlhbG9nKHRydWUpO1xuICAgIH07XG5cbiAgICBjb25zdCBvblRlbXBsYXRlID0gKHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlKSA9PiB7XG4gICAgICAgIHBhcmFtcy5vblRlbXBsYXRlKHRlbXBsYXRlKTtcbiAgICB9O1xuXG4gICAgY29uc3Qgb25EaWFsb2dDbG9zZSA9ICgpID0+IHtcbiAgICAgICAgc2V0U2hvd1RlbXBsYXRlRGlhbG9nKGZhbHNlKTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIHtcbiAgICAgICAgYWRkVGVtcGxhdGUsXG4gICAgICAgIG9uVGVtcGxhdGUsXG4gICAgICAgIG9uRGlhbG9nQ2xvc2UsXG4gICAgICAgIHNob3dUZW1wbGF0ZURpYWxvZ1xuICAgIH07XG59XG5cbmV4cG9ydCBjb25zdCBBZGRUZW1wbGF0ZUJ1dHRvbiA9IChwcm9wczogQWRkVGVtcGxhdGVQcm9wcykgPT4ge1xuICAgIGNvbnN0IHsgYWRkVGVtcGxhdGUsIG9uVGVtcGxhdGUsIHNob3dUZW1wbGF0ZURpYWxvZywgb25EaWFsb2dDbG9zZSB9ID0gdXNlQWRkVGVtcGxhdGUoe1xuICAgICAgICBvblRlbXBsYXRlOiBwcm9wcy5vblRlbXBsYXRlXG4gICAgfSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8QWRkVGVtcGxhdGVCdXR0b25Db250YWluZXIgej17Mn0+XG4gICAgICAgICAgICB7c2hvd1RlbXBsYXRlRGlhbG9nID8gKFxuICAgICAgICAgICAgICAgIDxUZW1wbGF0ZURpYWxvZyBvblRlbXBsYXRlPXtvblRlbXBsYXRlfSBvbkNsb3NlPXtvbkRpYWxvZ0Nsb3NlfSAvPlxuICAgICAgICAgICAgKSA6IG51bGx9XG4gICAgICAgICAgICA8QnV0dG9uU2Vjb25kYXJ5IG9uQ2xpY2s9e2FkZFRlbXBsYXRlfT4rIEFkZCBhIHRlbXBsYXRlPC9CdXR0b25TZWNvbmRhcnk+XG4gICAgICAgICAgICA8SW5mbz5cbiAgICAgICAgICAgICAgICA8SW5mb0ljb24gLz5cbiAgICAgICAgICAgICAgICA8VHlwb2dyYXBoeSB1c2U9e1wiY2FwdGlvblwifT5cbiAgICAgICAgICAgICAgICAgICAgQ2xpY2sgaGVyZSB0byBsZWFybiBob3cgdGVtcGxhdGVzIGFuZCBkeW5hbWljIHpvbmVzIHdvcmtcbiAgICAgICAgICAgICAgICA8L1R5cG9ncmFwaHk+XG4gICAgICAgICAgICA8L0luZm8+XG4gICAgICAgIDwvQWRkVGVtcGxhdGVCdXR0b25Db250YWluZXI+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBBZGRUZW1wbGF0ZUljb24gPSAocHJvcHM6IEFkZFRlbXBsYXRlUHJvcHMpID0+IHtcbiAgICBjb25zdCB7IGFkZFRlbXBsYXRlLCBvblRlbXBsYXRlLCBzaG93VGVtcGxhdGVEaWFsb2csIG9uRGlhbG9nQ2xvc2UgfSA9IHVzZUFkZFRlbXBsYXRlKHtcbiAgICAgICAgb25UZW1wbGF0ZTogcHJvcHMub25UZW1wbGF0ZVxuICAgIH0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEFkZFRlbXBsYXRlSWNvbkNvbnRhaW5lcj5cbiAgICAgICAgICAgIHtzaG93VGVtcGxhdGVEaWFsb2cgPyAoXG4gICAgICAgICAgICAgICAgPFRlbXBsYXRlRGlhbG9nIG9uVGVtcGxhdGU9e29uVGVtcGxhdGV9IG9uQ2xvc2U9e29uRGlhbG9nQ2xvc2V9IC8+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIDxJY29uQnV0dG9uIG9uQ2xpY2s9e2FkZFRlbXBsYXRlfSBpY29uPXs8QWRkSWNvbiAvPn0gLz5cbiAgICAgICAgPC9BZGRUZW1wbGF0ZUljb25Db250YWluZXI+XG4gICAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var Info = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e34m0te0"
-} : {
-  target: "e34m0te0",
-  label: "Info"
-})(process.env.NODE_ENV === "production" ? {
-  name: "u22e8l",
-  styles: "margin-top:8px;display:flex;justify-content:center;align-items:center;>svg{width:20px;margin-right:5px;}"
-} : {
-  name: "u22e8l",
-  styles: "margin-top:8px;display:flex;justify-content:center;align-items:center;>svg{width:20px;margin-right:5px;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFkZFRlbXBsYXRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QnVCIiwiZmlsZSI6IkFkZFRlbXBsYXRlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBDbXNEeW5hbWljWm9uZVRlbXBsYXRlIH0gZnJvbSBcIn4vdHlwZXNcIjtcbmltcG9ydCB7IEJ1dHRvblNlY29uZGFyeSwgSWNvbkJ1dHRvbiB9IGZyb20gXCJAd2ViaW55L3VpL0J1dHRvblwiO1xuaW1wb3J0IHsgVGVtcGxhdGVEaWFsb2cgfSBmcm9tIFwiLi9UZW1wbGF0ZURpYWxvZ1wiO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gXCJAd2ViaW55L3VpL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIEluZm9JY29uIH0gZnJvbSBcIkBtYXRlcmlhbC1kZXNpZ24taWNvbnMvc3ZnL291dGxpbmVkL2luZm8uc3ZnXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBBZGRJY29uIH0gZnJvbSBcIkBtYXRlcmlhbC1kZXNpZ24taWNvbnMvc3ZnL3JvdW5kL2FkZF9jaXJjbGVfb3V0bGluZS5zdmdcIjtcbmltcG9ydCB7IEVsZXZhdGlvbiB9IGZyb20gXCJAd2ViaW55L3VpL0VsZXZhdGlvblwiO1xuXG5jb25zdCBBZGRUZW1wbGF0ZUJ1dHRvbkNvbnRhaW5lciA9IHN0eWxlZChFbGV2YXRpb24pYFxuICAgIHBhZGRpbmc6IDI1cHggMCAyMHB4O1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbi8qKlxuICogVGhpcyBoYWNraW5nIGlzIG5lZWRlZCB0byBwb3NpdGlvbiB0aGUgYnV0dG9uIGV4YWN0bHkgaW4gdGhlIG1pZGRsZSBvZiBhdmFpbGFibGUgYXJlYSBhbmQgbm90IHN0cmV0Y2ggdGhlIHBhcmVudCBlbGVtZW50LlxuICovXG5jb25zdCBBZGRUZW1wbGF0ZUljb25Db250YWluZXIgPSBzdHlsZWQuZGl2YFxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBoZWlnaHQ6IDM2cHg7XG5cbiAgICA+IGJ1dHRvbiB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAtMjRweDtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIH1cbmA7XG5cbmNvbnN0IEluZm8gPSBzdHlsZWQuZGl2YFxuICAgIG1hcmdpbi10b3A6IDhweDtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICA+IHN2ZyB7XG4gICAgICAgIHdpZHRoOiAyMHB4O1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgICB9XG5gO1xuXG5pbnRlcmZhY2UgQWRkVGVtcGxhdGVQcm9wcyB7XG4gICAgb25UZW1wbGF0ZTogVXNlQWRkVGVtcGxhdGVQYXJhbXNbXCJvblRlbXBsYXRlXCJdO1xufVxuXG5pbnRlcmZhY2UgVXNlQWRkVGVtcGxhdGVQYXJhbXMge1xuICAgIG9uVGVtcGxhdGU6ICh0ZW1wbGF0ZTogQ21zRHluYW1pY1pvbmVUZW1wbGF0ZSkgPT4gdm9pZDtcbn1cblxuZnVuY3Rpb24gdXNlQWRkVGVtcGxhdGUocGFyYW1zOiBVc2VBZGRUZW1wbGF0ZVBhcmFtcykge1xuICAgIGNvbnN0IFtzaG93VGVtcGxhdGVEaWFsb2csIHNldFNob3dUZW1wbGF0ZURpYWxvZ10gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgICBjb25zdCBhZGRUZW1wbGF0ZSA9ICgpID0+IHtcbiAgICAgICAgc2V0U2hvd1RlbXBsYXRlRGlhbG9nKHRydWUpO1xuICAgIH07XG5cbiAgICBjb25zdCBvblRlbXBsYXRlID0gKHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlKSA9PiB7XG4gICAgICAgIHBhcmFtcy5vblRlbXBsYXRlKHRlbXBsYXRlKTtcbiAgICB9O1xuXG4gICAgY29uc3Qgb25EaWFsb2dDbG9zZSA9ICgpID0+IHtcbiAgICAgICAgc2V0U2hvd1RlbXBsYXRlRGlhbG9nKGZhbHNlKTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIHtcbiAgICAgICAgYWRkVGVtcGxhdGUsXG4gICAgICAgIG9uVGVtcGxhdGUsXG4gICAgICAgIG9uRGlhbG9nQ2xvc2UsXG4gICAgICAgIHNob3dUZW1wbGF0ZURpYWxvZ1xuICAgIH07XG59XG5cbmV4cG9ydCBjb25zdCBBZGRUZW1wbGF0ZUJ1dHRvbiA9IChwcm9wczogQWRkVGVtcGxhdGVQcm9wcykgPT4ge1xuICAgIGNvbnN0IHsgYWRkVGVtcGxhdGUsIG9uVGVtcGxhdGUsIHNob3dUZW1wbGF0ZURpYWxvZywgb25EaWFsb2dDbG9zZSB9ID0gdXNlQWRkVGVtcGxhdGUoe1xuICAgICAgICBvblRlbXBsYXRlOiBwcm9wcy5vblRlbXBsYXRlXG4gICAgfSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8QWRkVGVtcGxhdGVCdXR0b25Db250YWluZXIgej17Mn0+XG4gICAgICAgICAgICB7c2hvd1RlbXBsYXRlRGlhbG9nID8gKFxuICAgICAgICAgICAgICAgIDxUZW1wbGF0ZURpYWxvZyBvblRlbXBsYXRlPXtvblRlbXBsYXRlfSBvbkNsb3NlPXtvbkRpYWxvZ0Nsb3NlfSAvPlxuICAgICAgICAgICAgKSA6IG51bGx9XG4gICAgICAgICAgICA8QnV0dG9uU2Vjb25kYXJ5IG9uQ2xpY2s9e2FkZFRlbXBsYXRlfT4rIEFkZCBhIHRlbXBsYXRlPC9CdXR0b25TZWNvbmRhcnk+XG4gICAgICAgICAgICA8SW5mbz5cbiAgICAgICAgICAgICAgICA8SW5mb0ljb24gLz5cbiAgICAgICAgICAgICAgICA8VHlwb2dyYXBoeSB1c2U9e1wiY2FwdGlvblwifT5cbiAgICAgICAgICAgICAgICAgICAgQ2xpY2sgaGVyZSB0byBsZWFybiBob3cgdGVtcGxhdGVzIGFuZCBkeW5hbWljIHpvbmVzIHdvcmtcbiAgICAgICAgICAgICAgICA8L1R5cG9ncmFwaHk+XG4gICAgICAgICAgICA8L0luZm8+XG4gICAgICAgIDwvQWRkVGVtcGxhdGVCdXR0b25Db250YWluZXI+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBBZGRUZW1wbGF0ZUljb24gPSAocHJvcHM6IEFkZFRlbXBsYXRlUHJvcHMpID0+IHtcbiAgICBjb25zdCB7IGFkZFRlbXBsYXRlLCBvblRlbXBsYXRlLCBzaG93VGVtcGxhdGVEaWFsb2csIG9uRGlhbG9nQ2xvc2UgfSA9IHVzZUFkZFRlbXBsYXRlKHtcbiAgICAgICAgb25UZW1wbGF0ZTogcHJvcHMub25UZW1wbGF0ZVxuICAgIH0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEFkZFRlbXBsYXRlSWNvbkNvbnRhaW5lcj5cbiAgICAgICAgICAgIHtzaG93VGVtcGxhdGVEaWFsb2cgPyAoXG4gICAgICAgICAgICAgICAgPFRlbXBsYXRlRGlhbG9nIG9uVGVtcGxhdGU9e29uVGVtcGxhdGV9IG9uQ2xvc2U9e29uRGlhbG9nQ2xvc2V9IC8+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIDxJY29uQnV0dG9uIG9uQ2xpY2s9e2FkZFRlbXBsYXRlfSBpY29uPXs8QWRkSWNvbiAvPn0gLz5cbiAgICAgICAgPC9BZGRUZW1wbGF0ZUljb25Db250YWluZXI+XG4gICAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import React, { useState } from "react";
+import { TemplateDialog } from "./TemplateDialog.js";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as AddCircleIcon } from "@webiny/icons/add_circle_outline.svg";
+import { Button, Text, IconButton, Link, Tooltip } from "@webiny/admin-ui";
 function useAddTemplate(params) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showTemplateDialog = _useState2[0],
-    setShowTemplateDialog = _useState2[1];
-  var addTemplate = function addTemplate() {
+  const [showTemplateDialog, setShowTemplateDialog] = useState(false);
+  const addTemplate = () => {
     setShowTemplateDialog(true);
   };
-  var onTemplate = function onTemplate(template) {
+  const onTemplate = template => {
     params.onTemplate(template);
   };
-  var onDialogClose = function onDialogClose() {
+  const onDialogClose = () => {
     setShowTemplateDialog(false);
   };
   return {
-    addTemplate: addTemplate,
-    onTemplate: onTemplate,
-    onDialogClose: onDialogClose,
-    showTemplateDialog: showTemplateDialog
+    addTemplate,
+    onTemplate,
+    onDialogClose,
+    showTemplateDialog
   };
 }
-var AddTemplateButton = exports.AddTemplateButton = function AddTemplateButton(props) {
-  var _useAddTemplate = useAddTemplate({
-      onTemplate: props.onTemplate
-    }),
-    addTemplate = _useAddTemplate.addTemplate,
-    onTemplate = _useAddTemplate.onTemplate,
-    showTemplateDialog = _useAddTemplate.showTemplateDialog,
-    onDialogClose = _useAddTemplate.onDialogClose;
-  return /*#__PURE__*/_react.default.createElement(AddTemplateButtonContainer, {
-    z: 2
-  }, showTemplateDialog ? /*#__PURE__*/_react.default.createElement(_TemplateDialog.TemplateDialog, {
+export const AddTemplateButton = props => {
+  const {
+    addTemplate,
+    onTemplate,
+    showTemplateDialog,
+    onDialogClose
+  } = useAddTemplate({
+    onTemplate: props.onTemplate
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col px-xl pt-xl pb-lg gap-sm border-sm border-neutral-muted rounded"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-full text-center"
+  }, showTemplateDialog ? /*#__PURE__*/React.createElement(TemplateDialog, {
     onTemplate: onTemplate,
     onClose: onDialogClose
-  }) : null, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
-    onClick: addTemplate
-  }, "+ Add a template"), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_info.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "caption"
-  }, "Click here to learn how templates and dynamic zones work")));
+  }) : null, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    variant: "secondary",
+    onClick: addTemplate,
+    text: "Add template",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center gap-xs w-full mx-auto text-center"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    className: "text-neutral-strong"
+  }, /*#__PURE__*/React.createElement(Link, {
+    to: "http://webiny.link/admin/how-to-use/dynamic-zones",
+    target: "_blank"
+  }, "Learn how"), " ", "templates and dynamic zones work.")));
 };
-var AddTemplateIcon = exports.AddTemplateIcon = function AddTemplateIcon(props) {
-  var _useAddTemplate2 = useAddTemplate({
-      onTemplate: props.onTemplate
-    }),
-    addTemplate = _useAddTemplate2.addTemplate,
-    onTemplate = _useAddTemplate2.onTemplate,
-    showTemplateDialog = _useAddTemplate2.showTemplateDialog,
-    onDialogClose = _useAddTemplate2.onDialogClose;
-  return /*#__PURE__*/_react.default.createElement(AddTemplateIconContainer, null, showTemplateDialog ? /*#__PURE__*/_react.default.createElement(_TemplateDialog.TemplateDialog, {
+export const AddTemplateIcon = props => {
+  const {
+    addTemplate,
+    onTemplate,
+    showTemplateDialog,
+    onDialogClose
+  } = useAddTemplate({
+    onTemplate: props.onTemplate
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full text-center mt-md"
+  }, showTemplateDialog ? /*#__PURE__*/React.createElement(TemplateDialog, {
     onTemplate: onTemplate,
     onClose: onDialogClose
-  }) : null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    onClick: addTemplate,
-    icon: /*#__PURE__*/_react.default.createElement(_add_circle_outline.ReactComponent, null)
+  }) : null, /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Add template",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      onClick: addTemplate,
+      icon: /*#__PURE__*/React.createElement(AddCircleIcon, null),
+      size: "lg",
+      variant: "ghost"
+    })
   }));
 };
 

package/admin/plugins/fields/dynamicZone/AddTemplate.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Button","_TemplateDialog","_Typography","_info","_add_circle_outline","_Elevation","_EMOTION_STRINGIFIED_CSS_ERROR__","AddTemplateButtonContainer","_base","default","Elevation","process","env","NODE_ENV","target","label","name","styles","map","toString","AddTemplateIconContainer","Info","useAddTemplate","params","_useState","useState","_useState2","_slicedToArray2","showTemplateDialog","setShowTemplateDialog","addTemplate","onTemplate","template","onDialogClose","AddTemplateButton","exports","props","_useAddTemplate","createElement","z","TemplateDialog","onClose","ButtonSecondary","onClick","ReactComponent","Typography","use","AddTemplateIcon","_useAddTemplate2","IconButton","icon"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { ButtonSecondary, IconButton } from \"@webiny/ui/Button\";\nimport { TemplateDialog } from \"./TemplateDialog\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as InfoIcon } from \"@material-design-icons/svg/outlined/info.svg\";\nimport { ReactComponent as AddIcon } from \"@material-design-icons/svg/round/add_circle_outline.svg\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\n\nconst AddTemplateButtonContainer = styled(Elevation)`\n    padding: 25px 0 20px;\n    text-align: center;\n`;\n\n/**\n * This hacking is needed to position the button exactly in the middle of available area and not stretch the parent element.\n */\nconst AddTemplateIconContainer = styled.div`\n    text-align: center;\n    height: 36px;\n\n    > button {\n        margin-left: -24px;\n        position: absolute;\n    }\n`;\n\nconst Info = styled.div`\n    margin-top: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    > svg {\n        width: 20px;\n        margin-right: 5px;\n    }\n`;\n\ninterface AddTemplateProps {\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showTemplateDialog, setShowTemplateDialog] = useState(false);\n\n    const addTemplate = () => {\n        setShowTemplateDialog(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate(template);\n    };\n\n    const onDialogClose = () => {\n        setShowTemplateDialog(false);\n    };\n\n    return {\n        addTemplate,\n        onTemplate,\n        onDialogClose,\n        showTemplateDialog\n    };\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { addTemplate, onTemplate, showTemplateDialog, onDialogClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddTemplateButtonContainer z={2}>\n            {showTemplateDialog ? (\n                <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />\n            ) : null}\n            <ButtonSecondary onClick={addTemplate}>+ Add a template</ButtonSecondary>\n            <Info>\n                <InfoIcon />\n                <Typography use={\"caption\"}>\n                    Click here to learn how templates and dynamic zones work\n                </Typography>\n            </Info>\n        </AddTemplateButtonContainer>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { addTemplate, onTemplate, showTemplateDialog, onDialogClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddTemplateIconContainer>\n            {showTemplateDialog ? (\n                <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />\n            ) : null}\n            <IconButton onClick={addTemplate} icon={<AddIcon />} />\n        </AddTemplateIconContainer>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","TemplateDialog","ReactComponent","AddIcon","AddCircleIcon","Button","Text","IconButton","Link","Tooltip","useAddTemplate","params","showTemplateDialog","setShowTemplateDialog","addTemplate","onTemplate","template","onDialogClose","AddTemplateButton","props","createElement","className","onClose","size","variant","onClick","text","icon","to","target","AddTemplateIcon","content","trigger"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { TemplateDialog } from \"./TemplateDialog.js\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as AddCircleIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { Button, Text, IconButton, Link, Tooltip } from \"@webiny/admin-ui\";\n\ninterface AddTemplateProps {\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showTemplateDialog, setShowTemplateDialog] = useState(false);\n\n    const addTemplate = () => {\n        setShowTemplateDialog(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate(template);\n    };\n\n    const onDialogClose = () => {\n        setShowTemplateDialog(false);\n    };\n\n    return {\n        addTemplate,\n        onTemplate,\n        onDialogClose,\n        showTemplateDialog\n    };\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { addTemplate, onTemplate, showTemplateDialog, onDialogClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <div\n            className={\n                \"flex flex-col px-xl pt-xl pb-lg gap-sm border-sm border-neutral-muted rounded\"\n            }\n        >\n            <div className={\"w-full text-center\"}>\n                {showTemplateDialog ? (\n                    <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />\n                ) : null}\n                <Button\n                    size={\"sm\"}\n                    variant={\"secondary\"}\n                    onClick={addTemplate}\n                    text={\"Add template\"}\n                    icon={<AddIcon />}\n                />\n            </div>\n            <div className={\"flex items-center justify-center gap-xs w-full mx-auto text-center\"}>\n                <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                    <Link\n                        to={\"http://webiny.link/admin/how-to-use/dynamic-zones\"}\n                        target={\"_blank\"}\n                    >\n                        Learn how\n                    </Link>{\" \"}\n                    templates and dynamic zones work.\n                </Text>\n            </div>\n        </div>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { addTemplate, onTemplate, showTemplateDialog, onDialogClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <div className={\"w-full text-center mt-md\"}>\n            {showTemplateDialog ? (\n                <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />\n            ) : null}\n            <Tooltip\n                content={\"Add template\"}\n                trigger={\n                    <IconButton\n                        onClick={addTemplate}\n                        icon={<AddCircleIcon />}\n                        size={\"lg\"}\n                        variant={\"ghost\"}\n                    />\n                }\n            />\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fields/dynamicZone/DynamicZone.js

@@ -1,59 +1,49 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DynamicZone = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Accordion = require("@webiny/ui/Accordion");
-var _AddTemplate = require("./AddTemplate");
-var _DynamicZoneTemplate = require("./DynamicZoneTemplate");
-var _hooks = require("../../../hooks");
+import React, { useRef, useEffect } from "react";
+import { Accordion } from "@webiny/ui/Accordion/index.js";
+import { AddTemplateIcon, AddTemplateButton } from "./AddTemplate.js";
+import { DynamicZoneTemplate } from "./DynamicZoneTemplate.js";
+import { useModelField, useModelFieldEditor } from "../../../hooks/index.js";
 function updateOrCreateTemplate(templates, template) {
-  var templateIndex = templates.findIndex(function (tpl) {
-    return tpl.id === template.id;
-  });
+  const templateIndex = templates.findIndex(tpl => tpl.id === template.id);
   if (templateIndex > -1) {
-    return [].concat((0, _toConsumableArray2.default)(templates.slice(0, templateIndex)), [template], (0, _toConsumableArray2.default)(templates.slice(templateIndex + 1)));
+    return [...templates.slice(0, templateIndex), template, ...templates.slice(templateIndex + 1)];
   }
-  return [].concat((0, _toConsumableArray2.default)(templates), [template]);
+  return [...templates, template];
 }
-var DynamicZone = exports.DynamicZone = function DynamicZone() {
-  var _useModelField = (0, _hooks.useModelField)(),
-    field = _useModelField.field;
-  var _useModelFieldEditor = (0, _hooks.useModelFieldEditor)(),
-    updateField = _useModelFieldEditor.updateField;
-  var newTemplateId = (0, _react.useRef)(undefined);
-  var templates = field.settings?.templates || [];
-  var onTemplate = function onTemplate(template) {
-    var templates = field.settings?.templates || [];
+export const DynamicZone = () => {
+  const {
+    field
+  } = useModelField();
+  const {
+    updateField
+  } = useModelFieldEditor();
+  const newTemplateId = useRef(undefined);
+  const templates = field.settings?.templates || [];
+  const onTemplate = template => {
+    const templates = field.settings?.templates || [];
     newTemplateId.current = template.id;
-    updateField((0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
-      settings: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field.settings || {}), {}, {
+    updateField({
+      ...field,
+      settings: {
+        ...(field.settings || {}),
         templates: updateOrCreateTemplate(templates, template)
-      })
-    }));
+      }
+    });
   };
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     // We only want to open the accordion item on first mount of a new template.
     newTemplateId.current = undefined;
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, templates.length ? /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, templates.map(function (template, index) {
-    return /*#__PURE__*/_react.default.createElement(_DynamicZoneTemplate.DynamicZoneTemplate, {
-      key: template.id,
-      open: template.id === newTemplateId.current,
-      index: index,
-      field: field,
-      template: template,
-      onChange: updateField
-    });
-  })) : null, templates.length ? /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateIcon, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, templates.length ? /*#__PURE__*/React.createElement(Accordion, null, templates.map((template, index) => /*#__PURE__*/React.createElement(DynamicZoneTemplate, {
+    key: template.id,
+    open: template.id === newTemplateId.current,
+    index: index,
+    field: field,
+    template: template,
+    onChange: updateField
+  }))) : null, templates.length ? /*#__PURE__*/React.createElement(AddTemplateIcon, {
     onTemplate: onTemplate
-  }) : /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateButton, {
+  }) : /*#__PURE__*/React.createElement(AddTemplateButton, {
     onTemplate: onTemplate
   }));
 };