@webiny/app-website-builder 0.0.0-unstable.2aaa1916d9

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useBindingsForElement.js

@@ -0,0 +1,28 @@
+import { toJS } from "mobx";
+import { BindingsProcessor } from "@webiny/website-builder-sdk";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { useElementInputsAst } from "../../../hooks/useElementInputsAst";
+import { InheritanceProcessor } from "@webiny/website-builder-sdk";
+export const useBindingsForElement = elementId => {
+  const {
+    breakpoint,
+    breakpoints
+  } = useBreakpoint();
+  const inputsAst = useElementInputsAst(elementId);
+  return useSelectFromDocument(document => {
+    const bindings = toJS(document.bindings[elementId]) ?? {};
+
+    // Merge element bindings.
+    const breakpointNames = breakpoints.map(bp => bp.name);
+    const bindingsProcessor = new BindingsProcessor(breakpointNames);
+    const inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);
+    return {
+      rawBindings: bindings,
+      resolvedBindings: bindingsProcessor.getBindings(bindings, breakpoint.name),
+      inheritanceMap: inheritanceProcessor.getInheritanceMap(bindings, breakpoint.name)
+    };
+  }, [elementId, breakpoint.name, breakpoints.length]);
+};
+
+//# sourceMappingURL=useBindingsForElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["toJS","BindingsProcessor","useBreakpoint","useSelectFromDocument","useElementInputsAst","InheritanceProcessor","useBindingsForElement","elementId","breakpoint","breakpoints","inputsAst","document","bindings","breakpointNames","map","bp","name","bindingsProcessor","inheritanceProcessor","rawBindings","resolvedBindings","getBindings","inheritanceMap","getInheritanceMap","length"],"sources":["useBindingsForElement.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst\";\nimport { InheritanceProcessor } from \"@webiny/website-builder-sdk\";\n\nexport const useBindingsForElement = (elementId: string) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const inputsAst = useElementInputsAst(elementId);\n\n    return useSelectFromDocument(\n        document => {\n            const bindings = toJS(document.bindings[elementId]) ?? {};\n\n            // Merge element bindings.\n            const breakpointNames = breakpoints.map(bp => bp.name);\n            const bindingsProcessor = new BindingsProcessor(breakpointNames);\n            const inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n            return {\n                rawBindings: bindings,\n                resolvedBindings: bindingsProcessor.getBindings(bindings, breakpoint.name),\n                inheritanceMap: inheritanceProcessor.getInheritanceMap(bindings, breakpoint.name)\n            };\n        },\n        [elementId, breakpoint.name, breakpoints.length]\n    );\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAC3B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,aAAa;AACtB,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAC5B,SAASC,oBAAoB,QAAQ,6BAA6B;AAElE,OAAO,MAAMC,qBAAqB,GAAIC,SAAiB,IAAK;EACxD,MAAM;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EACnD,MAAMQ,SAAS,GAAGN,mBAAmB,CAACG,SAAS,CAAC;EAEhD,OAAOJ,qBAAqB,CACxBQ,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGZ,IAAI,CAACW,QAAQ,CAACC,QAAQ,CAACL,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;;IAEzD;IACA,MAAMM,eAAe,GAAGJ,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;IACtD,MAAMC,iBAAiB,GAAG,IAAIhB,iBAAiB,CAACY,eAAe,CAAC;IAChE,MAAMK,oBAAoB,GAAG,IAAIb,oBAAoB,CAACQ,eAAe,EAAEH,SAAS,CAAC;IAEjF,OAAO;MACHS,WAAW,EAAEP,QAAQ;MACrBQ,gBAAgB,EAAEH,iBAAiB,CAACI,WAAW,CAACT,QAAQ,EAAEJ,UAAU,CAACQ,IAAI,CAAC;MAC1EM,cAAc,EAAEJ,oBAAoB,CAACK,iBAAiB,CAACX,QAAQ,EAAEJ,UAAU,CAACQ,IAAI;IACpF,CAAC;EACL,CAAC,EACD,CAACT,SAAS,EAAEC,UAAU,CAACQ,IAAI,EAAEP,WAAW,CAACe,MAAM,CACnD,CAAC;AACL,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useElementFactory.d.ts

@@ -0,0 +1,2 @@
+import { ElementFactory } from "@webiny/website-builder-sdk";
+export declare const useElementFactory: () => ElementFactory;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useElementFactory.js

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
+import { ElementFactory } from "@webiny/website-builder-sdk";
+export const useElementFactory = () => {
+  const components = useSelectFromEditor(state => {
+    return state.components;
+  });
+  return useMemo(() => new ElementFactory(components), [components]);
+};
+
+//# sourceMappingURL=useElementFactory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useSelectFromEditor","ElementFactory","useElementFactory","components","state"],"sources":["useElementFactory.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { ElementFactory } from \"@webiny/website-builder-sdk\";\n\nexport const useElementFactory = () => {\n    const components = useSelectFromEditor(state => {\n        return state.components;\n    });\n\n    return useMemo(() => new ElementFactory(components), [components]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,mBAAmB;AAC5B,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,UAAU,GAAGH,mBAAmB,CAACI,KAAK,IAAI;IAC5C,OAAOA,KAAK,CAACD,UAAU;EAC3B,CAAC,CAAC;EAEF,OAAOJ,OAAO,CAAC,MAAM,IAAIE,cAAc,CAACE,UAAU,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;AACtE,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputRenderer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ElementInputRendererProps } from "../../../config/ElementInput";
+export declare const useInputRenderer: (name: string) => React.ComponentType<ElementInputRendererProps>;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputRenderer.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { useEditorConfig } from "../../../config/EditorConfig";
+const NullRenderer = ({
+  name
+}) => {
+  return /*#__PURE__*/React.createElement("div", null, "Missing renderer \"", name, "\".");
+};
+export const useInputRenderer = name => {
+  const config = useEditorConfig();
+  const renderer = config.inputRenderers.find(renderer => renderer.name === name);
+  return renderer ? renderer.component : () => /*#__PURE__*/React.createElement(NullRenderer, {
+    name: name
+  });
+};
+
+//# sourceMappingURL=useInputRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEditorConfig","NullRenderer","name","createElement","useInputRenderer","config","renderer","inputRenderers","find","component"],"sources":["useInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useEditorConfig } from \"~/BaseEditor/config/EditorConfig\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/config/ElementInput\";\n\nconst NullRenderer = ({ name }: { name: string }) => {\n    return <div>Missing renderer &quot;{name}&quot;.</div>;\n};\n\nexport const useInputRenderer = (name: string): React.ComponentType<ElementInputRendererProps> => {\n    const config = useEditorConfig();\n\n    const renderer = config.inputRenderers.find(renderer => renderer.name === name);\n\n    return renderer ? renderer.component : () => <NullRenderer name={name} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAGxB,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EACjD,oBAAOH,KAAA,CAAAI,aAAA,cAAK,qBAAuB,EAACD,IAAI,EAAC,KAAY,CAAC;AAC1D,CAAC;AAED,OAAO,MAAME,gBAAgB,GAAIF,IAAY,IAAqD;EAC9F,MAAMG,MAAM,GAAGL,eAAe,CAAC,CAAC;EAEhC,MAAMM,QAAQ,GAAGD,MAAM,CAACE,cAAc,CAACC,IAAI,CAACF,QAAQ,IAAIA,QAAQ,CAACJ,IAAI,KAAKA,IAAI,CAAC;EAE/E,OAAOI,QAAQ,GAAGA,QAAQ,CAACG,SAAS,GAAG,mBAAMV,KAAA,CAAAI,aAAA,CAACF,YAAY;IAACC,IAAI,EAAEA;EAAK,CAAE,CAAC;AAC7E,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.d.ts

@@ -0,0 +1,27 @@
+import type { ValueBinding } from "@webiny/website-builder-sdk";
+import type { InputAstNode } from "@webiny/website-builder-sdk";
+import { type IMetadata } from "../../../metadata";
+export type OnChangeParams = {
+    value: InputValueObject;
+    metadata: IMetadata;
+};
+export type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;
+export declare class InputValueObject {
+    private value;
+    constructor(value: any);
+    set(value: any): void;
+    get(): any;
+    unset(): void;
+}
+export declare const useInputValue: (elementId: string, node: InputAstNode) => {
+    value: ValueBinding;
+    metadata: IMetadata;
+    inheritanceMap: {
+        overridden: boolean;
+        inheritedFrom?: string | undefined;
+    };
+    onReset: () => void;
+    onChange: (cb: (params: OnChangeParams) => void) => void;
+    onPreviewChange: (cb: (params: OnChangeParams) => void) => void;
+    setBindingType: (type: "static" | "expression") => void;
+};

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

@@ -0,0 +1,187 @@
+import { useCallback, useMemo, useState } from "react";
+import set from "lodash/set";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils/generateId";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+import { Commands } from "../../..";
+import { functionConverter } from "@webiny/website-builder-sdk";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+import { useBindingsForElement } from "./useBindingsForElement";
+import { useElementInputsAst } from "../../../hooks/useElementInputsAst";
+import { InputsBindingsProcessor } from "@webiny/website-builder-sdk";
+import { StylesBindingsProcessor } from "@webiny/website-builder-sdk";
+import { createElement } from "@webiny/website-builder-sdk";
+import { BreakpointElementMetadata, ElementMetadata, InputMetadata } from "../../../metadata";
+import { useElementFactory } from "./useElementFactory";
+export class InputValueObject {
+  constructor(value) {
+    this.value = value;
+  }
+  set(value) {
+    this.value = value;
+  }
+  get() {
+    return this.value;
+  }
+  unset() {
+    this.value = undefined;
+  }
+}
+function convertBracketPathToDotPath(path) {
+  return path.replace(/\/(\d+)\//g, ".$1");
+}
+
+/**
+ * This makes UI interaction smoother (input blur in particular).
+ */
+const withTimeout = cb => {
+  return (...args) => {
+    setTimeout(() => {
+      cb(...args);
+    }, 0);
+  };
+};
+export const useInputValue = (elementId, node) => {
+  const {
+    breakpoint,
+    breakpoints
+  } = useBreakpoint();
+  const editor = useDocumentEditor();
+  const inputsAst = useElementInputsAst(elementId);
+  const elementFactory = useElementFactory();
+  const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);
+
+  // These bindings already include per-breakpoint overrides.
+  const {
+    rawBindings,
+    resolvedBindings,
+    inheritanceMap
+  } = useBindingsForElement(elementId);
+  const stylesProcessor = useMemo(() => {
+    return new StylesBindingsProcessor(elementId ?? "", breakpointNames, rawBindings);
+  }, [elementId, rawBindings]);
+  const inputsProcessor = useMemo(() => {
+    return new InputsBindingsProcessor(elementId ?? "", inputsAst, breakpointNames, rawBindings, elementFactory);
+  }, [elementId, rawBindings]);
+
+  // This value is the final calculated breakpoint value.
+  const value = resolvedBindings.inputs[node.path];
+  const inputMetadata = useMemo(() => {
+    let elementMetadata = new ElementMetadata(elementId, rawBindings.metadata);
+    if (node.input.responsive) {
+      elementMetadata = new BreakpointElementMetadata(breakpointNames, breakpoint.name, elementMetadata);
+    }
+    const valueId = value?.id ?? generateAlphaNumericLowerCaseId();
+    return new InputMetadata(valueId, elementMetadata);
+  }, [elementId, breakpoint.name, rawBindings]);
+  const [localState, setLocalValue] = useState();
+  const onChange = useCallback(withTimeout(cb => {
+    const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+    const valueObject = new InputValueObject(value);
+    const updaterInput = {
+      value: valueObject,
+      metadata: inputMetadata
+    };
+
+    // Change the input value (and metadata).
+    cb(updaterInput);
+    const valuePath = convertBracketPathToDotPath(node.path);
+    const devFriendlyInputs = set(structuredClone(deepInputs), valuePath, valueObject.get());
+    const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});
+
+    // Process input's `onChange`.
+    if (node.input.onChange) {
+      const callback = functionConverter.deserialize(
+      // TODO: we know it's a string, but on the frontend it's a function. Fix types.
+      node.input.onChange);
+
+      // Run onChange callback.
+      const publicApi = {
+        inputs: devFriendlyInputs,
+        styles: devFriendlyStyles,
+        createElement: params => {
+          return createElement(params);
+        }
+      };
+
+      // Run input's `onChange` callback.
+      callback(publicApi, {
+        breakpoint: breakpoint.name
+      });
+    }
+    editor.updateDocument(document => {
+      const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);
+      const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);
+      inputs.applyToDocument(document);
+      styles.applyToDocument(document);
+      inputMetadata.applyToDocument(document);
+    });
+
+    // Clear local value
+    setLocalValue(undefined);
+  }), [elementId, resolvedBindings, breakpoint]);
+
+  /**
+   * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.
+   */
+  const onPreviewChange = useCallback(cb => {
+    const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+    const valueObject = new InputValueObject(localState ?? value);
+    const updaterInput = {
+      value: valueObject,
+      metadata: inputMetadata
+    };
+
+    // Change the input value (and metadata).
+    cb(updaterInput);
+    const valuePath = convertBracketPathToDotPath(node.path);
+    const devFriendlyInputs = set(structuredClone(deepInputs), valuePath, valueObject.get());
+    setLocalValue({
+      static: valueObject.get()
+    });
+    const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);
+    const patch = updatedInputs.createJsonPatch(rawBindings);
+    editor.executeCommand(Commands.PreviewPatchElement, {
+      elementId,
+      patch
+    });
+  }, [elementId, rawBindings, localState]);
+  const setBindingType = useCallback(type => {
+    editor.updateDocument(state => {
+      const bindings = state.bindings[elementId];
+      const valueBinding = bindings.inputs[node.path];
+      if (type === "static") {
+        // Switching to static bindings means we have to remove the expression binding.
+        delete valueBinding.expression;
+      } else {
+        valueBinding.expression = "$noop";
+      }
+      state.bindings[elementId] = {
+        ...bindings,
+        inputs: {
+          ...bindings.inputs,
+          [node.path]: valueBinding
+        }
+      };
+    });
+  }, [elementId]);
+  const onReset = useCallback(() => {
+    onChange(({
+      value,
+      metadata
+    }) => {
+      value.unset();
+      metadata.unset();
+    });
+  }, [onChange]);
+  return {
+    value: localState ?? value,
+    metadata: inputMetadata,
+    inheritanceMap: inheritanceMap.inputs[node.path],
+    onReset,
+    onChange,
+    onPreviewChange,
+    setBindingType
+  };
+};
+
+//# sourceMappingURL=useInputValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useMemo","useState","set","generateAlphaNumericLowerCaseId","useDocumentEditor","Commands","functionConverter","useBreakpoint","useBindingsForElement","useElementInputsAst","InputsBindingsProcessor","StylesBindingsProcessor","createElement","BreakpointElementMetadata","ElementMetadata","InputMetadata","useElementFactory","InputValueObject","constructor","value","get","unset","undefined","convertBracketPathToDotPath","path","replace","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","editor","inputsAst","elementFactory","breakpointNames","map","bp","name","rawBindings","resolvedBindings","inheritanceMap","stylesProcessor","inputsProcessor","inputs","inputMetadata","elementMetadata","metadata","input","responsive","valueId","id","localState","setLocalValue","onChange","deepInputs","toDeepInputs","valueObject","updaterInput","valuePath","devFriendlyInputs","structuredClone","devFriendlyStyles","toDeepStyles","styles","callback","deserialize","publicApi","params","updateDocument","document","createUpdate","applyToDocument","onPreviewChange","static","updatedInputs","patch","createJsonPatch","executeCommand","PreviewPatchElement","setBindingType","type","state","bindings","valueBinding","expression","onReset"],"sources":["useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport { functionConverter } from \"@webiny/website-builder-sdk\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { useBindingsForElement } from \"./useBindingsForElement\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst\";\nimport { InputsBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { createElement } from \"@webiny/website-builder-sdk\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata\";\nimport { useElementFactory } from \"./useElementFactory\";\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            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\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"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.d.ts

@@ -0,0 +1,4 @@
+export declare const useRepeatValue: (elementId: string) => {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+};

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.js

@@ -0,0 +1,28 @@
+import set from "lodash/set";
+import { useCallback } from "react";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+export const useRepeatValue = elementId => {
+  const editor = useDocumentEditor();
+  const value = useSelectFromDocument(document => {
+    const bindings = document.bindings[elementId] || {};
+    return bindings.$repeat?.expression;
+  }, [elementId]);
+  const onChange = useCallback(value => {
+    editor.updateDocument(document => {
+      const bindings = document.bindings[elementId] ?? {};
+      if (!value) {
+        delete bindings.$repeat;
+      } else {
+        set(bindings, "$repeat.expression", value);
+      }
+      document.bindings[elementId] = bindings;
+    });
+  }, [elementId]);
+  return {
+    value,
+    onChange
+  };
+};
+
+//# sourceMappingURL=useRepeatValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["set","useCallback","useSelectFromDocument","useDocumentEditor","useRepeatValue","elementId","editor","value","document","bindings","$repeat","expression","onChange","updateDocument"],"sources":["useRepeatValue.ts"],"sourcesContent":["import set from \"lodash/set\";\nimport { useCallback } from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\n\nexport const useRepeatValue = (elementId: string) => {\n    const editor = useDocumentEditor();\n\n    const value = useSelectFromDocument(\n        document => {\n            const bindings = document.bindings[elementId] || {};\n\n            return bindings.$repeat?.expression;\n        },\n        [elementId]\n    );\n\n    const onChange = useCallback(\n        (value: string | undefined) => {\n            editor.updateDocument(document => {\n                const bindings = document.bindings[elementId] ?? {};\n                if (!value) {\n                    delete bindings.$repeat;\n                } else {\n                    set(bindings, \"$repeat.expression\", value);\n                }\n\n                document.bindings[elementId] = bindings;\n            });\n        },\n        [elementId]\n    );\n\n    return { value, onChange };\n};\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,YAAY;AAC5B,SAASC,WAAW,QAAQ,OAAO;AACnC,SAASC,qBAAqB;AAC9B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,cAAc,GAAIC,SAAiB,IAAK;EACjD,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAElC,MAAMI,KAAK,GAAGL,qBAAqB,CAC/BM,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGD,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,IAAI,CAAC,CAAC;IAEnD,OAAOI,QAAQ,CAACC,OAAO,EAAEC,UAAU;EACvC,CAAC,EACD,CAACN,SAAS,CACd,CAAC;EAED,MAAMO,QAAQ,GAAGX,WAAW,CACvBM,KAAyB,IAAK;IAC3BD,MAAM,CAACO,cAAc,CAACL,QAAQ,IAAI;MAC9B,MAAMC,QAAQ,GAAGD,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,IAAI,CAAC,CAAC;MACnD,IAAI,CAACE,KAAK,EAAE;QACR,OAAOE,QAAQ,CAACC,OAAO;MAC3B,CAAC,MAAM;QACHV,GAAG,CAACS,QAAQ,EAAE,oBAAoB,EAAEF,KAAK,CAAC;MAC9C;MAEAC,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,GAAGI,QAAQ;IAC3C,CAAC,CAAC;EACN,CAAC,EACD,CAACJ,SAAS,CACd,CAAC;EAED,OAAO;IAAEE,KAAK;IAAEK;EAAS,CAAC;AAC9B,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.d.ts

@@ -0,0 +1 @@
+export declare const useStateArrays: () => import("./StatePathsCollection").PathOption[];

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.js

@@ -0,0 +1,9 @@
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { StatePathsExtractor } from "./StatePathsExtractor";
+export const useStateArrays = () => {
+  return useSelectFromDocument(document => {
+    return new StatePathsExtractor(document.state).getPaths().filter(option => option.type.isArray()).values();
+  });
+};
+
+//# sourceMappingURL=useStateArrays.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useSelectFromDocument","StatePathsExtractor","useStateArrays","document","state","getPaths","filter","option","type","isArray","values"],"sources":["useStateArrays.ts"],"sourcesContent":["import { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { StatePathsExtractor } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsExtractor\";\n\nexport const useStateArrays = () => {\n    return useSelectFromDocument(document => {\n        return new StatePathsExtractor(document.state)\n            .getPaths()\n            .filter(option => option.type.isArray())\n            .values();\n    });\n};\n"],"mappings":"AAAA,SAASA,qBAAqB;AAC9B,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,OAAOF,qBAAqB,CAACG,QAAQ,IAAI;IACrC,OAAO,IAAIF,mBAAmB,CAACE,QAAQ,CAACC,KAAK,CAAC,CACzCC,QAAQ,CAAC,CAAC,CACVC,MAAM,CAACC,MAAM,IAAIA,MAAM,CAACC,IAAI,CAACC,OAAO,CAAC,CAAC,CAAC,CACvCC,MAAM,CAAC,CAAC;EACjB,CAAC,CAAC;AACN,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import React from "react";
+export interface InfoMessageProps {
+    message: string;
+    icon?: ReactElement;
+}
+export declare const InfoMessage: ({ message, icon }: InfoMessageProps) => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Text, Icon } from "@webiny/admin-ui";
+export const InfoMessage = ({
+  message,
+  icon
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dimmed wby-p-md wby-flex wby-flex-col wby-items-center"
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    label: "Select an element",
+    size: "lg",
+    icon: icon,
+    color: "neutral-light"
+  }), /*#__PURE__*/React.createElement(Text, {
+    size: "md",
+    className: "wby-text-center wby-text-neutral-dimmed wby-my-sm"
+  }, message));
+};
+
+//# sourceMappingURL=InfoMessage.js.map

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","Icon","InfoMessage","message","icon","createElement","className","label","size","color"],"sources":["InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"wby-bg-neutral-dimmed wby-p-md wby-flex wby-flex-col wby-items-center\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"wby-text-center wby-text-neutral-dimmed wby-my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAO7C,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAuB,CAAC,KAAK;EAChE,oBACIL,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAwE,GACnFF,IAAI,iBACDL,KAAA,CAAAM,aAAA,CAACJ,IAAI;IAACM,KAAK,EAAC,mBAAmB;IAACC,IAAI,EAAE,IAAK;IAACJ,IAAI,EAAEA,IAAK;IAACK,KAAK,EAAE;EAAgB,CAAE,CACpF,eACDV,KAAA,CAAAM,aAAA,CAACL,IAAI;IAACQ,IAAI,EAAE,IAAK;IAACF,SAAS,EAAE;EAAoD,GAC5EH,OACC,CACL,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface InheritanceLabelProps {
+    text: React.ReactNode;
+    isOverridden: boolean;
+    onReset: () => void;
+    inheritedFrom?: string;
+}
+export declare const InheritanceLabel: ({ inheritedFrom, isOverridden, text, onReset }: InheritanceLabelProps) => React.JSX.Element;
+interface InheritedFromProps {
+    overriddenAt: string | null;
+    inheritedFrom?: string;
+    onReset: () => void;
+}
+export declare const InheritedFrom: ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js

@@ -0,0 +1,89 @@
+import React, { useMemo } from "react";
+import { Text, Tag, Icon, Button, Separator, DropdownMenu, FormComponentLabel } from "@webiny/admin-ui";
+import { useBreakpoint } from "../../hooks/useBreakpoint";
+import { InlineSvg } from "../Toolbar/InsertElements/InlineSvg";
+const getBreakpointIcon = (breakpoints, name) => {
+  const bp = breakpoints.find(breakpoint => breakpoint.name === name);
+  return bp ? /*#__PURE__*/React.createElement(InlineSvg, {
+    src: bp.icon
+  }) : null;
+};
+const iconClassName = "wby-cursor-pointer wby-mr-xs wby-mb-[2px]";
+export const InheritanceLabel = ({
+  inheritedFrom,
+  isOverridden,
+  text,
+  onReset
+}) => {
+  const {
+    breakpoint,
+    breakpoints,
+    isBaseBreakpoint
+  } = useBreakpoint();
+  const baseBreakpoint = breakpoints[0];
+  const icon = useMemo(() => {
+    const bp = inheritedFrom ?? baseBreakpoint.name;
+    return getBreakpointIcon(breakpoints, bp);
+  }, [inheritedFrom, breakpoint.name, breakpoints.length]);
+  if (isBaseBreakpoint) {
+    return /*#__PURE__*/React.createElement(FormComponentLabel, {
+      text: text
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-center"
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: /*#__PURE__*/React.createElement(Icon, {
+      icon: icon,
+      label: "",
+      size: "sm",
+      color: isOverridden ? "accent" : "neutral-strong",
+      className: iconClassName
+    }),
+    align: "center",
+    side: "bottom",
+    className: "wy-p-sm wby-shadow-lg"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-p-sm wby-text-sm",
+    style: {
+      width: 200
+    }
+  }, /*#__PURE__*/React.createElement(InheritedFrom, {
+    inheritedFrom: inheritedFrom ?? baseBreakpoint.name,
+    overriddenAt: isOverridden ? breakpoint.name : null,
+    onReset: onReset
+  }))), /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: text
+  }));
+};
+export const InheritedFrom = ({
+  overriddenAt,
+  inheritedFrom,
+  onReset
+}) => {
+  if (overriddenAt) {
+    return /*#__PURE__*/React.createElement("div", null, "This value is set on the current breakpoint.", /*#__PURE__*/React.createElement(Separator, {
+      variant: "dimmed",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      onClick: onReset,
+      text: "Reset value",
+      size: "sm"
+    }), /*#__PURE__*/React.createElement(Separator, {
+      variant: "dimmed",
+      margin: "lg"
+    }), "Resetting will inherit the value from the", " ", /*#__PURE__*/React.createElement(Tag, {
+      variant: "neutral-muted",
+      content: inheritedFrom
+    }), " breakpoint.");
+  }
+  return /*#__PURE__*/React.createElement(Text, {
+    size: "sm"
+  }, "This value is inherited from the", " ", /*#__PURE__*/React.createElement(Tag, {
+    variant: "neutral-muted",
+    content: inheritedFrom
+  }), " breakpoint.");
+};
+
+//# sourceMappingURL=InheritanceLabel.js.map

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Text","Tag","Icon","Button","Separator","DropdownMenu","FormComponentLabel","useBreakpoint","InlineSvg","getBreakpointIcon","breakpoints","name","bp","find","breakpoint","createElement","src","icon","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","baseBreakpoint","length","className","trigger","label","size","color","align","side","style","width","InheritedFrom","overriddenAt","variant","margin","onClick","content"],"sources":["InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: Breakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? <InlineSvg src={bp.icon} /> : null;\n};\n\nconst iconClassName = \"wby-cursor-pointer wby-mr-xs wby-mb-[2px]\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name, breakpoints.length]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel text={text} />;\n    }\n\n    return (\n        <div className={\"wby-flex wby-items-center\"}>\n            <DropdownMenu\n                trigger={\n                    <Icon\n                        icon={icon}\n                        label=\"\"\n                        size=\"sm\"\n                        color={isOverridden ? \"accent\" : \"neutral-strong\"}\n                        className={iconClassName}\n                    />\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm wby-shadow-lg\"}\n            >\n                <div className={\"wby-p-sm wby-text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { ColorPicker } from "@webiny/admin-ui";
+import { useStyles } from "../../useStyles";
+import { InheritanceLabel } from "../../../InheritanceLabel";
+export const BackgroundColor = observer(({
+  elementId
+}) => {
+  const {
+    styles,
+    onChange,
+    onPreviewChange,
+    inheritanceMap
+  } = useStyles(elementId);
+  const [value, setValue] = useState(styles.backgroundColor ?? "transparent");
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (styles.backgroundColor !== value) {
+      setValue(styles.backgroundColor ?? "transparent");
+    }
+  }, [styles.backgroundColor]);
+  const handleChange = value => {
+    setValue(value);
+    onPreviewChange(({
+      styles
+    }) => {
+      styles.set("backgroundColor", value);
+    });
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      onChange(({
+        styles
+      }) => {
+        styles.set("backgroundColor", value);
+      });
+    }, 300); // wait 300ms after last input event
+  };
+  const onReset = () => {
+    onChange(({
+      styles
+    }) => {
+      styles.unset("backgroundColor");
+    });
+  };
+  const inheritance = inheritanceMap?.backgroundColor ?? {};
+  return /*#__PURE__*/React.createElement(ColorPicker, {
+    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
+      onReset: onReset,
+      isOverridden: inheritance?.overridden ?? false,
+      inheritedFrom: inheritance?.inheritedFrom,
+      text: "Color"
+    }),
+    description: "Select your background color",
+    value: value,
+    onChange: handleChange
+  });
+});
+
+//# sourceMappingURL=BackgroundColor.js.map