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

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

@@ -1,131 +1,121 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { Form } from "@webiny/form";
 import { validation } from "@webiny/validation";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
 import { IconPicker } from "../../../components/IconPicker.js";
-import { Tags } from "@webiny/ui/Tags/index.js";
-import { Alert, Dialog, Grid, Input, Textarea } from "@webiny/admin-ui";
-const typeNameValidator = value => {
-  const regex = new RegExp("^[A-Z]+[_0-9A-Za-z]+$");
-  if (regex.test(value)) {
-    return true;
-  }
-  throw Error(`Must start with a capital letter, may contain numbers, and must not contain spaces.`);
+import { Alert, Dialog, Grid, Input, Tags, Textarea } from "@webiny/admin-ui";
+const typeNameValidator = (value)=>{
+    const regex = new RegExp("^[A-Z]+[_0-9A-Za-z]+$");
+    if (regex.test(value)) return true;
+    throw Error("Must start with a capital letter, may contain numbers, and must not contain spaces.");
 };
-const getGraphQLTypeName = value => {
-  const titleCase = value.charAt(0).toUpperCase() + value.slice(1);
-  return titleCase.replace(/[^a-zA-Z0-9]/g, "");
+const getGraphQLTypeName = (value)=>{
+    const titleCase = value.charAt(0).toUpperCase() + value.slice(1);
+    return titleCase.replace(/[^a-zA-Z0-9]/g, "");
 };
-export const TemplateDialog = props => {
-  const [showWarning, setWarning] = useState(false);
-  const newTemplate = !props.template;
-  const dialogTitle = newTemplate ? "Add Template" : "Edit Template";
-  const submitLabel = newTemplate ? "Add Template" : "Update Template";
-  const onSubmit = template => {
-    if (template.id) {
-      props.onTemplate(template);
-    } else {
-      props.onTemplate({
-        ...template,
-        id: generateAlphaNumericLowerCaseId(),
-        fields: [],
-        layout: []
-      });
-    }
-    props.onClose();
-  };
-  const showGqlTypeNameWarning = () => {
-    setWarning(true);
-  };
-  const hideGqlTypeNameWarning = () => {
-    setWarning(false);
-  };
-  const checkGqlType = data => {
-    if (newTemplate) {
-      return;
-    }
-    if (data.gqlTypeName !== props.template?.gqlTypeName) {
-      showGqlTypeNameWarning();
-    } else {
-      hideGqlTypeNameWarning();
-    }
-  };
-  const nameOnBlur = form => () => {
-    if (!form.data.gqlTypeName) {
-      /**
-       * There is a possibility that name is undefined, so let's check for it.
-       */
-      const name = form.data.name;
-      if (!name) {
-        return;
-      }
-      form.setValue("gqlTypeName", getGraphQLTypeName(name));
-    }
-  };
-  const onFormChange = (data, form) => {
-    checkGqlType(data, form);
-  };
-  return /*#__PURE__*/React.createElement(Form, {
-    onSubmit: onSubmit,
-    data: props.template,
-    onChange: onFormChange
-  }, ({
-    Bind,
-    submit,
-    form
-  }) => /*#__PURE__*/React.createElement(Dialog, {
-    open: true,
-    onClose: props.onClose,
-    title: dialogTitle,
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, null), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, {
-      onClick: submit,
-      text: submitLabel
-    }))
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(React.Fragment, null, showWarning ? /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Alert, {
-    title: "GraphQL Schema Change",
-    type: "danger"
-  }, "You've changed the GraphQL schema type name! If your API is being queried by a 3rd party application, this will affect the GraphQL queries in those applications. Make sure your consumers are informed about this change!")) : null), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "name",
-    validators: [validation.create("required")]
-  }, /*#__PURE__*/React.createElement(Input, {
-    label: "Name",
-    onBlur: nameOnBlur(form)
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "gqlTypeName",
-    validators: [validation.create("required"), typeNameValidator]
-  }, /*#__PURE__*/React.createElement(Input, {
-    autoFocus: false,
-    label: "GraphQL Type Name",
-    description: "This string will be used to generate the GraphQL schema. "
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "icon",
-    validators: [validation.create("required")]
-  }, /*#__PURE__*/React.createElement(IconPicker, {
-    label: "Icon"
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "description",
-    validators: [validation.create("required")]
-  }, /*#__PURE__*/React.createElement(Textarea, {
-    rows: 3,
-    label: "Description"
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "tags",
-    defaultValue: []
-  }, /*#__PURE__*/React.createElement(Tags, {
-    label: "Tags"
-  }))))));
+const TemplateDialog = (props)=>{
+    const [showWarning, setWarning] = useState(false);
+    const newTemplate = !props.template;
+    const dialogTitle = newTemplate ? "Add Template" : "Edit Template";
+    const submitLabel = newTemplate ? "Add Template" : "Update Template";
+    const onSubmit = (template)=>{
+        if (template.id) props.onTemplate(template);
+        else props.onTemplate({
+            ...template,
+            id: generateAlphaNumericLowerCaseId(),
+            fields: [],
+            layout: []
+        });
+        props.onClose();
+    };
+    const showGqlTypeNameWarning = ()=>{
+        setWarning(true);
+    };
+    const hideGqlTypeNameWarning = ()=>{
+        setWarning(false);
+    };
+    const checkGqlType = (data)=>{
+        if (newTemplate) return;
+        if (data.gqlTypeName !== props.template?.gqlTypeName) showGqlTypeNameWarning();
+        else hideGqlTypeNameWarning();
+    };
+    const nameOnBlur = (form)=>()=>{
+            if (!form.data.gqlTypeName) {
+                const name = form.data.name;
+                if (!name) return;
+                form.setValue("gqlTypeName", getGraphQLTypeName(name));
+            }
+        };
+    const onFormChange = (data, form)=>{
+        checkGqlType(data);
+    };
+    return /*#__PURE__*/ react.createElement(Form, {
+        onSubmit: onSubmit,
+        data: props.template,
+        onChange: onFormChange
+    }, ({ Bind, submit, form })=>/*#__PURE__*/ react.createElement(Dialog, {
+            open: true,
+            onClose: props.onClose,
+            title: dialogTitle,
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Dialog.CancelAction, null), /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, {
+                onClick: submit,
+                text: submitLabel
+            }))
+        }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(react.Fragment, null, showWarning ? /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Alert, {
+            title: "GraphQL Schema Change",
+            type: "danger"
+        }, "You've changed the GraphQL schema type name! If your API is being queried by a 3rd party application, this will affect the GraphQL queries in those applications. Make sure your consumers are informed about this change!")) : null), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "name",
+            validators: [
+                validation.create("required")
+            ]
+        }, /*#__PURE__*/ react.createElement(Input, {
+            label: "Name",
+            onBlur: nameOnBlur(form)
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "gqlTypeName",
+            validators: [
+                validation.create("required"),
+                typeNameValidator
+            ]
+        }, /*#__PURE__*/ react.createElement(Input, {
+            autoFocus: false,
+            label: "GraphQL Type Name",
+            description: "This string will be used to generate the GraphQL schema. "
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "icon",
+            validators: [
+                validation.create("required")
+            ]
+        }, /*#__PURE__*/ react.createElement(IconPicker, {
+            label: "Icon"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "description",
+            validators: [
+                validation.create("required")
+            ]
+        }, /*#__PURE__*/ react.createElement(Textarea, {
+            rows: 3,
+            label: "Description"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "tags",
+            defaultValue: []
+        }, /*#__PURE__*/ react.createElement(Tags, {
+            label: "Tags"
+        }))))));
 };
+export { TemplateDialog };
 
 //# sourceMappingURL=TemplateDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Form","validation","generateAlphaNumericLowerCaseId","IconPicker","Tags","Alert","Dialog","Grid","Input","Textarea","typeNameValidator","value","regex","RegExp","test","Error","getGraphQLTypeName","titleCase","charAt","toUpperCase","slice","replace","TemplateDialog","props","showWarning","setWarning","newTemplate","template","dialogTitle","submitLabel","onSubmit","id","onTemplate","fields","layout","onClose","showGqlTypeNameWarning","hideGqlTypeNameWarning","checkGqlType","data","gqlTypeName","nameOnBlur","form","name","setValue","onFormChange","createElement","onChange","Bind","submit","open","title","actions","Fragment","CancelAction","ConfirmAction","onClick","text","Column","span","type","validators","create","label","onBlur","autoFocus","description","rows","defaultValue"],"sources":["TemplateDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { FormAPI, FormOnSubmit } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { IconPicker } from \"~/admin/components/IconPicker.js\";\nimport { Tags } from \"@webiny/ui/Tags/index.js\";\nimport { Alert, Dialog, Grid, Input, Textarea } from \"@webiny/admin-ui\";\n\nconst typeNameValidator = (value: string) => {\n    const regex = new RegExp(\"^[A-Z]+[_0-9A-Za-z]+$\");\n    if (regex.test(value)) {\n        return true;\n    }\n\n    throw Error(\n        `Must start with a capital letter, may contain numbers, and must not contain spaces.`\n    );\n};\n\nconst getGraphQLTypeName = (value: string) => {\n    const titleCase = value.charAt(0).toUpperCase() + value.slice(1);\n    return titleCase.replace(/[^a-zA-Z0-9]/g, \"\");\n};\n\ninterface TemplateDialogProps {\n    onClose: () => void;\n    template?: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateDialog = (props: TemplateDialogProps) => {\n    const [showWarning, setWarning] = useState(false);\n    const newTemplate = !props.template;\n    const dialogTitle = newTemplate ? \"Add Template\" : \"Edit Template\";\n    const submitLabel = newTemplate ? \"Add Template\" : \"Update Template\";\n\n    const onSubmit: FormOnSubmit<CmsDynamicZoneTemplate> = template => {\n        if (template.id) {\n            props.onTemplate(template);\n        } else {\n            props.onTemplate({\n                ...template,\n                id: generateAlphaNumericLowerCaseId(),\n                fields: [],\n                layout: []\n            });\n        }\n        props.onClose();\n    };\n\n    const showGqlTypeNameWarning = () => {\n        setWarning(true);\n    };\n\n    const hideGqlTypeNameWarning = () => {\n        setWarning(false);\n    };\n\n    const checkGqlType: FormOnSubmit<CmsDynamicZoneTemplate> = data => {\n        if (newTemplate) {\n            return;\n        }\n\n        if (data.gqlTypeName !== props.template?.gqlTypeName) {\n            showGqlTypeNameWarning();\n        } else {\n            hideGqlTypeNameWarning();\n        }\n    };\n\n    const nameOnBlur = (form: FormAPI<CmsDynamicZoneTemplate>) => () => {\n        if (!form.data.gqlTypeName) {\n            /**\n             * There is a possibility that name is undefined, so let's check for it.\n             */\n            const name = form.data.name;\n            if (!name) {\n                return;\n            }\n            form.setValue(\"gqlTypeName\", getGraphQLTypeName(name));\n        }\n    };\n\n    const onFormChange: FormOnSubmit<CmsDynamicZoneTemplate> = (data, form) => {\n        checkGqlType(data, form);\n    };\n\n    return (\n        <Form<CmsDynamicZoneTemplate>\n            onSubmit={onSubmit}\n            data={props.template}\n            onChange={onFormChange}\n        >\n            {({ Bind, submit, form }) => (\n                <Dialog\n                    open={true}\n                    onClose={props.onClose}\n                    title={dialogTitle}\n                    actions={\n                        <>\n                            <Dialog.CancelAction />\n                            <Dialog.ConfirmAction onClick={submit} text={submitLabel} />\n                        </>\n                    }\n                >\n                    <Grid>\n                        <>\n                            {showWarning ? (\n                                <Grid.Column span={12}>\n                                    <Alert title={\"GraphQL Schema Change\"} type={\"danger\"}>\n                                        You&apos;ve changed the GraphQL schema type name! If your\n                                        API is being queried by a 3rd party application, this will\n                                        affect the GraphQL queries in those applications. Make sure\n                                        your consumers are informed about this change!\n                                    </Alert>\n                                </Grid.Column>\n                            ) : null}\n                        </>\n                        <Grid.Column span={12}>\n                            <Bind name={\"name\"} validators={[validation.create(\"required\")]}>\n                                <Input label={\"Name\"} onBlur={nameOnBlur(form)} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind\n                                name={\"gqlTypeName\"}\n                                validators={[validation.create(\"required\"), typeNameValidator]}\n                            >\n                                <Input\n                                    autoFocus={false}\n                                    label={\"GraphQL Type Name\"}\n                                    description={\n                                        \"This string will be used to generate the GraphQL schema. \"\n                                    }\n                                />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"icon\"} validators={[validation.create(\"required\")]}>\n                                <IconPicker label={\"Icon\"} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"description\"} validators={[validation.create(\"required\")]}>\n                                <Textarea rows={3} label={\"Description\"} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"tags\"} defaultValue={[]}>\n                                <Tags label={\"Tags\"} />\n                            </Bind>\n                        </Grid.Column>\n                    </Grid>\n                </Dialog>\n            )}\n        </Form>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fields/dynamicZone/TemplateDialog.js","sources":["../../../../../src/admin/plugins/fields/dynamicZone/TemplateDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { FormAPI, FormOnSubmit } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { IconPicker } from \"~/admin/components/IconPicker.js\";\nimport { Tags } from \"@webiny/admin-ui\";\nimport { Alert, Dialog, Grid, Input, Textarea } from \"@webiny/admin-ui\";\n\nconst typeNameValidator = (value: string) => {\n    const regex = new RegExp(\"^[A-Z]+[_0-9A-Za-z]+$\");\n    if (regex.test(value)) {\n        return true;\n    }\n\n    throw Error(\n        `Must start with a capital letter, may contain numbers, and must not contain spaces.`\n    );\n};\n\nconst getGraphQLTypeName = (value: string) => {\n    const titleCase = value.charAt(0).toUpperCase() + value.slice(1);\n    return titleCase.replace(/[^a-zA-Z0-9]/g, \"\");\n};\n\ninterface TemplateDialogProps {\n    onClose: () => void;\n    template?: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateDialog = (props: TemplateDialogProps) => {\n    const [showWarning, setWarning] = useState(false);\n    const newTemplate = !props.template;\n    const dialogTitle = newTemplate ? \"Add Template\" : \"Edit Template\";\n    const submitLabel = newTemplate ? \"Add Template\" : \"Update Template\";\n\n    const onSubmit: FormOnSubmit<CmsDynamicZoneTemplate> = template => {\n        if (template.id) {\n            props.onTemplate(template);\n        } else {\n            props.onTemplate({\n                ...template,\n                id: generateAlphaNumericLowerCaseId(),\n                fields: [],\n                layout: []\n            });\n        }\n        props.onClose();\n    };\n\n    const showGqlTypeNameWarning = () => {\n        setWarning(true);\n    };\n\n    const hideGqlTypeNameWarning = () => {\n        setWarning(false);\n    };\n\n    const checkGqlType: FormOnSubmit<CmsDynamicZoneTemplate> = data => {\n        if (newTemplate) {\n            return;\n        }\n\n        if (data.gqlTypeName !== props.template?.gqlTypeName) {\n            showGqlTypeNameWarning();\n        } else {\n            hideGqlTypeNameWarning();\n        }\n    };\n\n    const nameOnBlur = (form: FormAPI<CmsDynamicZoneTemplate>) => () => {\n        if (!form.data.gqlTypeName) {\n            /**\n             * There is a possibility that name is undefined, so let's check for it.\n             */\n            const name = form.data.name;\n            if (!name) {\n                return;\n            }\n            form.setValue(\"gqlTypeName\", getGraphQLTypeName(name));\n        }\n    };\n\n    const onFormChange: FormOnSubmit<CmsDynamicZoneTemplate> = (data, form) => {\n        checkGqlType(data, form);\n    };\n\n    return (\n        <Form<CmsDynamicZoneTemplate>\n            onSubmit={onSubmit}\n            data={props.template}\n            onChange={onFormChange}\n        >\n            {({ Bind, submit, form }) => (\n                <Dialog\n                    open={true}\n                    onClose={props.onClose}\n                    title={dialogTitle}\n                    actions={\n                        <>\n                            <Dialog.CancelAction />\n                            <Dialog.ConfirmAction onClick={submit} text={submitLabel} />\n                        </>\n                    }\n                >\n                    <Grid>\n                        <>\n                            {showWarning ? (\n                                <Grid.Column span={12}>\n                                    <Alert title={\"GraphQL Schema Change\"} type={\"danger\"}>\n                                        You&apos;ve changed the GraphQL schema type name! If your\n                                        API is being queried by a 3rd party application, this will\n                                        affect the GraphQL queries in those applications. Make sure\n                                        your consumers are informed about this change!\n                                    </Alert>\n                                </Grid.Column>\n                            ) : null}\n                        </>\n                        <Grid.Column span={12}>\n                            <Bind name={\"name\"} validators={[validation.create(\"required\")]}>\n                                <Input label={\"Name\"} onBlur={nameOnBlur(form)} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind\n                                name={\"gqlTypeName\"}\n                                validators={[validation.create(\"required\"), typeNameValidator]}\n                            >\n                                <Input\n                                    autoFocus={false}\n                                    label={\"GraphQL Type Name\"}\n                                    description={\n                                        \"This string will be used to generate the GraphQL schema. \"\n                                    }\n                                />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"icon\"} validators={[validation.create(\"required\")]}>\n                                <IconPicker label={\"Icon\"} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"description\"} validators={[validation.create(\"required\")]}>\n                                <Textarea rows={3} label={\"Description\"} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"tags\"} defaultValue={[]}>\n                                <Tags label={\"Tags\"} />\n                            </Bind>\n                        </Grid.Column>\n                    </Grid>\n                </Dialog>\n            )}\n        </Form>\n    );\n};\n"],"names":["typeNameValidator","value","regex","RegExp","Error","getGraphQLTypeName","titleCase","TemplateDialog","props","showWarning","setWarning","useState","newTemplate","dialogTitle","submitLabel","onSubmit","template","generateAlphaNumericLowerCaseId","showGqlTypeNameWarning","hideGqlTypeNameWarning","checkGqlType","data","nameOnBlur","form","name","onFormChange","Form","Bind","submit","Dialog","Grid","Alert","validation","Input","IconPicker","Textarea","Tags"],"mappings":"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"}

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

@@ -1,21 +1,29 @@
-export const commonValidators = [{
-  name: "minLength",
-  label: "Minimum number of entries",
-  description: "Define the minimum number of entries a user must create.",
-  defaultMessage: "You must create at least {value} entries.",
-  variables: [{
-    name: "value",
-    description: "This defines the minimum number of entries a user must create."
-  }]
-}, {
-  name: "maxLength",
-  label: "Maximum number of entries",
-  description: "Define the maximum number of entries a user can create.",
-  defaultMessage: "You have too many entries (max: {value}).",
-  variables: [{
-    name: "value",
-    description: "This defines the maximum number of entries a user can create."
-  }]
-}];
+const commonValidators = [
+    {
+        name: "minLength",
+        label: "Minimum number of entries",
+        description: "Define the minimum number of entries a user must create.",
+        defaultMessage: "You must create at least {value} entries.",
+        variables: [
+            {
+                name: "value",
+                description: "This defines the minimum number of entries a user must create."
+            }
+        ]
+    },
+    {
+        name: "maxLength",
+        label: "Maximum number of entries",
+        description: "Define the maximum number of entries a user can create.",
+        defaultMessage: "You have too many entries (max: {value}).",
+        variables: [
+            {
+                name: "value",
+                description: "This defines the maximum number of entries a user can create."
+            }
+        ]
+    }
+];
+export { commonValidators };
 
 //# sourceMappingURL=commonValidators.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["commonValidators","name","label","description","defaultMessage","variables"],"sources":["commonValidators.ts"],"sourcesContent":["import type { CmsModelFieldValidatorConfig } from \"~/types.js\";\n\nexport const commonValidators: CmsModelFieldValidatorConfig[] = [\n    {\n        name: \"minLength\",\n        label: \"Minimum number of entries\",\n        description: \"Define the minimum number of entries a user must create.\",\n        defaultMessage: \"You must create at least {value} entries.\",\n        variables: [\n            {\n                name: \"value\",\n                description: \"This defines the minimum number of entries a user must create.\"\n            }\n        ]\n    },\n    {\n        name: \"maxLength\",\n        label: \"Maximum number of entries\",\n        description: \"Define the maximum number of entries a user can create.\",\n        defaultMessage: \"You have too many entries (max: {value}).\",\n        variables: [\n            {\n                name: \"value\",\n                description: \"This defines the maximum number of entries a user can create.\"\n            }\n        ]\n    }\n];\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAgD,GAAG,CAC5D;EACIC,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,2BAA2B;EAClCC,WAAW,EAAE,0DAA0D;EACvEC,cAAc,EAAE,2CAA2C;EAC3DC,SAAS,EAAE,CACP;IACIJ,IAAI,EAAE,OAAO;IACbE,WAAW,EAAE;EACjB,CAAC;AAET,CAAC,EACD;EACIF,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,2BAA2B;EAClCC,WAAW,EAAE,yDAAyD;EACtEC,cAAc,EAAE,2CAA2C;EAC3DC,SAAS,EAAE,CACP;IACIJ,IAAI,EAAE,OAAO;IACbE,WAAW,EAAE;EACjB,CAAC;AAET,CAAC,CACJ","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fields/dynamicZone/commonValidators.js","sources":["../../../../../src/admin/plugins/fields/dynamicZone/commonValidators.ts"],"sourcesContent":["import type { CmsModelFieldValidatorConfig } from \"~/types.js\";\n\nexport const commonValidators: CmsModelFieldValidatorConfig[] = [\n    {\n        name: \"minLength\",\n        label: \"Minimum number of entries\",\n        description: \"Define the minimum number of entries a user must create.\",\n        defaultMessage: \"You must create at least {value} entries.\",\n        variables: [\n            {\n                name: \"value\",\n                description: \"This defines the minimum number of entries a user must create.\"\n            }\n        ]\n    },\n    {\n        name: \"maxLength\",\n        label: \"Maximum number of entries\",\n        description: \"Define the maximum number of entries a user can create.\",\n        defaultMessage: \"You have too many entries (max: {value}).\",\n        variables: [\n            {\n                name: \"value\",\n                description: \"This defines the maximum number of entries a user can create.\"\n            }\n        ]\n    }\n];\n"],"names":["commonValidators"],"mappings":"AAEO,MAAMA,mBAAmD;IAC5D;QACI,MAAM;QACN,OAAO;QACP,aAAa;QACb,gBAAgB;QAChB,WAAW;YACP;gBACI,MAAM;gBACN,aAAa;YACjB;SACH;IACL;IACA;QACI,MAAM;QACN,OAAO;QACP,aAAa;QACb,gBAAgB;QAChB,WAAW;YACP;gBACI,MAAM;gBACN,aAAa;YACjB;SACH;IACL;CACH"}

package/admin/plugins/fields/dynamicZone.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { ReactComponent as ObjectIcon } from "@webiny/icons/dynamic_form.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/dynamic_form.svg";
 import { i18n } from "@webiny/app/i18n/index.js";
 import { createFieldsList } from "@webiny/app-headless-cms-common";
 import { DynamicZone } from "./dynamicZone/DynamicZone.js";
@@ -7,76 +7,75 @@ import { createTypeName } from "../../../utils/createTypeName.js";
 import { commonValidators } from "./dynamicZone/commonValidators.js";
 const t = i18n.ns("app-headless-cms/admin/fields");
 const listValidators = {
-  validators: commonValidators,
-  title: "List validators",
-  description: "These validators are applied to the entire dynamic zone."
+    validators: commonValidators,
+    title: "List validators",
+    description: "These validators are applied to the entire dynamic zone."
 };
-export const dynamicZoneField = {
-  type: "cms-editor-field-type",
-  name: "cms-editor-field-type-dynamic-zone",
-  field: {
-    type: "dynamicZone",
-    label: t`Dynamic Zone`,
-    description: t`Define content templates to be used during content creation.`,
-    icon: /*#__PURE__*/React.createElement(ObjectIcon, null),
-    allowList: true,
-    allowPredefinedValues: false,
-    validators: field => {
-      if (field.list) {
-        return {
-          validators: ["dynamicZone"],
-          title: "Template Validators",
-          description: "Validators for each of the templates in this dynamic zone."
-        };
-      }
-      return ["required"];
-    },
-    listValidators,
-    listLabel: t`Use as a list of values`,
-    createField() {
-      return {
-        type: this.type,
-        listValidation: [{
-          name: "dynamicZone"
-        }],
-        settings: {
-          templates: []
+const dynamicZoneField = {
+    type: "cms-editor-field-type",
+    name: "cms-editor-field-type-dynamic-zone",
+    field: {
+        type: "dynamicZone",
+        label: t`Dynamic Zone`,
+        description: t`Define content templates to be used during content creation.`,
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        allowList: true,
+        allowPredefinedValues: false,
+        validators: (field)=>{
+            if (field.list) return {
+                validators: [
+                    "dynamicZone"
+                ],
+                title: "Template Validators",
+                description: "Validators for each of the templates in this dynamic zone."
+            };
+            return [
+                "required"
+            ];
         },
-        renderer: {
-          name: "dynamicZone"
-        }
-      };
-    },
-    render() {
-      return /*#__PURE__*/React.createElement(DynamicZone, null);
-    },
-    graphql: {
-      queryField({
-        model,
-        field,
-        graphQLTypePrefix
-      }) {
-        const prefix = `${graphQLTypePrefix}_${createTypeName(field.fieldId)}`;
-        const templates = field.settings?.templates || [];
-        if (!templates.length) {
-          return null;
-        }
-        const fragments = templates.map(template => {
-          const templateGraphQLType = `${prefix}_${template.gqlTypeName}`;
-          return `...on ${templateGraphQLType} {
+        listValidators: listValidators,
+        listLabel: t`Use as a list of values`,
+        createField () {
+            return {
+                type: this.type,
+                listValidation: [
+                    {
+                        name: "dynamicZone"
+                    }
+                ],
+                settings: {
+                    templates: []
+                },
+                renderer: {
+                    name: "dynamicZone"
+                }
+            };
+        },
+        render () {
+            return /*#__PURE__*/ react.createElement(DynamicZone, null);
+        },
+        graphql: {
+            queryField ({ model, field, graphQLTypePrefix }) {
+                const prefix = `${graphQLTypePrefix}_${createTypeName(field.fieldId)}`;
+                const templates = field.settings?.templates || [];
+                if (!templates.length) return null;
+                const fragments = templates.map((template)=>{
+                    const templateGraphQLType = `${prefix}_${template.gqlTypeName}`;
+                    return `...on ${templateGraphQLType} {
                         ${createFieldsList({
-            model,
-            fields: template.fields || [],
-            graphQLTypePrefix: templateGraphQLType
-          })}
+                        model,
+                        fields: template.fields || [],
+                        graphQLTypePrefix: templateGraphQLType
+                    })}
                         _templateId
                         __typename
                     }`;
-        });
-        return `{ ${fragments.join("\n")} }`;
-      }
+                });
+                return `{ ${fragments.join("\n")} }`;
+            }
+        }
     }
-  }
 };
+export { dynamicZoneField };
 
 //# sourceMappingURL=dynamicZone.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","ObjectIcon","i18n","createFieldsList","DynamicZone","createTypeName","commonValidators","t","ns","listValidators","validators","title","description","dynamicZoneField","type","name","field","label","icon","createElement","allowList","allowPredefinedValues","list","listLabel","createField","listValidation","settings","templates","renderer","render","graphql","queryField","model","graphQLTypePrefix","prefix","fieldId","length","fragments","map","template","templateGraphQLType","gqlTypeName","fields","join"],"sources":["dynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ObjectIcon } from \"@webiny/icons/dynamic_form.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { createFieldsList } from \"@webiny/app-headless-cms-common\";\nimport { DynamicZone } from \"~/admin/plugins/fields/dynamicZone/DynamicZone.js\";\nimport { createTypeName } from \"~/utils/createTypeName.js\";\nimport type { CmsModelFieldTypePlugin, CmsModelFieldValidatorsGroup } from \"~/types.js\";\nimport { commonValidators } from \"./dynamicZone/commonValidators.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\nconst listValidators: CmsModelFieldValidatorsGroup = {\n    validators: commonValidators,\n    title: \"List validators\",\n    description: \"These validators are applied to the entire dynamic zone.\"\n};\n\nexport const dynamicZoneField: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-dynamic-zone\",\n    field: {\n        type: \"dynamicZone\",\n        label: t`Dynamic Zone`,\n        description: t`Define content templates to be used during content creation.`,\n        icon: <ObjectIcon />,\n        allowList: true,\n        allowPredefinedValues: false,\n        validators: field => {\n            if (field.list) {\n                return {\n                    validators: [\"dynamicZone\"],\n                    title: \"Template Validators\",\n                    description: \"Validators for each of the templates in this dynamic zone.\"\n                };\n            }\n\n            return [\"required\"];\n        },\n        listValidators,\n        listLabel: t`Use as a list of values`,\n        createField() {\n            return {\n                type: this.type,\n                listValidation: [{ name: \"dynamicZone\" }],\n                settings: {\n                    templates: []\n                },\n                renderer: {\n                    name: \"dynamicZone\"\n                }\n            };\n        },\n        render() {\n            return <DynamicZone />;\n        },\n        graphql: {\n            queryField({ model, field, graphQLTypePrefix }) {\n                const prefix = `${graphQLTypePrefix}_${createTypeName(field.fieldId)}`;\n                const templates = field.settings?.templates || [];\n\n                if (!templates.length) {\n                    return null;\n                }\n\n                const fragments = templates.map(template => {\n                    const templateGraphQLType = `${prefix}_${template.gqlTypeName}`;\n                    return `...on ${templateGraphQLType} {\n                        ${createFieldsList({\n                            model,\n                            fields: template.fields || [],\n                            graphQLTypePrefix: templateGraphQLType\n                        })}\n                        _templateId\n                        __typename\n                    }`;\n                });\n                return `{ ${fragments.join(\"\\n\")} }`;\n            }\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,UAAU,QAAQ,gCAAgC;AAC7E,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,gBAAgB,QAAQ,iCAAiC;AAClE,SAASC,WAAW;AACpB,SAASC,cAAc;AAEvB,SAASC,gBAAgB;AAEzB,MAAMC,CAAC,GAAGL,IAAI,CAACM,EAAE,CAAC,+BAA+B,CAAC;AAElD,MAAMC,cAA4C,GAAG;EACjDC,UAAU,EAAEJ,gBAAgB;EAC5BK,KAAK,EAAE,iBAAiB;EACxBC,WAAW,EAAE;AACjB,CAAC;AAED,OAAO,MAAMC,gBAAyC,GAAG;EACrDC,IAAI,EAAE,uBAAuB;EAC7BC,IAAI,EAAE,oCAAoC;EAC1CC,KAAK,EAAE;IACHF,IAAI,EAAE,aAAa;IACnBG,KAAK,EAAEV,CAAC,cAAc;IACtBK,WAAW,EAAEL,CAAC,8DAA8D;IAC5EW,IAAI,eAAEnB,KAAA,CAAAoB,aAAA,CAAClB,UAAU,MAAE,CAAC;IACpBmB,SAAS,EAAE,IAAI;IACfC,qBAAqB,EAAE,KAAK;IAC5BX,UAAU,EAAEM,KAAK,IAAI;MACjB,IAAIA,KAAK,CAACM,IAAI,EAAE;QACZ,OAAO;UACHZ,UAAU,EAAE,CAAC,aAAa,CAAC;UAC3BC,KAAK,EAAE,qBAAqB;UAC5BC,WAAW,EAAE;QACjB,CAAC;MACL;MAEA,OAAO,CAAC,UAAU,CAAC;IACvB,CAAC;IACDH,cAAc;IACdc,SAAS,EAAEhB,CAAC,yBAAyB;IACrCiB,WAAWA,CAAA,EAAG;MACV,OAAO;QACHV,IAAI,EAAE,IAAI,CAACA,IAAI;QACfW,cAAc,EAAE,CAAC;UAAEV,IAAI,EAAE;QAAc,CAAC,CAAC;QACzCW,QAAQ,EAAE;UACNC,SAAS,EAAE;QACf,CAAC;QACDC,QAAQ,EAAE;UACNb,IAAI,EAAE;QACV;MACJ,CAAC;IACL,CAAC;IACDc,MAAMA,CAAA,EAAG;MACL,oBAAO9B,KAAA,CAAAoB,aAAA,CAACf,WAAW,MAAE,CAAC;IAC1B,CAAC;IACD0B,OAAO,EAAE;MACLC,UAAUA,CAAC;QAAEC,KAAK;QAAEhB,KAAK;QAAEiB;MAAkB,CAAC,EAAE;QAC5C,MAAMC,MAAM,GAAG,GAAGD,iBAAiB,IAAI5B,cAAc,CAACW,KAAK,CAACmB,OAAO,CAAC,EAAE;QACtE,MAAMR,SAAS,GAAGX,KAAK,CAACU,QAAQ,EAAEC,SAAS,IAAI,EAAE;QAEjD,IAAI,CAACA,SAAS,CAACS,MAAM,EAAE;UACnB,OAAO,IAAI;QACf;QAEA,MAAMC,SAAS,GAAGV,SAAS,CAACW,GAAG,CAACC,QAAQ,IAAI;UACxC,MAAMC,mBAAmB,GAAG,GAAGN,MAAM,IAAIK,QAAQ,CAACE,WAAW,EAAE;UAC/D,OAAO,SAASD,mBAAmB;AACvD,0BAA0BrC,gBAAgB,CAAC;YACf6B,KAAK;YACLU,MAAM,EAAEH,QAAQ,CAACG,MAAM,IAAI,EAAE;YAC7BT,iBAAiB,EAAEO;UACvB,CAAC,CAAC;AAC1B;AACA;AACA,sBAAsB;QACN,CAAC,CAAC;QACF,OAAO,KAAKH,SAAS,CAACM,IAAI,CAAC,IAAI,CAAC,IAAI;MACxC;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fields/dynamicZone.js","sources":["../../../../src/admin/plugins/fields/dynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ObjectIcon } from \"@webiny/icons/dynamic_form.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { createFieldsList } from \"@webiny/app-headless-cms-common\";\nimport { DynamicZone } from \"~/admin/plugins/fields/dynamicZone/DynamicZone.js\";\nimport { createTypeName } from \"~/utils/createTypeName.js\";\nimport type { CmsModelFieldTypePlugin, CmsModelFieldValidatorsGroup } from \"~/types.js\";\nimport { commonValidators } from \"./dynamicZone/commonValidators.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields\");\n\nconst listValidators: CmsModelFieldValidatorsGroup = {\n    validators: commonValidators,\n    title: \"List validators\",\n    description: \"These validators are applied to the entire dynamic zone.\"\n};\n\nexport const dynamicZoneField: CmsModelFieldTypePlugin = {\n    type: \"cms-editor-field-type\",\n    name: \"cms-editor-field-type-dynamic-zone\",\n    field: {\n        type: \"dynamicZone\",\n        label: t`Dynamic Zone`,\n        description: t`Define content templates to be used during content creation.`,\n        icon: <ObjectIcon />,\n        allowList: true,\n        allowPredefinedValues: false,\n        validators: field => {\n            if (field.list) {\n                return {\n                    validators: [\"dynamicZone\"],\n                    title: \"Template Validators\",\n                    description: \"Validators for each of the templates in this dynamic zone.\"\n                };\n            }\n\n            return [\"required\"];\n        },\n        listValidators,\n        listLabel: t`Use as a list of values`,\n        createField() {\n            return {\n                type: this.type,\n                listValidation: [{ name: \"dynamicZone\" }],\n                settings: {\n                    templates: []\n                },\n                renderer: {\n                    name: \"dynamicZone\"\n                }\n            };\n        },\n        render() {\n            return <DynamicZone />;\n        },\n        graphql: {\n            queryField({ model, field, graphQLTypePrefix }) {\n                const prefix = `${graphQLTypePrefix}_${createTypeName(field.fieldId)}`;\n                const templates = field.settings?.templates || [];\n\n                if (!templates.length) {\n                    return null;\n                }\n\n                const fragments = templates.map(template => {\n                    const templateGraphQLType = `${prefix}_${template.gqlTypeName}`;\n                    return `...on ${templateGraphQLType} {\n                        ${createFieldsList({\n                            model,\n                            fields: template.fields || [],\n                            graphQLTypePrefix: templateGraphQLType\n                        })}\n                        _templateId\n                        __typename\n                    }`;\n                });\n                return `{ ${fragments.join(\"\\n\")} }`;\n            }\n        }\n    }\n};\n"],"names":["t","i18n","listValidators","commonValidators","dynamicZoneField","ObjectIcon","field","DynamicZone","model","graphQLTypePrefix","prefix","createTypeName","templates","fragments","template","templateGraphQLType","createFieldsList"],"mappings":";;;;;;;AASA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,iBAA+C;IACjD,YAAYC;IACZ,OAAO;IACP,aAAa;AACjB;AAEO,MAAMC,mBAA4C;IACrD,MAAM;IACN,MAAM;IACN,OAAO;QACH,MAAM;QACN,OAAOJ,CAAC,CAAC,YAAY,CAAC;QACtB,aAAaA,CAAC,CAAC,4DAA4D,CAAC;QAC5E,MAAM,WAAN,GAAM,oBAACK,gBAAUA;QACjB,WAAW;QACX,uBAAuB;QACvB,YAAYC,CAAAA;YACR,IAAIA,MAAM,IAAI,EACV,OAAO;gBACH,YAAY;oBAAC;iBAAc;gBAC3B,OAAO;gBACP,aAAa;YACjB;YAGJ,OAAO;gBAAC;aAAW;QACvB;QACAJ,gBAAAA;QACA,WAAWF,CAAC,CAAC,uBAAuB,CAAC;QACrC;YACI,OAAO;gBACH,MAAM,IAAI,CAAC,IAAI;gBACf,gBAAgB;oBAAC;wBAAE,MAAM;oBAAc;iBAAE;gBACzC,UAAU;oBACN,WAAW,EAAE;gBACjB;gBACA,UAAU;oBACN,MAAM;gBACV;YACJ;QACJ;QACA;YACI,OAAO,WAAP,GAAO,oBAACO,aAAWA;QACvB;QACA,SAAS;YACL,YAAW,EAAEC,KAAK,EAAEF,KAAK,EAAEG,iBAAiB,EAAE;gBAC1C,MAAMC,SAAS,GAAGD,kBAAkB,CAAC,EAAEE,eAAeL,MAAM,OAAO,GAAG;gBACtE,MAAMM,YAAYN,MAAM,QAAQ,EAAE,aAAa,EAAE;gBAEjD,IAAI,CAACM,UAAU,MAAM,EACjB,OAAO;gBAGX,MAAMC,YAAYD,UAAU,GAAG,CAACE,CAAAA;oBAC5B,MAAMC,sBAAsB,GAAGL,OAAO,CAAC,EAAEI,SAAS,WAAW,EAAE;oBAC/D,OAAO,CAAC,MAAM,EAAEC,oBAAoB;wBAChC,EAAEC,iBAAiB;wBACfR;wBACA,QAAQM,SAAS,MAAM,IAAI,EAAE;wBAC7B,mBAAmBC;oBACvB,GAAG;;;qBAGN,CAAC;gBACN;gBACA,OAAO,CAAC,EAAE,EAAEF,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC;YACxC;QACJ;IACJ;AACJ"}

package/admin/plugins/fields/icons/ballot_black_24dp.js

@@ -0,0 +1,19 @@
+import __rslib_svgr_url__0__ from "../../../../static/svg/ballot_black_24dp.f73e2e82.svg";
+import * as __rspack_external_react from "react";
+const SvgBallotBlack24Dp = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        d: "M14 9.5h3c.55 0 1-.45 1-1s-.45-1-1-1h-3c-.55 0-1 .45-1 1s.45 1 1 1m0 7h3c.55 0 1-.45 1-1s-.45-1-1-1h-3c-.55 0-1 .45-1 1s.45 1 1 1m5 4.5H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2M7 11h3c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1m0-4h3v3H7zm0 11h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1m0-4h3v3H7z"
+    }));
+const ballot_black_24dp = __rslib_svgr_url__0__;
+export default ballot_black_24dp;
+export { SvgBallotBlack24Dp as ReactComponent };
+
+//# sourceMappingURL=ballot_black_24dp.js.map

package/admin/plugins/fields/icons/ballot_black_24dp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fields/icons/ballot_black_24dp.js","sources":["../../../../../src/admin/plugins/fields/icons/ballot_black_24dp.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgBallotBlack24Dp = props => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} viewBox=\"0 0 24 24\" {...props}><path fill=\"none\" d=\"M0 0h24v24H0z\" /><path d=\"M14 9.5h3c.55 0 1-.45 1-1s-.45-1-1-1h-3c-.55 0-1 .45-1 1s.45 1 1 1m0 7h3c.55 0 1-.45 1-1s-.45-1-1-1h-3c-.55 0-1 .45-1 1s.45 1 1 1m5 4.5H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2M7 11h3c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1m0-4h3v3H7zm0 11h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1m0-4h3v3H7z\" /></svg>;\nexport { SvgBallotBlack24Dp as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/ballot_black_24dp.f73e2e82.svg\";"],"names":["SvgBallotBlack24Dp","props"],"mappings":";;AACA,MAAMA,qBAAqBC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAa,GAAGA,KAAK;qBAAE,sCAAC;QAAK,MAAK;QAAO,GAAE;sBAAkB,sCAAC;QAAK,GAAE;;AAEhL"}

package/admin/plugins/fields/icons/dropdown-icon.js

@@ -0,0 +1,36 @@
+import __rslib_svgr_url__0__ from "../../../../static/svg/dropdown-icon.b7d965fb.svg";
+import * as __rspack_external_react from "react";
+const SvgDropdownIcon = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 815,
+        height: 815,
+        viewBox: "0 0 815 815",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        d: "M0 0h815v815H0z"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("rect", {
+        width: 700,
+        height: 250,
+        x: 57,
+        y: 282,
+        stroke: "currentColor",
+        strokeWidth: 50,
+        rx: 8
+    }), /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        stroke: "currentColor",
+        strokeLinecap: "square",
+        strokeWidth: 50,
+        d: "M524 329v174"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fill: "currentColor",
+        fillRule: "nonzero",
+        d: "m594.84 408.34 33.545 33.839a12.82 12.82 0 0 0 18.262 0l33.545-33.838c8.16-8.231 2.331-22.341-9.196-22.341h-67.09c-11.527 0-17.226 14.11-9.066 22.34"
+    })));
+const dropdown_icon = __rslib_svgr_url__0__;
+export default dropdown_icon;
+export { SvgDropdownIcon as ReactComponent };
+
+//# sourceMappingURL=dropdown-icon.js.map

package/admin/plugins/fields/icons/dropdown-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fields/icons/dropdown-icon.js","sources":["../../../../../src/admin/plugins/fields/icons/dropdown-icon.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgDropdownIcon = props => <svg xmlns=\"http://www.w3.org/2000/svg\" width={815} height={815} viewBox=\"0 0 815 815\" {...props}><g fill=\"none\" fillRule=\"evenodd\"><path d=\"M0 0h815v815H0z\" /><rect width={700} height={250} x={57} y={282} stroke=\"currentColor\" strokeWidth={50} rx={8} /><path stroke=\"currentColor\" strokeLinecap=\"square\" strokeWidth={50} d=\"M524 329v174\" /><path fill=\"currentColor\" fillRule=\"nonzero\" d=\"m594.84 408.34 33.545 33.839a12.82 12.82 0 0 0 18.262 0l33.545-33.838c8.16-8.231 2.331-22.341-9.196-22.341h-67.09c-11.527 0-17.226 14.11-9.066 22.34\" /></g></svg>;\nexport { SvgDropdownIcon as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/dropdown-icon.b7d965fb.svg\";"],"names":["SvgDropdownIcon","props"],"mappings":";;AACA,MAAMA,kBAAkBC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,OAAO;QAAK,QAAQ;QAAK,SAAQ;QAAe,GAAGA,KAAK;qBAAE,sCAAC;QAAE,MAAK;QAAO,UAAS;qBAAU,sCAAC;QAAK,GAAE;sBAAoB,sCAAC;QAAK,OAAO;QAAK,QAAQ;QAAK,GAAG;QAAI,GAAG;QAAK,QAAO;QAAe,aAAa;QAAI,IAAI;sBAAK,sCAAC;QAAK,QAAO;QAAe,eAAc;QAAS,aAAa;QAAI,GAAE;sBAAiB,sCAAC;QAAK,MAAK;QAAe,UAAS;QAAU,GAAE;;AAEra"}