@webiny/app-headless-cms 6.3.0 → 6.4.0-beta.0

package/admin/components/Droppable.js

@@ -1,46 +1,32 @@
-import * as React from "react";
 import { useDrop } from "react-dnd";
-const DroppableComponent = props => {
-  const {
-    children,
-    onDrop,
-    isVisible = () => true
-  } = props;
-  const [{
-    item,
-    isOver
-  }, drop] = useDrop({
-    accept: "element",
-    collect: monitor => ({
-      isOver: monitor.isOver() && monitor.isOver({
-        shallow: true
-      }),
-      item: monitor.getItem()
-    }),
-    drop(item, monitor) {
-      if (typeof props.isDroppable === "function" && !props.isDroppable(item)) {
-        return;
-      }
-      if (typeof onDrop === "function") {
-        return onDrop(monitor.getItem());
-      }
-    }
-  });
-  if (item && !isVisible(item)) {
-    return null;
-  }
-  let isDroppable = true;
-  if (item) {
-    isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;
-  }
-  return children({
-    isDragging: Boolean(item),
-    isOver,
-    isDroppable,
-    item,
-    drop
-  });
+import * as __rspack_external_react from "react";
+const DroppableComponent = (props)=>{
+    const { children, onDrop, isVisible = ()=>true } = props;
+    const [{ item, isOver }, drop] = useDrop({
+        accept: "element",
+        collect: (monitor)=>({
+                isOver: monitor.isOver() && monitor.isOver({
+                    shallow: true
+                }),
+                item: monitor.getItem()
+            }),
+        drop (item, monitor) {
+            if ("function" == typeof props.isDroppable && !props.isDroppable(item)) return;
+            if ("function" == typeof onDrop) return onDrop(monitor.getItem());
+        }
+    });
+    if (item && !isVisible(item)) return null;
+    let isDroppable = true;
+    if (item) isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;
+    return children({
+        isDragging: Boolean(item),
+        isOver,
+        isDroppable,
+        item,
+        drop
+    });
 };
-export const Droppable = /*#__PURE__*/React.memo(DroppableComponent);
+const Droppable = /*#__PURE__*/ __rspack_external_react.memo(DroppableComponent);
+export { Droppable };
 
 //# sourceMappingURL=Droppable.js.map

package/admin/components/Droppable.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDrop","DroppableComponent","props","children","onDrop","isVisible","item","isOver","drop","accept","collect","monitor","shallow","getItem","isDroppable","isDragging","Boolean","Droppable","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ConnectDropTarget } from \"react-dnd\";\nimport { useDrop } from \"react-dnd\";\nimport type { DragSource } from \"~/types.js\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: DragSource[\"type\"];\n    item: DragSource;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: DragSource) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nexport type DragObject = {\n    item: IsVisibleParams;\n    isOver: boolean;\n};\n\nconst DroppableComponent = (props: DroppableProps) => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop<DragSource, void, DragObject>({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.ComponentType<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,OAAO,QAAQ,WAAW;AAuCnC,MAAMC,kBAAkB,GAAIC,KAAqB,IAAK;EAClD,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,SAAS,GAAGA,CAAA,KAAM;EAAK,CAAC,GAAGH,KAAK;EAE1D,MAAM,CAAC;IAAEI,IAAI;IAAEC;EAAO,CAAC,EAAEC,IAAI,CAAC,GAAGR,OAAO,CAA+B;IACnES,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAEC,OAAO,KAAK;MACjBJ,MAAM,EAAEI,OAAO,CAACJ,MAAM,CAAC,CAAC,IAAII,OAAO,CAACJ,MAAM,CAAC;QAAEK,OAAO,EAAE;MAAK,CAAC,CAAC;MAC7DN,IAAI,EAAEK,OAAO,CAACE,OAAO,CAAC;IAC1B,CAAC,CAAC;IACFL,IAAIA,CAACF,IAAI,EAAEK,OAAO,EAAE;MAChB,IAAI,OAAOT,KAAK,CAACY,WAAW,KAAK,UAAU,IAAI,CAACZ,KAAK,CAACY,WAAW,CAACR,IAAI,CAAC,EAAE;QACrE;MACJ;MAEA,IAAI,OAAOF,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM,CAACO,OAAO,CAACE,OAAO,CAAC,CAAC,CAAC;MACpC;IACJ;EACJ,CAAC,CAAC;EAEF,IAAIP,IAAI,IAAI,CAACD,SAAS,CAACC,IAAI,CAAC,EAAE;IAC1B,OAAO,IAAI;EACf;EAEA,IAAIQ,WAAW,GAAG,IAAI;EACtB,IAAIR,IAAI,EAAE;IACNQ,WAAW,GAAGZ,KAAK,CAACY,WAAW,GAAGZ,KAAK,CAACY,WAAW,CAACR,IAAI,CAAC,GAAGC,MAAM;EACtE;EAEA,OAAOJ,QAAQ,CAAC;IAAEY,UAAU,EAAEC,OAAO,CAACV,IAAI,CAAC;IAAEC,MAAM;IAAEO,WAAW;IAAER,IAAI;IAAEE;EAAK,CAAC,CAAC;AACnF,CAAC;AAED,OAAO,MAAMS,SAA8C,gBAAGlB,KAAK,CAACmB,IAAI,CAACjB,kBAAkB,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/components/Droppable.js","sources":["../../../src/admin/components/Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ConnectDropTarget } from \"react-dnd\";\nimport { useDrop } from \"react-dnd\";\nimport type { DragSource } from \"~/types.js\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: DragSource[\"type\"];\n    item: DragSource;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: DragSource) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nexport type DragObject = {\n    item: IsVisibleParams;\n    isOver: boolean;\n};\n\nconst DroppableComponent = (props: DroppableProps) => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop<DragSource, void, DragObject>({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.ComponentType<DroppableProps> = React.memo(DroppableComponent);\n"],"names":["DroppableComponent","props","children","onDrop","isVisible","item","isOver","drop","useDrop","monitor","isDroppable","Boolean","Droppable","React"],"mappings":";;AAyCA,MAAMA,qBAAqB,CAACC;IACxB,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,IAAM,IAAI,EAAE,GAAGH;IAErD,MAAM,CAAC,EAAEI,IAAI,EAAEC,MAAM,EAAE,EAAEC,KAAK,GAAGC,QAAsC;QACnE,QAAQ;QACR,SAASC,CAAAA,UAAY;gBACjB,QAAQA,QAAQ,MAAM,MAAMA,QAAQ,MAAM,CAAC;oBAAE,SAAS;gBAAK;gBAC3D,MAAMA,QAAQ,OAAO;YACzB;QACA,MAAKJ,IAAI,EAAEI,OAAO;YACd,IAAI,AAA6B,cAA7B,OAAOR,MAAM,WAAW,IAAmB,CAACA,MAAM,WAAW,CAACI,OAC9D;YAGJ,IAAI,AAAkB,cAAlB,OAAOF,QACP,OAAOA,OAAOM,QAAQ,OAAO;QAErC;IACJ;IAEA,IAAIJ,QAAQ,CAACD,UAAUC,OACnB,OAAO;IAGX,IAAIK,cAAc;IAClB,IAAIL,MACAK,cAAcT,MAAM,WAAW,GAAGA,MAAM,WAAW,CAACI,QAAQC;IAGhE,OAAOJ,SAAS;QAAE,YAAYS,QAAQN;QAAOC;QAAQI;QAAaL;QAAME;IAAK;AACjF;AAEO,MAAMK,YAASA,WAAAA,GAAwCC,wBAAAA,IAAU,CAACb"}

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/LegacyRichTextInput.js

@@ -1,14 +1,13 @@
-import React from "react";
-import { Alert } from "@webiny/ui/Alert/index.js";
-export const LegacyRichTextInput = () => {
-  return /*#__PURE__*/React.createElement(Alert, {
-    title: "You have legacy editor enabled",
-    type: "info"
-  }, "Your project has been upgraded from an older Webiny version, with EditorJS as the default rich text editor. We recommend switching to the new Lexical rich text editor, where possible.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Read more about this in our", " ", /*#__PURE__*/React.createElement("a", {
-    href: "https://webiny.link/hcms-legacy-rte-support",
-    rel: "noreferrer",
-    target: "_blank"
-  }, "upgrade guide"), ".");
-};
+import react from "react";
+import { Alert } from "@webiny/admin-ui";
+const LegacyRichTextInput = ()=>/*#__PURE__*/ react.createElement(Alert, {
+        type: "info",
+        variant: "subtle"
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("strong", null, "You have legacy editor enabled")), /*#__PURE__*/ react.createElement("div", null, "Your project has been upgraded from an older Webiny version, with EditorJS as the default rich text editor. We recommend switching to the new Lexical rich text editor, where possible.", /*#__PURE__*/ react.createElement("br", null), /*#__PURE__*/ react.createElement("br", null), "Read more about this in our", " ", /*#__PURE__*/ react.createElement("a", {
+        href: "https://webiny.link/hcms-legacy-rte-support",
+        rel: "noreferrer",
+        target: "_blank"
+    }, "upgrade guide"), "."));
+export { LegacyRichTextInput };
 
 //# sourceMappingURL=LegacyRichTextInput.js.map

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/LegacyRichTextInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Alert","LegacyRichTextInput","createElement","title","type","href","rel","target"],"sources":["LegacyRichTextInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/ui/Alert/index.js\";\n\nexport const LegacyRichTextInput = () => {\n    return (\n        <Alert title={\"You have legacy editor enabled\"} type={\"info\"}>\n            Your project has been upgraded from an older Webiny version, with EditorJS as the\n            default rich text editor. We recommend switching to the new Lexical rich text editor,\n            where possible.\n            <br />\n            <br />\n            Read more about this in our{\" \"}\n            <a\n                href={\"https://webiny.link/hcms-legacy-rte-support\"}\n                rel=\"noreferrer\"\n                target={\"_blank\"}\n            >\n                upgrade guide\n            </a>\n            .\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,2BAA2B;AAEjD,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,KAAK,EAAE,gCAAiC;IAACC,IAAI,EAAE;EAAO,GAAC,yLAI1D,eAAAL,KAAA,CAAAG,aAAA,WAAK,CAAC,eACNH,KAAA,CAAAG,aAAA,WAAK,CAAC,+BACqB,EAAC,GAAG,eAC/BH,KAAA,CAAAG,aAAA;IACIG,IAAI,EAAE,6CAA8C;IACpDC,GAAG,EAAC,YAAY;IAChBC,MAAM,EAAE;EAAS,GACpB,eAEE,CAAC,KAED,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/AppearanceTab/LegacyRichTextInput.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/LegacyRichTextInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/admin-ui\";\n\nexport const LegacyRichTextInput = () => {\n    return (\n        <Alert type={\"info\"} variant={\"subtle\"}>\n            <div>\n                <strong>You have legacy editor enabled</strong>\n            </div>\n            <div>\n                Your project has been upgraded from an older Webiny version, with EditorJS as the\n                default rich text editor. We recommend switching to the new Lexical rich text\n                editor, where possible.\n                <br />\n                <br />\n                Read more about this in our{\" \"}\n                <a\n                    href={\"https://webiny.link/hcms-legacy-rte-support\"}\n                    rel=\"noreferrer\"\n                    target={\"_blank\"}\n                >\n                    upgrade guide\n                </a>\n                .\n            </div>\n        </Alert>\n    );\n};\n"],"names":["LegacyRichTextInput","Alert"],"mappings":";;AAGO,MAAMA,sBAAsB,IACxB,WAAP,GACI,oBAACC,OAAKA;QAAC,MAAM;QAAQ,SAAS;qBAC1B,oBAAC,2BACG,oBAAC,gBAAO,kDAEZ,oBAAC,aAAI,yMAID,oBAAC,2BACD,oBAAC,aAAK,+BACsB,mBAC5B,oBAAC;QACG,MAAM;QACN,KAAI;QACJ,QAAQ;OACX,kBAEG"}

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.js

@@ -1,28 +1,21 @@
-import React from "react";
+import react from "react";
 import { useModelField } from "../../../ModelFieldProvider/index.js";
 import { Grid, Heading, Text } from "@webiny/admin-ui";
-export const RendererOptions = ({
-  plugin
-}) => {
-  const {
-    field
-  } = useModelField();
-  if (!plugin || !plugin.renderer.renderSettings) {
-    return null;
-  }
-  const settings = plugin.renderer.renderSettings({
-    field
-  });
-  if (!settings) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Heading, {
-    level: 5
-  }, "Renderer settings"), /*#__PURE__*/React.createElement(Text, {
-    size: "sm"
-  }, "Configure additional settings for the selected field renderer.")), settings);
+const RendererOptions = ({ plugin })=>{
+    const { field } = useModelField();
+    if (!plugin || !plugin.renderer.renderSettings) return null;
+    const settings = plugin.renderer.renderSettings({
+        field
+    });
+    if (!settings) return null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 5
+    }, "Renderer settings"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Configure additional settings for the selected field renderer.")), settings);
 };
+export { RendererOptions };
 
 //# sourceMappingURL=RendererOptions.js.map

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useModelField","Grid","Heading","Text","RendererOptions","plugin","field","renderer","renderSettings","settings","createElement","Fragment","Column","span","level","size"],"sources":["RendererOptions.tsx"],"sourcesContent":["import React from \"react\";\nimport type { CmsModelFieldRendererPlugin } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { Grid, Heading, Text } from \"@webiny/admin-ui\";\n\ninterface RendererOptionsProps {\n    plugin: CmsModelFieldRendererPlugin | undefined;\n}\n\nexport const RendererOptions = ({ plugin }: RendererOptionsProps) => {\n    const { field } = useModelField();\n    if (!plugin || !plugin.renderer.renderSettings) {\n        return null;\n    }\n\n    const settings = plugin.renderer.renderSettings({ field });\n\n    if (!settings) {\n        return null;\n    }\n\n    return (\n        <>\n            <Grid.Column span={12}>\n                <Heading level={5}>Renderer settings</Heading>\n                <Text size={\"sm\"}>\n                    Configure additional settings for the selected field renderer.\n                </Text>\n            </Grid.Column>\n            {settings}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,aAAa;AACtB,SAASC,IAAI,EAAEC,OAAO,EAAEC,IAAI,QAAQ,kBAAkB;AAMtD,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAA6B,CAAC,KAAK;EACjE,MAAM;IAAEC;EAAM,CAAC,GAAGN,aAAa,CAAC,CAAC;EACjC,IAAI,CAACK,MAAM,IAAI,CAACA,MAAM,CAACE,QAAQ,CAACC,cAAc,EAAE;IAC5C,OAAO,IAAI;EACf;EAEA,MAAMC,QAAQ,GAAGJ,MAAM,CAACE,QAAQ,CAACC,cAAc,CAAC;IAAEF;EAAM,CAAC,CAAC;EAE1D,IAAI,CAACG,QAAQ,EAAE;IACX,OAAO,IAAI;EACf;EAEA,oBACIV,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAY,QAAA,qBACIZ,KAAA,CAAAW,aAAA,CAACT,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAW,aAAA,CAACR,OAAO;IAACY,KAAK,EAAE;EAAE,GAAC,mBAA0B,CAAC,eAC9Cf,KAAA,CAAAW,aAAA,CAACP,IAAI;IAACY,IAAI,EAAE;EAAK,GAAC,gEAEZ,CACG,CAAC,EACbN,QACH,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.tsx"],"sourcesContent":["import React from \"react\";\nimport type { CmsModelFieldRendererPlugin } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { Grid, Heading, Text } from \"@webiny/admin-ui\";\n\ninterface RendererOptionsProps {\n    plugin: CmsModelFieldRendererPlugin | undefined;\n}\n\nexport const RendererOptions = ({ plugin }: RendererOptionsProps) => {\n    const { field } = useModelField();\n    if (!plugin || !plugin.renderer.renderSettings) {\n        return null;\n    }\n\n    const settings = plugin.renderer.renderSettings({ field });\n\n    if (!settings) {\n        return null;\n    }\n\n    return (\n        <>\n            <Grid.Column span={12}>\n                <Heading level={5}>Renderer settings</Heading>\n                <Text size={\"sm\"}>\n                    Configure additional settings for the selected field renderer.\n                </Text>\n            </Grid.Column>\n            {settings}\n        </>\n    );\n};\n"],"names":["RendererOptions","plugin","field","useModelField","settings","Grid","Heading","Text"],"mappings":";;;AASO,MAAMA,kBAAkB,CAAC,EAAEC,MAAM,EAAwB;IAC5D,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,IAAI,CAACF,UAAU,CAACA,OAAO,QAAQ,CAAC,cAAc,EAC1C,OAAO;IAGX,MAAMG,WAAWH,OAAO,QAAQ,CAAC,cAAc,CAAC;QAAEC;IAAM;IAExD,IAAI,CAACE,UACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAACC,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,SAAOA;QAAC,OAAO;OAAG,oCACnB,oBAACC,MAAIA;QAAC,MAAM;OAAM,oEAIrBH;AAGb"}

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.js

@@ -1,5 +1,4 @@
-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)."; }
-import React, { useEffect } from "react";
+import react, { useEffect } from "react";
 import { i18n } from "@webiny/app/i18n/index.js";
 import { css } from "@emotion/css";
 import { validation } from "@webiny/validation";
@@ -7,80 +6,69 @@ import { useBind } from "@webiny/form";
 import { RendererOptions } from "./AppearanceTab/RendererOptions.js";
 import { useRendererPlugins } from "./useRendererPlugins.js";
 import { useModelField } from "../../ModelFieldProvider/index.js";
-import { RadioGroup, Text, Grid, Heading } from "@webiny/admin-ui";
+import { Grid, Heading, RadioGroup, Text } from "@webiny/admin-ui";
 const t = i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
 const style = {
-  noComponentsMessage: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
-    name: "4d8zrc",
-    styles: "text-align:center;padding:25px"
-  } : {
-    name: "16icgk8-noComponentsMessage",
-    styles: "text-align:center;padding:25px;label:noComponentsMessage;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFwcGVhcmFuY2VUYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWF5QiIsImZpbGUiOiJBcHBlYXJhbmNlVGFiLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGkxOG4gfSBmcm9tIFwiQHdlYmlueS9hcHAvaTE4bi9pbmRleC5qc1wiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdmFsaWRhdGlvbiB9IGZyb20gXCJAd2ViaW55L3ZhbGlkYXRpb25cIjtcbmltcG9ydCB7IHVzZUJpbmQgfSBmcm9tIFwiQHdlYmlueS9mb3JtXCI7XG5pbXBvcnQgeyBSZW5kZXJlck9wdGlvbnMgfSBmcm9tIFwiLi9BcHBlYXJhbmNlVGFiL1JlbmRlcmVyT3B0aW9ucy5qc1wiO1xuaW1wb3J0IHsgdXNlUmVuZGVyZXJQbHVnaW5zIH0gZnJvbSBcIi4vdXNlUmVuZGVyZXJQbHVnaW5zLmpzXCI7XG5pbXBvcnQgeyB1c2VNb2RlbEZpZWxkIH0gZnJvbSBcIn4vYWRtaW4vY29tcG9uZW50cy9Nb2RlbEZpZWxkUHJvdmlkZXIvaW5kZXguanNcIjtcbmltcG9ydCB7IFJhZGlvR3JvdXAsIFRleHQsIEdyaWQsIEhlYWRpbmcgfSBmcm9tIFwiQHdlYmlueS9hZG1pbi11aVwiO1xuXG5jb25zdCB0ID0gaTE4bi5ucyhcImFwcC1oZWFkbGVzcy1jbXMvYWRtaW4vY29udGVudC1tb2RlbC1lZGl0b3IvdGFicy9hcHBlYXJhbmNlLXRhYlwiKTtcblxuY29uc3Qgc3R5bGUgPSB7XG4gICAgbm9Db21wb25lbnRzTWVzc2FnZTogY3NzKHtcbiAgICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgICAgICBwYWRkaW5nOiAyNVxuICAgIH0pLFxuICAgIHJhZGlvQ29udGFpbmVyOiBjc3Moe1xuICAgICAgICBtYXJnaW5Cb3R0b206IDEwLFxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIlxuICAgIH0pXG59O1xuXG5jb25zdCBBcHBlYXJhbmNlVGFiID0gKCkgPT4ge1xuICAgIGNvbnN0IHJlbmRlcmVycyA9IHVzZVJlbmRlcmVyUGx1Z2lucygpO1xuICAgIGNvbnN0IHsgZmllbGQgfSA9IHVzZU1vZGVsRmllbGQoKTtcblxuICAgIGNvbnN0IHJlbmRlcmVyTmFtZSA9IHVzZUJpbmQoe1xuICAgICAgICBuYW1lOiBcInJlbmRlcmVyLm5hbWVcIixcbiAgICAgICAgdmFsaWRhdGU6IHZhbGlkYXRpb24uY3JlYXRlKFwicmVxdWlyZWRcIilcbiAgICB9KTtcblxuICAgIGNvbnN0IHNlbGVjdGVkUGx1Z2luID0gcmVuZGVyZXJOYW1lLnZhbHVlXG4gICAgICAgID8gcmVuZGVyZXJzLmZpbmQocGwgPT4gcGwucmVuZGVyZXIucmVuZGVyZXJOYW1lID09PSByZW5kZXJlck5hbWUudmFsdWUpXG4gICAgICAgIDogdW5kZWZpbmVkO1xuXG4gICAgaWYgKHJlbmRlcmVycy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxHcmlkPlxuICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtblxuICAgICAgICAgICAgICAgICAgICBzcGFuPXsxMn1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtzdHlsZS5ub0NvbXBvbmVudHNNZXNzYWdlfVxuICAgICAgICAgICAgICAgID57dGBUaGVyZSBhcmUgbm8gY29tcG9uZW50cyB0aGF0IGNhbiByZW5kZXIgdGhpcyBmaWVsZC5gfTwvR3JpZC5Db2x1bW4+XG4gICAgICAgICAgICA8L0dyaWQ+XG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgLy8gSWYgdGhlIGN1cnJlbnRseSBzZWxlY3RlZCByZW5kZXIgcGx1Z2luIGlzIG5vIGxvbmdlciBhdmFpbGFibGUsIHNlbGVjdCB0aGUgZmlyc3QgYXZhaWxhYmxlIG9uZS5cbiAgICAgICAgaWYgKHNlbGVjdGVkUGx1Z2luKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBpZiAocmVuZGVyZXJzWzBdKSB7XG4gICAgICAgICAgICByZW5kZXJlck5hbWUub25DaGFuZ2UocmVuZGVyZXJzWzBdLnJlbmRlcmVyLnJlbmRlcmVyTmFtZSk7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBjb25zb2xlLmluZm8oYE5vIHJlbmRlcmVycyBmb3IgZmllbGQgJHtmaWVsZC5maWVsZElkfSBmb3VuZC5gLCBmaWVsZCk7XG4gICAgfSwgW2ZpZWxkLmlkLCBmaWVsZC5saXN0LCBmaWVsZC5wcmVkZWZpbmVkVmFsdWVzPy5lbmFibGVkLCBzZWxlY3RlZFBsdWdpbl0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPD5cbiAgICAgICAgICAgIDxHcmlkPlxuICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtbiBzcGFuPXsxMn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8SGVhZGluZyBsZXZlbD17NX0+RmllbGQgcmVuZGVyZXI8L0hlYWRpbmc+XG4gICAgICAgICAgICAgICAgICAgICAgICA8VGV4dCBzaXplPXtcInNtXCJ9PkNob29zZSBhIGNvbXBvbmVudCB0aGF0IHdpbGwgcmVuZGVyIHRoZSBmaWVsZC48L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgIDwvR3JpZC5Db2x1bW4+XG4gICAgICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtbiBzcGFuPXsxMn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJtYi14bFwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8UmFkaW9Hcm91cFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7Li4ucmVuZGVyZXJOYW1lfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpdGVtcz17cmVuZGVyZXJzLm1hcChpdGVtID0+ICh7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZDogaXRlbS5yZW5kZXJlci5yZW5kZXJlck5hbWUsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogaXRlbS5yZW5kZXJlci5yZW5kZXJlck5hbWUsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBsYWJlbDogKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUZXh0IGFzPXtcImRpdlwifSBzaXplPXtcIm1kXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2l0ZW0ucmVuZGVyZXIubmFtZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXM9e1wiZGl2XCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzaXplPXtcInNtXCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e1widGV4dC1zbSB0ZXh0LW5ldXRyYWwtc3Ryb25nIHRleHQtd3JhcFwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7aXRlbS5yZW5kZXJlci5kZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KSl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgICAgICAgICA8UmVuZGVyZXJPcHRpb25zIHBsdWdpbj17c2VsZWN0ZWRQbHVnaW59IC8+XG4gICAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICA8L0dyaWQ+XG4gICAgICAgIDwvPlxuICAgICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBcHBlYXJhbmNlVGFiO1xuIl19 */",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }),
-  radioContainer: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
-    name: "qpyps2",
-    styles: "margin-bottom:10px;display:flex"
-  } : {
-    name: "4btape-radioContainer",
-    styles: "margin-bottom:10px;display:flex;label:radioContainer;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFwcGVhcmFuY2VUYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCb0IiLCJmaWxlIjoiQXBwZWFyYW5jZVRhYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBpMThuIH0gZnJvbSBcIkB3ZWJpbnkvYXBwL2kxOG4vaW5kZXguanNcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IHZhbGlkYXRpb24gfSBmcm9tIFwiQHdlYmlueS92YWxpZGF0aW9uXCI7XG5pbXBvcnQgeyB1c2VCaW5kIH0gZnJvbSBcIkB3ZWJpbnkvZm9ybVwiO1xuaW1wb3J0IHsgUmVuZGVyZXJPcHRpb25zIH0gZnJvbSBcIi4vQXBwZWFyYW5jZVRhYi9SZW5kZXJlck9wdGlvbnMuanNcIjtcbmltcG9ydCB7IHVzZVJlbmRlcmVyUGx1Z2lucyB9IGZyb20gXCIuL3VzZVJlbmRlcmVyUGx1Z2lucy5qc1wiO1xuaW1wb3J0IHsgdXNlTW9kZWxGaWVsZCB9IGZyb20gXCJ+L2FkbWluL2NvbXBvbmVudHMvTW9kZWxGaWVsZFByb3ZpZGVyL2luZGV4LmpzXCI7XG5pbXBvcnQgeyBSYWRpb0dyb3VwLCBUZXh0LCBHcmlkLCBIZWFkaW5nIH0gZnJvbSBcIkB3ZWJpbnkvYWRtaW4tdWlcIjtcblxuY29uc3QgdCA9IGkxOG4ubnMoXCJhcHAtaGVhZGxlc3MtY21zL2FkbWluL2NvbnRlbnQtbW9kZWwtZWRpdG9yL3RhYnMvYXBwZWFyYW5jZS10YWJcIik7XG5cbmNvbnN0IHN0eWxlID0ge1xuICAgIG5vQ29tcG9uZW50c01lc3NhZ2U6IGNzcyh7XG4gICAgICAgIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgICAgICAgcGFkZGluZzogMjVcbiAgICB9KSxcbiAgICByYWRpb0NvbnRhaW5lcjogY3NzKHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiAxMCxcbiAgICAgICAgZGlzcGxheTogXCJmbGV4XCJcbiAgICB9KVxufTtcblxuY29uc3QgQXBwZWFyYW5jZVRhYiA9ICgpID0+IHtcbiAgICBjb25zdCByZW5kZXJlcnMgPSB1c2VSZW5kZXJlclBsdWdpbnMoKTtcbiAgICBjb25zdCB7IGZpZWxkIH0gPSB1c2VNb2RlbEZpZWxkKCk7XG5cbiAgICBjb25zdCByZW5kZXJlck5hbWUgPSB1c2VCaW5kKHtcbiAgICAgICAgbmFtZTogXCJyZW5kZXJlci5uYW1lXCIsXG4gICAgICAgIHZhbGlkYXRlOiB2YWxpZGF0aW9uLmNyZWF0ZShcInJlcXVpcmVkXCIpXG4gICAgfSk7XG5cbiAgICBjb25zdCBzZWxlY3RlZFBsdWdpbiA9IHJlbmRlcmVyTmFtZS52YWx1ZVxuICAgICAgICA/IHJlbmRlcmVycy5maW5kKHBsID0+IHBsLnJlbmRlcmVyLnJlbmRlcmVyTmFtZSA9PT0gcmVuZGVyZXJOYW1lLnZhbHVlKVxuICAgICAgICA6IHVuZGVmaW5lZDtcblxuICAgIGlmIChyZW5kZXJlcnMubGVuZ3RoID09PSAwKSB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8R3JpZD5cbiAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW5cbiAgICAgICAgICAgICAgICAgICAgc3Bhbj17MTJ9XG4gICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17c3R5bGUubm9Db21wb25lbnRzTWVzc2FnZX1cbiAgICAgICAgICAgICAgICA+e3RgVGhlcmUgYXJlIG5vIGNvbXBvbmVudHMgdGhhdCBjYW4gcmVuZGVyIHRoaXMgZmllbGQuYH08L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgPC9HcmlkPlxuICAgICAgICApO1xuICAgIH1cblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIC8vIElmIHRoZSBjdXJyZW50bHkgc2VsZWN0ZWQgcmVuZGVyIHBsdWdpbiBpcyBubyBsb25nZXIgYXZhaWxhYmxlLCBzZWxlY3QgdGhlIGZpcnN0IGF2YWlsYWJsZSBvbmUuXG4gICAgICAgIGlmIChzZWxlY3RlZFBsdWdpbikge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHJlbmRlcmVyc1swXSkge1xuICAgICAgICAgICAgcmVuZGVyZXJOYW1lLm9uQ2hhbmdlKHJlbmRlcmVyc1swXS5yZW5kZXJlci5yZW5kZXJlck5hbWUpO1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgY29uc29sZS5pbmZvKGBObyByZW5kZXJlcnMgZm9yIGZpZWxkICR7ZmllbGQuZmllbGRJZH0gZm91bmQuYCwgZmllbGQpO1xuICAgIH0sIFtmaWVsZC5pZCwgZmllbGQubGlzdCwgZmllbGQucHJlZGVmaW5lZFZhbHVlcz8uZW5hYmxlZCwgc2VsZWN0ZWRQbHVnaW5dKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAgICA8R3JpZD5cbiAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW4gc3Bhbj17MTJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPEhlYWRpbmcgbGV2ZWw9ezV9PkZpZWxkIHJlbmRlcmVyPC9IZWFkaW5nPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFRleHQgc2l6ZT17XCJzbVwifT5DaG9vc2UgYSBjb21wb25lbnQgdGhhdCB3aWxsIHJlbmRlciB0aGUgZmllbGQuPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICA8L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW4gc3Bhbj17MTJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wibWIteGxcIn0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPFJhZGlvR3JvdXBcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgey4uLnJlbmRlcmVyTmFtZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaXRlbXM9e3JlbmRlcmVycy5tYXAoaXRlbSA9PiAoe1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWQ6IGl0ZW0ucmVuZGVyZXIucmVuZGVyZXJOYW1lLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWU6IGl0ZW0ucmVuZGVyZXIucmVuZGVyZXJOYW1lLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbGFiZWw6IChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGV4dCBhcz17XCJkaXZcIn0gc2l6ZT17XCJtZFwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtpdGVtLnJlbmRlcmVyLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGFzPXtcImRpdlwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgc2l6ZT17XCJzbVwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtcInRleHQtc20gdGV4dC1uZXV0cmFsLXN0cm9uZyB0ZXh0LXdyYXBcIn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2l0ZW0ucmVuZGVyZXIuZGVzY3JpcHRpb259XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIClcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSkpfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPC9HcmlkLkNvbHVtbj5cbiAgICAgICAgICAgICAgICAgICAgPFJlbmRlcmVyT3B0aW9ucyBwbHVnaW49e3NlbGVjdGVkUGx1Z2lufSAvPlxuICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgPC9HcmlkPlxuICAgICAgICA8Lz5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQXBwZWFyYW5jZVRhYjtcbiJdfQ== */",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  })
+    noComponentsMessage: css({
+        textAlign: "center",
+        padding: 25
+    }),
+    radioContainer: css({
+        marginBottom: 10,
+        display: "flex"
+    })
 };
-const AppearanceTab = () => {
-  const renderers = useRendererPlugins();
-  const {
-    field
-  } = useModelField();
-  const rendererName = useBind({
-    name: "renderer.name",
-    validate: validation.create("required")
-  });
-  const selectedPlugin = rendererName.value ? renderers.find(pl => pl.renderer.rendererName === rendererName.value) : undefined;
-  if (renderers.length === 0) {
-    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
-      span: 12,
-      className: style.noComponentsMessage
+const AppearanceTab = ()=>{
+    const renderers = useRendererPlugins();
+    const { field } = useModelField();
+    const rendererName = useBind({
+        name: "renderer.name",
+        validate: validation.create("required")
+    });
+    const selectedPlugin = rendererName.value ? renderers.find((pl)=>pl.renderer.rendererName === rendererName.value) : void 0;
+    if (0 === renderers.length) return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12,
+        className: style.noComponentsMessage
     }, t`There are no components that can render this field.`));
-  }
-  useEffect(() => {
-    // If the currently selected render plugin is no longer available, select the first available one.
-    if (selectedPlugin) {
-      return;
-    }
-    if (renderers[0]) {
-      rendererName.onChange(renderers[0].renderer.rendererName);
-      return;
-    }
-    console.info(`No renderers for field ${field.fieldId} found.`, field);
-  }, [field.id, field.list, field.predefinedValues?.enabled, selectedPlugin]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Heading, {
-    level: 5
-  }, "Field renderer"), /*#__PURE__*/React.createElement(Text, {
-    size: "sm"
-  }, "Choose a component that will render the field.")), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mb-xl"
-  }, /*#__PURE__*/React.createElement(RadioGroup, Object.assign({}, rendererName, {
-    items: renderers.map(item => ({
-      id: item.renderer.rendererName,
-      value: item.renderer.rendererName,
-      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-        as: "div",
-        size: "md"
-      }, item.renderer.name), /*#__PURE__*/React.createElement(Text, {
-        as: "div",
-        size: "sm",
-        className: "text-sm text-neutral-strong text-wrap"
-      }, item.renderer.description))
-    }))
-  })))), /*#__PURE__*/React.createElement(RendererOptions, {
-    plugin: selectedPlugin
-  }))));
+    useEffect(()=>{
+        if (selectedPlugin) return;
+        if (renderers[0]) return void rendererName.onChange(renderers[0].renderer.rendererName);
+        console.info(`No renderers for field ${field.fieldId} found.`, field);
+    }, [
+        field.id,
+        field.list,
+        field.predefinedValues?.enabled,
+        selectedPlugin
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 5
+    }, "Field renderer"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Choose a component that will render the field.")), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "mb-xl"
+    }, /*#__PURE__*/ react.createElement(RadioGroup, {
+        ...rendererName,
+        items: renderers.map((item)=>({
+                id: item.renderer.rendererName,
+                value: item.renderer.rendererName,
+                label: /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Text, {
+                    as: "div",
+                    size: "md"
+                }, item.renderer.name), /*#__PURE__*/ react.createElement(Text, {
+                    as: "div",
+                    size: "sm",
+                    className: "text-sm text-neutral-strong text-wrap"
+                }, item.renderer.description))
+            }))
+    }))), /*#__PURE__*/ react.createElement(RendererOptions, {
+        plugin: selectedPlugin
+    }))));
 };
-export default AppearanceTab;
+const EditFieldDialog_AppearanceTab = AppearanceTab;
+export default EditFieldDialog_AppearanceTab;
 
 //# sourceMappingURL=AppearanceTab.js.map

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","i18n","css","validation","useBind","RendererOptions","useRendererPlugins","useModelField","RadioGroup","Text","Grid","Heading","t","ns","style","noComponentsMessage","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","radioContainer","AppearanceTab","renderers","field","rendererName","validate","create","selectedPlugin","value","find","pl","renderer","undefined","length","createElement","Column","span","className","onChange","console","info","fieldId","id","list","predefinedValues","enabled","Fragment","level","size","Object","assign","items","map","item","label","as","description","plugin"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { css } from \"@emotion/css\";\nimport { validation } from \"@webiny/validation\";\nimport { useBind } from \"@webiny/form\";\nimport { RendererOptions } from \"./AppearanceTab/RendererOptions.js\";\nimport { useRendererPlugins } from \"./useRendererPlugins.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { RadioGroup, Text, Grid, Heading } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10,\n        display: \"flex\"\n    })\n};\n\nconst AppearanceTab = () => {\n    const renderers = useRendererPlugins();\n    const { field } = useModelField();\n\n    const rendererName = useBind({\n        name: \"renderer.name\",\n        validate: validation.create(\"required\")\n    });\n\n    const selectedPlugin = rendererName.value\n        ? renderers.find(pl => pl.renderer.rendererName === rendererName.value)\n        : undefined;\n\n    if (renderers.length === 0) {\n        return (\n            <Grid>\n                <Grid.Column\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Grid.Column>\n            </Grid>\n        );\n    }\n\n    useEffect(() => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        if (selectedPlugin) {\n            return;\n        }\n\n        if (renderers[0]) {\n            rendererName.onChange(renderers[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.list, field.predefinedValues?.enabled, selectedPlugin]);\n\n    return (\n        <>\n            <Grid>\n                <>\n                    <Grid.Column span={12}>\n                        <Heading level={5}>Field renderer</Heading>\n                        <Text size={\"sm\"}>Choose a component that will render the field.</Text>\n                    </Grid.Column>\n                    <Grid.Column span={12}>\n                        <div className={\"mb-xl\"}>\n                            <RadioGroup\n                                {...rendererName}\n                                items={renderers.map(item => ({\n                                    id: item.renderer.rendererName,\n                                    value: item.renderer.rendererName,\n                                    label: (\n                                        <div>\n                                            <Text as={\"div\"} size={\"md\"}>\n                                                {item.renderer.name}\n                                            </Text>\n                                            <Text\n                                                as={\"div\"}\n                                                size={\"sm\"}\n                                                className={\"text-sm text-neutral-strong text-wrap\"}\n                                            >\n                                                {item.renderer.description}\n                                            </Text>\n                                        </div>\n                                    )\n                                }))}\n                            />\n                        </div>\n                    </Grid.Column>\n                    <RendererOptions plugin={selectedPlugin} />\n                </>\n            </Grid>\n        </>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAC3B,SAASC,aAAa;AACtB,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAElE,MAAMC,CAAC,GAAGX,IAAI,CAACY,EAAE,CAAC,iEAAiE,CAAC;AAEpF,MAAMC,KAAK,GAAG;EACVC,mBAAmB,eAAEb,GAAG,CAAAc,OAAA,CAAAC,GAAA,CAAAC,QAAA;IAAAC,IAAA;IAAAC,MAAA;EAAA;IAAAD,IAAA;IAAAC,MAAA;IAAAC,QAAA,EAAAC;EAAA,CAGvB,CAAC;EACFC,cAAc,eAAErB,GAAG,CAAAc,OAAA,CAAAC,GAAA,CAAAC,QAAA;IAAAC,IAAA;IAAAC,MAAA;EAAA;IAAAD,IAAA;IAAAC,MAAA;IAAAC,QAAA,EAAAC;EAAA,CAGlB;AACL,CAAC;AAED,MAAME,aAAa,GAAGA,CAAA,KAAM;EACxB,MAAMC,SAAS,GAAGnB,kBAAkB,CAAC,CAAC;EACtC,MAAM;IAAEoB;EAAM,CAAC,GAAGnB,aAAa,CAAC,CAAC;EAEjC,MAAMoB,YAAY,GAAGvB,OAAO,CAAC;IACzBe,IAAI,EAAE,eAAe;IACrBS,QAAQ,EAAEzB,UAAU,CAAC0B,MAAM,CAAC,UAAU;EAC1C,CAAC,CAAC;EAEF,MAAMC,cAAc,GAAGH,YAAY,CAACI,KAAK,GACnCN,SAAS,CAACO,IAAI,CAACC,EAAE,IAAIA,EAAE,CAACC,QAAQ,CAACP,YAAY,KAAKA,YAAY,CAACI,KAAK,CAAC,GACrEI,SAAS;EAEf,IAAIV,SAAS,CAACW,MAAM,KAAK,CAAC,EAAE;IACxB,oBACIrC,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,qBACDX,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,CAAC4B,MAAM;MACRC,IAAI,EAAE,EAAG;MACTC,SAAS,EAAE1B,KAAK,CAACC;IAAoB,GACvCH,CAAC,qDAAmE,CACpE,CAAC;EAEf;EAEAZ,SAAS,CAAC,MAAM;IACZ;IACA,IAAI8B,cAAc,EAAE;MAChB;IACJ;IAEA,IAAIL,SAAS,CAAC,CAAC,CAAC,EAAE;MACdE,YAAY,CAACc,QAAQ,CAAChB,SAAS,CAAC,CAAC,CAAC,CAACS,QAAQ,CAACP,YAAY,CAAC;MACzD;IACJ;IAEAe,OAAO,CAACC,IAAI,CAAC,0BAA0BjB,KAAK,CAACkB,OAAO,SAAS,EAAElB,KAAK,CAAC;EACzE,CAAC,EAAE,CAACA,KAAK,CAACmB,EAAE,EAAEnB,KAAK,CAACoB,IAAI,EAAEpB,KAAK,CAACqB,gBAAgB,EAAEC,OAAO,EAAElB,cAAc,CAAC,CAAC;EAE3E,oBACI/B,KAAA,CAAAsC,aAAA,CAAAtC,KAAA,CAAAkD,QAAA,qBACIlD,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,qBACDX,KAAA,CAAAsC,aAAA,CAAAtC,KAAA,CAAAkD,QAAA,qBACIlD,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,CAAC4B,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBxC,KAAA,CAAAsC,aAAA,CAAC1B,OAAO;IAACuC,KAAK,EAAE;EAAE,GAAC,gBAAuB,CAAC,eAC3CnD,KAAA,CAAAsC,aAAA,CAAC5B,IAAI;IAAC0C,IAAI,EAAE;EAAK,GAAC,gDAAoD,CAC7D,CAAC,eACdpD,KAAA,CAAAsC,aAAA,CAAC3B,IAAI,CAAC4B,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBxC,KAAA,CAAAsC,aAAA;IAAKG,SAAS,EAAE;EAAQ,gBACpBzC,KAAA,CAAAsC,aAAA,CAAC7B,UAAU,EAAA4C,MAAA,CAAAC,MAAA,KACH1B,YAAY;IAChB2B,KAAK,EAAE7B,SAAS,CAAC8B,GAAG,CAACC,IAAI,KAAK;MAC1BX,EAAE,EAAEW,IAAI,CAACtB,QAAQ,CAACP,YAAY;MAC9BI,KAAK,EAAEyB,IAAI,CAACtB,QAAQ,CAACP,YAAY;MACjC8B,KAAK,eACD1D,KAAA,CAAAsC,aAAA,2BACItC,KAAA,CAAAsC,aAAA,CAAC5B,IAAI;QAACiD,EAAE,EAAE,KAAM;QAACP,IAAI,EAAE;MAAK,GACvBK,IAAI,CAACtB,QAAQ,CAACf,IACb,CAAC,eACPpB,KAAA,CAAAsC,aAAA,CAAC5B,IAAI;QACDiD,EAAE,EAAE,KAAM;QACVP,IAAI,EAAE,IAAK;QACXX,SAAS,EAAE;MAAwC,GAElDgB,IAAI,CAACtB,QAAQ,CAACyB,WACb,CACL;IAEb,CAAC,CAAC;EAAE,EACP,CACA,CACI,CAAC,eACd5D,KAAA,CAAAsC,aAAA,CAAChC,eAAe;IAACuD,MAAM,EAAE9B;EAAe,CAAE,CAC5C,CACA,CACR,CAAC;AAEX,CAAC;AAED,eAAeN,aAAa","ignoreList":[]}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/AppearanceTab.js","sources":["../../../../../src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { css } from \"@emotion/css\";\nimport { validation } from \"@webiny/validation\";\nimport { useBind } from \"@webiny/form\";\nimport { RendererOptions } from \"./AppearanceTab/RendererOptions.js\";\nimport { useRendererPlugins } from \"./useRendererPlugins.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { RadioGroup, Text, Grid, Heading } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10,\n        display: \"flex\"\n    })\n};\n\nconst AppearanceTab = () => {\n    const renderers = useRendererPlugins();\n    const { field } = useModelField();\n\n    const rendererName = useBind({\n        name: \"renderer.name\",\n        validate: validation.create(\"required\")\n    });\n\n    const selectedPlugin = rendererName.value\n        ? renderers.find(pl => pl.renderer.rendererName === rendererName.value)\n        : undefined;\n\n    if (renderers.length === 0) {\n        return (\n            <Grid>\n                <Grid.Column\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Grid.Column>\n            </Grid>\n        );\n    }\n\n    useEffect(() => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        if (selectedPlugin) {\n            return;\n        }\n\n        if (renderers[0]) {\n            rendererName.onChange(renderers[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.list, field.predefinedValues?.enabled, selectedPlugin]);\n\n    return (\n        <>\n            <Grid>\n                <>\n                    <Grid.Column span={12}>\n                        <Heading level={5}>Field renderer</Heading>\n                        <Text size={\"sm\"}>Choose a component that will render the field.</Text>\n                    </Grid.Column>\n                    <Grid.Column span={12}>\n                        <div className={\"mb-xl\"}>\n                            <RadioGroup\n                                {...rendererName}\n                                items={renderers.map(item => ({\n                                    id: item.renderer.rendererName,\n                                    value: item.renderer.rendererName,\n                                    label: (\n                                        <div>\n                                            <Text as={\"div\"} size={\"md\"}>\n                                                {item.renderer.name}\n                                            </Text>\n                                            <Text\n                                                as={\"div\"}\n                                                size={\"sm\"}\n                                                className={\"text-sm text-neutral-strong text-wrap\"}\n                                            >\n                                                {item.renderer.description}\n                                            </Text>\n                                        </div>\n                                    )\n                                }))}\n                            />\n                        </div>\n                    </Grid.Column>\n                    <RendererOptions plugin={selectedPlugin} />\n                </>\n            </Grid>\n        </>\n    );\n};\n\nexport default AppearanceTab;\n"],"names":["t","i18n","style","css","AppearanceTab","renderers","useRendererPlugins","field","useModelField","rendererName","useBind","validation","selectedPlugin","pl","undefined","Grid","useEffect","console","Heading","Text","RadioGroup","item","RendererOptions"],"mappings":";;;;;;;;;AAUA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,QAAQ;IACV,qBAAqBC,IAAI;QACrB,WAAW;QACX,SAAS;IACb;IACA,gBAAgBA,IAAI;QAChB,cAAc;QACd,SAAS;IACb;AACJ;AAEA,MAAMC,gBAAgB;IAClB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAElB,MAAMC,eAAeC,QAAQ;QACzB,MAAM;QACN,UAAUC,WAAW,MAAM,CAAC;IAChC;IAEA,MAAMC,iBAAiBH,aAAa,KAAK,GACnCJ,UAAU,IAAI,CAACQ,CAAAA,KAAMA,GAAG,QAAQ,CAAC,YAAY,KAAKJ,aAAa,KAAK,IACpEK;IAEN,IAAIT,AAAqB,MAArBA,UAAU,MAAM,EAChB,OAAO,WAAP,GACI,oBAACU,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QACR,MAAM;QACN,WAAWb,MAAM,mBAAmB;OACtCF,CAAC,CAAC,mDAAmD,CAAC;IAKpEgB,UAAU;QAEN,IAAIJ,gBACA;QAGJ,IAAIP,SAAS,CAAC,EAAE,EAAE,YACdI,aAAa,QAAQ,CAACJ,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,YAAY;QAI5DY,QAAQ,IAAI,CAAC,CAAC,uBAAuB,EAAEV,MAAM,OAAO,CAAC,OAAO,CAAC,EAAEA;IACnE,GAAG;QAACA,MAAM,EAAE;QAAEA,MAAM,IAAI;QAAEA,MAAM,gBAAgB,EAAE;QAASK;KAAe;IAE1E,OAAO,WAAP,GACI,wDACI,oBAACG,MAAIA,MAAAA,WAAAA,GACD,wDACI,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACG,SAAOA;QAAC,OAAO;OAAG,iCACnB,oBAACC,MAAIA;QAAC,MAAM;OAAM,kEAEtB,oBAACJ,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC;QAAI,WAAW;qBACZ,oBAACK,YAAUA;QACN,GAAGX,YAAY;QAChB,OAAOJ,UAAU,GAAG,CAACgB,CAAAA,OAAS;gBAC1B,IAAIA,KAAK,QAAQ,CAAC,YAAY;gBAC9B,OAAOA,KAAK,QAAQ,CAAC,YAAY;gBACjC,OAAO,WAAP,GACI,oBAAC,2BACG,oBAACF,MAAIA;oBAAC,IAAI;oBAAO,MAAM;mBAClBE,KAAK,QAAQ,CAAC,IAAI,iBAEvB,oBAACF,MAAIA;oBACD,IAAI;oBACJ,MAAM;oBACN,WAAW;mBAEVE,KAAK,QAAQ,CAAC,WAAW;YAI1C;wBAIZ,oBAACC,iBAAeA;QAAC,QAAQV;;AAK7C;AAEA,sCAAeR"}

package/admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.js

@@ -1,4 +1,4 @@
-import React from "react";
+import react from "react";
 import { Tabs } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n/index.js";
 import GeneralTab from "./GeneralTab.js";
@@ -10,60 +10,61 @@ import { RulesEditor } from "./RulesEditor/RulesEditor.js";
 import { ModelFieldProvider } from "../../ModelFieldProvider/index.js";
 import { useModelEditor } from "../../ContentModelEditor/useModelEditor.js";
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
-export const FieldSettingsTabs = ({
-  shadowField,
-  predefinedValuesTabEnabled,
-  showValidatorsTab,
-  isSubtypeField
-}) => {
-  const {
-    fieldOptions
-  } = useModelEditor();
-  return /*#__PURE__*/React.createElement(ModelFieldProvider, {
-    field: shadowField
-  }, /*#__PURE__*/React.createElement(Tabs, {
-    spacing: "lg",
-    size: "md",
-    separator: true,
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "general",
-      trigger: t`General`,
-      value: "general",
-      content: /*#__PURE__*/React.createElement(GeneralTab, null)
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "predefined",
-      trigger: t`Predefined values`,
-      value: "predefined",
-      disabled: !predefinedValuesTabEnabled,
-      content: /*#__PURE__*/React.createElement(PredefinedValues, null)
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "validations",
-      trigger: t`Validations`,
-      value: "validations",
-      content: /*#__PURE__*/React.createElement(ValidationTab, {
+const FieldSettingsTabs = ({ shadowField, predefinedValuesTabEnabled, showValidatorsTab, isSubtypeField })=>{
+    const { fieldOptions } = useModelEditor();
+    return /*#__PURE__*/ react.createElement(ModelFieldProvider, {
         field: shadowField
-      }),
-      visible: showValidatorsTab
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "appearance",
-      trigger: t`Appearance`,
-      value: "Appearance",
-      content: /*#__PURE__*/React.createElement(AppearanceTab, null),
-      disabled: isSubtypeField
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "permissions",
-      trigger: t`Permissions`,
-      value: "permissions",
-      content: /*#__PURE__*/React.createElement(PermissionsEditor, null)
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "rules",
-      trigger: t`Rules`,
-      value: "rules",
-      content: /*#__PURE__*/React.createElement(RulesEditor, {
-        fieldOptions: fieldOptions
-      })
-    })]
-  }));
+    }, /*#__PURE__*/ react.createElement(Tabs, {
+        spacing: "lg",
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "general",
+                trigger: t`General`,
+                value: "general",
+                content: /*#__PURE__*/ react.createElement(GeneralTab, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "predefined",
+                trigger: t`Predefined values`,
+                value: "predefined",
+                disabled: !predefinedValuesTabEnabled,
+                content: /*#__PURE__*/ react.createElement(PredefinedValues, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "validations",
+                trigger: t`Validations`,
+                value: "validations",
+                content: /*#__PURE__*/ react.createElement(ValidationTab, {
+                    field: shadowField
+                }),
+                visible: showValidatorsTab
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "appearance",
+                trigger: t`Appearance`,
+                value: "Appearance",
+                content: /*#__PURE__*/ react.createElement(AppearanceTab, null),
+                disabled: isSubtypeField
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: t`Permissions`,
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement(PermissionsEditor, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: t`Rules`,
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                })
+            })
+        ]
+    }));
 };
+export { FieldSettingsTabs };
 
 //# sourceMappingURL=FieldSettingsTabs.js.map

package/admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","i18n","GeneralTab","AppearanceTab","PredefinedValues","ValidationTab","PermissionsEditor","RulesEditor","ModelFieldProvider","useModelEditor","t","namespace","FieldSettingsTabs","shadowField","predefinedValuesTabEnabled","showValidatorsTab","isSubtypeField","fieldOptions","createElement","field","spacing","size","separator","tabs","Tab","key","trigger","value","content","disabled","visible"],"sources":["FieldSettingsTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport GeneralTab from \"./GeneralTab.js\";\nimport AppearanceTab from \"./AppearanceTab.js\";\nimport PredefinedValues from \"./PredefinedValues.js\";\nimport { ValidationTab } from \"./ValidationTab/index.js\";\nimport { PermissionsEditor } from \"./PermissionsEditor/PermissionsEditor.js\";\nimport { RulesEditor } from \"./RulesEditor/RulesEditor.js\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\ninterface FieldSettingsTabsProps {\n    shadowField: CmsModelField;\n    predefinedValuesTabEnabled: boolean;\n    showValidatorsTab: boolean;\n    isSubtypeField: boolean;\n}\n\nexport const FieldSettingsTabs = ({\n    shadowField,\n    predefinedValuesTabEnabled,\n    showValidatorsTab,\n    isSubtypeField\n}: FieldSettingsTabsProps) => {\n    const { fieldOptions } = useModelEditor();\n\n    return (\n        <ModelFieldProvider field={shadowField}>\n            <Tabs\n                spacing={\"lg\"}\n                size={\"md\"}\n                separator\n                tabs={[\n                    <Tabs.Tab\n                        key={\"general\"}\n                        trigger={t`General`}\n                        value={\"general\"}\n                        content={<GeneralTab />}\n                    />,\n                    <Tabs.Tab\n                        key={\"predefined\"}\n                        trigger={t`Predefined values`}\n                        value={\"predefined\"}\n                        disabled={!predefinedValuesTabEnabled}\n                        content={<PredefinedValues />}\n                    />,\n                    <Tabs.Tab\n                        key={\"validations\"}\n                        trigger={t`Validations`}\n                        value={\"validations\"}\n                        content={<ValidationTab field={shadowField} />}\n                        visible={showValidatorsTab}\n                    />,\n                    <Tabs.Tab\n                        key={\"appearance\"}\n                        trigger={t`Appearance`}\n                        value={\"Appearance\"}\n                        content={<AppearanceTab />}\n                        disabled={isSubtypeField}\n                    />,\n                    <Tabs.Tab\n                        key={\"permissions\"}\n                        trigger={t`Permissions`}\n                        value={\"permissions\"}\n                        content={<PermissionsEditor />}\n                    />,\n                    <Tabs.Tab\n                        key={\"rules\"}\n                        trigger={t`Rules`}\n                        value={\"rules\"}\n                        content={<RulesEditor fieldOptions={fieldOptions} />}\n                    />\n                ]}\n            />\n        </ModelFieldProvider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,OAAOC,UAAU;AACjB,OAAOC,aAAa;AACpB,OAAOC,gBAAgB;AACvB,SAASC,aAAa;AACtB,SAASC,iBAAiB;AAC1B,SAASC,WAAW;AACpB,SAASC,kBAAkB;AAC3B,SAASC,cAAc;AAEvB,MAAMC,CAAC,GAAGT,IAAI,CAACU,SAAS,CAAC,0CAA0C,CAAC;AASpE,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,WAAW;EACXC,0BAA0B;EAC1BC,iBAAiB;EACjBC;AACoB,CAAC,KAAK;EAC1B,MAAM;IAAEC;EAAa,CAAC,GAAGR,cAAc,CAAC,CAAC;EAEzC,oBACIV,KAAA,CAAAmB,aAAA,CAACV,kBAAkB;IAACW,KAAK,EAAEN;EAAY,gBACnCd,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IACDoB,OAAO,EAAE,IAAK;IACdC,IAAI,EAAE,IAAK;IACXC,SAAS;IACTC,IAAI,EAAE,cACFxB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,OAAO,EAAEhB,CAAC,SAAU;MACpBiB,KAAK,EAAE,SAAU;MACjBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAAChB,UAAU,MAAE;IAAE,CAC3B,CAAC,eACFH,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,YAAa;MAClBC,OAAO,EAAEhB,CAAC,mBAAoB;MAC9BiB,KAAK,EAAE,YAAa;MACpBE,QAAQ,EAAE,CAACf,0BAA2B;MACtCc,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACd,gBAAgB,MAAE;IAAE,CACjC,CAAC,eACFL,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,OAAO,EAAEhB,CAAC,aAAc;MACxBiB,KAAK,EAAE,aAAc;MACrBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACb,aAAa;QAACc,KAAK,EAAEN;MAAY,CAAE,CAAE;MAC/CiB,OAAO,EAAEf;IAAkB,CAC9B,CAAC,eACFhB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,YAAa;MAClBC,OAAO,EAAEhB,CAAC,YAAa;MACvBiB,KAAK,EAAE,YAAa;MACpBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACf,aAAa,MAAE,CAAE;MAC3B0B,QAAQ,EAAEb;IAAe,CAC5B,CAAC,eACFjB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,OAAO,EAAEhB,CAAC,aAAc;MACxBiB,KAAK,EAAE,aAAc;MACrBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACZ,iBAAiB,MAAE;IAAE,CAClC,CAAC,eACFP,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,OAAQ;MACbC,OAAO,EAAEhB,CAAC,OAAQ;MAClBiB,KAAK,EAAE,OAAQ;MACfC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACX,WAAW;QAACU,YAAY,EAAEA;MAAa,CAAE;IAAE,CACxD,CAAC;EACJ,CACL,CACe,CAAC;AAE7B,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.js","sources":["../../../../../src/admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport GeneralTab from \"./GeneralTab.js\";\nimport AppearanceTab from \"./AppearanceTab.js\";\nimport PredefinedValues from \"./PredefinedValues.js\";\nimport { ValidationTab } from \"./ValidationTab/index.js\";\nimport { PermissionsEditor } from \"./PermissionsEditor/PermissionsEditor.js\";\nimport { RulesEditor } from \"./RulesEditor/RulesEditor.js\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\ninterface FieldSettingsTabsProps {\n    shadowField: CmsModelField;\n    predefinedValuesTabEnabled: boolean;\n    showValidatorsTab: boolean;\n    isSubtypeField: boolean;\n}\n\nexport const FieldSettingsTabs = ({\n    shadowField,\n    predefinedValuesTabEnabled,\n    showValidatorsTab,\n    isSubtypeField\n}: FieldSettingsTabsProps) => {\n    const { fieldOptions } = useModelEditor();\n\n    return (\n        <ModelFieldProvider field={shadowField}>\n            <Tabs\n                spacing={\"lg\"}\n                size={\"md\"}\n                separator\n                tabs={[\n                    <Tabs.Tab\n                        key={\"general\"}\n                        trigger={t`General`}\n                        value={\"general\"}\n                        content={<GeneralTab />}\n                    />,\n                    <Tabs.Tab\n                        key={\"predefined\"}\n                        trigger={t`Predefined values`}\n                        value={\"predefined\"}\n                        disabled={!predefinedValuesTabEnabled}\n                        content={<PredefinedValues />}\n                    />,\n                    <Tabs.Tab\n                        key={\"validations\"}\n                        trigger={t`Validations`}\n                        value={\"validations\"}\n                        content={<ValidationTab field={shadowField} />}\n                        visible={showValidatorsTab}\n                    />,\n                    <Tabs.Tab\n                        key={\"appearance\"}\n                        trigger={t`Appearance`}\n                        value={\"Appearance\"}\n                        content={<AppearanceTab />}\n                        disabled={isSubtypeField}\n                    />,\n                    <Tabs.Tab\n                        key={\"permissions\"}\n                        trigger={t`Permissions`}\n                        value={\"permissions\"}\n                        content={<PermissionsEditor />}\n                    />,\n                    <Tabs.Tab\n                        key={\"rules\"}\n                        trigger={t`Rules`}\n                        value={\"rules\"}\n                        content={<RulesEditor fieldOptions={fieldOptions} />}\n                    />\n                ]}\n            />\n        </ModelFieldProvider>\n    );\n};\n"],"names":["t","i18n","FieldSettingsTabs","shadowField","predefinedValuesTabEnabled","showValidatorsTab","isSubtypeField","fieldOptions","useModelEditor","ModelFieldProvider","Tabs","GeneralTab","PredefinedValues","ValidationTab","AppearanceTab","PermissionsEditor","RulesEditor"],"mappings":";;;;;;;;;;;AAaA,MAAMA,IAAIC,KAAK,SAAS,CAAC;AASlB,MAAMC,oBAAoB,CAAC,EAC9BC,WAAW,EACXC,0BAA0B,EAC1BC,iBAAiB,EACjBC,cAAc,EACO;IACrB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,OAAO,WAAP,GACI,oBAACC,oBAAkBA;QAAC,OAAON;qBACvB,oBAACO,MAAIA;QACD,SAAS;QACT,MAAM;QACN;QACA,MAAM;0BACF,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,OAAO,CAAC;gBACnB,OAAO;gBACP,uBAAS,oBAACW,YAAUA;;0BAExB,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,iBAAiB,CAAC;gBAC7B,OAAO;gBACP,UAAU,CAACI;gBACX,uBAAS,oBAACQ,kBAAgBA;;0BAE9B,oBAACF,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,WAAW,CAAC;gBACvB,OAAO;gBACP,uBAAS,oBAACa,eAAaA;oBAAC,OAAOV;;gBAC/B,SAASE;;0BAEb,oBAACK,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,UAAU,CAAC;gBACtB,OAAO;gBACP,uBAAS,oBAACc,eAAaA;gBACvB,UAAUR;;0BAEd,oBAACI,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,WAAW,CAAC;gBACvB,OAAO;gBACP,uBAAS,oBAACe,mBAAiBA;;0BAE/B,oBAACL,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,KAAK,CAAC;gBACjB,OAAO;gBACP,uBAAS,oBAACgB,aAAWA;oBAAC,cAAcT;;;SAE3C;;AAIjB"}