@webiny/app-website-builder 6.0.0-alpha.0

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

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

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

@@ -0,0 +1,127 @@
+import React, { useEffect, useState, useMemo } 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";
+const DEFAULT_POSITION = "center";
+const DEFAULT_SCALING = {
+  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 getSize = () => {
+      const sizeItem = metaItems.find(item => item.key === "size");
+      return sizeItem ? sizeItem.value : 0;
+    };
+    const getType = () => {
+      const typeItem = metaItems.find(item => item.key === "type");
+      return typeItem ? typeItem.value : "";
+    };
+    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()
+    })
+  });
+});
+
+//# sourceMappingURL=BackgroundImage.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,34 @@
+type ParsedUrl = {
+    url: string;
+};
+type ParsedImageSet = {
+    images: {
+        url: string;
+        scale: string;
+    }[];
+};
+type BackgroundImageRule = {
+    type: "url";
+    raw: string;
+    parsed: ParsedUrl;
+} | {
+    type: "image-set";
+    raw: string;
+    parsed: ParsedImageSet;
+} | {
+    type: "linear-gradient" | "radial-gradient" | "conic-gradient";
+    raw: string;
+} | {
+    type: "unknown";
+    raw: string;
+};
+export declare class BackgroundImageParser {
+    private input;
+    private readonly rules;
+    constructor(input: string);
+    getRules(): BackgroundImageRule[];
+    getCssValue(): string;
+    private parseInternal;
+    private splitTopLevelCommaSeparated;
+}
+export {};

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

@@ -0,0 +1,106 @@
+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 [];
+    }
+    const rules = [];
+    const parts = this.splitTopLevelCommaSeparated(this.input);
+    for (let 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
+      });
+    }
+    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--;
+        current += char;
+      }
+    }
+    if (current) {
+      parts.push(current.trim());
+    }
+    return parts;
+  }
+}
+
+//# sourceMappingURL=BackgroundImageParser.js.map

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

@@ -0,0 +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 (let 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 === \"(\") depth++;\n                if (char === \")\") depth--;\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":[]}

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

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

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Select } from "@webiny/admin-ui";
+import { useStyles } from "../../useStyles";
+import { BackgroundImageParser } from "./BackgroundImageParser";
+import { toTitleCaseLabel } from "./toTitleCaseLabel";
+import { InheritanceLabel } from "../../../InheritanceLabel";
+const POSITIONS = ["top left", "top", "top right", "center left", "center", "center right", "bottom left", "bottom center", "bottom right"];
+const options = POSITIONS.map(key => ({
+  label: toTitleCaseLabel(key),
+  value: key
+}));
+export const BackgroundPosition = observer(({
+  elementId
+}) => {
+  const {
+    styles,
+    onChange,
+    inheritanceMap
+  } = useStyles(elementId);
+  const [localValue, setLocalValue] = useState(styles.backgroundPosition);
+  const hasBackgroundImage = useMemo(() => {
+    const parser = new BackgroundImageParser(styles.backgroundImage);
+    return parser.getRules().find(r => r.type === "url") !== undefined;
+  }, [styles.backgroundImage]);
+  useEffect(() => {
+    if (styles.backgroundPosition !== localValue) {
+      setLocalValue(styles.backgroundPosition);
+    }
+  }, [styles.backgroundPosition]);
+  const onPositionChange = value => {
+    onChange(({
+      styles
+    }) => {
+      styles.set("backgroundPosition", value);
+    });
+  };
+  const onReset = () => {
+    onChange(({
+      styles
+    }) => {
+      styles.unset("backgroundPosition");
+    });
+  };
+  const inheritance = inheritanceMap?.backgroundPosition ?? {};
+  return /*#__PURE__*/React.createElement(Select, {
+    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
+      onReset: onReset,
+      isOverridden: inheritance?.overridden ?? false,
+      inheritedFrom: inheritance?.inheritedFrom,
+      text: "Position"
+    }),
+    description: "Select background position",
+    disabled: !hasBackgroundImage,
+    value: localValue ?? "center",
+    displayResetAction: false,
+    onChange: onPositionChange,
+    options: options
+  });
+});
+
+//# sourceMappingURL=BackgroundPosition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","useState","observer","Select","useStyles","BackgroundImageParser","toTitleCaseLabel","InheritanceLabel","POSITIONS","options","map","key","label","value","BackgroundPosition","elementId","styles","onChange","inheritanceMap","localValue","setLocalValue","backgroundPosition","hasBackgroundImage","parser","backgroundImage","getRules","find","r","type","undefined","onPositionChange","set","onReset","unset","inheritance","createElement","isOverridden","overridden","inheritedFrom","text","description","disabled","displayResetAction"],"sources":["BackgroundPosition.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel\";\n\nconst POSITIONS = [\n    \"top left\",\n    \"top\",\n    \"top right\",\n    \"center left\",\n    \"center\",\n    \"center right\",\n    \"bottom left\",\n    \"bottom center\",\n    \"bottom right\"\n];\n\nconst options = POSITIONS.map(key => ({ label: toTitleCaseLabel(key), value: key }));\n\nexport const BackgroundPosition = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string>(styles.backgroundPosition);\n    const hasBackgroundImage = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        return parser.getRules().find(r => r.type === \"url\") !== undefined;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundPosition !== localValue) {\n            setLocalValue(styles.backgroundPosition);\n        }\n    }, [styles.backgroundPosition]);\n\n    const onPositionChange = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"backgroundPosition\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundPosition\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundPosition ?? {};\n\n    return (\n        <Select\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Position\"}\n                />\n            }\n            description={\"Select background position\"}\n            disabled={!hasBackgroundImage}\n            value={localValue ?? \"center\"}\n            displayResetAction={false}\n            onChange={onPositionChange}\n            options={options}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC3D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,SAAS;AAClB,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AACzB,SAASC,gBAAgB;AAEzB,MAAMC,SAAS,GAAG,CACd,UAAU,EACV,KAAK,EACL,WAAW,EACX,aAAa,EACb,QAAQ,EACR,cAAc,EACd,aAAa,EACb,eAAe,EACf,cAAc,CACjB;AAED,MAAMC,OAAO,GAAGD,SAAS,CAACE,GAAG,CAACC,GAAG,KAAK;EAAEC,KAAK,EAAEN,gBAAgB,CAACK,GAAG,CAAC;EAAEE,KAAK,EAAEF;AAAI,CAAC,CAAC,CAAC;AAEpF,OAAO,MAAMG,kBAAkB,GAAGZ,QAAQ,CAAC,CAAC;EAAEa;AAAiC,CAAC,KAAK;EACjF,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAGd,SAAS,CAACW,SAAS,CAAC;EACjE,MAAM,CAACI,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAASe,MAAM,CAACK,kBAAkB,CAAC;EAC/E,MAAMC,kBAAkB,GAAGtB,OAAO,CAAC,MAAM;IACrC,MAAMuB,MAAM,GAAG,IAAIlB,qBAAqB,CAACW,MAAM,CAACQ,eAAe,CAAC;IAChE,OAAOD,MAAM,CAACE,QAAQ,CAAC,CAAC,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACC,IAAI,KAAK,KAAK,CAAC,KAAKC,SAAS;EACtE,CAAC,EAAE,CAACb,MAAM,CAACQ,eAAe,CAAC,CAAC;EAE5BzB,SAAS,CAAC,MAAM;IACZ,IAAIiB,MAAM,CAACK,kBAAkB,KAAKF,UAAU,EAAE;MAC1CC,aAAa,CAACJ,MAAM,CAACK,kBAAkB,CAAC;IAC5C;EACJ,CAAC,EAAE,CAACL,MAAM,CAACK,kBAAkB,CAAC,CAAC;EAE/B,MAAMS,gBAAgB,GAAIjB,KAAa,IAAK;IACxCI,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACe,GAAG,CAAC,oBAAoB,EAAElB,KAAK,CAAC;IAC3C,CAAC,CAAC;EACN,CAAC;EAED,MAAMmB,OAAO,GAAGA,CAAA,KAAM;IAClBf,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACiB,KAAK,CAAC,oBAAoB,CAAC;IACtC,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,WAAW,GAAGhB,cAAc,EAAEG,kBAAkB,IAAI,CAAC,CAAC;EAE5D,oBACIvB,KAAA,CAAAqC,aAAA,CAAChC,MAAM;IACHS,KAAK,eACDd,KAAA,CAAAqC,aAAA,CAAC5B,gBAAgB;MACbyB,OAAO,EAAEA,OAAQ;MACjBI,YAAY,EAAEF,WAAW,EAAEG,UAAU,IAAI,KAAM;MAC/CC,aAAa,EAAEJ,WAAW,EAAEI,aAAc;MAC1CC,IAAI,EAAE;IAAW,CACpB,CACJ;IACDC,WAAW,EAAE,4BAA6B;IAC1CC,QAAQ,EAAE,CAACnB,kBAAmB;IAC9BT,KAAK,EAAEM,UAAU,IAAI,QAAS;IAC9BuB,kBAAkB,EAAE,KAAM;IAC1BzB,QAAQ,EAAEa,gBAAiB;IAC3BrB,OAAO,EAAEA;EAAQ,CACpB,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1,88 @@
+import React, { useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { Select } from "@webiny/admin-ui";
+import { useStyles } from "../../useStyles";
+import { BackgroundImageParser } from "./BackgroundImageParser";
+import { toTitleCaseLabel } from "./toTitleCaseLabel";
+import { InheritanceLabel } from "../../../InheritanceLabel";
+const SCALING_MAP = [{
+  name: "cover",
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat"
+}, {
+  name: "contain",
+  backgroundSize: "contain",
+  backgroundRepeat: "no-repeat"
+}, {
+  name: "originalSize",
+  backgroundSize: "auto",
+  backgroundRepeat: "no-repeat"
+}, {
+  name: "tile",
+  backgroundSize: "auto",
+  backgroundRepeat: "repeat"
+}, {
+  name: "tileHorizontally",
+  backgroundSize: "auto",
+  backgroundRepeat: "repeat-x"
+}, {
+  name: "tileVertically",
+  backgroundSize: "auto",
+  backgroundRepeat: "repeat-y"
+}];
+const options = SCALING_MAP.map(item => ({
+  label: toTitleCaseLabel(item.name),
+  value: item.name
+}));
+export const BackgroundScaling = observer(({
+  elementId
+}) => {
+  const {
+    styles,
+    onChange,
+    inheritanceMap
+  } = useStyles(elementId);
+  const scaling = SCALING_MAP.find(item => {
+    return item.backgroundSize === styles.backgroundSize && item.backgroundRepeat === styles.backgroundRepeat;
+  });
+  const hasBackgroundImage = useMemo(() => {
+    const parser = new BackgroundImageParser(styles.backgroundImage);
+    return parser.getRules().find(r => r.type === "url") !== undefined;
+  }, [styles.backgroundImage]);
+  const onValueChange = value => {
+    onChange(({
+      styles
+    }) => {
+      const scaling = SCALING_MAP.find(item => item.name === value);
+      if (scaling) {
+        styles.set("backgroundRepeat", scaling.backgroundRepeat);
+        styles.set("backgroundSize", scaling.backgroundSize);
+      }
+    });
+  };
+  const onReset = () => {
+    onChange(({
+      styles
+    }) => {
+      styles.unset("backgroundRepeat");
+      styles.unset("backgroundSize");
+    });
+  };
+  const inheritance = inheritanceMap?.backgroundSize ?? {};
+  return /*#__PURE__*/React.createElement(Select, {
+    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
+      onReset: onReset,
+      isOverridden: inheritance?.overridden ?? false,
+      inheritedFrom: inheritance?.inheritedFrom,
+      text: "Scaling"
+    }),
+    description: "Select image scaling",
+    disabled: !hasBackgroundImage,
+    value: scaling ? scaling.name : "",
+    displayResetAction: false,
+    onChange: onValueChange,
+    options: options
+  });
+});
+
+//# sourceMappingURL=BackgroundScaling.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","observer","Select","useStyles","BackgroundImageParser","toTitleCaseLabel","InheritanceLabel","SCALING_MAP","name","backgroundSize","backgroundRepeat","options","map","item","label","value","BackgroundScaling","elementId","styles","onChange","inheritanceMap","scaling","find","hasBackgroundImage","parser","backgroundImage","getRules","r","type","undefined","onValueChange","set","onReset","unset","inheritance","createElement","isOverridden","overridden","inheritedFrom","text","description","disabled","displayResetAction"],"sources":["BackgroundScaling.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel\";\n\ninterface Scaling {\n    name: string;\n    backgroundSize: string;\n    backgroundRepeat: string;\n}\n\nconst SCALING_MAP: Scaling[] = [\n    {\n        name: \"cover\",\n        backgroundSize: \"cover\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"contain\",\n        backgroundSize: \"contain\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"originalSize\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"tile\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat\"\n    },\n    {\n        name: \"tileHorizontally\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat-x\"\n    },\n    {\n        name: \"tileVertically\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat-y\"\n    }\n];\n\nconst options = SCALING_MAP.map(item => ({ label: toTitleCaseLabel(item.name), value: item.name }));\n\nexport const BackgroundScaling = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const scaling = SCALING_MAP.find(item => {\n        return (\n            item.backgroundSize === styles.backgroundSize &&\n            item.backgroundRepeat === styles.backgroundRepeat\n        );\n    });\n\n    const hasBackgroundImage = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        return parser.getRules().find(r => r.type === \"url\") !== undefined;\n    }, [styles.backgroundImage]);\n\n    const onValueChange = (value: string) => {\n        onChange(({ styles }) => {\n            const scaling = SCALING_MAP.find(item => item.name === value);\n            if (scaling) {\n                styles.set(\"backgroundRepeat\", scaling.backgroundRepeat);\n                styles.set(\"backgroundSize\", scaling.backgroundSize);\n            }\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundRepeat\");\n            styles.unset(\"backgroundSize\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundSize ?? {};\n\n    return (\n        <Select\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Scaling\"}\n                />\n            }\n            description={\"Select image scaling\"}\n            disabled={!hasBackgroundImage}\n            value={scaling ? scaling.name : \"\"}\n            displayResetAction={false}\n            onChange={onValueChange}\n            options={options}\n        />\n    );\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1 @@
+export declare function toTitleCaseLabel(input: string): string;

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

@@ -0,0 +1,9 @@
+export function toTitleCaseLabel(input) {
+  // Convert camelCase to spaced: "originalSize" → "original Size"
+  const spaced = input.replace(/([a-z])([A-Z])/g, "$1 $2");
+
+  // Split by space, capitalize each word
+  return spaced.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+
+//# sourceMappingURL=toTitleCaseLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["toTitleCaseLabel","input","spaced","replace","split","map","word","charAt","toUpperCase","slice","join"],"sources":["toTitleCaseLabel.ts"],"sourcesContent":["export function toTitleCaseLabel(input: string): string {\n    // Convert camelCase to spaced: \"originalSize\" → \"original Size\"\n    const spaced = input.replace(/([a-z])([A-Z])/g, \"$1 $2\");\n\n    // Split by space, capitalize each word\n    return spaced\n        .split(\" \")\n        .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n        .join(\" \");\n}\n"],"mappings":"AAAA,OAAO,SAASA,gBAAgBA,CAACC,KAAa,EAAU;EACpD;EACA,MAAMC,MAAM,GAAGD,KAAK,CAACE,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;;EAExD;EACA,OAAOD,MAAM,CACRE,KAAK,CAAC,GAAG,CAAC,CACVC,GAAG,CAACC,IAAI,IAAIA,IAAI,CAACC,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,GAAGF,IAAI,CAACG,KAAK,CAAC,CAAC,CAAC,CAAC,CACzDC,IAAI,CAAC,GAAG,CAAC;AAClB","ignoreList":[]}

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

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

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Accordion, Grid } from "@webiny/admin-ui";
+import { BackgroundImage } from "./Background/BackgroundImage";
+import { BackgroundColor } from "./Background/BackgroundColor";
+import { BackgroundPosition } from "./Background/BackgroundPosition";
+import { BackgroundScaling } from "./Background/BackgroundScaling";
+export const Background = ({
+  elementId
+}) => {
+  return /*#__PURE__*/React.createElement(Accordion.Item, {
+    title: "Background",
+    description: "Set color and image background"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(BackgroundColor, {
+    elementId: elementId
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(BackgroundImage, {
+    elementId: elementId
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(BackgroundPosition, {
+    elementId: elementId
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(BackgroundScaling, {
+    elementId: elementId
+  }))));
+};
+
+//# sourceMappingURL=Background.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Accordion","Grid","BackgroundImage","BackgroundColor","BackgroundPosition","BackgroundScaling","Background","elementId","createElement","Item","title","description","Column","span"],"sources":["Background.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion, Grid } from \"@webiny/admin-ui\";\nimport { BackgroundImage } from \"./Background/BackgroundImage\";\nimport { BackgroundColor } from \"./Background/BackgroundColor\";\nimport { BackgroundPosition } from \"./Background/BackgroundPosition\";\nimport { BackgroundScaling } from \"./Background/BackgroundScaling\";\n\ninterface BackgroundProps {\n    elementId: string;\n}\n\nexport const Background = ({ elementId }: BackgroundProps) => {\n    return (\n        <Accordion.Item title={\"Background\"} description={\"Set color and image background\"}>\n            <Grid>\n                <Grid.Column span={12}>\n                    <BackgroundColor elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundImage elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundPosition elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundScaling elementId={elementId} />\n                </Grid.Column>\n            </Grid>\n        </Accordion.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,QAAQ,kBAAkB;AAClD,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAC3B,SAASC,iBAAiB;AAM1B,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAA2B,CAAC,KAAK;EAC1D,oBACIR,KAAA,CAAAS,aAAA,CAACR,SAAS,CAACS,IAAI;IAACC,KAAK,EAAE,YAAa;IAACC,WAAW,EAAE;EAAiC,gBAC/EZ,KAAA,CAAAS,aAAA,CAACP,IAAI,qBACDF,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACL,eAAe;IAACI,SAAS,EAAEA;EAAU,CAAE,CAC/B,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACN,eAAe;IAACK,SAAS,EAAEA;EAAU,CAAE,CAC/B,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACJ,kBAAkB;IAACG,SAAS,EAAEA;EAAU,CAAE,CAClC,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACH,iBAAiB;IAACE,SAAS,EAAEA;EAAU,CAAE,CACjC,CACX,CACM,CAAC;AAEzB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,18 @@
+import React from "react";
+/**
+ * Alignment is controlled with margin and display: flex.
+ * -----
+ * Align to the left => margin-right: auto;
+ * Align to the right => margin-left: auto;
+ * Center horizontally => margin-left: auto; margin-right: auto;
+ * Full width: unset margin-left and margin-right.
+ * -----
+ * Align to the top => margin-bottom: auto;
+ * Align to the bottom => margin-top: auto;
+ * Center vertically => margin-top: auto; margin-bottom: auto;
+ */
+export declare const Alignment: (({ elementId }: {
+    elementId: string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};