@webiny/app-website-builder 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","observer","ColorPicker","useStyles","InheritanceLabel","BackgroundColor","elementId","styles","onChange","onPreviewChange","inheritanceMap","value","setValue","backgroundColor","timeoutRef","handleChange","set","current","clearTimeout","setTimeout","onReset","unset","inheritance","createElement","label","isOverridden","overridden","inheritedFrom","text","description"],"sources":["BackgroundColor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel\";\n\nexport const BackgroundColor = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n    const [value, setValue] = useState(styles.backgroundColor ?? \"transparent\");\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        if (styles.backgroundColor !== value) {\n            setValue(styles.backgroundColor ?? \"transparent\");\n        }\n    }, [styles.backgroundColor]);\n\n    const handleChange = (value: string) => {\n        setValue(value);\n        onPreviewChange(({ styles }) => {\n            styles.set(\"backgroundColor\", value);\n        });\n\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        timeoutRef.current = setTimeout(() => {\n            onChange(({ styles }) => {\n                styles.set(\"backgroundColor\", value);\n            });\n        }, 300); // wait 300ms after last input event\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundColor ?? {};\n\n    return (\n        <ColorPicker\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Color\"}\n                />\n            }\n            description=\"Select your background color\"\n            value={value}\n            onChange={handleChange}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAQ,kBAAkB;AAE9C,SAASC,SAAS;AAClB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,eAAe,GAAGJ,QAAQ,CAAC,CAAC;EAAEK;AAAiC,CAAC,KAAK;EAC9E,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC;EAAe,CAAC,GAAGP,SAAS,CAACG,SAAS,CAAC;EAClF,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAGZ,QAAQ,CAACO,MAAM,CAACM,eAAe,IAAI,aAAa,CAAC;EAC3E,MAAMC,UAAU,GAAGf,MAAM,CAAuC,IAAI,CAAC;EAErED,SAAS,CAAC,MAAM;IACZ,IAAIS,MAAM,CAACM,eAAe,KAAKF,KAAK,EAAE;MAClCC,QAAQ,CAACL,MAAM,CAACM,eAAe,IAAI,aAAa,CAAC;IACrD;EACJ,CAAC,EAAE,CAACN,MAAM,CAACM,eAAe,CAAC,CAAC;EAE5B,MAAME,YAAY,GAAIJ,KAAa,IAAK;IACpCC,QAAQ,CAACD,KAAK,CAAC;IACfF,eAAe,CAAC,CAAC;MAAEF;IAAO,CAAC,KAAK;MAC5BA,MAAM,CAACS,GAAG,CAAC,iBAAiB,EAAEL,KAAK,CAAC;IACxC,CAAC,CAAC;IAEF,IAAIG,UAAU,CAACG,OAAO,EAAE;MACpBC,YAAY,CAACJ,UAAU,CAACG,OAAO,CAAC;IACpC;IAEAH,UAAU,CAACG,OAAO,GAAGE,UAAU,CAAC,MAAM;MAClCX,QAAQ,CAAC,CAAC;QAAED;MAAO,CAAC,KAAK;QACrBA,MAAM,CAACS,GAAG,CAAC,iBAAiB,EAAEL,KAAK,CAAC;MACxC,CAAC,CAAC;IACN,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;EACb,CAAC;EAED,MAAMS,OAAO,GAAGA,CAAA,KAAM;IAClBZ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACc,KAAK,CAAC,iBAAiB,CAAC;IACnC,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,WAAW,GAAGZ,cAAc,EAAEG,eAAe,IAAI,CAAC,CAAC;EAEzD,oBACIhB,KAAA,CAAA0B,aAAA,CAACrB,WAAW;IACRsB,KAAK,eACD3B,KAAA,CAAA0B,aAAA,CAACnB,gBAAgB;MACbgB,OAAO,EAAEA,OAAQ;MACjBK,YAAY,EAAEH,WAAW,EAAEI,UAAU,IAAI,KAAM;MAC/CC,aAAa,EAAEL,WAAW,EAAEK,aAAc;MAC1CC,IAAI,EAAE;IAAQ,CACjB,CACJ;IACDC,WAAW,EAAC,8BAA8B;IAC1ClB,KAAK,EAAEA,KAAM;IACbH,QAAQ,EAAEO;EAAa,CAC1B,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ThemeColorPicker, type ThemeColorSelection } from \"@webiny/app-theme\";\nimport { createTokenReference } from \"@webiny/website-builder-sdk\";\n\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\nexport const BackgroundColor = observer(({ elementId }: { elementId: string }) => {\n    const { styles, tokens, onChange, inheritanceMap } = useStyles(elementId);\n\n    /**\n     * The picker commits on selection rather than on every drag frame, so the local state and\n     * debounce this control used to carry are no longer needed — a swatch click is one write.\n     */\n    const handleChange = (selection: ThemeColorSelection) => {\n        onChange(({ styles }) => {\n            if (selection.path) {\n                styles.setToken(\n                    \"backgroundColor\",\n                    createTokenReference(selection.path, selection.value),\n                    selection.value\n                );\n            } else {\n                styles.set(\"backgroundColor\", selection.value);\n            }\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundColor ?? {};\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Color\"}\n                />\n            }\n        >\n            <ThemeColorPicker\n                value={styles.backgroundColor ?? \"transparent\"}\n                tokenPath={tokens.backgroundColor?.path ?? null}\n                onChange={handleChange}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["BackgroundColor","observer","elementId","styles","tokens","onChange","inheritanceMap","useStyles","handleChange","selection","createTokenReference","onReset","inheritance","SidebarRow","InheritanceLabel","ThemeColorPicker"],"mappings":";;;;;;;AASO,MAAMA,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUL;IAM/D,MAAMM,eAAe,CAACC;QAClBJ,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChB,IAAIM,UAAU,IAAI,EACdN,OAAO,QAAQ,CACX,mBACAO,qBAAqBD,UAAU,IAAI,EAAEA,UAAU,KAAK,GACpDA,UAAU,KAAK;iBAGnBN,OAAO,GAAG,CAAC,mBAAmBM,UAAU,KAAK;QAErD;IACJ;IAEA,MAAME,UAAU;QACZN,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMS,cAAcN,gBAAgB,mBAAmB,CAAC;IAExD,OAAO,WAAP,GACI,oBAACO,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,kBAAgBA;QACb,OAAOZ,OAAO,eAAe,IAAI;QACjC,WAAWC,OAAO,eAAe,EAAE,QAAQ;QAC3C,UAAUI;;AAI1B"}

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

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

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

@@ -1,127 +1,89 @@
-import React, { useEffect, useState, useMemo } from "react";
+import react, { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { FileManager } from "@webiny/app-admin";
 import { FilePicker } from "@webiny/admin-ui";
-import { useStyles } from "../../useStyles";
-import { BackgroundImageParser } from "./BackgroundImageParser";
-import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
-import { InheritanceLabel } from "../../../InheritanceLabel";
+import { useStyles } from "../../useStyles.js";
+import { BackgroundImageParser } from "./BackgroundImageParser.js";
+import { useBreakpoint } from "../../../../../hooks/useBreakpoint.js";
+import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const DEFAULT_POSITION = "center";
 const DEFAULT_SCALING = {
-  backgroundSize: "cover",
-  backgroundRepeat: "no-repeat"
+    backgroundSize: "cover",
+    backgroundRepeat: "no-repeat"
 };
-export const parseValue = value => {
-  if (!value) {
-    return undefined;
-  }
-  return;
-};
-export const BackgroundImage = observer(({
-  elementId
-}) => {
-  const {
-    isBaseBreakpoint
-  } = useBreakpoint();
-  const {
-    styles,
-    metadata,
-    onChange,
-    inheritanceMap
-  } = useStyles(elementId);
-  const [localValue, setLocalValue] = useState(styles.backgroundImage);
-  const url = useMemo(() => {
-    const parser = new BackgroundImageParser(styles.backgroundImage);
-    const rules = parser.getRules();
-    const urlRule = rules.find(r => r.type === "url");
-    if (urlRule && urlRule.type === "url") {
-      return urlRule.parsed.url;
-    }
-    return null;
-  }, [styles.backgroundImage]);
-  useEffect(() => {
-    if (styles.backgroundImage !== localValue) {
-      setLocalValue(styles.backgroundImage);
-    }
-  }, [styles.backgroundImage]);
-  const onFileChange = file => {
-    const metaItems = file.meta || [];
-    const getName = () => {
-      const nameItem = metaItems.find(item => item.key === "name");
-      return nameItem ? nameItem.value : "";
+const parseValue = (value)=>{};
+const BackgroundImage = observer(({ elementId })=>{
+    const { isBaseBreakpoint } = useBreakpoint();
+    const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);
+    const [localValue, setLocalValue] = useState(styles.backgroundImage);
+    const url = useMemo(()=>{
+        const parser = new BackgroundImageParser(styles.backgroundImage);
+        const rules = parser.getRules();
+        const urlRule = rules.find((r)=>"url" === r.type);
+        if (urlRule && "url" === urlRule.type) return urlRule.parsed.url;
+        return null;
+    }, [
+        styles.backgroundImage
+    ]);
+    useEffect(()=>{
+        if (styles.backgroundImage !== localValue) setLocalValue(styles.backgroundImage);
+    }, [
+        styles.backgroundImage
+    ]);
+    const onFileChange = (file)=>{
+        onChange(({ styles, metadata })=>{
+            styles.set("backgroundPosition", DEFAULT_POSITION);
+            styles.set("backgroundSize", DEFAULT_SCALING.backgroundSize);
+            styles.set("backgroundRepeat", DEFAULT_SCALING.backgroundRepeat);
+            styles.set("backgroundImage", `url("${file.src}")`);
+            metadata.set("backgroundImage", {
+                id: file.id,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                url: file.src || ""
+            });
+        });
     };
-    const getSize = () => {
-      const sizeItem = metaItems.find(item => item.key === "size");
-      return sizeItem ? sizeItem.value : 0;
+    const onRemove = ()=>{
+        onChange(({ styles, metadata })=>{
+            if (isBaseBreakpoint) {
+                styles.unset("backgroundImage");
+                styles.unset("backgroundPosition");
+                styles.unset("backgroundSize");
+                styles.unset("backgroundRepeat");
+            } else styles.set("backgroundImage", "none");
+            metadata.unset("backgroundImage");
+        });
     };
-    const getType = () => {
-      const typeItem = metaItems.find(item => item.key === "type");
-      return typeItem ? typeItem.value : "";
+    const onReset = ()=>{
+        onChange(({ styles })=>{
+            styles.unset("backgroundImage");
+            metadata.unset("backgroundImage");
+        });
     };
-    onChange(({
-      styles,
-      metadata
-    }) => {
-      styles.set("backgroundPosition", DEFAULT_POSITION);
-      styles.set("backgroundSize", DEFAULT_SCALING.backgroundSize);
-      styles.set("backgroundRepeat", DEFAULT_SCALING.backgroundRepeat);
-      styles.set("backgroundImage", `url("${file.src}")`);
-      metadata.set("backgroundImage", {
-        id: file.id,
-        name: getName(),
-        size: getSize(),
-        mimeType: getType(),
-        url: file.src || ""
-      });
-    });
-  };
-  const onRemove = () => {
-    onChange(({
-      styles,
-      metadata
-    }) => {
-      // On base breakpoint, we unset the image and all styles related to it.
-      if (isBaseBreakpoint) {
-        styles.unset("backgroundImage");
-        styles.unset("backgroundPosition");
-        styles.unset("backgroundSize");
-        styles.unset("backgroundRepeat");
-      } else {
-        styles.set("backgroundImage", "none");
-      }
-      metadata.unset("backgroundImage");
-    });
-  };
-  const onReset = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.unset("backgroundImage");
-      metadata.unset("backgroundImage");
-    });
-  };
-  const inheritance = inheritanceMap?.backgroundImage ?? {};
-  const fileInfo = metadata.get("backgroundImage");
-  return /*#__PURE__*/React.createElement(FileManager, {
-    images: true,
-    onChange: onFileChange,
-    render: ({
-      showFileManager
-    }) => /*#__PURE__*/React.createElement(FilePicker, {
-      label: /*#__PURE__*/React.createElement(InheritanceLabel, {
-        onReset: onReset,
-        isOverridden: inheritance?.overridden ?? false,
-        inheritedFrom: inheritance?.inheritedFrom,
-        text: "Image"
-      }),
-      description: "Select a background image",
-      type: "compact",
-      value: url ? fileInfo : undefined,
-      onSelectItem: () => showFileManager(),
-      onRemoveItem: onRemove,
-      onEditItem: () => showFileManager()
-    })
-  });
+    const inheritance = inheritanceMap?.backgroundImage ?? {};
+    const fileInfo = metadata.get("backgroundImage");
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
+        label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
+            onReset: onReset,
+            isOverridden: inheritance?.overridden ?? false,
+            inheritedFrom: inheritance?.inheritedFrom,
+            text: "Image"
+        })
+    }, /*#__PURE__*/ react.createElement(FileManager, {
+        images: true,
+        onChange: onFileChange,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
+                variant: "secondary",
+                type: "compact",
+                value: url ? fileInfo : void 0,
+                onSelectItem: ()=>showFileManager(),
+                onRemoveItem: onRemove
+            })
+    }));
 });
+export { BackgroundImage, parseValue };
 
 //# sourceMappingURL=BackgroundImage.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","useMemo","observer","FileManager","FilePicker","useStyles","BackgroundImageParser","useBreakpoint","InheritanceLabel","DEFAULT_POSITION","DEFAULT_SCALING","backgroundSize","backgroundRepeat","parseValue","value","undefined","BackgroundImage","elementId","isBaseBreakpoint","styles","metadata","onChange","inheritanceMap","localValue","setLocalValue","backgroundImage","url","parser","rules","getRules","urlRule","find","r","type","parsed","onFileChange","file","metaItems","meta","getName","nameItem","item","key","getSize","sizeItem","getType","typeItem","set","src","id","name","size","mimeType","onRemove","unset","onReset","inheritance","fileInfo","get","createElement","images","render","showFileManager","label","isOverridden","overridden","inheritedFrom","text","description","onSelectItem","onRemoveItem","onEditItem"],"sources":["BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel\";\n\ntype FileInfo = {\n    id: string;\n    name: string;\n    size: number;\n    mimeType: 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: any) => {\n        const metaItems = file.meta || [];\n        const getName = () => {\n            const nameItem = metaItems.find((item: { key: string }) => item.key === \"name\");\n            return nameItem ? nameItem.value : \"\";\n        };\n        const getSize = () => {\n            const sizeItem = metaItems.find((item: { key: string }) => item.key === \"size\");\n            return sizeItem ? sizeItem.value : 0;\n        };\n        const getType = () => {\n            const typeItem = metaItems.find((item: { key: string }) => item.key === \"type\");\n            return typeItem ? typeItem.value : \"\";\n        };\n\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: getName(),\n                size: getSize(),\n                mimeType: getType(),\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        <FileManager\n            images={true}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    label={\n                        <InheritanceLabel\n                            onReset={onReset}\n                            isOverridden={inheritance?.overridden ?? false}\n                            inheritedFrom={inheritance?.inheritedFrom}\n                            text={\"Image\"}\n                        />\n                    }\n                    description=\"Select a background image\"\n                    type=\"compact\"\n                    value={url ? fileInfo : undefined}\n                    onSelectItem={() => showFileManager()}\n                    onRemoveItem={onRemove}\n                    onEditItem={() => showFileManager()}\n                />\n            )}\n        />\n    );\n});\n"],"mappings":"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","ignoreList":[]}
+{"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/BackgroundImageParser.js

@@ -1,110 +1,99 @@
-export class BackgroundImageParser {
-  rules = [];
-  constructor(input) {
-    this.input = input;
-    this.rules = this.parseInternal();
-  }
-  getRules() {
-    return [...this.rules];
-  }
-  getCssValue() {
-    return this.rules.map(rule => {
-      switch (rule.type) {
-        case "url":
-          return `url("${rule.parsed.url}")`;
-        case "image-set":
-          const entries = rule.parsed.images.map(img => `url("${img.url}") ${img.scale}`).join(", ");
-          return `image-set(${entries})`;
-        case "linear-gradient":
-        case "radial-gradient":
-        case "conic-gradient":
-        case "unknown":
-          return rule.raw;
-      }
-    }).join(", ");
-  }
-  parseInternal() {
-    if (!this.input || this.input.trim() === "none") {
-      return [];
+class BackgroundImageParser {
+    constructor(input){
+        this.input = input;
+        this.rules = [];
+        this.rules = this.parseInternal();
     }
-    const rules = [];
-    const parts = this.splitTopLevelCommaSeparated(this.input);
-    for (const part of parts) {
-      const raw = part.trim();
-
-      // url(...)
-      const urlMatch = raw.match(/^url\((['"]?)(.*?)\1\)$/i);
-      if (urlMatch) {
-        rules.push({
-          type: "url",
-          raw,
-          parsed: {
-            url: urlMatch[2]
-          }
-        });
-        continue;
-      }
-
-      // gradients (not parsed deeply)
-      const gradientMatch = raw.match(/^(linear|radial|conic)-gradient\(.+\)$/i);
-      if (gradientMatch) {
-        rules.push({
-          type: gradientMatch[1].toLowerCase(),
-          raw
-        });
-        continue;
-      }
-
-      // image-set(...)
-      const imageSetMatch = raw.match(/^image-set\s*\((.*)\)$/i);
-      if (imageSetMatch) {
-        const entries = imageSetMatch[1].split(/,(?![^(]*\))/).map(entry => {
-          const match = entry.match(/url\((['"]?)(.*?)\1\)\s*(\d+x|\d+\.?\d*dpi)/);
-          return match ? {
-            url: match[2],
-            scale: match[3]
-          } : null;
-        }).filter(Boolean);
-        rules.push({
-          type: "image-set",
-          raw,
-          parsed: {
-            images: entries
-          }
-        });
-        continue;
-      }
-      rules.push({
-        type: "unknown",
-        raw
-      });
+    getRules() {
+        return [
+            ...this.rules
+        ];
     }
-    return rules;
-  }
-  splitTopLevelCommaSeparated(input) {
-    const parts = [];
-    let depth = 0;
-    let current = "";
-    for (let i = 0; i < input.length; i++) {
-      const char = input[i];
-      if (char === "," && depth === 0) {
-        parts.push(current.trim());
-        current = "";
-      } else {
-        if (char === "(") {
-          depth++;
-        }
-        if (char === ")") {
-          depth--;
+    getCssValue() {
+        return this.rules.map((rule)=>{
+            switch(rule.type){
+                case "url":
+                    return `url("${rule.parsed.url}")`;
+                case "image-set":
+                    const entries = rule.parsed.images.map((img)=>`url("${img.url}") ${img.scale}`).join(", ");
+                    return `image-set(${entries})`;
+                case "linear-gradient":
+                case "radial-gradient":
+                case "conic-gradient":
+                case "unknown":
+                    return rule.raw;
+            }
+        }).join(", ");
+    }
+    parseInternal() {
+        if (!this.input || "none" === this.input.trim()) return [];
+        const rules = [];
+        const parts = this.splitTopLevelCommaSeparated(this.input);
+        for (const part of parts){
+            const raw = part.trim();
+            const urlMatch = raw.match(/^url\((['"]?)(.*?)\1\)$/i);
+            if (urlMatch) {
+                rules.push({
+                    type: "url",
+                    raw,
+                    parsed: {
+                        url: urlMatch[2]
+                    }
+                });
+                continue;
+            }
+            const gradientMatch = raw.match(/^(linear|radial|conic)-gradient\(.+\)$/i);
+            if (gradientMatch) {
+                rules.push({
+                    type: gradientMatch[1].toLowerCase(),
+                    raw
+                });
+                continue;
+            }
+            const imageSetMatch = raw.match(/^image-set\s*\((.*)\)$/i);
+            if (imageSetMatch) {
+                const entries = imageSetMatch[1].split(/,(?![^(]*\))/).map((entry)=>{
+                    const match = entry.match(/url\((['"]?)(.*?)\1\)\s*(\d+x|\d+\.?\d*dpi)/);
+                    return match ? {
+                        url: match[2],
+                        scale: match[3]
+                    } : null;
+                }).filter(Boolean);
+                rules.push({
+                    type: "image-set",
+                    raw,
+                    parsed: {
+                        images: entries
+                    }
+                });
+                continue;
+            }
+            rules.push({
+                type: "unknown",
+                raw
+            });
         }
-        current += char;
-      }
+        return rules;
     }
-    if (current) {
-      parts.push(current.trim());
+    splitTopLevelCommaSeparated(input) {
+        const parts = [];
+        let depth = 0;
+        let current = "";
+        for(let i = 0; i < input.length; i++){
+            const char = input[i];
+            if ("," === char && 0 === depth) {
+                parts.push(current.trim());
+                current = "";
+            } else {
+                if ("(" === char) depth++;
+                if (")" === char) depth--;
+                current += char;
+            }
+        }
+        if (current) parts.push(current.trim());
+        return parts;
     }
-    return parts;
-  }
 }
+export { BackgroundImageParser };
 
 //# sourceMappingURL=BackgroundImageParser.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["BackgroundImageParser","rules","constructor","input","parseInternal","getRules","getCssValue","map","rule","type","parsed","url","entries","images","img","scale","join","raw","trim","parts","splitTopLevelCommaSeparated","part","urlMatch","match","push","gradientMatch","toLowerCase","imageSetMatch","split","entry","filter","Boolean","depth","current","i","length","char"],"sources":["BackgroundImageParser.ts"],"sourcesContent":["type ParsedUrl = { url: string };\ntype ParsedImageSet = { images: { url: string; scale: string }[] };\n\ntype BackgroundImageRule =\n    | {\n          type: \"url\";\n          raw: string;\n          parsed: ParsedUrl;\n      }\n    | {\n          type: \"image-set\";\n          raw: string;\n          parsed: ParsedImageSet;\n      }\n    | {\n          type: \"linear-gradient\" | \"radial-gradient\" | \"conic-gradient\";\n          raw: string;\n      }\n    | {\n          type: \"unknown\";\n          raw: string;\n      };\n\nexport class BackgroundImageParser {\n    private readonly rules: BackgroundImageRule[] = [];\n\n    constructor(private input: string) {\n        this.rules = this.parseInternal();\n    }\n\n    public getRules(): BackgroundImageRule[] {\n        return [...this.rules];\n    }\n\n    public getCssValue(): string {\n        return this.rules\n            .map(rule => {\n                switch (rule.type) {\n                    case \"url\":\n                        return `url(\"${rule.parsed.url}\")`;\n                    case \"image-set\":\n                        const entries = rule.parsed.images\n                            .map(img => `url(\"${img.url}\") ${img.scale}`)\n                            .join(\", \");\n                        return `image-set(${entries})`;\n                    case \"linear-gradient\":\n                    case \"radial-gradient\":\n                    case \"conic-gradient\":\n                    case \"unknown\":\n                        return rule.raw;\n                }\n            })\n            .join(\", \");\n    }\n\n    private parseInternal(): BackgroundImageRule[] {\n        if (!this.input || this.input.trim() === \"none\") {\n            return [];\n        }\n\n        const rules: BackgroundImageRule[] = [];\n        const parts = this.splitTopLevelCommaSeparated(this.input);\n\n        for (const part of parts) {\n            const raw = part.trim();\n\n            // url(...)\n            const urlMatch = raw.match(/^url\\((['\"]?)(.*?)\\1\\)$/i);\n            if (urlMatch) {\n                rules.push({\n                    type: \"url\",\n                    raw,\n                    parsed: { url: urlMatch[2] }\n                });\n                continue;\n            }\n\n            // gradients (not parsed deeply)\n            const gradientMatch = raw.match(/^(linear|radial|conic)-gradient\\(.+\\)$/i);\n            if (gradientMatch) {\n                rules.push({\n                    type: gradientMatch[1].toLowerCase() as\n                        | \"linear-gradient\"\n                        | \"radial-gradient\"\n                        | \"conic-gradient\",\n                    raw\n                });\n                continue;\n            }\n\n            // image-set(...)\n            const imageSetMatch = raw.match(/^image-set\\s*\\((.*)\\)$/i);\n            if (imageSetMatch) {\n                const entries = imageSetMatch[1]\n                    .split(/,(?![^(]*\\))/)\n                    .map(entry => {\n                        const match = entry.match(/url\\((['\"]?)(.*?)\\1\\)\\s*(\\d+x|\\d+\\.?\\d*dpi)/);\n                        return match ? { url: match[2], scale: match[3] } : null;\n                    })\n                    .filter(Boolean) as { url: string; scale: string }[];\n\n                rules.push({\n                    type: \"image-set\",\n                    raw,\n                    parsed: { images: entries }\n                });\n                continue;\n            }\n\n            rules.push({\n                type: \"unknown\",\n                raw\n            });\n        }\n\n        return rules;\n    }\n\n    private splitTopLevelCommaSeparated(input: string): string[] {\n        const parts: string[] = [];\n        let depth = 0;\n        let current = \"\";\n\n        for (let i = 0; i < input.length; i++) {\n            const char = input[i];\n\n            if (char === \",\" && depth === 0) {\n                parts.push(current.trim());\n                current = \"\";\n            } else {\n                if (char === \"(\") {\n                    depth++;\n                }\n                if (char === \")\") {\n                    depth--;\n                }\n                current += char;\n            }\n        }\n\n        if (current) {\n            parts.push(current.trim());\n        }\n\n        return parts;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImageParser.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImageParser.ts"],"sourcesContent":["type ParsedUrl = { url: string };\ntype ParsedImageSet = { images: { url: string; scale: string }[] };\n\ntype BackgroundImageRule =\n    | {\n          type: \"url\";\n          raw: string;\n          parsed: ParsedUrl;\n      }\n    | {\n          type: \"image-set\";\n          raw: string;\n          parsed: ParsedImageSet;\n      }\n    | {\n          type: \"linear-gradient\" | \"radial-gradient\" | \"conic-gradient\";\n          raw: string;\n      }\n    | {\n          type: \"unknown\";\n          raw: string;\n      };\n\nexport class BackgroundImageParser {\n    private readonly rules: BackgroundImageRule[] = [];\n\n    constructor(private input: string) {\n        this.rules = this.parseInternal();\n    }\n\n    public getRules(): BackgroundImageRule[] {\n        return [...this.rules];\n    }\n\n    public getCssValue(): string {\n        return this.rules\n            .map(rule => {\n                switch (rule.type) {\n                    case \"url\":\n                        return `url(\"${rule.parsed.url}\")`;\n                    case \"image-set\":\n                        const entries = rule.parsed.images\n                            .map(img => `url(\"${img.url}\") ${img.scale}`)\n                            .join(\", \");\n                        return `image-set(${entries})`;\n                    case \"linear-gradient\":\n                    case \"radial-gradient\":\n                    case \"conic-gradient\":\n                    case \"unknown\":\n                        return rule.raw;\n                }\n            })\n            .join(\", \");\n    }\n\n    private parseInternal(): BackgroundImageRule[] {\n        if (!this.input || this.input.trim() === \"none\") {\n            return [];\n        }\n\n        const rules: BackgroundImageRule[] = [];\n        const parts = this.splitTopLevelCommaSeparated(this.input);\n\n        for (const part of parts) {\n            const raw = part.trim();\n\n            // url(...)\n            const urlMatch = raw.match(/^url\\((['\"]?)(.*?)\\1\\)$/i);\n            if (urlMatch) {\n                rules.push({\n                    type: \"url\",\n                    raw,\n                    parsed: { url: urlMatch[2] }\n                });\n                continue;\n            }\n\n            // gradients (not parsed deeply)\n            const gradientMatch = raw.match(/^(linear|radial|conic)-gradient\\(.+\\)$/i);\n            if (gradientMatch) {\n                rules.push({\n                    type: gradientMatch[1].toLowerCase() as\n                        | \"linear-gradient\"\n                        | \"radial-gradient\"\n                        | \"conic-gradient\",\n                    raw\n                });\n                continue;\n            }\n\n            // image-set(...)\n            const imageSetMatch = raw.match(/^image-set\\s*\\((.*)\\)$/i);\n            if (imageSetMatch) {\n                const entries = imageSetMatch[1]\n                    .split(/,(?![^(]*\\))/)\n                    .map(entry => {\n                        const match = entry.match(/url\\((['\"]?)(.*?)\\1\\)\\s*(\\d+x|\\d+\\.?\\d*dpi)/);\n                        return match ? { url: match[2], scale: match[3] } : null;\n                    })\n                    .filter(Boolean) as { url: string; scale: string }[];\n\n                rules.push({\n                    type: \"image-set\",\n                    raw,\n                    parsed: { images: entries }\n                });\n                continue;\n            }\n\n            rules.push({\n                type: \"unknown\",\n                raw\n            });\n        }\n\n        return rules;\n    }\n\n    private splitTopLevelCommaSeparated(input: string): string[] {\n        const parts: string[] = [];\n        let depth = 0;\n        let current = \"\";\n\n        for (let i = 0; i < input.length; i++) {\n            const char = input[i];\n\n            if (char === \",\" && depth === 0) {\n                parts.push(current.trim());\n                current = \"\";\n            } else {\n                if (char === \"(\") {\n                    depth++;\n                }\n                if (char === \")\") {\n                    depth--;\n                }\n                current += char;\n            }\n        }\n\n        if (current) {\n            parts.push(current.trim());\n        }\n\n        return parts;\n    }\n}\n"],"names":["BackgroundImageParser","input","rule","entries","img","rules","parts","part","raw","urlMatch","gradientMatch","imageSetMatch","entry","match","Boolean","depth","current","i","char"],"mappings":"AAuBO,MAAMA;IAGT,YAAoBC,KAAa,CAAE;aAAfA,KAAK,GAALA;aAFH,KAAK,GAA0B,EAAE;QAG9C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa;IACnC;IAEO,WAAkC;QACrC,OAAO;eAAI,IAAI,CAAC,KAAK;SAAC;IAC1B;IAEO,cAAsB;QACzB,OAAO,IAAI,CAAC,KAAK,CACZ,GAAG,CAACC,CAAAA;YACD,OAAQA,KAAK,IAAI;gBACb,KAAK;oBACD,OAAO,CAAC,KAAK,EAAEA,KAAK,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtC,KAAK;oBACD,MAAMC,UAAUD,KAAK,MAAM,CAAC,MAAM,CAC7B,GAAG,CAACE,CAAAA,MAAO,CAAC,KAAK,EAAEA,IAAI,GAAG,CAAC,GAAG,EAAEA,IAAI,KAAK,EAAE,EAC3C,IAAI,CAAC;oBACV,OAAO,CAAC,UAAU,EAAED,QAAQ,CAAC,CAAC;gBAClC,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;oBACD,OAAOD,KAAK,GAAG;YACvB;QACJ,GACC,IAAI,CAAC;IACd;IAEQ,gBAAuC;QAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,AAAsB,WAAtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAC9B,OAAO,EAAE;QAGb,MAAMG,QAA+B,EAAE;QACvC,MAAMC,QAAQ,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK;QAEzD,KAAK,MAAMC,QAAQD,MAAO;YACtB,MAAME,MAAMD,KAAK,IAAI;YAGrB,MAAME,WAAWD,IAAI,KAAK,CAAC;YAC3B,IAAIC,UAAU;gBACVJ,MAAM,IAAI,CAAC;oBACP,MAAM;oBACNG;oBACA,QAAQ;wBAAE,KAAKC,QAAQ,CAAC,EAAE;oBAAC;gBAC/B;gBACA;YACJ;YAGA,MAAMC,gBAAgBF,IAAI,KAAK,CAAC;YAChC,IAAIE,eAAe;gBACfL,MAAM,IAAI,CAAC;oBACP,MAAMK,aAAa,CAAC,EAAE,CAAC,WAAW;oBAIlCF;gBACJ;gBACA;YACJ;YAGA,MAAMG,gBAAgBH,IAAI,KAAK,CAAC;YAChC,IAAIG,eAAe;gBACf,MAAMR,UAAUQ,aAAa,CAAC,EAAE,CAC3B,KAAK,CAAC,gBACN,GAAG,CAACC,CAAAA;oBACD,MAAMC,QAAQD,MAAM,KAAK,CAAC;oBAC1B,OAAOC,QAAQ;wBAAE,KAAKA,KAAK,CAAC,EAAE;wBAAE,OAAOA,KAAK,CAAC,EAAE;oBAAC,IAAI;gBACxD,GACC,MAAM,CAACC;gBAEZT,MAAM,IAAI,CAAC;oBACP,MAAM;oBACNG;oBACA,QAAQ;wBAAE,QAAQL;oBAAQ;gBAC9B;gBACA;YACJ;YAEAE,MAAM,IAAI,CAAC;gBACP,MAAM;gBACNG;YACJ;QACJ;QAEA,OAAOH;IACX;IAEQ,4BAA4BJ,KAAa,EAAY;QACzD,MAAMK,QAAkB,EAAE;QAC1B,IAAIS,QAAQ;QACZ,IAAIC,UAAU;QAEd,IAAK,IAAIC,IAAI,GAAGA,IAAIhB,MAAM,MAAM,EAAEgB,IAAK;YACnC,MAAMC,OAAOjB,KAAK,CAACgB,EAAE;YAErB,IAAIC,AAAS,QAATA,QAAgBH,AAAU,MAAVA,OAAa;gBAC7BT,MAAM,IAAI,CAACU,QAAQ,IAAI;gBACvBA,UAAU;YACd,OAAO;gBACH,IAAIE,AAAS,QAATA,MACAH;gBAEJ,IAAIG,AAAS,QAATA,MACAH;gBAEJC,WAAWE;YACf;QACJ;QAEA,IAAIF,SACAV,MAAM,IAAI,CAACU,QAAQ,IAAI;QAG3B,OAAOV;IACX;AACJ"}

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

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