@webiny/app-website-builder 6.4.12-beta.5 → 6.5.0-beta.0

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    return path.replace(/\\/(\\d+)\\//g, \".$1\");\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    const value = resolvedBindings.inputs[node.path];\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n            const patch = updatedInputs.createJsonPatch(rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"names":["InputValueObject","value","undefined","convertBracketPathToDotPath","path","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","useBreakpoint","editor","useDocumentEditor","inputsAst","useElementInputsAst","elementFactory","useElementFactory","breakpointNames","useMemo","bp","rawBindings","resolvedBindings","inheritanceMap","useBindingsForElement","stylesProcessor","StylesBindingsProcessor","inputsProcessor","InputsBindingsProcessor","inputMetadata","elementMetadata","ElementMetadata","BreakpointElementMetadata","valueId","generateAlphaNumericLowerCaseId","InputMetadata","localState","setLocalValue","useState","onChange","useCallback","deepInputs","valueObject","updaterInput","valuePath","devFriendlyInputs","set","structuredClone","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","document","inputs","styles","applyAncestorUpdates","onPreviewChange","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":"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"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    // Flat binding paths use `/` as the segment separator (e.g. `items/0/label`, `address/city`).\n    // lodash `set`/`get` expect `.`-delimited paths, and treat numeric segments as array indexes,\n    // so a straight `/` -> `.` conversion handles both nested objects and list items.\n    return path.replace(/\\//g, \".\");\n}\n\n/**\n * Reads a value from a deep inputs object using a flat `/`-delimited binding path.\n * Numeric segments are treated as array indexes (e.g. `items/0/label`).\n */\nfunction getDeepValueAtPath(obj: any, path: string): any {\n    if (!path) {\n        return obj;\n    }\n\n    const keys = path.split(\"/\").map(key => (/^\\d+$/.test(key) ? Number(key) : key));\n    return keys.reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    // Leaf inputs resolve directly from the flat bindings. Container inputs (object / object-list)\n    // have no flat entry of their own, so we resolve their deep value (object / array) from the\n    // processor - this is what list fields read to render items and to rewrite the whole array.\n    const value = useMemo(() => {\n        if (node.children.length > 0) {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n            return getDeepValueAtPath(deepInputs, node.path);\n        }\n\n        return resolvedBindings.inputs[node.path];\n    }, [resolvedBindings, node.path, inputsProcessor]);\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n            const patch = updatedInputs.createJsonPatch(rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"names":["InputValueObject","value","undefined","convertBracketPathToDotPath","path","getDeepValueAtPath","obj","keys","key","Number","acc","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","useBreakpoint","editor","useDocumentEditor","inputsAst","useElementInputsAst","elementFactory","useElementFactory","breakpointNames","useMemo","bp","rawBindings","resolvedBindings","inheritanceMap","useBindingsForElement","stylesProcessor","StylesBindingsProcessor","inputsProcessor","InputsBindingsProcessor","deepInputs","inputMetadata","elementMetadata","ElementMetadata","BreakpointElementMetadata","valueId","generateAlphaNumericLowerCaseId","InputMetadata","localState","setLocalValue","useState","onChange","useCallback","valueObject","updaterInput","valuePath","devFriendlyInputs","set","JSON","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","document","inputs","styles","applyAncestorUpdates","onPreviewChange","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":"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"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.d.ts

@@ -1,10 +1,6 @@
 import React from "react";
 export declare const BackgroundColor: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & React.NamedExoticComponent<{
-    elementId: string;
-}> & {
-    readonly type: ({ elementId }: {
-        elementId: string;
-    }) => React.JSX.Element;
+}) => React.JSX.Element) & {
+    displayName: string;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.d.ts

@@ -2,10 +2,6 @@ import React from "react";
 export declare const parseValue: (value: string) => undefined;
 export declare const BackgroundImage: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & React.NamedExoticComponent<{
-    elementId: string;
-}> & {
-    readonly type: ({ elementId }: {
-        elementId: string;
-    }) => React.JSX.Element;
+}) => React.JSX.Element) & {
+    displayName: string;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js

@@ -65,13 +65,6 @@ const BackgroundImage = observer(({ elementId })=>{
     };
     const inheritance = inheritanceMap?.backgroundImage ?? {};
     const fileInfo = metadata.get("backgroundImage");
-    const pickerValue = url && fileInfo ? {
-        id: fileInfo.id,
-        name: fileInfo.name,
-        size: fileInfo.size,
-        mimeType: fileInfo.type,
-        src: fileInfo.url
-    } : void 0;
     return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
@@ -85,7 +78,7 @@ const BackgroundImage = observer(({ elementId })=>{
         render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
                 variant: "secondary",
                 type: "compact",
-                value: pickerValue,
+                value: url ? fileInfo : void 0,
                 onSelectItem: ()=>showFileManager(),
                 onRemoveItem: onRemove
             })

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ntype FileInfo = {\n    id: string;\n    name: string;\n    size: number;\n    type: string;\n    url: string;\n};\n\nconst DEFAULT_POSITION = \"center\";\nconst DEFAULT_SCALING = {\n    backgroundSize: \"cover\",\n    backgroundRepeat: \"no-repeat\"\n};\n\nexport const parseValue = (value: string) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return;\n};\n\nexport const BackgroundImage = observer(({ elementId }: { elementId: string }) => {\n    const { isBaseBreakpoint } = useBreakpoint();\n    const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string | null>(styles.backgroundImage);\n    const url = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        const rules = parser.getRules();\n        const urlRule = rules.find(r => r.type === \"url\");\n        if (urlRule && urlRule.type === \"url\") {\n            return urlRule.parsed.url;\n        }\n        return null;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundImage !== localValue) {\n            setLocalValue(styles.backgroundImage);\n        }\n    }, [styles.backgroundImage]);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ styles, metadata }) => {\n            styles.set(\"backgroundPosition\", DEFAULT_POSITION);\n            styles.set(\"backgroundSize\", DEFAULT_SCALING.backgroundSize);\n            styles.set(\"backgroundRepeat\", DEFAULT_SCALING.backgroundRepeat);\n            styles.set(\"backgroundImage\", `url(\"${file.src}\")`);\n\n            metadata.set(\"backgroundImage\", {\n                id: file.id,\n                name: file.name,\n                size: file.size,\n                type: file.type,\n                url: file.src || \"\"\n            });\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ styles, metadata }) => {\n            // On base breakpoint, we unset the image and all styles related to it.\n            if (isBaseBreakpoint) {\n                styles.unset(\"backgroundImage\");\n                styles.unset(\"backgroundPosition\");\n                styles.unset(\"backgroundSize\");\n                styles.unset(\"backgroundRepeat\");\n            } else {\n                styles.set(\"backgroundImage\", \"none\");\n            }\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundImage\");\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundImage ?? {};\n\n    const fileInfo = metadata.get<FileInfo>(\"backgroundImage\");\n\n    // The FilePicker expects a FileItemDto (`mimeType`, `src`), but our metadata stores the\n    // legacy shape (`type`, `url`). Map it across so the picker can detect an image and render\n    // the thumbnail (otherwise `mimeType` is undefined and it shows the generic file icon).\n    const pickerValue =\n        url && fileInfo\n            ? {\n                  id: fileInfo.id,\n                  name: fileInfo.name,\n                  size: fileInfo.size,\n                  mimeType: fileInfo.type,\n                  src: fileInfo.url\n              }\n            : undefined;\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Image\"}\n                />\n            }\n        >\n            <FileManager\n                images={true}\n                onChange={onFileChange}\n                render={({ showFileManager }) => (\n                    <FilePicker\n                        variant={\"secondary\"}\n                        type=\"compact\"\n                        value={pickerValue}\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                    />\n                )}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["DEFAULT_POSITION","DEFAULT_SCALING","parseValue","value","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","url","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","fileInfo","pickerValue","undefined","SidebarRow","InheritanceLabel","FileManager","showFileManager","FilePicker"],"mappings":";;;;;;;;;AAkBA,MAAMA,mBAAmB;AACzB,MAAMC,kBAAkB;IACpB,gBAAgB;IAChB,kBAAkB;AACtB;AAEO,MAAMC,aAAa,CAACC,SAM3B;AAEO,MAAMC,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUP;IACjE,MAAM,CAACQ,YAAYC,cAAc,GAAGC,SAAwBP,OAAO,eAAe;IAClF,MAAMQ,MAAMC,QAAQ;QAChB,MAAMC,SAAS,IAAIC,sBAAsBX,OAAO,eAAe;QAC/D,MAAMY,QAAQF,OAAO,QAAQ;QAC7B,MAAMG,UAAUD,MAAM,IAAI,CAACE,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;QACtC,IAAID,WAAWA,AAAiB,UAAjBA,QAAQ,IAAI,EACvB,OAAOA,QAAQ,MAAM,CAAC,GAAG;QAE7B,OAAO;IACX,GAAG;QAACb,OAAO,eAAe;KAAC;IAE3Be,UAAU;QACN,IAAIf,OAAO,eAAe,KAAKK,YAC3BC,cAAcN,OAAO,eAAe;IAE5C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMgB,eAAe,CAACC;QAClBf,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAC1BD,OAAO,GAAG,CAAC,sBAAsBT;YACjCS,OAAO,GAAG,CAAC,kBAAkBR,gBAAgB,cAAc;YAC3DQ,OAAO,GAAG,CAAC,oBAAoBR,gBAAgB,gBAAgB;YAC/DQ,OAAO,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAEiB,KAAK,GAAG,CAAC,EAAE,CAAC;YAElDhB,SAAS,GAAG,CAAC,mBAAmB;gBAC5B,IAAIgB,KAAK,EAAE;gBACX,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,KAAKA,KAAK,GAAG,IAAI;YACrB;QACJ;IACJ;IAEA,MAAMC,WAAW;QACbhB,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAE1B,IAAIH,kBAAkB;gBAClBE,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;YACjB,OACIA,OAAO,GAAG,CAAC,mBAAmB;YAGlCC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMkB,UAAU;QACZjB,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YAEbC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMmB,cAAcjB,gBAAgB,mBAAmB,CAAC;IAExD,MAAMkB,WAAWpB,SAAS,GAAG,CAAW;IAKxC,MAAMqB,cACFd,OAAOa,WACD;QACI,IAAIA,SAAS,EAAE;QACf,MAAMA,SAAS,IAAI;QACnB,MAAMA,SAAS,IAAI;QACnB,UAAUA,SAAS,IAAI;QACvB,KAAKA,SAAS,GAAG;IACrB,IACAE;IAEV,OAAO,WAAP,GACI,oBAACC,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASN;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACM,aAAWA;QACR,QAAQ;QACR,UAAUV;QACV,QAAQ,CAAC,EAAEW,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,MAAK;gBACL,OAAON;gBACP,cAAc,IAAMK;gBACpB,cAAcT;;;AAMtC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ntype FileInfo = {\n    id: string;\n    name: string;\n    size: number;\n    type: string;\n    url: string;\n};\n\nconst DEFAULT_POSITION = \"center\";\nconst DEFAULT_SCALING = {\n    backgroundSize: \"cover\",\n    backgroundRepeat: \"no-repeat\"\n};\n\nexport const parseValue = (value: string) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return;\n};\n\nexport const BackgroundImage = observer(({ elementId }: { elementId: string }) => {\n    const { isBaseBreakpoint } = useBreakpoint();\n    const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string | null>(styles.backgroundImage);\n    const url = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        const rules = parser.getRules();\n        const urlRule = rules.find(r => r.type === \"url\");\n        if (urlRule && urlRule.type === \"url\") {\n            return urlRule.parsed.url;\n        }\n        return null;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundImage !== localValue) {\n            setLocalValue(styles.backgroundImage);\n        }\n    }, [styles.backgroundImage]);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ styles, metadata }) => {\n            styles.set(\"backgroundPosition\", DEFAULT_POSITION);\n            styles.set(\"backgroundSize\", DEFAULT_SCALING.backgroundSize);\n            styles.set(\"backgroundRepeat\", DEFAULT_SCALING.backgroundRepeat);\n            styles.set(\"backgroundImage\", `url(\"${file.src}\")`);\n\n            metadata.set(\"backgroundImage\", {\n                id: file.id,\n                name: file.name,\n                size: file.size,\n                type: file.type,\n                url: file.src || \"\"\n            });\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ styles, metadata }) => {\n            // On base breakpoint, we unset the image and all styles related to it.\n            if (isBaseBreakpoint) {\n                styles.unset(\"backgroundImage\");\n                styles.unset(\"backgroundPosition\");\n                styles.unset(\"backgroundSize\");\n                styles.unset(\"backgroundRepeat\");\n            } else {\n                styles.set(\"backgroundImage\", \"none\");\n            }\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundImage\");\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundImage ?? {};\n\n    const fileInfo = metadata.get<FileInfo>(\"backgroundImage\");\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Image\"}\n                />\n            }\n        >\n            <FileManager\n                images={true}\n                onChange={onFileChange}\n                render={({ showFileManager }) => (\n                    <FilePicker\n                        variant={\"secondary\"}\n                        type=\"compact\"\n                        value={url ? fileInfo : undefined}\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                    />\n                )}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["DEFAULT_POSITION","DEFAULT_SCALING","parseValue","value","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","url","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","fileInfo","SidebarRow","InheritanceLabel","FileManager","showFileManager","FilePicker","undefined"],"mappings":";;;;;;;;;AAkBA,MAAMA,mBAAmB;AACzB,MAAMC,kBAAkB;IACpB,gBAAgB;IAChB,kBAAkB;AACtB;AAEO,MAAMC,aAAa,CAACC,SAM3B;AAEO,MAAMC,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUP;IACjE,MAAM,CAACQ,YAAYC,cAAc,GAAGC,SAAwBP,OAAO,eAAe;IAClF,MAAMQ,MAAMC,QAAQ;QAChB,MAAMC,SAAS,IAAIC,sBAAsBX,OAAO,eAAe;QAC/D,MAAMY,QAAQF,OAAO,QAAQ;QAC7B,MAAMG,UAAUD,MAAM,IAAI,CAACE,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;QACtC,IAAID,WAAWA,AAAiB,UAAjBA,QAAQ,IAAI,EACvB,OAAOA,QAAQ,MAAM,CAAC,GAAG;QAE7B,OAAO;IACX,GAAG;QAACb,OAAO,eAAe;KAAC;IAE3Be,UAAU;QACN,IAAIf,OAAO,eAAe,KAAKK,YAC3BC,cAAcN,OAAO,eAAe;IAE5C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMgB,eAAe,CAACC;QAClBf,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAC1BD,OAAO,GAAG,CAAC,sBAAsBT;YACjCS,OAAO,GAAG,CAAC,kBAAkBR,gBAAgB,cAAc;YAC3DQ,OAAO,GAAG,CAAC,oBAAoBR,gBAAgB,gBAAgB;YAC/DQ,OAAO,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAEiB,KAAK,GAAG,CAAC,EAAE,CAAC;YAElDhB,SAAS,GAAG,CAAC,mBAAmB;gBAC5B,IAAIgB,KAAK,EAAE;gBACX,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,KAAKA,KAAK,GAAG,IAAI;YACrB;QACJ;IACJ;IAEA,MAAMC,WAAW;QACbhB,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAE1B,IAAIH,kBAAkB;gBAClBE,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;YACjB,OACIA,OAAO,GAAG,CAAC,mBAAmB;YAGlCC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMkB,UAAU;QACZjB,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YAEbC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMmB,cAAcjB,gBAAgB,mBAAmB,CAAC;IAExD,MAAMkB,WAAWpB,SAAS,GAAG,CAAW;IAExC,OAAO,WAAP,GACI,oBAACqB,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASJ;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACI,aAAWA;QACR,QAAQ;QACR,UAAUR;QACV,QAAQ,CAAC,EAAES,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,MAAK;gBACL,OAAOlB,MAAMa,WAAWM;gBACxB,cAAc,IAAMF;gBACpB,cAAcP;;;AAMtC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.d.ts

@@ -1,10 +1,6 @@
 import React from "react";
 export declare const BackgroundPosition: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & React.NamedExoticComponent<{
-    elementId: string;
-}> & {
-    readonly type: ({ elementId }: {
-        elementId: string;
-    }) => React.JSX.Element;
+}) => React.JSX.Element) & {
+    displayName: string;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.d.ts

@@ -1,10 +1,6 @@
 import React from "react";
 export declare const BackgroundScaling: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & React.NamedExoticComponent<{
-    elementId: string;
-}> & {
-    readonly type: ({ elementId }: {
-        elementId: string;
-    }) => React.JSX.Element;
+}) => React.JSX.Element) & {
+    displayName: string;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderColorProps {
     elementId: string;
 }
-export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & React.NamedExoticComponent<BorderColorProps> & {
-    readonly type: ({ elementId }: BorderColorProps) => React.JSX.Element;
+export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & {
+    displayName: string;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderRadiusProps {
     elementId: string;
 }
-export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & React.NamedExoticComponent<BorderRadiusProps> & {
-    readonly type: ({ elementId }: BorderRadiusProps) => React.JSX.Element;
+export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & {
+    displayName: string;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderStyleProps {
     elementId: string;
 }
-export declare const BorderStyle: (({ elementId }: BorderStyleProps) => React.JSX.Element) & React.NamedExoticComponent<BorderStyleProps> & {
-    readonly type: ({ elementId }: BorderStyleProps) => React.JSX.Element;
+export declare const BorderStyle: (({ elementId }: BorderStyleProps) => React.JSX.Element) & {
+    displayName: string;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderWidth.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderWidthProps {
     elementId: string;
 }
-export declare const BorderWidth: (({ elementId }: BorderWidthProps) => React.JSX.Element) & React.NamedExoticComponent<BorderWidthProps> & {
-    readonly type: ({ elementId }: BorderWidthProps) => React.JSX.Element;
+export declare const BorderWidth: (({ elementId }: BorderWidthProps) => React.JSX.Element) & {
+    displayName: string;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.d.ts

@@ -13,10 +13,6 @@ import React from "react";
  */
 export declare const Alignment: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & React.NamedExoticComponent<{
-    elementId: string;
-}> & {
-    readonly type: ({ elementId }: {
-        elementId: string;
-    }) => React.JSX.Element;
+}) => React.JSX.Element) & {
+    displayName: string;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.d.ts

@@ -7,7 +7,7 @@ interface LengthWithUnitInputProps {
     unitOptions: UnitOption[];
     defaultValue?: string;
 }
-export declare const LengthWithUnitInput: (({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element) & React.NamedExoticComponent<LengthWithUnitInputProps> & {
-    readonly type: ({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element;
+export declare const LengthWithUnitInput: (({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element) & {
+    displayName: string;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Margin.d.ts

@@ -3,7 +3,7 @@ interface MarginProps {
     elementId: string;
     children: React.ReactNode;
 }
-export declare const Margin: (({ elementId, children }: MarginProps) => React.JSX.Element) & React.NamedExoticComponent<MarginProps> & {
-    readonly type: ({ elementId, children }: MarginProps) => React.JSX.Element;
+export declare const Margin: (({ elementId, children }: MarginProps) => React.JSX.Element) & {
+    displayName: string;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface PaddingProps {
     elementId: string;
 }
-export declare const Padding: (({ elementId }: PaddingProps) => React.JSX.Element) & React.NamedExoticComponent<PaddingProps> & {
-    readonly type: ({ elementId }: PaddingProps) => React.JSX.Element;
+export declare const Padding: (({ elementId }: PaddingProps) => React.JSX.Element) & {
+    displayName: string;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.d.ts

@@ -2,6 +2,6 @@ import React from "react";
 export interface VisibilityProps {
     elementId: string;
 }
-export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & React.NamedExoticComponent<VisibilityProps> & {
-    readonly type: ({ elementId }: VisibilityProps) => React.JSX.Element;
+export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & {
+    displayName: string;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js

@@ -17,7 +17,7 @@ const SidebarRow = ({ label, tooltip, children })=>/*#__PURE__*/ react.createEle
     }) : /*#__PURE__*/ react.createElement("div", {
         className: "w-xs shrink-0"
     })), /*#__PURE__*/ react.createElement("div", {
-        className: "flex-1 min-w-0"
+        className: "flex-1"
     }, children));
 export { SidebarRow };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\n\ninterface SidebarRowProps {\n    label: React.ReactNode;\n    tooltip?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nexport const SidebarRow = ({ label, tooltip, children }: SidebarRowProps) => {\n    return (\n        // The label sits at the top of the row rather than centered against the value, so that a\n        // row is free to render something taller than one control - the file picker's stacked\n        // preview, say - without the label drifting to the middle of it.\n        <div className={\"flex items-start gap-xxs\"}>\n            {/* `pt-sm` is half the difference between a standard control (a `size=\"md\"` Select is\n                32px) and this label's 16px line, which puts the label exactly where centering\n                would for the ordinary single-control row, and leaves it there for taller ones. */}\n            <div\n                className={\n                    \"w-[80px] pt-sm flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong\"\n                }\n            >\n                {label}\n\n                {tooltip ? (\n                    <Tooltip\n                        trigger={\n                            <Icon\n                                icon={<InfoIcon />}\n                                size={\"xs\"}\n                                label={\"More information\"}\n                                color={\"neutral-light\"}\n                            />\n                        }\n                        content={tooltip}\n                        side={\"left\"}\n                    />\n                ) : (\n                    <div className={\"w-xs shrink-0\"} />\n                )}\n            </div>\n            {/* min-w-0 lets the cell shrink below its content's intrinsic width, so long\n                unbroken values (e.g. a hashed file name) truncate instead of widening the\n                row and pushing controls past the sidebar edge. */}\n            <div className={\"flex-1 min-w-0\"}>{children}</div>\n        </div>\n    );\n};\n"],"names":["SidebarRow","label","tooltip","children","Tooltip","Icon","InfoIcon"],"mappings":";;;AAUO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAmB,G,cAKhE,oBAAC;QAAI,WAAW;qBAIZ,oBAAC;QACG,WACI;OAGHF,OAEAC,UAAU,WAAVA,GACG,oBAACE,SAAOA;QACJ,uBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAQA;YACf,MAAM;YACN,OAAO;YACP,OAAO;;QAGf,SAASJ;QACT,MAAM;uBAGV,oBAAC;QAAI,WAAW;uBAMxB,oBAAC;QAAI,WAAW;OAAmBC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\n\ninterface SidebarRowProps {\n    label: React.ReactNode;\n    tooltip?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nexport const SidebarRow = ({ label, tooltip, children }: SidebarRowProps) => {\n    return (\n        <div className={\"flex items-start gap-xxs\"}>\n            <div\n                className={\n                    \"w-[80px] pt-sm flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong\"\n                }\n            >\n                {label}\n\n                {tooltip ? (\n                    <Tooltip\n                        trigger={\n                            <Icon\n                                icon={<InfoIcon />}\n                                size={\"xs\"}\n                                label={\"More information\"}\n                                color={\"neutral-light\"}\n                            />\n                        }\n                        content={tooltip}\n                        side={\"left\"}\n                    />\n                ) : (\n                    <div className={\"w-xs shrink-0\"} />\n                )}\n            </div>\n            <div className={\"flex-1\"}>{children}</div>\n        </div>\n    );\n};\n"],"names":["SidebarRow","label","tooltip","children","Tooltip","Icon","InfoIcon"],"mappings":";;;AAUO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAmB,GAC7D,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;OAGHF,OAEAC,UAAU,WAAVA,GACG,oBAACE,SAAOA;QACJ,uBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAQA;YACf,MAAM;YACN,OAAO;YACP,OAAO;;QAGf,SAASJ;QACT,MAAM;uBAGV,oBAAC;QAAI,WAAW;uBAGxB,oBAAC;QAAI,WAAW;OAAWC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
+import { StyleAccordionItem } from "./StyleAccordionItem.js";
 interface StyleAccordionProps {
     children: React.ReactNode;
 }
-export declare const StyleAccordion: (({ children }: StyleAccordionProps) => React.JSX.Element) & {
-    Item: ({ title, icon, defaultOpen, noPadding, children }: import("./StyleAccordionItem.js").StyleAccordionItemProps) => React.JSX.Element;
+declare const StyleAccordionRoot: ({ children }: StyleAccordionProps) => React.JSX.Element;
+export declare const StyleAccordion: typeof StyleAccordionRoot & {
+    Item: typeof StyleAccordionItem;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js

@@ -2,7 +2,10 @@ import react from "react";
 import { Icon } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/select_all.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
-const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
+import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
+const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableContainer, {
+        tabIndex: -1
+    }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
         name: "style",
         label: "Style",
         icon: /*#__PURE__*/ react.createElement(Icon, {
@@ -12,7 +15,7 @@ const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(Sidebar.Group.T
         element: /*#__PURE__*/ react.createElement(Sidebar.Elements, {
             group: "style"
         })
-    });
+    }));
 export { StyleSettingsGroup };
 
 //# sourceMappingURL=StyleSettingsGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as SelectAllIcon } from \"@webiny/icons/select_all.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\n\nexport const StyleSettingsGroup = () => {\n    return (\n        <Sidebar.Group.Tab\n            name={\"style\"}\n            label={\"Style\"}\n            icon={<Icon icon={<SelectAllIcon />} label={\"Style\"} />}\n            element={<Sidebar.Elements group={\"style\"} />}\n        />\n    );\n};\n"],"names":["StyleSettingsGroup","Sidebar","Icon","SelectAllIcon"],"mappings":";;;;AAKO,MAAMA,qBAAqB,IACvB,WAAP,GACI,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,OAAO;;QAC5C,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as SelectAllIcon } from \"@webiny/icons/select_all.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const StyleSettingsGroup = () => {\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"style\"}\n                label={\"Style\"}\n                icon={<Icon icon={<SelectAllIcon />} label={\"Style\"} />}\n                element={<Sidebar.Elements group={\"style\"} />}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"names":["StyleSettingsGroup","ScrollableContainer","Sidebar","Icon","SelectAllIcon"],"mappings":";;;;;AAMO,MAAMA,qBAAqB,IACvB,WAAP,GACI,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,OAAO;;QAC5C,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const Navigator: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
-    readonly type: () => React.JSX.Element;
+export declare const Navigator: (() => React.JSX.Element) & {
+    displayName: string;
 };

package/BaseEditor/metadata/ElementMetadata.js

@@ -18,7 +18,10 @@ class ElementMetadata {
         } else delete this.metadata[id];
     }
     applyToDocument(document) {
-        document.bindings[this.elementId].metadata = this.metadata;
+        if (0 === Object.keys(this.metadata).length) return;
+        const current = document.bindings[this.elementId].metadata;
+        if (current && current !== this.metadata) Object.assign(current, this.metadata);
+        else document.bindings[this.elementId].metadata = this.metadata;
     }
 }
 export { ElementMetadata };

package/BaseEditor/metadata/ElementMetadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/metadata/ElementMetadata.js","sources":["../../../src/BaseEditor/metadata/ElementMetadata.ts"],"sourcesContent":["import { matcher } from \"matcher\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata, Metadata } from \"./IMetadata.js\";\n\nexport class ElementMetadata implements IMetadata {\n    private readonly elementId: string;\n    private readonly metadata: Record<string, any>;\n\n    constructor(elementId: string, metadata: Record<string, any> = {}) {\n        this.elementId = elementId;\n        this.metadata = metadata;\n    }\n\n    get<T = unknown>(id: string): T | undefined {\n        return this.metadata[id];\n    }\n\n    set(id: string, data: Metadata): void {\n        this.metadata[id] = data;\n    }\n\n    unset(id: string): void {\n        // Support wildcard paths using micromatch\n        if (id.includes(\"*\")) {\n            const keys = Object.keys(this.metadata);\n            const matches = matcher(keys, id);\n            for (const key of matches) {\n                delete this.metadata[key];\n            }\n        } else {\n            delete this.metadata[id];\n        }\n    }\n\n    applyToDocument(document: Document) {\n        document.bindings[this.elementId].metadata = this.metadata;\n    }\n}\n"],"names":["ElementMetadata","elementId","metadata","id","data","keys","Object","matches","matcher","key","document"],"mappings":";AAIO,MAAMA;IAIT,YAAYC,SAAiB,EAAEC,WAAgC,CAAC,CAAC,CAAE;QAC/D,IAAI,CAAC,SAAS,GAAGD;QACjB,IAAI,CAAC,QAAQ,GAAGC;IACpB;IAEA,IAAiBC,EAAU,EAAiB;QACxC,OAAO,IAAI,CAAC,QAAQ,CAACA,GAAG;IAC5B;IAEA,IAAIA,EAAU,EAAEC,IAAc,EAAQ;QAClC,IAAI,CAAC,QAAQ,CAACD,GAAG,GAAGC;IACxB;IAEA,MAAMD,EAAU,EAAQ;QAEpB,IAAIA,GAAG,QAAQ,CAAC,MAAM;YAClB,MAAME,OAAOC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ;YACtC,MAAMC,UAAUC,QAAQH,MAAMF;YAC9B,KAAK,MAAMM,OAAOF,QACd,OAAO,IAAI,CAAC,QAAQ,CAACE,IAAI;QAEjC,OACI,OAAO,IAAI,CAAC,QAAQ,CAACN,GAAG;IAEhC;IAEA,gBAAgBO,QAAkB,EAAE;QAChCA,SAAS,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;IAC9D;AACJ"}
+{"version":3,"file":"BaseEditor/metadata/ElementMetadata.js","sources":["../../../src/BaseEditor/metadata/ElementMetadata.ts"],"sourcesContent":["import { matcher } from \"matcher\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata, Metadata } from \"./IMetadata.js\";\n\nexport class ElementMetadata implements IMetadata {\n    private readonly elementId: string;\n    private readonly metadata: Record<string, any>;\n\n    constructor(elementId: string, metadata: Record<string, any> = {}) {\n        this.elementId = elementId;\n        this.metadata = metadata;\n    }\n\n    get<T = unknown>(id: string): T | undefined {\n        return this.metadata[id];\n    }\n\n    set(id: string, data: Metadata): void {\n        this.metadata[id] = data;\n    }\n\n    unset(id: string): void {\n        // Support wildcard paths using micromatch\n        if (id.includes(\"*\")) {\n            const keys = Object.keys(this.metadata);\n            const matches = matcher(keys, id);\n            for (const key of matches) {\n                delete this.metadata[key];\n            }\n        } else {\n            delete this.metadata[id];\n        }\n    }\n\n    applyToDocument(document: Document) {\n        // Don't write an empty metadata object to the document.\n        if (Object.keys(this.metadata).length === 0) {\n            return;\n        }\n\n        const current = document.bindings[this.elementId].metadata;\n        if (current && current !== this.metadata) {\n            // Merge rather than replace: when multiple inputs on the same\n            // element each hold a stale metadata snapshot (produced by toJS()\n            // in useBindingsForElement), a plain assignment would discard keys\n            // written by earlier onChange callbacks.\n            Object.assign(current, this.metadata);\n        } else {\n            document.bindings[this.elementId].metadata = this.metadata;\n        }\n    }\n}\n"],"names":["ElementMetadata","elementId","metadata","id","data","keys","Object","matches","matcher","key","document","current"],"mappings":";AAIO,MAAMA;IAIT,YAAYC,SAAiB,EAAEC,WAAgC,CAAC,CAAC,CAAE;QAC/D,IAAI,CAAC,SAAS,GAAGD;QACjB,IAAI,CAAC,QAAQ,GAAGC;IACpB;IAEA,IAAiBC,EAAU,EAAiB;QACxC,OAAO,IAAI,CAAC,QAAQ,CAACA,GAAG;IAC5B;IAEA,IAAIA,EAAU,EAAEC,IAAc,EAAQ;QAClC,IAAI,CAAC,QAAQ,CAACD,GAAG,GAAGC;IACxB;IAEA,MAAMD,EAAU,EAAQ;QAEpB,IAAIA,GAAG,QAAQ,CAAC,MAAM;YAClB,MAAME,OAAOC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ;YACtC,MAAMC,UAAUC,QAAQH,MAAMF;YAC9B,KAAK,MAAMM,OAAOF,QACd,OAAO,IAAI,CAAC,QAAQ,CAACE,IAAI;QAEjC,OACI,OAAO,IAAI,CAAC,QAAQ,CAACN,GAAG;IAEhC;IAEA,gBAAgBO,QAAkB,EAAE;QAEhC,IAAIJ,AAAsC,MAAtCA,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,EACjC;QAGJ,MAAMK,UAAUD,SAAS,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;QAC1D,IAAIC,WAAWA,YAAY,IAAI,CAAC,QAAQ,EAKpCL,OAAO,MAAM,CAACK,SAAS,IAAI,CAAC,QAAQ;aAEpCD,SAAS,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;IAElE;AACJ"}

package/DocumentEditor/DocumentEditor.d.ts

@@ -10,7 +10,7 @@ interface DocumentEditorProps<TDocument> {
     readOnly: boolean;
 }
 declare function BaseDocumentEditor<TDocument extends EditorDocument>({ document, name, children, readOnly }: DocumentEditorProps<TDocument>): React.JSX.Element;
-export declare const DocumentEditor: typeof BaseDocumentEditor & React.NamedExoticComponent<DocumentEditorProps<import("@webiny/website-builder-sdk").Document>> & {
-    readonly type: typeof BaseDocumentEditor;
+export declare const DocumentEditor: typeof BaseDocumentEditor & {
+    displayName: string;
 };
 export {};

package/DocumentEditor/StateInspector.d.ts

@@ -4,9 +4,7 @@ import type { Editor } from "../editorSdk/Editor.js";
 declare function BaseStateInspector<TDocument extends EditorDocument>({ editor }: {
     editor: Editor<TDocument>;
 }): React.JSX.Element;
-export declare const StateInspector: typeof BaseStateInspector & React.NamedExoticComponent<{
-    editor: Editor<import("@webiny/website-builder-sdk").Document>;
-}> & {
-    readonly type: typeof BaseStateInspector;
+export declare const StateInspector: typeof BaseStateInspector & {
+    displayName: string;
 };
 export {};

package/Extension.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const Extension: {
-    (): React.JSX.Element;
-    displayName: string;
-};
+export declare function Extension(): React.JSX.Element;
+export declare namespace Extension {
+    var displayName: string;
+}

package/Extension.js

@@ -1,19 +1,14 @@
-import react, { useEffect } from "react";
-import { AdminConfig, RegisterFeature, useContainer, useRouter } from "@webiny/app-admin";
+import react from "react";
+import { AdminConfig, RegisterFeature, useRouter } from "@webiny/app-admin";
 import { ReactComponent } from "@webiny/icons/table_chart.svg";
-import { PageEditor } from "./modules/pages/PageEditor.js";
-import { PageList } from "./modules/pages/PageList.js";
-import { useSettingsDialog } from "./modules/settings/useSettingsDialog.js";
+import { PageEditor } from "./presentation/pages/PageEditor/PageEditor.js";
+import { PagesList } from "./presentation/pages/PageList/components/PagesList.js";
 import { useIntegrationsDialog } from "./modules/integrations/useIntegrationsDialog.js";
-import { PagesListConfig } from "./modules/pages/PagesListConfig.js";
-import { RedirectsList } from "./modules/redirects/RedirectsList.js";
-import { RedirectsListConfig } from "./modules/redirects/RedirectsListConfig.js";
+import { PagesListConfig } from "./presentation/pages/PageList/components/PagesListConfig.js";
+import { RedirectsList } from "./presentation/redirects/RedirectList/components/RedirectsList.js";
+import { RedirectsListConfig } from "./presentation/redirects/RedirectList/components/RedirectsListConfig.js";
 import { Routes } from "./routes.js";
 import { PagesWidget } from "./modules/widgets/PagesWidget.js";
-import { PageListFeature } from "./presentation/pages/PageList/feature.js";
-import { RevisionListFeature } from "./presentation/pages/RevisionList/feature.js";
-import { Extension } from "./presentation/navigation/Extension.js";
-import { NextjsConfigFeature } from "./presentation/navigation/NextjsConfig/feature.js";
 import { WB_PERMISSIONS_SCHEMA } from "./constants.js";
 import { WbPermissionsFeature } from "./features/permissions/feature.js";
 import { HasPermission } from "./presentation/security/HasPermission.js";
@@ -29,26 +24,20 @@ import { UpdatePageRevisionDescriptionFeature } from "./features/pages/updatePag
 import { CreatePageFeature } from "./features/pages/createPage/index.js";
 import { GetPageFeature } from "./features/pages/getPage/index.js";
 import { GetPageRevisionsFeature } from "./features/pages/getPageRevisions/index.js";
-import { SelectPagesFeature } from "./features/pages/selectPages/index.js";
 import { SharedPageInfrastructureFeature } from "./features/pages/shared/feature.js";
-import { LoadPagesFeature } from "./features/pages/loadPages/index.js";
 import { CreatePageConfig } from "./presentation/pages/CreatePage/CreatePageConfig.js";
 import { TranslatePageConfig } from "./presentation/pages/TranslatePage/TranslatePageConfig.js";
 import { CreatePageFeature as feature_js_CreatePageFeature } from "./presentation/pages/CreatePage/feature.js";
-import { PageSettingsFeature } from "./modules/pages/PageEditor/PageSettings/feature.js";
+import { PageSettingsFeature } from "./presentation/pages/PageEditor/PageSettings/feature.js";
 import { DeletePageRevisionFeature } from "./features/pages/deletePageRevision/index.js";
+import { GetSettingsFeature } from "./features/settings/getSettings/index.js";
+import { GetEcommerceSettingsFeature } from "./features/ecommerce/settings/getSettings/index.js";
+import { UpdateEcommerceSettingsFeature } from "./features/ecommerce/settings/updateSettings/index.js";
 const { Security: Security, Menu: Menu, Route: Route, Dashboard: Dashboard } = AdminConfig;
-const Extension_Extension = ()=>{
+const Extension = ()=>{
     const router = useRouter();
-    const container = useContainer();
-    useEffect(()=>{
-        PageListFeature.register(container);
-        RevisionListFeature.register(container);
-    }, []);
     return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(RegisterFeature, {
         feature: SharedPageInfrastructureFeature
-    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
-        feature: NextjsConfigFeature
     }), /*#__PURE__*/ react.createElement(RegisterFeature, {
         feature: WbPermissionsFeature
     }), /*#__PURE__*/ react.createElement(RegisterFeature, {
@@ -77,14 +66,16 @@ const Extension_Extension = ()=>{
         feature: GetPageFeature
     }), /*#__PURE__*/ react.createElement(RegisterFeature, {
         feature: GetPageRevisionsFeature
-    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
-        feature: SelectPagesFeature
-    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
-        feature: LoadPagesFeature
     }), /*#__PURE__*/ react.createElement(RegisterFeature, {
         feature: feature_js_CreatePageFeature
     }), /*#__PURE__*/ react.createElement(RegisterFeature, {
         feature: PageSettingsFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: GetSettingsFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: GetEcommerceSettingsFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: UpdateEcommerceSettingsFeature
     }), /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Security.Permissions, {
         name: "website-builder",
         title: "Website Builder",
@@ -109,7 +100,7 @@ const Extension_Extension = ()=>{
         entity: "page"
     }, /*#__PURE__*/ react.createElement(Route, {
         route: Routes.Pages.List,
-        element: /*#__PURE__*/ react.createElement(PageList, null)
+        element: /*#__PURE__*/ react.createElement(PagesList, null)
     }), /*#__PURE__*/ react.createElement(Route, {
         route: Routes.Pages.Editor,
         element: /*#__PURE__*/ react.createElement(PageEditor, null)
@@ -125,7 +116,7 @@ const Extension_Extension = ()=>{
         name: "wb.pages",
         column: "left",
         element: /*#__PURE__*/ react.createElement(PagesWidget, null)
-    }), /*#__PURE__*/ react.createElement(Extension, null)), /*#__PURE__*/ react.createElement(HasPermission, {
+    })), /*#__PURE__*/ react.createElement(HasPermission, {
         entity: "redirect"
     }, /*#__PURE__*/ react.createElement(Route, {
         route: Routes.Redirects.List,
@@ -138,12 +129,6 @@ const Extension_Extension = ()=>{
             to: router.getLink(Routes.Redirects.List),
             pinnable: true
         })
-    })), /*#__PURE__*/ react.createElement(HasPermission, {
-        entity: "settings"
-    }, /*#__PURE__*/ react.createElement(Menu, {
-        name: "wb.settings",
-        parent: "wb",
-        element: /*#__PURE__*/ react.createElement(SettingsMenuItem, null)
     })), /*#__PURE__*/ react.createElement(HasPermission, {
         entity: "integrations"
     }, /*#__PURE__*/ react.createElement(Menu, {
@@ -152,15 +137,7 @@ const Extension_Extension = ()=>{
         element: /*#__PURE__*/ react.createElement(IntegrationsMenuItem, null)
     }))), /*#__PURE__*/ react.createElement(PagesListConfig, null), /*#__PURE__*/ react.createElement(RedirectsListConfig, null), /*#__PURE__*/ react.createElement(CreatePageConfig, null), /*#__PURE__*/ react.createElement(TranslatePageConfig, null));
 };
-Extension_Extension.displayName = "WbExtension";
-const SettingsMenuItem = ()=>{
-    const { showSettingsDialog } = useSettingsDialog();
-    return /*#__PURE__*/ react.createElement(Menu.Item, {
-        text: "Settings",
-        onClick: showSettingsDialog,
-        pinnable: true
-    });
-};
+Extension.displayName = "WbExtension";
 const IntegrationsMenuItem = ()=>{
     const { showIntegrationsDialog } = useIntegrationsDialog();
     return /*#__PURE__*/ react.createElement(Menu.Item, {
@@ -169,6 +146,6 @@ const IntegrationsMenuItem = ()=>{
         pinnable: true
     });
 };
-export { Extension_Extension as Extension };
+export { Extension };
 
 //# sourceMappingURL=Extension.js.map