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

package/admin/plugins/fieldRenderers/object/FieldSettings.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { CmsModelField } from "@webiny/app-headless-cms-common/types";
+import type { CmsModelField } from "@webiny/app-headless-cms-common/types/index.js";
 /**
  * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.
  * We also want to prevent log spamming in the browser console, so we cache and reuse each instance
@@ -13,29 +12,31 @@ export declare class FieldSettings {
         fields: {
             id: string;
             type: string;
-            fieldId: string;
-            storageId?: string | undefined;
+            fieldId: import("@webiny/app-headless-cms-common/types/model").CmsEditorFieldId;
+            storageId?: string;
             label: string;
-            helpText?: string | undefined;
-            placeholderText?: string | undefined;
-            validation?: (import("@webiny/app-headless-cms-common/types").CmsModelFieldValidator | import("@webiny/validation/types").Validator)[] | undefined;
-            listValidation?: import("@webiny/app-headless-cms-common/types").CmsModelFieldValidator[] | undefined;
-            multipleValues?: boolean | undefined;
-            predefinedValues?: import("@webiny/app-headless-cms-common/types").CmsEditorFieldPredefinedValues | undefined;
-            settings?: import("@webiny/app-headless-cms-common/types").CmsModelFieldSettings<unknown> | undefined;
+            help?: string | React.ReactNode;
+            description?: string | React.ReactNode;
+            note?: string | React.ReactNode;
+            placeholder?: string;
+            validation?: (import("@webiny/app-headless-cms-common/types/validation").CmsModelFieldValidator | import("@webiny/validation/types").Validator)[];
+            listValidation?: import("@webiny/app-headless-cms-common/types/validation").CmsModelFieldValidator[];
+            list?: boolean;
+            predefinedValues?: import("@webiny/app-headless-cms-common/types/index.js").CmsEditorFieldPredefinedValues;
+            settings?: import("@webiny/app-headless-cms-common/types/model").CmsModelFieldSettings<unknown> | undefined;
             renderer: {
                 name: string;
-                settings?: Record<string, any> | undefined;
-            } | ((props: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererProps) => import("react").ReactNode);
-            tags?: string[] | undefined;
+                settings?: Record<string, any>;
+            } | import("@webiny/app-headless-cms-common/types/index.js").CmsModelFieldRendererPlugin["renderer"]["render"];
+            tags?: string[];
         }[];
         layout: string[][];
-        defaultValue?: string | number | boolean | null | undefined;
-        defaultSetValue?: string | undefined;
-        type?: string | undefined;
-        models?: Pick<import("@webiny/app-headless-cms-common/types").CmsModel, "modelId">[] | undefined;
-        templates?: import("@webiny/app-headless-cms-common/types").CmsDynamicZoneTemplate[] | undefined;
-        imagesOnly?: boolean | undefined;
+        defaultValue?: string | boolean | number | null | undefined;
+        defaultSetValue?: string;
+        type?: string;
+        models?: Pick<import("@webiny/app-headless-cms-common/types/model").CmsModel, "modelId">[];
+        templates?: import("@webiny/app-headless-cms-common/types/index.js").CmsDynamicZoneTemplate[];
+        imagesOnly?: boolean;
     };
     hasFields(): boolean;
     logMissingFields(): void;

package/admin/plugins/fieldRenderers/object/FieldSettings.js.map

@@ -1 +1 @@
-{"version":3,"names":["cache","Map","FieldSettings","logged","constructor","field","getSettings","settings","fields","layout","hasFields","length","logMissingFields","console","info","fieldId","createFrom","has","get","set"],"sources":["FieldSettings.ts"],"sourcesContent":["import type { CmsModelField } from \"@webiny/app-headless-cms-common/types\";\n\nconst cache = new Map<CmsModelField, FieldSettings>();\n\n/**\n * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.\n * We also want to prevent log spamming in the browser console, so we cache and reuse each instance\n * for every unique field object. That way, each instance can track its own state.\n */\nexport class FieldSettings {\n    private readonly field: CmsModelField;\n    private logged = false;\n\n    private constructor(field: CmsModelField) {\n        this.field = field;\n    }\n\n    getSettings() {\n        return {\n            ...this.field.settings,\n            fields: this.field.settings?.fields || [],\n            layout: this.field.settings?.layout || []\n        };\n    }\n\n    hasFields() {\n        if (!this.field.settings) {\n            return false;\n        }\n\n        if (!this.field.settings.fields) {\n            return false;\n        }\n\n        return this.field.settings.fields.length > 0;\n    }\n\n    logMissingFields() {\n        if (this.logged) {\n            return;\n        }\n\n        console.info(\n            `Skipping \"${this.field.fieldId}\" field. There are no fields defined for this object.`\n        );\n\n        this.logged = true;\n    }\n\n    public static createFrom(field: CmsModelField): FieldSettings {\n        if (cache.has(field)) {\n            return cache.get(field) as FieldSettings;\n        }\n\n        cache.set(field, new FieldSettings(field));\n\n        return cache.get(field) as FieldSettings;\n    }\n}\n"],"mappings":"AAEA,MAAMA,KAAK,GAAG,IAAIC,GAAG,CAA+B,CAAC;;AAErD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,CAAC;EAEfC,MAAM,GAAG,KAAK;EAEdC,WAAWA,CAACC,KAAoB,EAAE;IACtC,IAAI,CAACA,KAAK,GAAGA,KAAK;EACtB;EAEAC,WAAWA,CAAA,EAAG;IACV,OAAO;MACH,GAAG,IAAI,CAACD,KAAK,CAACE,QAAQ;MACtBC,MAAM,EAAE,IAAI,CAACH,KAAK,CAACE,QAAQ,EAAEC,MAAM,IAAI,EAAE;MACzCC,MAAM,EAAE,IAAI,CAACJ,KAAK,CAACE,QAAQ,EAAEE,MAAM,IAAI;IAC3C,CAAC;EACL;EAEAC,SAASA,CAAA,EAAG;IACR,IAAI,CAAC,IAAI,CAACL,KAAK,CAACE,QAAQ,EAAE;MACtB,OAAO,KAAK;IAChB;IAEA,IAAI,CAAC,IAAI,CAACF,KAAK,CAACE,QAAQ,CAACC,MAAM,EAAE;MAC7B,OAAO,KAAK;IAChB;IAEA,OAAO,IAAI,CAACH,KAAK,CAACE,QAAQ,CAACC,MAAM,CAACG,MAAM,GAAG,CAAC;EAChD;EAEAC,gBAAgBA,CAAA,EAAG;IACf,IAAI,IAAI,CAACT,MAAM,EAAE;MACb;IACJ;IAEAU,OAAO,CAACC,IAAI,CACR,aAAa,IAAI,CAACT,KAAK,CAACU,OAAO,uDACnC,CAAC;IAED,IAAI,CAACZ,MAAM,GAAG,IAAI;EACtB;EAEA,OAAca,UAAUA,CAACX,KAAoB,EAAiB;IAC1D,IAAIL,KAAK,CAACiB,GAAG,CAACZ,KAAK,CAAC,EAAE;MAClB,OAAOL,KAAK,CAACkB,GAAG,CAACb,KAAK,CAAC;IAC3B;IAEAL,KAAK,CAACmB,GAAG,CAACd,KAAK,EAAE,IAAIH,aAAa,CAACG,KAAK,CAAC,CAAC;IAE1C,OAAOL,KAAK,CAACkB,GAAG,CAACb,KAAK,CAAC;EAC3B;AACJ","ignoreList":[]}
+{"version":3,"names":["cache","Map","FieldSettings","logged","constructor","field","getSettings","settings","fields","layout","hasFields","length","logMissingFields","console","info","fieldId","createFrom","has","get","set"],"sources":["FieldSettings.ts"],"sourcesContent":["import type { CmsModelField } from \"@webiny/app-headless-cms-common/types/index.js\";\n\nconst cache = new Map<CmsModelField, FieldSettings>();\n\n/**\n * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.\n * We also want to prevent log spamming in the browser console, so we cache and reuse each instance\n * for every unique field object. That way, each instance can track its own state.\n */\nexport class FieldSettings {\n    private readonly field: CmsModelField;\n    private logged = false;\n\n    private constructor(field: CmsModelField) {\n        this.field = field;\n    }\n\n    getSettings() {\n        return {\n            ...this.field.settings,\n            fields: this.field.settings?.fields || [],\n            layout: this.field.settings?.layout || []\n        };\n    }\n\n    hasFields() {\n        if (!this.field.settings) {\n            return false;\n        }\n\n        if (!this.field.settings.fields) {\n            return false;\n        }\n\n        return this.field.settings.fields.length > 0;\n    }\n\n    logMissingFields() {\n        if (this.logged) {\n            return;\n        }\n\n        console.info(\n            `Skipping \"${this.field.fieldId}\" field. There are no fields defined for this object.`\n        );\n\n        this.logged = true;\n    }\n\n    public static createFrom(field: CmsModelField): FieldSettings {\n        if (cache.has(field)) {\n            return cache.get(field) as FieldSettings;\n        }\n\n        cache.set(field, new FieldSettings(field));\n\n        return cache.get(field) as FieldSettings;\n    }\n}\n"],"mappings":"AAEA,MAAMA,KAAK,GAAG,IAAIC,GAAG,CAA+B,CAAC;;AAErD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,CAAC;EAEfC,MAAM,GAAG,KAAK;EAEdC,WAAWA,CAACC,KAAoB,EAAE;IACtC,IAAI,CAACA,KAAK,GAAGA,KAAK;EACtB;EAEAC,WAAWA,CAAA,EAAG;IACV,OAAO;MACH,GAAG,IAAI,CAACD,KAAK,CAACE,QAAQ;MACtBC,MAAM,EAAE,IAAI,CAACH,KAAK,CAACE,QAAQ,EAAEC,MAAM,IAAI,EAAE;MACzCC,MAAM,EAAE,IAAI,CAACJ,KAAK,CAACE,QAAQ,EAAEE,MAAM,IAAI;IAC3C,CAAC;EACL;EAEAC,SAASA,CAAA,EAAG;IACR,IAAI,CAAC,IAAI,CAACL,KAAK,CAACE,QAAQ,EAAE;MACtB,OAAO,KAAK;IAChB;IAEA,IAAI,CAAC,IAAI,CAACF,KAAK,CAACE,QAAQ,CAACC,MAAM,EAAE;MAC7B,OAAO,KAAK;IAChB;IAEA,OAAO,IAAI,CAACH,KAAK,CAACE,QAAQ,CAACC,MAAM,CAACG,MAAM,GAAG,CAAC;EAChD;EAEAC,gBAAgBA,CAAA,EAAG;IACf,IAAI,IAAI,CAACT,MAAM,EAAE;MACb;IACJ;IAEAU,OAAO,CAACC,IAAI,CACR,aAAa,IAAI,CAACT,KAAK,CAACU,OAAO,uDACnC,CAAC;IAED,IAAI,CAACZ,MAAM,GAAG,IAAI;EACtB;EAEA,OAAca,UAAUA,CAACX,KAAoB,EAAiB;IAC1D,IAAIL,KAAK,CAACiB,GAAG,CAACZ,KAAK,CAAC,EAAE;MAClB,OAAOL,KAAK,CAACkB,GAAG,CAACb,KAAK,CAAC;IAC3B;IAEAL,KAAK,CAACmB,GAAG,CAACd,KAAK,EAAE,IAAIH,aAAa,CAACG,KAAK,CAAC,CAAC;IAE1C,OAAOL,KAAK,CAACkB,GAAG,CAACb,KAAK,CAAC;EAC3B;AACJ","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/MultiValueContainer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { BindComponentRenderProp, CmsModelFieldRendererProps } from "@webiny/app-headless-cms-common/types";
+import type { BindComponentRenderProp, CmsModelFieldRendererProps } from "@webiny/app-headless-cms-common/types/index.js";
 type GetBind = CmsModelFieldRendererProps["getBind"];
 export interface MultiValueContainerProps {
     bind: BindComponentRenderProp;

package/admin/plugins/fieldRenderers/object/MultiValueContainer.js

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
-import { Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid/index.js";
 import { useConfirmationDialog } from "@webiny/app-admin";
-import { MultiValueItemContainer } from "./MultiValueItemContainer";
-import { Fields } from "../../../components/ContentEntryForm/Fields";
-import DynamicSection from "../DynamicSection";
-import { dynamicSectionGridStyle, fieldsGridStyle, fieldsWrapperStyle, ItemHighLight, ObjectItem } from "./StyledComponents";
-import { FieldSettings } from "./FieldSettings";
-import { useModelField } from "../../../components/ModelFieldProvider";
-import { useModel } from "../../../components/ModelProvider";
+import { MultiValueItemContainer } from "./MultiValueItemContainer.js";
+import { Fields } from "../../../components/ContentEntryForm/Fields.js";
+import DynamicSection from "../DynamicSection.js";
+import { dynamicSectionGridStyle, fieldsGridStyle, ItemHighLight, ObjectItem } from "./StyledComponents.js";
+import { FieldSettings } from "./FieldSettings.js";
+import { useModelField } from "../../../components/ModelFieldProvider/index.js";
+import { useModel } from "../../../components/ModelProvider/index.js";
 export const MultiValueContainer = props => {
   const [highlightMap, setHighlightIndex] = useState({});
   const [itemState, setItemState] = useState({});
@@ -100,8 +100,7 @@ export const MultiValueContainer = props => {
       isExpanded: itemState[index] ?? false,
       toggleExpanded: () => toggleItemState(index)
     }, /*#__PURE__*/React.createElement(Cell, {
-      span: 12,
-      className: fieldsWrapperStyle
+      span: 12
     }, /*#__PURE__*/React.createElement(Fields, {
       Bind: Bind,
       contentModel: model,

package/admin/plugins/fieldRenderers/object/MultiValueContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","generateAlphaNumericLowerCaseId","Cell","useConfirmationDialog","MultiValueItemContainer","Fields","DynamicSection","dynamicSectionGridStyle","fieldsGridStyle","fieldsWrapperStyle","ItemHighLight","ObjectItem","FieldSettings","useModelField","useModel","MultiValueContainer","props","highlightMap","setHighlightIndex","itemState","setItemState","model","field","showConfirmation","message","acceptLabel","cancelLabel","fieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","Bind","bind","onMoveDown","moveValueDown","map","onMoveUp","moveValueUp","onDelete","removeValue","key","value","title","label","isFirst","isLast","length","isExpanded","toggleExpanded","span","className","contentModel","fields","layout"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport type {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    fieldsWrapperStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\nimport { useModel } from \"~/admin/components/ModelProvider\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12} className={fieldsWrapperStyle}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","generateAlphaNumericLowerCaseId","Cell","useConfirmationDialog","MultiValueItemContainer","Fields","DynamicSection","dynamicSectionGridStyle","fieldsGridStyle","ItemHighLight","ObjectItem","FieldSettings","useModelField","useModel","MultiValueContainer","props","highlightMap","setHighlightIndex","itemState","setItemState","model","field","showConfirmation","message","acceptLabel","cancelLabel","fieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","Bind","bind","onMoveDown","moveValueDown","map","onMoveUp","moveValueUp","onDelete","removeValue","key","value","title","label","isFirst","isLast","length","isExpanded","toggleExpanded","span","contentModel","fields","layout"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid/index.js\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport type {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection.js\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents.js\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModel } from \"~/admin/components/ModelProvider/index.js\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { GenericRecord } from "@webiny/app/types";
+import type { GenericRecord } from "@webiny/app/types.js";
 export interface MultiValueItemContainerProps {
     value: GenericRecord<string>;
     isFirst: boolean;

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js

@@ -1,10 +1,9 @@
 import React from "react";
 import { makeDecoratable } from "@webiny/react-composition";
-import Accordion from "../Accordion";
+import { Accordion, IconButton } from "@webiny/admin-ui";
 import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
-import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_drop_up.svg";
-import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_drop_down.svg";
-import { IconButton } from "@webiny/ui/Button";
+import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
 export const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer", ({
   children,
   ...props
@@ -22,6 +21,7 @@ export const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer"
       e.stopPropagation();
       onMoveDown();
     },
+    variant: "ghost",
     disabled: isLast
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(ArrowUp, null),
@@ -29,20 +29,25 @@ export const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer"
       e.stopPropagation();
       onMoveUp();
     },
+    variant: "ghost",
     disabled: isFirst
-  }), /*#__PURE__*/React.createElement(IconButton, {
+  }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
     onClick: e => {
       e.stopPropagation();
       onDelete();
-    }
+    },
+    variant: "ghost"
   }));
   return /*#__PURE__*/React.createElement(Accordion, {
+    background: "base",
+    variant: "container",
+    openClosedIndicatorPosition: "left"
+  }, /*#__PURE__*/React.createElement(Accordion.Item, {
     title: props.title,
-    action: actions,
-    isExpanded: props.isExpanded,
-    toggleExpanded: props.toggleExpanded
-  }, children);
+    actions: actions,
+    defaultOpen: props.isExpanded
+  }, children));
 });
 
 //# sourceMappingURL=MultiValueItemContainer.js.map

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Accordion","ReactComponent","DeleteIcon","ArrowUp","ArrowDown","IconButton","MultiValueItemContainer","children","props","onMoveUp","onMoveDown","onDelete","isLast","isFirst","actions","createElement","Fragment","icon","onClick","e","stopPropagation","disabled","title","action","isExpanded","toggleExpanded"],"sources":["MultiValueItemContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport type { GenericRecord } from \"@webiny/app/types\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_drop_down.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\n\nexport interface MultiValueItemContainerProps {\n    value: GenericRecord<string>;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    isExpanded: boolean;\n    toggleExpanded: () => void;\n    title: string;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const { onMoveUp, onMoveDown, onDelete, isLast, isFirst } = props;\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveDown();\n                    }}\n                    disabled={isLast}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveUp();\n                    }}\n                    disabled={isFirst}\n                />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onDelete();\n                    }}\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                title={props.title}\n                action={actions}\n                isExpanded={props.isExpanded}\n                toggleExpanded={props.toggleExpanded}\n            >\n                {children}\n            </Accordion>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,OAAOC,SAAS;AAEhB,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,OAAO,QAAQ,iCAAiC;AAC3E,SAASF,cAAc,IAAIG,SAAS,QAAQ,mCAAmC;AAC/E,SAASC,UAAU,QAAQ,mBAAmB;AAe9C,OAAO,MAAMC,uBAAuB,GAAGP,eAAe,CAClD,yBAAyB,EACzB,CAAC;EAAEQ,QAAQ;EAAE,GAAGC;AAAoC,CAAC,KAAK;EACtD,MAAM;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGL,KAAK;EAEjE,MAAMM,OAAO,gBACThB,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACIlB,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACX,SAAS,MAAE,CAAE;IACpBc,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBV,UAAU,CAAC,CAAC;IAChB,CAAE;IACFW,QAAQ,EAAET;EAAO,CACpB,CAAC,eACFd,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACZ,OAAO,MAAE,CAAE;IAClBe,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,QAAQ,CAAC,CAAC;IACd,CAAE;IACFY,QAAQ,EAAER;EAAQ,CACrB,CAAC,eACFf,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACb,UAAU,MAAE,CAAE;IACrBgB,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBT,QAAQ,CAAC,CAAC;IACd;EAAE,CACL,CACH,CACL;EAED,oBACIb,KAAA,CAAAiB,aAAA,CAACf,SAAS;IACNsB,KAAK,EAAEd,KAAK,CAACc,KAAM;IACnBC,MAAM,EAAET,OAAQ;IAChBU,UAAU,EAAEhB,KAAK,CAACgB,UAAW;IAC7BC,cAAc,EAAEjB,KAAK,CAACiB;EAAe,GAEpClB,QACM,CAAC;AAEpB,CACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Accordion","IconButton","ReactComponent","DeleteIcon","ArrowUp","ArrowDown","MultiValueItemContainer","children","props","onMoveUp","onMoveDown","onDelete","isLast","isFirst","actions","createElement","Fragment","icon","onClick","e","stopPropagation","variant","disabled","Item","Action","Separator","background","openClosedIndicatorPosition","title","defaultOpen","isExpanded"],"sources":["MultiValueItemContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { Accordion, IconButton } from \"@webiny/admin-ui\";\nimport type { GenericRecord } from \"@webiny/app/types.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\n\nexport interface MultiValueItemContainerProps {\n    value: GenericRecord<string>;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    isExpanded: boolean;\n    toggleExpanded: () => void;\n    title: string;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const { onMoveUp, onMoveDown, onDelete, isLast, isFirst } = props;\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveDown();\n                    }}\n                    variant=\"ghost\"\n                    disabled={isLast}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveUp();\n                    }}\n                    variant=\"ghost\"\n                    disabled={isFirst}\n                />\n                <Accordion.Item.Action.Separator />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onDelete();\n                    }}\n                    variant=\"ghost\"\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                background={\"base\"}\n                variant={\"container\"}\n                openClosedIndicatorPosition={\"left\"}\n            >\n                <Accordion.Item\n                    title={props.title}\n                    actions={actions}\n                    defaultOpen={props.isExpanded}\n                >\n                    {children}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,SAAS,EAAEC,UAAU,QAAQ,kBAAkB;AAExD,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,OAAO,QAAQ,gCAAgC;AAC1E,SAASF,cAAc,IAAIG,SAAS,QAAQ,kCAAkC;AAe9E,OAAO,MAAMC,uBAAuB,GAAGP,eAAe,CAClD,yBAAyB,EACzB,CAAC;EAAEQ,QAAQ;EAAE,GAAGC;AAAoC,CAAC,KAAK;EACtD,MAAM;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGL,KAAK;EAEjE,MAAMM,OAAO,gBACThB,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACIlB,KAAA,CAAAiB,aAAA,CAACd,UAAU;IACPgB,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACV,SAAS,MAAE,CAAE;IACpBa,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBV,UAAU,CAAC,CAAC;IAChB,CAAE;IACFW,OAAO,EAAC,OAAO;IACfC,QAAQ,EAAEV;EAAO,CACpB,CAAC,eACFd,KAAA,CAAAiB,aAAA,CAACd,UAAU;IACPgB,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACX,OAAO,MAAE,CAAE;IAClBc,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,QAAQ,CAAC,CAAC;IACd,CAAE;IACFY,OAAO,EAAC,OAAO;IACfC,QAAQ,EAAET;EAAQ,CACrB,CAAC,eACFf,KAAA,CAAAiB,aAAA,CAACf,SAAS,CAACuB,IAAI,CAACC,MAAM,CAACC,SAAS,MAAE,CAAC,eACnC3B,KAAA,CAAAiB,aAAA,CAACd,UAAU;IACPgB,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACZ,UAAU,MAAE,CAAE;IACrBe,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBT,QAAQ,CAAC,CAAC;IACd,CAAE;IACFU,OAAO,EAAC;EAAO,CAClB,CACH,CACL;EAED,oBACIvB,KAAA,CAAAiB,aAAA,CAACf,SAAS;IACN0B,UAAU,EAAE,MAAO;IACnBL,OAAO,EAAE,WAAY;IACrBM,2BAA2B,EAAE;EAAO,gBAEpC7B,KAAA,CAAAiB,aAAA,CAACf,SAAS,CAACuB,IAAI;IACXK,KAAK,EAAEpB,KAAK,CAACoB,KAAM;IACnBd,OAAO,EAAEA,OAAQ;IACjBe,WAAW,EAAErB,KAAK,CAACsB;EAAW,GAE7BvB,QACW,CACT,CAAC;AAEpB,CACJ,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/StyledComponents.d.ts

@@ -1,13 +1,11 @@
-/// <reference types="react" />
-export declare const fieldsWrapperStyle: string;
 export declare const dynamicSectionTitleStyle: string;
 export declare const dynamicSectionGridStyle: string;
 export declare const fieldsGridStyle: string;
 export declare const ObjectItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ItemHighLight: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/admin/plugins/fieldRenderers/object/StyledComponents.js

@@ -1,22 +1,12 @@
 import _styled from "@emotion/styled/base";
 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 { css } from "@emotion/css";
-export const fieldsWrapperStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
-  name: "1yd7z3y",
-  styles: "border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;margin-left:6px;&:focus-within{border-color:var(--mdc-theme-primary);}"
-} : {
-  name: "tzi0gb-fieldsWrapperStyle",
-  styles: "border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;margin-left:6px;&:focus-within{border-color:var(--mdc-theme-primary);};label:fieldsWrapperStyle;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3FDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc1dyYXBwZXJTdHlsZSA9IGNzc2BcbiAgICBib3JkZXItbGVmdDogMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKTtcbiAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XG4gICAgbWFyZ2luLWxlZnQ6IDZweDtcblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSk7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
 export const dynamicSectionTitleStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
   name: "1d0nbku",
   styles: "margin-top:24px"
 } : {
   name: "ni4rfk-dynamicSectionTitleStyle",
-  styles: "margin-top:24px;label:dynamicSectionTitleStyle;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYTJDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc1dyYXBwZXJTdHlsZSA9IGNzc2BcbiAgICBib3JkZXItbGVmdDogMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKTtcbiAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XG4gICAgbWFyZ2luLWxlZnQ6IDZweDtcblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSk7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
+  styles: "margin-top:24px;label:dynamicSectionTitleStyle;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRzJDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const dynamicSectionGridStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
@@ -24,8 +14,7 @@ export const dynamicSectionGridStyle = /*#__PURE__*/css(process.env.NODE_ENV ===
   styles: "&>.mdc-layout-grid__inner{grid-gap:8px;}"
 } : {
   name: "c4xhr-dynamicSectionGridStyle",
-  styles: "&>.mdc-layout-grid__inner{grid-gap:8px;};label:dynamicSectionGridStyle;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIwQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
+  styles: "&>.mdc-layout-grid__inner{grid-gap:8px;};label:dynamicSectionGridStyle;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTzBDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const fieldsGridStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
@@ -33,8 +22,7 @@ export const fieldsGridStyle = /*#__PURE__*/css(process.env.NODE_ENV === "produc
   styles: "&.mdc-layout-grid{padding:8px;}"
 } : {
   name: "17rca61-fieldsGridStyle",
-  styles: "&.mdc-layout-grid{padding:8px;};label:fieldsGridStyle;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJrQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
+  styles: "&.mdc-layout-grid{padding:8px;};label:fieldsGridStyle;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYWtDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const ObjectItem = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -47,8 +35,7 @@ export const ObjectItem = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "
   styles: "position:relative"
 } : {
   name: "bjn8wh",
-  styles: "position:relative",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJvQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
+  styles: "position:relative/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUJvQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const ItemHighLight = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -77,6 +64,6 @@ export const ItemHighLight = /*#__PURE__*/_styled("div", process.env.NODE_ENV ==
       opacity: 1
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUM2QiIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUI2QiIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */");
 
 //# sourceMappingURL=StyledComponents.js.map

package/admin/plugins/fieldRenderers/object/StyledComponents.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","fieldsWrapperStyle","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","dynamicSectionTitleStyle","dynamicSectionGridStyle","fieldsGridStyle","ObjectItem","_styled","target","label","ItemHighLight","opacity","animation","border","boxShadow","backgroundColor","borderRadius","position","top","left","right","bottom","zIndex","pointerEvents"],"sources":["StyledComponents.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\n\nexport const fieldsWrapperStyle = css`\n    border-left: 2px solid var(--mdc-theme-on-background);\n    padding-left: 16px;\n    margin-left: 6px;\n\n    &:focus-within {\n        border-color: var(--mdc-theme-primary);\n    }\n`;\n\nexport const dynamicSectionTitleStyle = css`\n    margin-top: 24px;\n`;\n\nexport const dynamicSectionGridStyle = css`\n    & > .mdc-layout-grid__inner {\n        grid-gap: 8px;\n    }\n`;\n\nexport const fieldsGridStyle = css`\n    &.mdc-layout-grid {\n        padding: 8px;\n    }\n`;\n\nexport const ObjectItem = styled.div`\n    position: relative;\n`;\n\nexport const ItemHighLight = styled(\"div\")({\n    \"&\": {\n        opacity: 0,\n        animation: \"wf-blink-in 1s\",\n        border: \"2px solid var(--mdc-theme-secondary)\",\n        boxShadow: \"0 0 15px var(--mdc-theme-secondary)\",\n        backgroundColor: \"rgba(42, 217, 134, 0.25)\",\n        borderRadius: \"2px\",\n        position: \"absolute\",\n        top: 0,\n        left: -12,\n        right: -8,\n        bottom: 0,\n        zIndex: 1,\n        pointerEvents: \"none\"\n    },\n    \"@keyframes wf-blink-in\": { \"40%\": { opacity: 1 } }\n});\n"],"mappings":";;AACA,SAASA,GAAG,QAAQ,cAAc;AAElC,OAAO,MAAMC,kBAAkB,gBAAGD,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAQpC;AAED,OAAO,MAAMC,wBAAwB,gBAAGV,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAE1C;AAED,OAAO,MAAME,uBAAuB,gBAAGX,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAIzC;AAED,OAAO,MAAMG,eAAe,gBAAGZ,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAIjC;AAED,OAAO,MAAMI,UAAU,gBAAAC,OAAA,QAAAZ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAW,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAd,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAEtB;AAED,OAAO,MAAMQ,aAAa,gBAAGH,OAAA,CAAO,KAAK,EAAAZ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAW,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAC;EACvC,GAAG,EAAE;IACDE,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE,gBAAgB;IAC3BC,MAAM,EAAE,sCAAsC;IAC9CC,SAAS,EAAE,qCAAqC;IAChDC,eAAe,EAAE,0BAA0B;IAC3CC,YAAY,EAAE,KAAK;IACnBC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC,EAAE;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE;EACnB,CAAC;EACD,wBAAwB,EAAE;IAAE,KAAK,EAAE;MAAEZ,OAAO,EAAE;IAAE;EAAE;AACtD,CAAC,EAAAhB,OAAA,CAAAC,GAAA,CAAAC,QAAA,u4DAAC","ignoreList":[]}
+{"version":3,"names":["css","dynamicSectionTitleStyle","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","dynamicSectionGridStyle","fieldsGridStyle","ObjectItem","_styled","target","label","ItemHighLight","opacity","animation","border","boxShadow","backgroundColor","borderRadius","position","top","left","right","bottom","zIndex","pointerEvents"],"sources":["StyledComponents.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\n\nexport const dynamicSectionTitleStyle = css`\n    margin-top: 24px;\n`;\n\nexport const dynamicSectionGridStyle = css`\n    & > .mdc-layout-grid__inner {\n        grid-gap: 8px;\n    }\n`;\n\nexport const fieldsGridStyle = css`\n    &.mdc-layout-grid {\n        padding: 8px;\n    }\n`;\n\nexport const ObjectItem = styled.div`\n    position: relative;\n`;\n\nexport const ItemHighLight = styled(\"div\")({\n    \"&\": {\n        opacity: 0,\n        animation: \"wf-blink-in 1s\",\n        border: \"2px solid var(--mdc-theme-secondary)\",\n        boxShadow: \"0 0 15px var(--mdc-theme-secondary)\",\n        backgroundColor: \"rgba(42, 217, 134, 0.25)\",\n        borderRadius: \"2px\",\n        position: \"absolute\",\n        top: 0,\n        left: -12,\n        right: -8,\n        bottom: 0,\n        zIndex: 1,\n        pointerEvents: \"none\"\n    },\n    \"@keyframes wf-blink-in\": { \"40%\": { opacity: 1 } }\n});\n"],"mappings":";;AACA,SAASA,GAAG,QAAQ,cAAc;AAElC,OAAO,MAAMC,wBAAwB,gBAAGD,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAE1C;AAED,OAAO,MAAMC,uBAAuB,gBAAGT,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAIzC;AAED,OAAO,MAAME,eAAe,gBAAGV,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAIjC;AAED,OAAO,MAAMG,UAAU,gBAAAC,OAAA,QAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAZ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAEtB;AAED,OAAO,MAAMO,aAAa,gBAAGH,OAAA,CAAO,KAAK,EAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAC;EACvC,GAAG,EAAE;IACDE,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE,gBAAgB;IAC3BC,MAAM,EAAE,sCAAsC;IAC9CC,SAAS,EAAE,qCAAqC;IAChDC,eAAe,EAAE,0BAA0B;IAC3CC,YAAY,EAAE,KAAK;IACnBC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC,EAAE;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE;EACnB,CAAC;EACD,wBAAwB,EAAE;IAAE,KAAK,EAAE;MAAEZ,OAAO,EAAE;IAAE;EAAE;AACtD,CAAC,EAAAd,OAAA,CAAAC,GAAA,CAAAC,QAAA,+kDAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/index.d.ts

@@ -1,24 +1,23 @@
-/// <reference types="react" />
 export declare const Components: {
-    MultiValueItemContainer: (({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
-        original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+    MultiValueItemContainer: (({ children, ...props }: import("./MultiValueItemContainer.js").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+        original: ({ children, ...props }: import("./MultiValueItemContainer.js").MultiValueItemContainerProps) => import("react").JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
-            original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+        original: (({ children, ...props }: import("./MultiValueItemContainer.js").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+            original: ({ children, ...props }: import("./MultiValueItemContainer.js").MultiValueItemContainerProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
-            original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, ...props }: import("./MultiValueItemContainer.js").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+            original: ({ children, ...props }: import("./MultiValueItemContainer.js").MultiValueItemContainerProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
-        }>) => (props: unknown) => import("react").JSX.Element;
+        }>) => (props: unknown) => React.JSX.Element;
     };
 };
-declare const _default: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererPlugin[];
+declare const _default: import("@webiny/app-headless-cms-common/types/index.js").CmsModelFieldRendererPlugin[];
 export default _default;

package/admin/plugins/fieldRenderers/object/index.js

@@ -1,11 +1,9 @@
-import singleObjectInline from "./singleObjectInline";
-import singleObjectAccordion from "./singleObjectAccordion";
-import multipleObjects from "./multipleObjects";
-import multipleObjectsAccordion from "./multipleObjectsAccordion";
-import { MultiValueItemContainer } from "./MultiValueItemContainer";
+import singleObjectAccordion from "./singleObjectAccordion.js";
+import multipleObjectsAccordion from "./multipleObjectsAccordion.js";
+import { MultiValueItemContainer } from "./MultiValueItemContainer.js";
 export const Components = {
   MultiValueItemContainer
 };
-export default [singleObjectInline, singleObjectAccordion, multipleObjects, multipleObjectsAccordion];
+export default [singleObjectAccordion, multipleObjectsAccordion];
 
 //# sourceMappingURL=index.js.map

package/admin/plugins/fieldRenderers/object/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["singleObjectInline","singleObjectAccordion","multipleObjects","multipleObjectsAccordion","MultiValueItemContainer","Components"],"sources":["index.ts"],"sourcesContent":["import singleObjectInline from \"./singleObjectInline\";\nimport singleObjectAccordion from \"./singleObjectAccordion\";\nimport multipleObjects from \"./multipleObjects\";\nimport multipleObjectsAccordion from \"./multipleObjectsAccordion\";\nimport { MultiValueItemContainer } from \"./MultiValueItemContainer\";\n\nexport const Components = {\n    MultiValueItemContainer\n};\n\nexport default [\n    singleObjectInline,\n    singleObjectAccordion,\n    multipleObjects,\n    multipleObjectsAccordion\n];\n"],"mappings":"AAAA,OAAOA,kBAAkB;AACzB,OAAOC,qBAAqB;AAC5B,OAAOC,eAAe;AACtB,OAAOC,wBAAwB;AAC/B,SAASC,uBAAuB;AAEhC,OAAO,MAAMC,UAAU,GAAG;EACtBD;AACJ,CAAC;AAED,eAAe,CACXJ,kBAAkB,EAClBC,qBAAqB,EACrBC,eAAe,EACfC,wBAAwB,CAC3B","ignoreList":[]}
+{"version":3,"names":["singleObjectAccordion","multipleObjectsAccordion","MultiValueItemContainer","Components"],"sources":["index.ts"],"sourcesContent":["import singleObjectAccordion from \"./singleObjectAccordion.js\";\nimport multipleObjectsAccordion from \"./multipleObjectsAccordion.js\";\nimport { MultiValueItemContainer } from \"./MultiValueItemContainer.js\";\n\nexport const Components = {\n    MultiValueItemContainer\n};\n\nexport default [singleObjectAccordion, multipleObjectsAccordion];\n"],"mappings":"AAAA,OAAOA,qBAAqB;AAC5B,OAAOC,wBAAwB;AAC/B,SAASC,uBAAuB;AAEhC,OAAO,MAAMC,UAAU,GAAG;EACtBD;AACJ,CAAC;AAED,eAAe,CAACF,qBAAqB,EAAEC,wBAAwB,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.d.ts

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

package/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import { FieldSettings } from "./FieldSettings";
-import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
-import { MultiValueContainer } from "./MultiValueContainer";
-import { MultiValueRendererSettings } from "../MultiValueRendererSettings";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { FieldSettings } from "./FieldSettings.js";
+import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings.js";
+import { MultiValueContainer } from "./MultiValueContainer.js";
+import { MultiValueRendererSettings } from "../MultiValueRendererSettings.js";
 import { Accordion } from "@webiny/admin-ui";
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 const ObjectsRenderer = props => {
@@ -23,9 +23,12 @@ const ObjectsRenderer = props => {
   return /*#__PURE__*/React.createElement(Bind, null, bind => {
     const values = bind.value || [];
     const label = `${field.label} ${values.length ? `(${values.length})` : ""}`;
-    return /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(Accordion.Item, {
+    return /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(Accordion, {
+      background: "base",
+      variant: "container"
+    }, /*#__PURE__*/React.createElement(Accordion.Item, {
       title: label,
-      description: field.helpText,
+      description: field.description,
       defaultOpen: open
     }, /*#__PURE__*/React.createElement(MultiValueContainer, {
       bind: bind,
@@ -44,7 +47,7 @@ const plugin = {
     canUse({
       field
     }) {
-      return field.type === "object" && Boolean(field.multipleValues);
+      return field.type === "object" && Boolean(field.list);
     },
     render(props) {
       return /*#__PURE__*/React.createElement(ObjectsRenderer, props);

package/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","i18n","FieldSettings","AccordionRenderSettings","getAccordionRenderSettings","MultiValueContainer","MultiValueRendererSettings","Accordion","t","ns","ObjectsRenderer","props","field","getBind","fieldSettings","createFrom","hasFields","logMissingFields","open","Bind","createElement","bind","values","value","label","length","ValidationContainer","Item","title","description","helpText","defaultOpen","showTitle","plugin","type","name","renderer","rendererName","canUse","Boolean","multipleValues","render","renderSettings","Fragment"],"sources":["multipleObjectsAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport type { CmsModelFieldRendererPlugin, CmsModelFieldRendererProps } from \"~/types\";\nimport { FieldSettings } from \"./FieldSettings\";\nimport { AccordionRenderSettings, getAccordionRenderSettings } from \"../AccordionRenderSettings\";\nimport { MultiValueContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueContainer\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\nimport { Accordion } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst ObjectsRenderer = (props: CmsModelFieldRendererProps) => {\n    const { field, getBind } = props;\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const { open } = getAccordionRenderSettings(field);\n\n    const Bind = getBind();\n\n    return (\n        <Bind>\n            {bind => {\n                const values = bind.value || [];\n                const label = `${field.label} ${values.length ? `(${values.length})` : \"\"}`;\n\n                return (\n                    <Bind.ValidationContainer>\n                        <Accordion>\n                            <Accordion.Item\n                                title={label}\n                                description={field.helpText}\n                                defaultOpen={open}\n                            >\n                                <MultiValueContainer\n                                    bind={bind}\n                                    getBind={getBind}\n                                    showTitle={false}\n                                />\n                            </Accordion.Item>\n                        </Accordion>\n                    </Bind.ValidationContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects-accordion\",\n    renderer: {\n        rendererName: \"objects-accordion\",\n        name: t`Accordion`,\n        description: t`Renders fields within an accordion.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.multipleValues);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        },\n        renderSettings(props) {\n            return (\n                <>\n                    <MultiValueRendererSettings {...props} />\n                    <AccordionRenderSettings {...props} />\n                </>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,SAASC,aAAa;AACtB,SAASC,uBAAuB,EAAEC,0BAA0B;AAC5D,SAASC,mBAAmB;AAC5B,SAASC,0BAA0B;AACnC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,MAAMC,CAAC,GAAGP,IAAI,CAACQ,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,eAAe,GAAIC,KAAiC,IAAK;EAC3D,MAAM;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAGF,KAAK;EAEhC,MAAMG,aAAa,GAAGZ,aAAa,CAACa,UAAU,CAACH,KAAK,CAAC;EAErD,IAAI,CAACE,aAAa,CAACE,SAAS,CAAC,CAAC,EAAE;IAC5BF,aAAa,CAACG,gBAAgB,CAAC,CAAC;IAChC,OAAO,IAAI;EACf;EAEA,MAAM;IAAEC;EAAK,CAAC,GAAGd,0BAA0B,CAACQ,KAAK,CAAC;EAElD,MAAMO,IAAI,GAAGN,OAAO,CAAC,CAAC;EAEtB,oBACIb,KAAA,CAAAoB,aAAA,CAACD,IAAI,QACAE,IAAI,IAAI;IACL,MAAMC,MAAM,GAAGD,IAAI,CAACE,KAAK,IAAI,EAAE;IAC/B,MAAMC,KAAK,GAAG,GAAGZ,KAAK,CAACY,KAAK,IAAIF,MAAM,CAACG,MAAM,GAAG,IAAIH,MAAM,CAACG,MAAM,GAAG,GAAG,EAAE,EAAE;IAE3E,oBACIzB,KAAA,CAAAoB,aAAA,CAACD,IAAI,CAACO,mBAAmB,qBACrB1B,KAAA,CAAAoB,aAAA,CAACb,SAAS,qBACNP,KAAA,CAAAoB,aAAA,CAACb,SAAS,CAACoB,IAAI;MACXC,KAAK,EAAEJ,KAAM;MACbK,WAAW,EAAEjB,KAAK,CAACkB,QAAS;MAC5BC,WAAW,EAAEb;IAAK,gBAElBlB,KAAA,CAAAoB,aAAA,CAACf,mBAAmB;MAChBgB,IAAI,EAAEA,IAAK;MACXR,OAAO,EAAEA,OAAQ;MACjBmB,SAAS,EAAE;IAAM,CACpB,CACW,CACT,CACW,CAAC;EAEnC,CACE,CAAC;AAEf,CAAC;AAED,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,6CAA6C;EACnDC,QAAQ,EAAE;IACNC,YAAY,EAAE,mBAAmB;IACjCF,IAAI,EAAE3B,CAAC,WAAW;IAClBqB,WAAW,EAAErB,CAAC,qCAAqC;IACnD8B,MAAMA,CAAC;MAAE1B;IAAM,CAAC,EAAE;MACd,OAAOA,KAAK,CAACsB,IAAI,KAAK,QAAQ,IAAIK,OAAO,CAAC3B,KAAK,CAAC4B,cAAc,CAAC;IACnE,CAAC;IACDC,MAAMA,CAAC9B,KAAK,EAAE;MACV,oBAAOX,KAAA,CAAAoB,aAAA,CAACV,eAAe,EAAKC,KAAQ,CAAC;IACzC,CAAC;IACD+B,cAAcA,CAAC/B,KAAK,EAAE;MAClB,oBACIX,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAA2C,QAAA,qBACI3C,KAAA,CAAAoB,aAAA,CAACd,0BAA0B,EAAKK,KAAQ,CAAC,eACzCX,KAAA,CAAAoB,aAAA,CAACjB,uBAAuB,EAAKQ,KAAQ,CACvC,CAAC;IAEX;EACJ;AACJ,CAAC;AAED,eAAesB,MAAM","ignoreList":[]}
+{"version":3,"names":["React","i18n","FieldSettings","AccordionRenderSettings","getAccordionRenderSettings","MultiValueContainer","MultiValueRendererSettings","Accordion","t","ns","ObjectsRenderer","props","field","getBind","fieldSettings","createFrom","hasFields","logMissingFields","open","Bind","createElement","bind","values","value","label","length","ValidationContainer","background","variant","Item","title","description","defaultOpen","showTitle","plugin","type","name","renderer","rendererName","canUse","Boolean","list","render","renderSettings","Fragment"],"sources":["multipleObjectsAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelFieldRendererPlugin, CmsModelFieldRendererProps } from \"~/types.js\";\nimport { FieldSettings } from \"./FieldSettings.js\";\nimport { AccordionRenderSettings, getAccordionRenderSettings } from \"../AccordionRenderSettings.js\";\nimport { MultiValueContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueContainer.js\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { Accordion } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst ObjectsRenderer = (props: CmsModelFieldRendererProps) => {\n    const { field, getBind } = props;\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const { open } = getAccordionRenderSettings(field);\n\n    const Bind = getBind();\n\n    return (\n        <Bind>\n            {bind => {\n                const values = bind.value || [];\n                const label = `${field.label} ${values.length ? `(${values.length})` : \"\"}`;\n\n                return (\n                    <Bind.ValidationContainer>\n                        <Accordion background={\"base\"} variant={\"container\"}>\n                            <Accordion.Item\n                                title={label}\n                                description={field.description}\n                                defaultOpen={open}\n                            >\n                                <MultiValueContainer\n                                    bind={bind}\n                                    getBind={getBind}\n                                    showTitle={false}\n                                />\n                            </Accordion.Item>\n                        </Accordion>\n                    </Bind.ValidationContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects-accordion\",\n    renderer: {\n        rendererName: \"objects-accordion\",\n        name: t`Accordion`,\n        description: t`Renders fields within an accordion.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.list);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        },\n        renderSettings(props) {\n            return (\n                <>\n                    <MultiValueRendererSettings {...props} />\n                    <AccordionRenderSettings {...props} />\n                </>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,SAASC,aAAa;AACtB,SAASC,uBAAuB,EAAEC,0BAA0B;AAC5D,SAASC,mBAAmB;AAC5B,SAASC,0BAA0B;AACnC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,MAAMC,CAAC,GAAGP,IAAI,CAACQ,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,eAAe,GAAIC,KAAiC,IAAK;EAC3D,MAAM;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAGF,KAAK;EAEhC,MAAMG,aAAa,GAAGZ,aAAa,CAACa,UAAU,CAACH,KAAK,CAAC;EAErD,IAAI,CAACE,aAAa,CAACE,SAAS,CAAC,CAAC,EAAE;IAC5BF,aAAa,CAACG,gBAAgB,CAAC,CAAC;IAChC,OAAO,IAAI;EACf;EAEA,MAAM;IAAEC;EAAK,CAAC,GAAGd,0BAA0B,CAACQ,KAAK,CAAC;EAElD,MAAMO,IAAI,GAAGN,OAAO,CAAC,CAAC;EAEtB,oBACIb,KAAA,CAAAoB,aAAA,CAACD,IAAI,QACAE,IAAI,IAAI;IACL,MAAMC,MAAM,GAAGD,IAAI,CAACE,KAAK,IAAI,EAAE;IAC/B,MAAMC,KAAK,GAAG,GAAGZ,KAAK,CAACY,KAAK,IAAIF,MAAM,CAACG,MAAM,GAAG,IAAIH,MAAM,CAACG,MAAM,GAAG,GAAG,EAAE,EAAE;IAE3E,oBACIzB,KAAA,CAAAoB,aAAA,CAACD,IAAI,CAACO,mBAAmB,qBACrB1B,KAAA,CAAAoB,aAAA,CAACb,SAAS;MAACoB,UAAU,EAAE,MAAO;MAACC,OAAO,EAAE;IAAY,gBAChD5B,KAAA,CAAAoB,aAAA,CAACb,SAAS,CAACsB,IAAI;MACXC,KAAK,EAAEN,KAAM;MACbO,WAAW,EAAEnB,KAAK,CAACmB,WAAY;MAC/BC,WAAW,EAAEd;IAAK,gBAElBlB,KAAA,CAAAoB,aAAA,CAACf,mBAAmB;MAChBgB,IAAI,EAAEA,IAAK;MACXR,OAAO,EAAEA,OAAQ;MACjBoB,SAAS,EAAE;IAAM,CACpB,CACW,CACT,CACW,CAAC;EAEnC,CACE,CAAC;AAEf,CAAC;AAED,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,6CAA6C;EACnDC,QAAQ,EAAE;IACNC,YAAY,EAAE,mBAAmB;IACjCF,IAAI,EAAE5B,CAAC,WAAW;IAClBuB,WAAW,EAAEvB,CAAC,qCAAqC;IACnD+B,MAAMA,CAAC;MAAE3B;IAAM,CAAC,EAAE;MACd,OAAOA,KAAK,CAACuB,IAAI,KAAK,QAAQ,IAAIK,OAAO,CAAC5B,KAAK,CAAC6B,IAAI,CAAC;IACzD,CAAC;IACDC,MAAMA,CAAC/B,KAAK,EAAE;MACV,oBAAOX,KAAA,CAAAoB,aAAA,CAACV,eAAe,EAAKC,KAAQ,CAAC;IACzC,CAAC;IACDgC,cAAcA,CAAChC,KAAK,EAAE;MAClB,oBACIX,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAA4C,QAAA,qBACI5C,KAAA,CAAAoB,aAAA,CAACd,0BAA0B,EAAKK,KAAQ,CAAC,eACzCX,KAAA,CAAAoB,aAAA,CAACjB,uBAAuB,EAAKQ,KAAQ,CACvC,CAAC;IAEX;EACJ;AACJ,CAAC;AAED,eAAeuB,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/singleObjectAccordion.d.ts

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

package/admin/plugins/fieldRenderers/object/singleObjectAccordion.js

@@ -1,11 +1,12 @@
 import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
-import { Fields } from "../../../components/ContentEntryForm/Fields";
-import { FieldSettings } from "./FieldSettings";
-import { ParentFieldProvider } from "../../../hooks";
-import { ParentValueIndexProvider } from "../../../components/ModelFieldProvider";
-import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Accordion } from "@webiny/admin-ui";
+import { Fields } from "../../../components/ContentEntryForm/Fields.js";
+import { FieldSettings } from "./FieldSettings.js";
+import { ParentFieldProvider } from "../../../hooks/index.js";
+import { ParentValueIndexProvider } from "../../../components/ModelFieldProvider/index.js";
+import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings.js";
+import { ReactComponent as HorizontalRuleIcon } from "@webiny/icons/horizontal_rule.svg";
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 const plugin = {
   type: "cms-editor-field-renderer",
@@ -17,7 +18,7 @@ const plugin = {
     canUse({
       field
     }) {
-      return field.type === "object" && !field.multipleValues;
+      return field.type === "object" && !field.list;
     },
     render({
       field,
@@ -39,10 +40,18 @@ const plugin = {
         path: Bind.parentName
       }, /*#__PURE__*/React.createElement(ParentValueIndexProvider, {
         index: -1
-      }, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionItem, {
+      }, /*#__PURE__*/React.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+      }, /*#__PURE__*/React.createElement(Accordion.Item, {
+        icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
+          color: "accent",
+          label: "Accordion Item",
+          icon: /*#__PURE__*/React.createElement(HorizontalRuleIcon, null)
+        }),
         title: field.label,
-        description: field.helpText,
-        open: open
+        description: field.description,
+        defaultOpen: open
       }, /*#__PURE__*/React.createElement(Fields, {
         Bind: Bind,
         contentModel: contentModel,