@webiny/app-website-builder 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/BaseEditor/config/EditorConfig.d.ts

@@ -1,31 +1,511 @@
-/// <reference types="react" />
-import type { ElementConfig } from "./Element";
-import type { ElementInputConfig } from "./ElementInput";
-export declare const EditorConfig: (({ priority, children }: import("@webiny/react-properties").ConfigProps) => import("react").JSX.Element) & {
+import type { ElementConfig } from "./Element.js";
+import type { ElementInputConfig } from "./ElementInput.js";
+export interface EditorConfig {
+    elements: ElementConfig[];
+    inputRenderers: ElementInputConfig[];
+}
+export declare const EditorConfigComponents: {
+    /**
+     * Components to configure editor UI.
+     */
+    Ui: {
+        Element: (({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+            original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+                original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+                original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Elements: ({ group, scope, transform, render }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
+        Layout: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Content: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
+            Layout: ({ children }: import("./Content/Layout.js").LayoutProps) => import("react").ReactNode;
+            Element: ((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Elements: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: (() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+        };
+        TopBar: (() => import("react").JSX.Element) & {
+            Element: ((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Elements: ((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Layout: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: (() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Divider: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: (() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Action: ((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            DropdownAction: ((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            } & {
+                MenuItem: (props: import("@webiny/app-admin/index.js").OptionsMenuItemProps) => React.JSX.Element;
+                MenuLink: (props: import("@webiny/app-admin/index.js").OptionsMenuLinkProps) => React.JSX.Element;
+            };
+        };
+        Toolbar: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
+            Layout: () => import("react").JSX.Element;
+            Element: ((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Elements: ((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+        };
+        Sidebar: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
+            Layout: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: (() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Element: ((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Elements: ((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Group: ((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            } & {
+                Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
+            };
+            ScrollableContainer: ({ children }: any) => import("react").JSX.Element;
+        };
+        IsReadOnly: ({ children }: import("~/BaseEditor/config/IsReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
+        IsNotReadOnly: ({ children }: import("~/BaseEditor/config/IsNotReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
+        OnActiveElement: ({ children }: import("./OnActiveElement.js").OnActiveElementProps) => import("react").JSX.Element | null;
+        NoActiveElement: ({ children }: import("./NoActiveElement.js").NoActiveElementProps) => import("react").JSX.Element | null;
+    };
+    ElementInput: {
+        Renderer: (props: import("./ElementInput.js").RendererProps) => import("react").JSX.Element;
+    };
+    /**
+     * Define a new element property.
+     */
+    ElementProperty: ((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+        original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        STYLE: string;
+        ELEMENT: string;
+    };
+    /**
+     * Render element properties for the given group.
+     */
+    ElementProperties: (props: import("./ElementProperty.js").ElementPropertiesProps) => import("react").JSX.Element;
+    /**
+     * Define an element action.
+     */
+    ElementAction: ((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+        original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        IconButton: ({ label, icon, disabled, onClick }: import("./IconButton.js").IconButtonProps) => import("react").JSX.Element;
+    };
+    /**
+     * Render all element actions.
+     */
+    ElementActions: (() => import("react").JSX.Element) & {
+        original: () => import("react").JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    /**
+     * Customize ElementOverlay
+     */
+    ElementOverlay: {
+        Element: (({ name, element }: import("./ElementOverlay.js").ElementProps) => import("react").JSX.Element) & {
+            Container: ({ position, children }: import("./ElementOverlay.js").ElementOverlayContainerProps) => import("react").JSX.Element;
+        };
+        Elements: () => import("react").JSX.Element;
+    };
+    /**
+     * Access full editor config. WARNING: very low-level, we don't recommend using this directly!
+     */
+    useEditorConfig: typeof useEditorConfig;
+};
+export declare const EditorConfig: (({ priority, children }: import("@webiny/react-properties").ConfigProps) => React.JSX.Element) & {
     /**
      * Components to configure editor UI.
      */
     Ui: {
-        Element: (({ id, name, element, group, scope, remove, before, after }: import("./Element").ElementProps) => import("react").JSX.Element) & {
-            original: ({ id, name, element, group, scope, remove, before, after }: import("./Element").ElementProps) => import("react").JSX.Element;
+        Element: (({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+            original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ id, name, element, group, scope, remove, before, after }: import("./Element").ElementProps) => import("react").JSX.Element) & {
-                original: ({ id, name, element, group, scope, remove, before, after }: import("./Element").ElementProps) => import("react").JSX.Element;
+            original: (({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+                original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ id, name, element, group, scope, remove, before, after }: import("./Element").ElementProps) => import("react").JSX.Element) & {
-                original: ({ id, name, element, group, scope, remove, before, after }: import("./Element").ElementProps) => import("react").JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+                original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
-            }>) => (props: unknown) => import("react").JSX.Element;
+            }>) => (props: unknown) => React.JSX.Element;
         };
-        Elements: ({ group, scope, transform }: import("./Elements").ElementsProps) => import("react").JSX.Element;
+        Elements: ({ group, scope, transform, render }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
         Layout: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
             originalName: string;
@@ -39,11 +519,11 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => import("react").JSX.Element) & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
                 original: () => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
-            }>) => (props: unknown) => import("react").JSX.Element;
+            }>) => (props: unknown) => React.JSX.Element;
         };
         Content: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
@@ -58,31 +538,31 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => import("react").JSX.Element) & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
                 original: () => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
-            }>) => (props: unknown) => import("react").JSX.Element;
+            }>) => (props: unknown) => React.JSX.Element;
         } & {
-            Layout: ({ children }: import("./Content/Layout").LayoutProps) => import("react").ReactNode;
-            Element: ((props: import("./Content/Content").ElementProps) => import("react").JSX.Element) & {
-                original: (props: import("./Content/Content").ElementProps) => import("react").JSX.Element;
+            Layout: ({ children }: import("./Content/Layout.js").LayoutProps) => import("react").ReactNode;
+            Element: ((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./Content/Content").ElementProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Content/Content").ElementProps) => import("react").JSX.Element;
+                original: ((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./Content/Content").ElementProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Content/Content").ElementProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
             Elements: (() => import("react").JSX.Element) & {
                 original: () => import("react").JSX.Element;
@@ -97,51 +577,51 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => import("react").JSX.Element) & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
                     original: () => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
         };
         TopBar: (() => import("react").JSX.Element) & {
-            Element: ((props: import("./TopBar/TopBar").ElementProps) => import("react").JSX.Element) & {
-                original: (props: import("./TopBar/TopBar").ElementProps) => import("react").JSX.Element;
+            Element: ((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./TopBar/TopBar").ElementProps) => import("react").JSX.Element) & {
-                    original: (props: import("./TopBar/TopBar").ElementProps) => import("react").JSX.Element;
+                original: ((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./TopBar/TopBar").ElementProps) => import("react").JSX.Element) & {
-                    original: (props: import("./TopBar/TopBar").ElementProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
-            Elements: ((props: import("./TopBar/TopBar").ElementsProps) => import("react").JSX.Element) & {
-                original: (props: import("./TopBar/TopBar").ElementsProps) => import("react").JSX.Element;
+            Elements: ((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./TopBar/TopBar").ElementsProps) => import("react").JSX.Element) & {
-                    original: (props: import("./TopBar/TopBar").ElementsProps) => import("react").JSX.Element;
+                original: ((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./TopBar/TopBar").ElementsProps) => import("react").JSX.Element) & {
-                    original: (props: import("./TopBar/TopBar").ElementsProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
             Layout: (() => import("react").JSX.Element) & {
                 original: () => import("react").JSX.Element;
@@ -156,11 +636,11 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => import("react").JSX.Element) & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
                     original: () => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
             Divider: (() => import("react").JSX.Element) & {
                 original: () => import("react").JSX.Element;
@@ -175,95 +655,132 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => import("react").JSX.Element) & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
                     original: () => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
-            Action: ((props: import("./TopBar/TopBar").ActionProps) => import("react").JSX.Element) & {
-                original: (props: import("./TopBar/TopBar").ActionProps) => import("react").JSX.Element;
+            Action: ((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./TopBar/TopBar").ActionProps) => import("react").JSX.Element) & {
-                    original: (props: import("./TopBar/TopBar").ActionProps) => import("react").JSX.Element;
+                original: ((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./TopBar/TopBar").ActionProps) => import("react").JSX.Element) & {
-                    original: (props: import("./TopBar/TopBar").ActionProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
-            DropdownAction: ((props: import("./TopBar/TopBar").DropdownActionProps) => import("react").JSX.Element) & {
-                original: (props: import("./TopBar/TopBar").DropdownActionProps) => import("react").JSX.Element;
+            DropdownAction: ((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./TopBar/TopBar").DropdownActionProps) => import("react").JSX.Element) & {
-                    original: (props: import("./TopBar/TopBar").DropdownActionProps) => import("react").JSX.Element;
+                original: ((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./TopBar/TopBar").DropdownActionProps) => import("react").JSX.Element) & {
-                    original: (props: import("./TopBar/TopBar").DropdownActionProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             } & {
-                MenuItem: (props: import("./TopBar/MenuItem").MenuItemProps) => import("react").JSX.Element;
+                MenuItem: (props: import("@webiny/app-admin/index.js").OptionsMenuItemProps) => React.JSX.Element;
+                MenuLink: (props: import("@webiny/app-admin/index.js").OptionsMenuLinkProps) => React.JSX.Element;
             };
         };
         Toolbar: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
             Layout: () => import("react").JSX.Element;
-            Element: ((props: import("./Toolbar/Toolbar").ElementProps) => import("react").JSX.Element) & {
-                original: (props: import("./Toolbar/Toolbar").ElementProps) => import("react").JSX.Element;
+            Element: ((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./Toolbar/Toolbar").ElementProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Toolbar/Toolbar").ElementProps) => import("react").JSX.Element;
+                original: ((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./Toolbar/Toolbar").ElementProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Toolbar/Toolbar").ElementProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
-            Elements: ((props: import("./Toolbar/Toolbar").ElementsProps) => import("react").JSX.Element) & {
-                original: (props: import("./Toolbar/Toolbar").ElementsProps) => import("react").JSX.Element;
+            Elements: ((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./Toolbar/Toolbar").ElementsProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Toolbar/Toolbar").ElementsProps) => import("react").JSX.Element;
+                original: ((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./Toolbar/Toolbar").ElementsProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Toolbar/Toolbar").ElementsProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
         };
         Sidebar: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
             Layout: (() => import("react").JSX.Element) & {
                 original: () => import("react").JSX.Element;
                 originalName: string;
@@ -277,103 +794,102 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => import("react").JSX.Element) & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
                     original: () => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
-            Element: ((props: import("./Sidebar/Sidebar").BaseElementProps) => import("react").JSX.Element) & {
-                original: (props: import("./Sidebar/Sidebar").BaseElementProps) => import("react").JSX.Element;
+            Element: ((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./Sidebar/Sidebar").BaseElementProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Sidebar/Sidebar").BaseElementProps) => import("react").JSX.Element;
+                original: ((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./Sidebar/Sidebar").BaseElementProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Sidebar/Sidebar").BaseElementProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
-            Elements: ((props: import("./Sidebar/Sidebar").ElementsProps) => import("react").JSX.Element) & {
-                original: (props: import("./Sidebar/Sidebar").ElementsProps) => import("react").JSX.Element;
+            Elements: ((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./Sidebar/Sidebar").ElementsProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Sidebar/Sidebar").ElementsProps) => import("react").JSX.Element;
+                original: ((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./Sidebar/Sidebar").ElementsProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Sidebar/Sidebar").ElementsProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             };
-            Group: ((props: import("./Sidebar/Sidebar").GroupProps) => import("react").JSX.Element) & {
-                original: (props: import("./Sidebar/Sidebar").GroupProps) => import("react").JSX.Element;
+            Group: ((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("./Sidebar/Sidebar").GroupProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Sidebar/Sidebar").GroupProps) => import("react").JSX.Element;
+                original: ((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./Sidebar/Sidebar").GroupProps) => import("react").JSX.Element) & {
-                    original: (props: import("./Sidebar/Sidebar").GroupProps) => import("react").JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
                     originalName: string;
                     displayName: string;
-                }>) => (props: unknown) => import("react").JSX.Element;
+                }>) => (props: unknown) => React.JSX.Element;
             } & {
-                Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Sidebar/Tab").TabProps) => import("react").JSX.Element;
+                Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
             };
-            ScrollableContainer: import("@emotion/styled").StyledComponent<{
-                theme?: import("@emotion/react").Theme | undefined;
-                as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-            }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+            ScrollableContainer: ({ children }: any) => import("react").JSX.Element;
         };
-        OnActiveElement: ({ children }: import("./OnActiveElement").OnActiveElementProps) => import("react").JSX.Element | null;
-        NoActiveElement: ({ children }: import("./NoActiveElement").NoActiveElementProps) => import("react").JSX.Element | null;
+        IsReadOnly: ({ children }: import("~/BaseEditor/config/IsReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
+        IsNotReadOnly: ({ children }: import("~/BaseEditor/config/IsNotReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
+        OnActiveElement: ({ children }: import("./OnActiveElement.js").OnActiveElementProps) => import("react").JSX.Element | null;
+        NoActiveElement: ({ children }: import("./NoActiveElement.js").NoActiveElementProps) => import("react").JSX.Element | null;
     };
     ElementInput: {
-        Renderer: (props: import("./ElementInput").RendererProps) => import("react").JSX.Element;
+        Renderer: (props: import("./ElementInput.js").RendererProps) => import("react").JSX.Element;
     };
     /**
      * Define a new element property.
      */
-    ElementProperty: ((props: import("./ElementProperty").ElementPropertyProps) => import("react").JSX.Element) & {
-        original: (props: import("./ElementProperty").ElementPropertyProps) => import("react").JSX.Element;
+    ElementProperty: ((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+        original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: import("./ElementProperty").ElementPropertyProps) => import("react").JSX.Element) & {
-            original: (props: import("./ElementProperty").ElementPropertyProps) => import("react").JSX.Element;
+        original: ((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./ElementProperty").ElementPropertyProps) => import("react").JSX.Element) & {
-            original: (props: import("./ElementProperty").ElementPropertyProps) => import("react").JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
-        }>) => (props: unknown) => import("react").JSX.Element;
+        }>) => (props: unknown) => React.JSX.Element;
     } & {
         STYLE: string;
         ELEMENT: string;
@@ -381,30 +897,30 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
     /**
      * Render element properties for the given group.
      */
-    ElementProperties: (props: import("./ElementProperty").ElementPropertiesProps) => import("react").JSX.Element;
+    ElementProperties: (props: import("./ElementProperty.js").ElementPropertiesProps) => import("react").JSX.Element;
     /**
      * Define an element action.
      */
-    ElementAction: ((props: import("./ElementAction").ElementActionProps) => import("react").JSX.Element) & {
-        original: (props: import("./ElementAction").ElementActionProps) => import("react").JSX.Element;
+    ElementAction: ((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+        original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: import("./ElementAction").ElementActionProps) => import("react").JSX.Element) & {
-            original: (props: import("./ElementAction").ElementActionProps) => import("react").JSX.Element;
+        original: ((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./ElementAction").ElementActionProps) => import("react").JSX.Element) & {
-            original: (props: import("./ElementAction").ElementActionProps) => import("react").JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
-        }>) => (props: unknown) => import("react").JSX.Element;
+        }>) => (props: unknown) => React.JSX.Element;
     } & {
-        IconButton: ({ label, icon, disabled, onClick }: import("./IconButton").IconButtonProps) => import("react").JSX.Element;
+        IconButton: ({ label, icon, disabled, onClick }: import("./IconButton.js").IconButtonProps) => import("react").JSX.Element;
     };
     /**
      * Render all element actions.
@@ -422,21 +938,30 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => import("react").JSX.Element) & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
             originalName: string;
             displayName: string;
-        }>) => (props: unknown) => import("react").JSX.Element;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    /**
+     * Customize ElementOverlay
+     */
+    ElementOverlay: {
+        Element: (({ name, element }: import("./ElementOverlay.js").ElementProps) => import("react").JSX.Element) & {
+            Container: ({ position, children }: import("./ElementOverlay.js").ElementOverlayContainerProps) => import("react").JSX.Element;
+        };
+        Elements: () => import("react").JSX.Element;
     };
     /**
      * Access full editor config. WARNING: very low-level, we don't recommend using this directly!
      */
     useEditorConfig: typeof useEditorConfig;
 };
-export declare const EditorWithConfig: (({ onProperties, children }: import("@webiny/react-properties").WithConfigProps) => import("react").JSX.Element) & {
+export declare const EditorWithConfig: (({ onProperties, children }: import("@webiny/react-properties").WithConfigProps) => React.JSX.Element) & {
     displayName: string;
 };
-export declare function useEditorConfig(): {
+export declare function useEditorConfig<TConfig = EditorConfig>(): {
     elements: ElementConfig[];
     inputRenderers: ElementInputConfig[];
-};
+} & Omit<EditorConfig & TConfig, "elements" | "inputRenderers">;