@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { LayoutIllustration } from \"~/BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.js\";\n\nexport const SidebarEmptyState = ({ message }: { message: string }) => {\n    return (\n        <div className={\"flex flex-col items-center gap-md px-md text-center mt-[200px]\"}>\n            <LayoutIllustration />\n            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"names":["SidebarEmptyState","message","LayoutIllustration","Text"],"mappings":";;;AAIO,MAAMA,oBAAoB,CAAC,EAAEC,OAAO,EAAuB,GACvD,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBF"}

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

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundColor: (({ 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/BackgroundColor.js

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { ColorPicker } from "@webiny/admin-ui";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const BackgroundColor = observer(({ elementId })=>{
     const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);
     const [value, setValue] = useState(styles.backgroundColor ?? "transparent");
@@ -30,17 +31,19 @@ const BackgroundColor = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap?.backgroundColor ?? {};
-    return /*#__PURE__*/ react.createElement(ColorPicker, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
             text: "Color"
-        }),
-        description: "Select your background color",
+        })
+    }, /*#__PURE__*/ react.createElement(ColorPicker, {
         value: value,
-        onChange: handleChange
-    });
+        onChange: handleChange,
+        size: "md",
+        variant: "secondary"
+    }));
 });
 export { BackgroundColor };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/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.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\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"],"names":["BackgroundColor","observer","elementId","styles","onChange","onPreviewChange","inheritanceMap","useStyles","value","setValue","useState","timeoutRef","useRef","useEffect","handleChange","clearTimeout","setTimeout","onReset","inheritance","ColorPicker","InheritanceLabel"],"mappings":";;;;;AAOO,MAAMA,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGC,UAAUL;IACxE,MAAM,CAACM,OAAOC,SAAS,GAAGC,SAASP,OAAO,eAAe,IAAI;IAC7D,MAAMQ,aAAaC,OAA6C;IAEhEC,UAAU;QACN,IAAIV,OAAO,eAAe,KAAKK,OAC3BC,SAASN,OAAO,eAAe,IAAI;IAE3C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMW,eAAe,CAACN;QAClBC,SAASD;QACTH,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,mBAAmBK;QAClC;QAEA,IAAIG,WAAW,OAAO,EAClBI,aAAaJ,WAAW,OAAO;QAGnCA,WAAW,OAAO,GAAGK,WAAW;YAC5BZ,SAAS,CAAC,EAAED,MAAM,EAAE;gBAChBA,OAAO,GAAG,CAAC,mBAAmBK;YAClC;QACJ,GAAG;IACP;IAEA,MAAMS,UAAU;QACZb,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMe,cAAcZ,gBAAgB,mBAAmB,CAAC;IAExD,OAAO,WAAP,GACI,oBAACa,aAAWA;QACR,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAY;QACZ,OAAOV;QACP,UAAUM;;AAGtB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/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.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, 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        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Color\"}\n                />\n            }\n        >\n            <ColorPicker value={value} onChange={handleChange} size={\"md\"} variant={\"secondary\"} />\n        </SidebarRow>\n    );\n});\n"],"names":["BackgroundColor","observer","elementId","styles","onChange","onPreviewChange","inheritanceMap","useStyles","value","setValue","useState","timeoutRef","useRef","useEffect","handleChange","clearTimeout","setTimeout","onReset","inheritance","SidebarRow","InheritanceLabel","ColorPicker"],"mappings":";;;;;;AAQO,MAAMA,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGC,UAAUL;IACxE,MAAM,CAACM,OAAOC,SAAS,GAAGC,SAASP,OAAO,eAAe,IAAI;IAC7D,MAAMQ,aAAaC,OAA6C;IAEhEC,UAAU;QACN,IAAIV,OAAO,eAAe,KAAKK,OAC3BC,SAASN,OAAO,eAAe,IAAI;IAE3C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMW,eAAe,CAACN;QAClBC,SAASD;QACTH,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,mBAAmBK;QAClC;QAEA,IAAIG,WAAW,OAAO,EAClBI,aAAaJ,WAAW,OAAO;QAGnCA,WAAW,OAAO,GAAGK,WAAW;YAC5BZ,SAAS,CAAC,EAAED,MAAM,EAAE;gBAChBA,OAAO,GAAG,CAAC,mBAAmBK;YAClC;QACJ,GAAG;IACP;IAEA,MAAMS,UAAU;QACZb,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMe,cAAcZ,gBAAgB,mBAAmB,CAAC;IAExD,OAAO,WAAP,GACI,oBAACa,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,aAAWA;QAAC,OAAOb;QAAO,UAAUM;QAAc,MAAM;QAAM,SAAS;;AAGpF"}

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

@@ -6,6 +6,18 @@ 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 toPickerValue = (url, fileInfo)=>{
+    if (!url || !fileInfo) return;
+    const value = {
+        id: fileInfo.id,
+        name: fileInfo.name,
+        size: fileInfo.size,
+        mimeType: fileInfo.type,
+        src: fileInfo.url
+    };
+    return value;
+};
 const DEFAULT_POSITION = "center";
 const DEFAULT_SCALING = {
     backgroundSize: "cover",
@@ -64,24 +76,24 @@ const BackgroundImage = observer(({ elementId })=>{
     };
     const inheritance = inheritanceMap?.backgroundImage ?? {};
     const fileInfo = metadata.get("backgroundImage");
-    return /*#__PURE__*/ react.createElement(FileManager, {
+    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, {
-                label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
-                    onReset: onReset,
-                    isOverridden: inheritance?.overridden ?? false,
-                    inheritedFrom: inheritance?.inheritedFrom,
-                    text: "Image"
-                }),
-                description: "Select a background image",
+                variant: "secondary",
                 type: "compact",
-                value: url ? fileInfo : void 0,
+                value: toPickerValue(url, fileInfo),
                 onSelectItem: ()=>showFileManager(),
-                onRemoveItem: onRemove,
-                onEditItem: ()=>showFileManager()
+                onRemoveItem: onRemove
             })
-    });
+    }));
 });
 export { BackgroundImage, parseValue };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\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        <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"],"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","FileManager","showFileManager","FilePicker","InheritanceLabel","undefined"],"mappings":";;;;;;;;AAiBA,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,aAAWA;QACR,QAAQ;QACR,UAAUN;QACV,QAAQ,CAAC,EAAEO,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,qBACI,oBAACC,kBAAgBA;oBACb,SAASN;oBACT,cAAcC,aAAa,cAAc;oBACzC,eAAeA,aAAa;oBAC5B,MAAM;;gBAGd,aAAY;gBACZ,MAAK;gBACL,OAAOZ,MAAMa,WAAWK;gBACxB,cAAc,IAAMH;gBACpB,cAAcL;gBACd,YAAY,IAAMK;;;AAKtC"}
+{"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 type { FileItemDto } 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\n/*\n * The FilePicker expects a FileItemDto (`mimeType`, `src`), while the element metadata stores the\n * older shape (`type`, `url`). Without the mapping the picker can't tell the file is an image and\n * shows a generic file icon instead of the thumbnail.\n */\nconst toPickerValue = (url: string | null | undefined, fileInfo: FileInfo | undefined) => {\n    if (!url || !fileInfo) {\n        return undefined;\n    }\n\n    const value: FileItemDto = {\n        id: fileInfo.id,\n        name: fileInfo.name,\n        size: fileInfo.size,\n        mimeType: fileInfo.type,\n        src: fileInfo.url\n    };\n    return value;\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={toPickerValue(url, fileInfo)}\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                    />\n                )}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["toPickerValue","url","fileInfo","value","DEFAULT_POSITION","DEFAULT_SCALING","parseValue","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","SidebarRow","InheritanceLabel","FileManager","showFileManager","FilePicker"],"mappings":";;;;;;;;;AAwBA,MAAMA,gBAAgB,CAACC,KAAgCC;IACnD,IAAI,CAACD,OAAO,CAACC,UACT;IAGJ,MAAMC,QAAqB;QACvB,IAAID,SAAS,EAAE;QACf,MAAMA,SAAS,IAAI;QACnB,MAAMA,SAAS,IAAI;QACnB,UAAUA,SAAS,IAAI;QACvB,KAAKA,SAAS,GAAG;IACrB;IACA,OAAOC;AACX;AAEA,MAAMC,mBAAmB;AACzB,MAAMC,kBAAkB;IACpB,gBAAgB;IAChB,kBAAkB;AACtB;AAEO,MAAMC,aAAa,CAACH,SAM3B;AAEO,MAAMI,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,MAAMX,MAAMmB,QAAQ;QAChB,MAAMC,SAAS,IAAIC,sBAAsBV,OAAO,eAAe;QAC/D,MAAMW,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;QAACZ,OAAO,eAAe;KAAC;IAE3Bc,UAAU;QACN,IAAId,OAAO,eAAe,KAAKK,YAC3BC,cAAcN,OAAO,eAAe;IAE5C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMe,eAAe,CAACC;QAClBd,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAC1BD,OAAO,GAAG,CAAC,sBAAsBR;YACjCQ,OAAO,GAAG,CAAC,kBAAkBP,gBAAgB,cAAc;YAC3DO,OAAO,GAAG,CAAC,oBAAoBP,gBAAgB,gBAAgB;YAC/DO,OAAO,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAEgB,KAAK,GAAG,CAAC,EAAE,CAAC;YAElDf,SAAS,GAAG,CAAC,mBAAmB;gBAC5B,IAAIe,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;QACbf,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,MAAMiB,UAAU;QACZhB,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YAEbC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMkB,cAAchB,gBAAgB,mBAAmB,CAAC;IAExD,MAAMb,WAAWW,SAAS,GAAG,CAAW;IAExC,OAAO,WAAP,GACI,oBAACmB,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,aAAWA;QACR,QAAQ;QACR,UAAUP;QACV,QAAQ,CAAC,EAAEQ,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,MAAK;gBACL,OAAOpC,cAAcC,KAAKC;gBAC1B,cAAc,IAAMiC;gBACpB,cAAcN;;;AAMtC"}

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;
 };

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

@@ -5,6 +5,7 @@ import { useStyles } from "../../useStyles.js";
 import { BackgroundImageParser } from "./BackgroundImageParser.js";
 import { toTitleCaseLabel } from "./toTitleCaseLabel.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const POSITIONS = [
     "top left",
     "top",
@@ -45,20 +46,22 @@ const BackgroundPosition = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap?.backgroundPosition ?? {};
-    return /*#__PURE__*/ react.createElement(Select, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
             text: "Position"
-        }),
-        description: "Select background position",
+        })
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
         disabled: !hasBackgroundImage,
         value: localValue ?? "center",
         displayResetAction: false,
         onChange: onPositionChange,
         options: options
-    });
+    }));
 });
 export { BackgroundPosition };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/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.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\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"],"names":["POSITIONS","options","key","toTitleCaseLabel","BackgroundPosition","observer","elementId","styles","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","hasBackgroundImage","useMemo","parser","BackgroundImageParser","undefined","r","useEffect","onPositionChange","value","onReset","inheritance","Select","InheritanceLabel"],"mappings":";;;;;;;AAQA,MAAMA,YAAY;IACd;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH;AAED,MAAMC,UAAUD,UAAU,GAAG,CAACE,CAAAA,MAAQ;QAAE,OAAOC,iBAAiBD;QAAM,OAAOA;IAAI;AAE1E,MAAME,qBAAqBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IAC5E,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IACvD,MAAM,CAACK,YAAYC,cAAc,GAAGC,SAAiBN,OAAO,kBAAkB;IAC9E,MAAMO,qBAAqBC,QAAQ;QAC/B,MAAMC,SAAS,IAAIC,sBAAsBV,OAAO,eAAe;QAC/D,OAAOS,AAAkDE,WAAlDF,OAAO,QAAQ,GAAG,IAAI,CAACG,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;IAC7C,GAAG;QAACZ,OAAO,eAAe;KAAC;IAE3Ba,UAAU;QACN,IAAIb,OAAO,kBAAkB,KAAKI,YAC9BC,cAAcL,OAAO,kBAAkB;IAE/C,GAAG;QAACA,OAAO,kBAAkB;KAAC;IAE9B,MAAMc,mBAAmB,CAACC;QACtBd,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,sBAAsBe;QACrC;IACJ;IAEA,MAAMC,UAAU;QACZf,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMiB,cAAcf,gBAAgB,sBAAsB,CAAC;IAE3D,OAAO,WAAP,GACI,oBAACgB,QAAMA;QACH,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAa;QACb,UAAU,CAACV;QACX,OAAOH,cAAc;QACrB,oBAAoB;QACpB,UAAUU;QACV,SAASpB;;AAGrB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/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.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\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        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Position\"}\n                />\n            }\n        >\n            <Select\n                size={\"md\"}\n                variant={\"secondary\"}\n                disabled={!hasBackgroundImage}\n                value={localValue ?? \"center\"}\n                displayResetAction={false}\n                onChange={onPositionChange}\n                options={options}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["POSITIONS","options","key","toTitleCaseLabel","BackgroundPosition","observer","elementId","styles","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","hasBackgroundImage","useMemo","parser","BackgroundImageParser","undefined","r","useEffect","onPositionChange","value","onReset","inheritance","SidebarRow","InheritanceLabel","Select"],"mappings":";;;;;;;;AASA,MAAMA,YAAY;IACd;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH;AAED,MAAMC,UAAUD,UAAU,GAAG,CAACE,CAAAA,MAAQ;QAAE,OAAOC,iBAAiBD;QAAM,OAAOA;IAAI;AAE1E,MAAME,qBAAqBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IAC5E,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IACvD,MAAM,CAACK,YAAYC,cAAc,GAAGC,SAAiBN,OAAO,kBAAkB;IAC9E,MAAMO,qBAAqBC,QAAQ;QAC/B,MAAMC,SAAS,IAAIC,sBAAsBV,OAAO,eAAe;QAC/D,OAAOS,AAAkDE,WAAlDF,OAAO,QAAQ,GAAG,IAAI,CAACG,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;IAC7C,GAAG;QAACZ,OAAO,eAAe;KAAC;IAE3Ba,UAAU;QACN,IAAIb,OAAO,kBAAkB,KAAKI,YAC9BC,cAAcL,OAAO,kBAAkB;IAE/C,GAAG;QAACA,OAAO,kBAAkB;KAAC;IAE9B,MAAMc,mBAAmB,CAACC;QACtBd,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,sBAAsBe;QACrC;IACJ;IAEA,MAAMC,UAAU;QACZf,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMiB,cAAcf,gBAAgB,sBAAsB,CAAC;IAE3D,OAAO,WAAP,GACI,oBAACgB,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,QAAMA;QACH,MAAM;QACN,SAAS;QACT,UAAU,CAACb;QACX,OAAOH,cAAc;QACrB,oBAAoB;QACpB,UAAUU;QACV,SAASpB;;AAIzB"}

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

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundScaling: (({ 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/BackgroundScaling.js

@@ -5,6 +5,7 @@ import { useStyles } from "../../useStyles.js";
 import { BackgroundImageParser } from "./BackgroundImageParser.js";
 import { toTitleCaseLabel } from "./toTitleCaseLabel.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const SCALING_MAP = [
     {
         name: "cover",
@@ -66,20 +67,22 @@ const BackgroundScaling = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap?.backgroundSize ?? {};
-    return /*#__PURE__*/ react.createElement(Select, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
             text: "Scaling"
-        }),
-        description: "Select image scaling",
+        })
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
         disabled: !hasBackgroundImage,
         value: scaling ? scaling.name : "",
         displayResetAction: false,
         onChange: onValueChange,
         options: options
-    });
+    }));
 });
 export { BackgroundScaling };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/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.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\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"],"names":["SCALING_MAP","options","item","toTitleCaseLabel","BackgroundScaling","observer","elementId","styles","onChange","inheritanceMap","useStyles","scaling","hasBackgroundImage","useMemo","parser","BackgroundImageParser","undefined","r","onValueChange","value","onReset","inheritance","Select","InheritanceLabel"],"mappings":";;;;;;;AAcA,MAAMA,cAAyB;IAC3B;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;CACH;AAED,MAAMC,UAAUD,YAAY,GAAG,CAACE,CAAAA,OAAS;QAAE,OAAOC,iBAAiBD,KAAK,IAAI;QAAG,OAAOA,KAAK,IAAI;IAAC;AAEzF,MAAME,oBAAoBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IAC3E,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,UAAUX,YAAY,IAAI,CAACE,CAAAA,OAEzBA,KAAK,cAAc,KAAKK,OAAO,cAAc,IAC7CL,KAAK,gBAAgB,KAAKK,OAAO,gBAAgB;IAIzD,MAAMK,qBAAqBC,QAAQ;QAC/B,MAAMC,SAAS,IAAIC,sBAAsBR,OAAO,eAAe;QAC/D,OAAOO,AAAkDE,WAAlDF,OAAO,QAAQ,GAAG,IAAI,CAACG,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;IAC7C,GAAG;QAACV,OAAO,eAAe;KAAC;IAE3B,MAAMW,gBAAgB,CAACC;QACnBX,SAAS,CAAC,EAAED,MAAM,EAAE;YAChB,MAAMI,UAAUX,YAAY,IAAI,CAACE,CAAAA,OAAQA,KAAK,IAAI,KAAKiB;YACvD,IAAIR,SAAS;gBACTJ,OAAO,GAAG,CAAC,oBAAoBI,QAAQ,gBAAgB;gBACvDJ,OAAO,GAAG,CAAC,kBAAkBI,QAAQ,cAAc;YACvD;QACJ;IACJ;IAEA,MAAMS,UAAU;QACZZ,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMc,cAAcZ,gBAAgB,kBAAkB,CAAC;IAEvD,OAAO,WAAP,GACI,oBAACa,QAAMA;QACH,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAa;QACb,UAAU,CAACT;QACX,OAAOD,UAAUA,QAAQ,IAAI,GAAG;QAChC,oBAAoB;QACpB,UAAUO;QACV,SAASjB;;AAGrB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/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.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\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        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Scaling\"}\n                />\n            }\n        >\n            <Select\n                size={\"md\"}\n                variant={\"secondary\"}\n                disabled={!hasBackgroundImage}\n                value={scaling ? scaling.name : \"\"}\n                displayResetAction={false}\n                onChange={onValueChange}\n                options={options}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["SCALING_MAP","options","item","toTitleCaseLabel","BackgroundScaling","observer","elementId","styles","onChange","inheritanceMap","useStyles","scaling","hasBackgroundImage","useMemo","parser","BackgroundImageParser","undefined","r","onValueChange","value","onReset","inheritance","SidebarRow","InheritanceLabel","Select"],"mappings":";;;;;;;;AAeA,MAAMA,cAAyB;IAC3B;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;CACH;AAED,MAAMC,UAAUD,YAAY,GAAG,CAACE,CAAAA,OAAS;QAAE,OAAOC,iBAAiBD,KAAK,IAAI;QAAG,OAAOA,KAAK,IAAI;IAAC;AAEzF,MAAME,oBAAoBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IAC3E,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,UAAUX,YAAY,IAAI,CAACE,CAAAA,OAEzBA,KAAK,cAAc,KAAKK,OAAO,cAAc,IAC7CL,KAAK,gBAAgB,KAAKK,OAAO,gBAAgB;IAIzD,MAAMK,qBAAqBC,QAAQ;QAC/B,MAAMC,SAAS,IAAIC,sBAAsBR,OAAO,eAAe;QAC/D,OAAOO,AAAkDE,WAAlDF,OAAO,QAAQ,GAAG,IAAI,CAACG,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;IAC7C,GAAG;QAACV,OAAO,eAAe;KAAC;IAE3B,MAAMW,gBAAgB,CAACC;QACnBX,SAAS,CAAC,EAAED,MAAM,EAAE;YAChB,MAAMI,UAAUX,YAAY,IAAI,CAACE,CAAAA,OAAQA,KAAK,IAAI,KAAKiB;YACvD,IAAIR,SAAS;gBACTJ,OAAO,GAAG,CAAC,oBAAoBI,QAAQ,gBAAgB;gBACvDJ,OAAO,GAAG,CAAC,kBAAkBI,QAAQ,cAAc;YACvD;QACJ;IACJ;IAEA,MAAMS,UAAU;QACZZ,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMc,cAAcZ,gBAAgB,kBAAkB,CAAC;IAEvD,OAAO,WAAP,GACI,oBAACa,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,QAAMA;QACH,MAAM;QACN,SAAS;QACT,UAAU,CAACZ;QACX,OAAOD,UAAUA,QAAQ,IAAI,GAAG;QAChC,oBAAoB;QACpB,UAAUO;QACV,SAASjB;;AAIzB"}

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

@@ -1,13 +1,17 @@
 import react from "react";
-import { Accordion, Grid } from "@webiny/admin-ui";
+import { Grid } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/bento.svg";
+import { StyleAccordion } from "../StyleAccordion.js";
 import { BackgroundImage } from "./Background/BackgroundImage.js";
 import { BackgroundColor } from "./Background/BackgroundColor.js";
 import { BackgroundPosition } from "./Background/BackgroundPosition.js";
 import { BackgroundScaling } from "./Background/BackgroundScaling.js";
-const Background = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+const Background = ({ elementId })=>/*#__PURE__*/ react.createElement(StyleAccordion.Item, {
         title: "Background",
-        description: "Set color and image background"
-    }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }, /*#__PURE__*/ react.createElement(Grid, {
+        gap: "small"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
         span: 12
     }, /*#__PURE__*/ react.createElement(BackgroundColor, {
         elementId: elementId

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion, Grid } from \"@webiny/admin-ui\";\nimport { BackgroundImage } from \"./Background/BackgroundImage.js\";\nimport { BackgroundColor } from \"./Background/BackgroundColor.js\";\nimport { BackgroundPosition } from \"./Background/BackgroundPosition.js\";\nimport { BackgroundScaling } from \"./Background/BackgroundScaling.js\";\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"],"names":["Background","elementId","Accordion","Grid","BackgroundColor","BackgroundImage","BackgroundPosition","BackgroundScaling"],"mappings":";;;;;;AAWO,MAAMA,aAAa,CAAC,EAAEC,SAAS,EAAmB,GAC9C,WAAP,GACI,oBAACC,UAAU,IAAI;QAAC,OAAO;QAAc,aAAa;qBAC9C,oBAACC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,iBAAeA;QAAC,WAAWH;uBAEhC,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,iBAAeA;QAAC,WAAWJ;uBAEhC,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACG,oBAAkBA;QAAC,WAAWL;uBAEnC,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACI,mBAAiBA;QAAC,WAAWN"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { ReactComponent as BackgroundIcon } from \"@webiny/icons/bento.svg\";\nimport { StyleAccordion } from \"../StyleAccordion.js\";\nimport { BackgroundImage } from \"./Background/BackgroundImage.js\";\nimport { BackgroundColor } from \"./Background/BackgroundColor.js\";\nimport { BackgroundPosition } from \"./Background/BackgroundPosition.js\";\nimport { BackgroundScaling } from \"./Background/BackgroundScaling.js\";\n\ninterface BackgroundProps {\n    elementId: string;\n}\n\nexport const Background = ({ elementId }: BackgroundProps) => {\n    return (\n        <StyleAccordion.Item title={\"Background\"} icon={<BackgroundIcon />}>\n            <Grid gap={\"small\"}>\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        </StyleAccordion.Item>\n    );\n};\n"],"names":["Background","elementId","StyleAccordion","BackgroundIcon","Grid","BackgroundColor","BackgroundImage","BackgroundPosition","BackgroundScaling"],"mappings":";;;;;;;;AAaO,MAAMA,aAAa,CAAC,EAAEC,SAAS,EAAmB,GAC9C,WAAP,GACI,oBAACC,eAAe,IAAI;QAAC,OAAO;QAAc,oBAAM,oBAACC,gBAAcA;qBAC3D,oBAACC,MAAIA;QAAC,KAAK;qBACP,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,iBAAeA;QAAC,WAAWJ;uBAEhC,oBAACG,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,iBAAeA;QAAC,WAAWL;uBAEhC,oBAACG,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACG,oBAAkBA;QAAC,WAAWN;uBAEnC,oBAACG,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACI,mBAAiBA;QAAC,WAAWP"}

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

@@ -4,7 +4,7 @@ import { BorderRadius } from "./BorderRadius.js";
 import { BorderStyle } from "./BorderStyle.js";
 import { BorderColor } from "./BorderColor.js";
 const BorderControl = ({ elementId })=>/*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col gap-sm w-full"
+        className: "flex flex-col gap-md w-full"
     }, /*#__PURE__*/ react.createElement(BorderWidth, {
         elementId: elementId
     }), /*#__PURE__*/ react.createElement(BorderRadius, {

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/Border.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/Border.tsx"],"sourcesContent":["import React from \"react\";\nimport { BorderWidth } from \"./BorderWidth.js\";\nimport { BorderRadius } from \"./BorderRadius.js\";\nimport { BorderStyle } from \"./BorderStyle.js\";\nimport { BorderColor } from \"./BorderColor.js\";\n\nexport const BorderControl = ({ elementId }: { elementId: string }) => {\n    return (\n        <div className=\"flex flex-col gap-sm w-full\">\n            <BorderWidth elementId={elementId} />\n            <BorderRadius elementId={elementId} />\n            <BorderStyle elementId={elementId} />\n            <BorderColor elementId={elementId} />\n        </div>\n    );\n};\n"],"names":["BorderControl","elementId","BorderWidth","BorderRadius","BorderStyle","BorderColor"],"mappings":";;;;;AAMO,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAyB,GACvD,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,aAAWA;QAAC,WAAWD;sBACxB,oBAACE,cAAYA;QAAC,WAAWF;sBACzB,oBAACG,aAAWA;QAAC,WAAWH;sBACxB,oBAACI,aAAWA;QAAC,WAAWJ"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/Border.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/Border.tsx"],"sourcesContent":["import React from \"react\";\nimport { BorderWidth } from \"./BorderWidth.js\";\nimport { BorderRadius } from \"./BorderRadius.js\";\nimport { BorderStyle } from \"./BorderStyle.js\";\nimport { BorderColor } from \"./BorderColor.js\";\n\nexport const BorderControl = ({ elementId }: { elementId: string }) => {\n    return (\n        <div className=\"flex flex-col gap-md w-full\">\n            <BorderWidth elementId={elementId} />\n            <BorderRadius elementId={elementId} />\n            <BorderStyle elementId={elementId} />\n            <BorderColor elementId={elementId} />\n        </div>\n    );\n};\n"],"names":["BorderControl","elementId","BorderWidth","BorderRadius","BorderStyle","BorderColor"],"mappings":";;;;;AAMO,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAyB,GACvD,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,aAAWA;QAAC,WAAWD;sBACxB,oBAACE,cAAYA;QAAC,WAAWF;sBACzB,oBAACG,aAAWA;QAAC,WAAWH;sBACxB,oBAACI,aAAWA;QAAC,WAAWJ"}

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

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

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.js

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { ColorPicker } from "@webiny/admin-ui";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const BorderColor = observer(({ elementId })=>{
     const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);
     const handleDrag = (value)=>{
@@ -21,18 +22,20 @@ const BorderColor = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap?.borderColor ?? {};
-    return /*#__PURE__*/ react.createElement(ColorPicker, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
             text: "Border color"
-        }),
-        description: "Select border color",
+        })
+    }, /*#__PURE__*/ react.createElement(ColorPicker, {
+        size: "md",
+        variant: "secondary",
         value: styles.borderColor ?? "transparent",
         onChange: handleDrag,
         onChangeComplete: handleCommit
-    });
+    }));
 });
 export { BorderColor };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\ninterface BorderColorProps {\n    elementId: string;\n}\n\nexport const BorderColor = observer(({ elementId }: BorderColorProps) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n\n    const handleDrag = (value: string) => {\n        onPreviewChange(({ styles }) => {\n            styles.set(\"borderColor\", value);\n        });\n    };\n\n    const handleCommit = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"borderColor\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"borderColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.borderColor ?? {};\n\n    return (\n        <ColorPicker\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Border color\"}\n                />\n            }\n            description={\"Select border color\"}\n            value={styles.borderColor ?? \"transparent\"}\n            onChange={handleDrag}\n            onChangeComplete={handleCommit}\n        />\n    );\n});\n"],"names":["BorderColor","observer","elementId","styles","onChange","onPreviewChange","inheritanceMap","useStyles","handleDrag","value","handleCommit","onReset","inheritance","ColorPicker","InheritanceLabel"],"mappings":";;;;;AAUO,MAAMA,cAAcC,SAAS,CAAC,EAAEC,SAAS,EAAoB;IAChE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGC,UAAUL;IAExE,MAAMM,aAAa,CAACC;QAChBJ,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,eAAeM;QAC9B;IACJ;IAEA,MAAMC,eAAe,CAACD;QAClBL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,eAAeM;QAC9B;IACJ;IAEA,MAAME,UAAU;QACZP,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMS,cAAcN,gBAAgB,eAAe,CAAC;IAEpD,OAAO,WAAP,GACI,oBAACO,aAAWA;QACR,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAa;QACb,OAAOT,OAAO,WAAW,IAAI;QAC7B,UAAUK;QACV,kBAAkBE;;AAG9B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ninterface BorderColorProps {\n    elementId: string;\n}\n\nexport const BorderColor = observer(({ elementId }: BorderColorProps) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n\n    const handleDrag = (value: string) => {\n        onPreviewChange(({ styles }) => {\n            styles.set(\"borderColor\", value);\n        });\n    };\n\n    const handleCommit = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"borderColor\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"borderColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.borderColor ?? {};\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Border color\"}\n                />\n            }\n        >\n            <ColorPicker\n                size={\"md\"}\n                variant={\"secondary\"}\n                value={styles.borderColor ?? \"transparent\"}\n                onChange={handleDrag}\n                onChangeComplete={handleCommit}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["BorderColor","observer","elementId","styles","onChange","onPreviewChange","inheritanceMap","useStyles","handleDrag","value","handleCommit","onReset","inheritance","SidebarRow","InheritanceLabel","ColorPicker"],"mappings":";;;;;;AAWO,MAAMA,cAAcC,SAAS,CAAC,EAAEC,SAAS,EAAoB;IAChE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGC,UAAUL;IAExE,MAAMM,aAAa,CAACC;QAChBJ,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,eAAeM;QAC9B;IACJ;IAEA,MAAMC,eAAe,CAACD;QAClBL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,eAAeM;QAC9B;IACJ;IAEA,MAAME,UAAU;QACZP,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMS,cAAcN,gBAAgB,eAAe,CAAC;IAEpD,OAAO,WAAP,GACI,oBAACO,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,aAAWA;QACR,MAAM;QACN,SAAS;QACT,OAAOZ,OAAO,WAAW,IAAI;QAC7B,UAAUK;QACV,kBAAkBE;;AAIlC"}

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

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

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.js

@@ -53,21 +53,13 @@ const BorderRadius = observer(({ elementId })=>{
     };
     const rowClassname = "flex flex-row w-full justify-center items-center py-xs";
     return /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col items-center bg-neutral-light border-sm border-neutral-muted relative rounded-md"
+        className: "flex flex-col items-center bg-neutral-light text-neutral-strong rounded-xl p-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-3 items-center w-full relative"
     }, /*#__PURE__*/ react.createElement("span", {
-        className: "absolute text-sm",
-        style: {
-            top: 3,
-            left: 5
-        }
-    }, "Border radius"), /*#__PURE__*/ react.createElement(LinkedEditing, {
-        linked: linked,
-        onToggle: onToggleLinkedEditing
-    }), /*#__PURE__*/ react.createElement("div", {
-        className: rowClassname,
-        style: {
-            paddingTop: "8px"
-        }
+        className: "text-sm"
+    }, "Border radius"), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center"
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: linked ? "Border radius" : "Top-left radius",
         ...topLeft,
@@ -76,6 +68,11 @@ const BorderRadius = observer(({ elementId })=>{
         onChange: onTopLeftChange,
         onChangePreview: onTopLeftPreviewChange
     })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-end"
+    }, /*#__PURE__*/ react.createElement(LinkedEditing, {
+        linked: linked,
+        onToggle: onToggleLinkedEditing
+    }))), /*#__PURE__*/ react.createElement("div", {
         className: rowClassname,
         style: {
             width: 168,

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { LinkedEditing } from \"./LinkedEditing.js\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { ValueSelector } from \"../../ValueSelector.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\nimport { UnitsOptions } from \"../../UnitsOptions.js\";\n\nconst radiusOptions = UnitsOptions.widthUnits().getOptions();\n\ninterface BorderRadiusProps {\n    elementId: string;\n}\n\nexport const BorderRadius = observer(({ elementId }: BorderRadiusProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const topLeft = useStyleValue(elementId, \"borderTopLeftRadius\");\n    const topRight = useStyleValue(elementId, \"borderTopRightRadius\");\n    const bottomRight = useStyleValue(elementId, \"borderBottomRightRadius\");\n    const bottomLeft = useStyleValue(elementId, \"borderBottomLeftRadius\");\n\n    const linked = metadata.get<boolean>(\"borderRadiusLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${topLeft.value ?? 0}${topLeft.unit}`;\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            }\n            metadata.set(\"borderRadiusLinkedEditing\", linked);\n        });\n    };\n\n    const onTopLeftChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"borderTopLeftRadius\", value);\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            });\n        } else {\n            topLeft.onChange(value);\n        }\n    };\n\n    const onTopLeftPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"borderTopLeftRadius\", value);\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            });\n        } else {\n            topLeft.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"borderTopLeftRadius\");\n                styles.unset(\"borderTopRightRadius\");\n                styles.unset(\"borderBottomRightRadius\");\n                styles.unset(\"borderBottomLeftRadius\");\n            });\n        } else {\n            topLeft.onReset();\n        }\n    };\n\n    const rowClassname = \"flex flex-row w-full justify-center items-center py-xs\";\n\n    return (\n        <div className=\"flex flex-col items-center bg-neutral-light border-sm border-neutral-muted relative rounded-md\">\n            <span className=\"absolute text-sm\" style={{ top: 3, left: 5 }}>\n                Border radius\n            </span>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Top-left (master when linked) */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={linked ? \"Border radius\" : \"Top-left radius\"}\n                    {...topLeft}\n                    onReset={onReset}\n                    units={radiusOptions}\n                    onChange={onTopLeftChange}\n                    onChangePreview={onTopLeftPreviewChange}\n                />\n            </div>\n\n            {/* Center row: bottom-left | box | top-right */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Bottom-left radius\"}\n                    {...bottomLeft}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n                <div\n                    className=\"flex border-sm border-neutral-muted bg-neutral-light items-center justify-center\"\n                    style={{ width: 170, height: 30, borderRadius: 8 }}\n                >\n                    -\n                </div>\n                <ValueSelector\n                    label={\"Top-right radius\"}\n                    {...topRight}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom-right */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom-right radius\"}\n                    {...bottomRight}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["radiusOptions","UnitsOptions","BorderRadius","observer","elementId","onChange","onPreviewChange","metadata","useStyles","topLeft","useStyleValue","topRight","bottomRight","bottomLeft","linked","onToggleLinkedEditing","styles","value","onTopLeftChange","onTopLeftPreviewChange","onReset","rowClassname","LinkedEditing","ValueSelector"],"mappings":";;;;;;;AAQA,MAAMA,gBAAgBC,aAAa,UAAU,GAAG,UAAU;AAMnD,MAAMC,eAAeC,SAAS,CAAC,EAAEC,SAAS,EAAqB;IAClE,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUJ;IAE1D,MAAMK,UAAUC,cAAcN,WAAW;IACzC,MAAMO,WAAWD,cAAcN,WAAW;IAC1C,MAAMQ,cAAcF,cAAcN,WAAW;IAC7C,MAAMS,aAAaH,cAAcN,WAAW;IAE5C,MAAMU,SAASP,SAAS,GAAG,CAAU,gCAAgC;IAErE,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,QAAQ,GAAGR,QAAQ,KAAK,IAAI,IAAIA,QAAQ,IAAI,EAAE;gBACpDO,OAAO,GAAG,CAAC,wBAAwBC;gBACnCD,OAAO,GAAG,CAAC,2BAA2BC;gBACtCD,OAAO,GAAG,CAAC,0BAA0BC;YACzC;YACAV,SAAS,GAAG,CAAC,6BAA6BO;QAC9C;IACJ;IAEA,MAAMI,kBAAkB,CAACD;QACrB,IAAIH,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,uBAAuBC;YAClCD,OAAO,GAAG,CAAC,wBAAwBC;YACnCD,OAAO,GAAG,CAAC,2BAA2BC;YACtCD,OAAO,GAAG,CAAC,0BAA0BC;QACzC;aAEAR,QAAQ,QAAQ,CAACQ;IAEzB;IAEA,MAAME,yBAAyB,CAACF;QAC5B,IAAIH,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,uBAAuBC;YAClCD,OAAO,GAAG,CAAC,wBAAwBC;YACnCD,OAAO,GAAG,CAAC,2BAA2BC;YACtCD,OAAO,GAAG,CAAC,0BAA0BC;QACzC;aAEAR,QAAQ,eAAe,CAACQ;IAEhC;IAEA,MAAMG,UAAU;QACZ,IAAIN,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;aAEAP,QAAQ,OAAO;IAEvB;IAEA,MAAMY,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAK,WAAU;QAAmB,OAAO;YAAE,KAAK;YAAG,MAAM;QAAE;OAAG,gCAI/D,oBAACC,eAAaA;QAAC,QAAQR;QAAQ,UAAUC;sBAGzC,oBAAC;QAAI,WAAWM;QAAc,OAAO;YAAE,YAAY;QAAM;qBACrD,oBAACE,eAAaA;QACV,OAAOT,SAAS,kBAAkB;QACjC,GAAGL,OAAO;QACX,SAASW;QACT,OAAOpB;QACP,UAAUkB;QACV,iBAAiBC;uBAKzB,oBAAC;QAAI,WAAWE;QAAc,OAAO;YAAE,OAAO;YAAK,YAAY;QAAM;qBACjE,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGV,UAAU;QACd,OAAOb;QACP,UAAUc;sBAEd,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,OAAO;YAAK,QAAQ;YAAI,cAAc;QAAE;OACpD,oBAGD,oBAACS,eAAaA;QACV,OAAO;QACN,GAAGZ,QAAQ;QACZ,OAAOX;QACP,UAAUc;uBAKlB,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGX,WAAW;QACf,OAAOZ;QACP,UAAUc;;AAK9B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { LinkedEditing } from \"./LinkedEditing.js\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { ValueSelector } from \"../../ValueSelector.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\nimport { UnitsOptions } from \"../../UnitsOptions.js\";\n\nconst radiusOptions = UnitsOptions.widthUnits().getOptions();\n\ninterface BorderRadiusProps {\n    elementId: string;\n}\n\nexport const BorderRadius = observer(({ elementId }: BorderRadiusProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const topLeft = useStyleValue(elementId, \"borderTopLeftRadius\");\n    const topRight = useStyleValue(elementId, \"borderTopRightRadius\");\n    const bottomRight = useStyleValue(elementId, \"borderBottomRightRadius\");\n    const bottomLeft = useStyleValue(elementId, \"borderBottomLeftRadius\");\n\n    const linked = metadata.get<boolean>(\"borderRadiusLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${topLeft.value ?? 0}${topLeft.unit}`;\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            }\n            metadata.set(\"borderRadiusLinkedEditing\", linked);\n        });\n    };\n\n    const onTopLeftChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"borderTopLeftRadius\", value);\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            });\n        } else {\n            topLeft.onChange(value);\n        }\n    };\n\n    const onTopLeftPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"borderTopLeftRadius\", value);\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            });\n        } else {\n            topLeft.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"borderTopLeftRadius\");\n                styles.unset(\"borderTopRightRadius\");\n                styles.unset(\"borderBottomRightRadius\");\n                styles.unset(\"borderBottomLeftRadius\");\n            });\n        } else {\n            topLeft.onReset();\n        }\n    };\n\n    const rowClassname = \"flex flex-row w-full justify-center items-center py-xs\";\n\n    return (\n        <div className=\"flex flex-col items-center bg-neutral-light text-neutral-strong rounded-xl p-sm\">\n            {/* Top-left (master when linked) */}\n            <div className={\"grid grid-cols-3 items-center w-full relative\"}>\n                <span className=\"text-sm\">Border radius</span>\n                <div className={\"flex justify-center\"}>\n                    <ValueSelector\n                        label={linked ? \"Border radius\" : \"Top-left radius\"}\n                        {...topLeft}\n                        onReset={onReset}\n                        units={radiusOptions}\n                        onChange={onTopLeftChange}\n                        onChangePreview={onTopLeftPreviewChange}\n                    />\n                </div>\n                <div className={\"flex justify-end\"}>\n                    <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n                </div>\n            </div>\n\n            {/* Center row: bottom-left | box | top-right */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Bottom-left radius\"}\n                    {...bottomLeft}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n                <div\n                    className=\"flex border-sm border-neutral-muted bg-neutral-light items-center justify-center\"\n                    style={{ width: 170, height: 30, borderRadius: 8 }}\n                >\n                    -\n                </div>\n                <ValueSelector\n                    label={\"Top-right radius\"}\n                    {...topRight}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom-right */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom-right radius\"}\n                    {...bottomRight}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["radiusOptions","UnitsOptions","BorderRadius","observer","elementId","onChange","onPreviewChange","metadata","useStyles","topLeft","useStyleValue","topRight","bottomRight","bottomLeft","linked","onToggleLinkedEditing","styles","value","onTopLeftChange","onTopLeftPreviewChange","onReset","rowClassname","ValueSelector","LinkedEditing"],"mappings":";;;;;;;AAQA,MAAMA,gBAAgBC,aAAa,UAAU,GAAG,UAAU;AAMnD,MAAMC,eAAeC,SAAS,CAAC,EAAEC,SAAS,EAAqB;IAClE,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUJ;IAE1D,MAAMK,UAAUC,cAAcN,WAAW;IACzC,MAAMO,WAAWD,cAAcN,WAAW;IAC1C,MAAMQ,cAAcF,cAAcN,WAAW;IAC7C,MAAMS,aAAaH,cAAcN,WAAW;IAE5C,MAAMU,SAASP,SAAS,GAAG,CAAU,gCAAgC;IAErE,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,QAAQ,GAAGR,QAAQ,KAAK,IAAI,IAAIA,QAAQ,IAAI,EAAE;gBACpDO,OAAO,GAAG,CAAC,wBAAwBC;gBACnCD,OAAO,GAAG,CAAC,2BAA2BC;gBACtCD,OAAO,GAAG,CAAC,0BAA0BC;YACzC;YACAV,SAAS,GAAG,CAAC,6BAA6BO;QAC9C;IACJ;IAEA,MAAMI,kBAAkB,CAACD;QACrB,IAAIH,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,uBAAuBC;YAClCD,OAAO,GAAG,CAAC,wBAAwBC;YACnCD,OAAO,GAAG,CAAC,2BAA2BC;YACtCD,OAAO,GAAG,CAAC,0BAA0BC;QACzC;aAEAR,QAAQ,QAAQ,CAACQ;IAEzB;IAEA,MAAME,yBAAyB,CAACF;QAC5B,IAAIH,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,uBAAuBC;YAClCD,OAAO,GAAG,CAAC,wBAAwBC;YACnCD,OAAO,GAAG,CAAC,2BAA2BC;YACtCD,OAAO,GAAG,CAAC,0BAA0BC;QACzC;aAEAR,QAAQ,eAAe,CAACQ;IAEhC;IAEA,MAAMG,UAAU;QACZ,IAAIN,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;aAEAP,QAAQ,OAAO;IAEvB;IAEA,MAAMY,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBAEX,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAK,WAAU;OAAU,gCAC1B,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA;QACV,OAAOR,SAAS,kBAAkB;QACjC,GAAGL,OAAO;QACX,SAASW;QACT,OAAOpB;QACP,UAAUkB;QACV,iBAAiBC;uBAGzB,oBAAC;QAAI,WAAW;qBACZ,oBAACI,eAAaA;QAAC,QAAQT;QAAQ,UAAUC;wBAKjD,oBAAC;QAAI,WAAWM;QAAc,OAAO;YAAE,OAAO;YAAK,YAAY;QAAM;qBACjE,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGT,UAAU;QACd,OAAOb;QACP,UAAUc;sBAEd,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,OAAO;YAAK,QAAQ;YAAI,cAAc;QAAE;OACpD,oBAGD,oBAACQ,eAAaA;QACV,OAAO;QACN,GAAGX,QAAQ;QACZ,OAAOX;QACP,UAAUc;uBAKlB,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGV,WAAW;QACf,OAAOZ;QACP,UAAUc;;AAK9B"}

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

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