@webiny/app-website-builder 6.4.0-beta.3 → 6.4.0-beta.4

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.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.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.js

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { Select } from "@webiny/admin-ui";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const options = [
     {
         label: "None",
@@ -38,19 +39,21 @@ const BorderStyle = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap?.borderStyle ?? {};
-    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: "Border style"
-        }),
-        description: "Select border style",
+        })
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
         value: styles.borderStyle ?? "none",
         displayResetAction: false,
         onChange: onValueChange,
         options: options
-    });
+    }));
 });
 export { BorderStyle };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\nconst options = [\n    { label: \"None\", value: \"none\" },\n    { label: \"Solid\", value: \"solid\" },\n    { label: \"Dashed\", value: \"dashed\" },\n    { label: \"Dotted\", value: \"dotted\" },\n    { label: \"Double\", value: \"double\" }\n];\n\ninterface BorderStyleProps {\n    elementId: string;\n}\n\nexport const BorderStyle = observer(({ elementId }: BorderStyleProps) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const onValueChange = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"borderStyle\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"borderStyle\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.borderStyle ?? {};\n\n    return (\n        <Select\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Border style\"}\n                />\n            }\n            description={\"Select border style\"}\n            value={styles.borderStyle ?? \"none\"}\n            displayResetAction={false}\n            onChange={onValueChange}\n            options={options}\n        />\n    );\n});\n"],"names":["options","BorderStyle","observer","elementId","styles","onChange","inheritanceMap","useStyles","onValueChange","value","onReset","inheritance","Select","InheritanceLabel"],"mappings":";;;;;AAMA,MAAMA,UAAU;IACZ;QAAE,OAAO;QAAQ,OAAO;IAAO;IAC/B;QAAE,OAAO;QAAS,OAAO;IAAQ;IACjC;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAU,OAAO;IAAS;CACtC;AAMM,MAAMC,cAAcC,SAAS,CAAC,EAAEC,SAAS,EAAoB;IAChE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,gBAAgB,CAACC;QACnBJ,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,eAAeK;QAC9B;IACJ;IAEA,MAAMC,UAAU;QACZL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMO,cAAcL,gBAAgB,eAAe,CAAC;IAEpD,OAAO,WAAP,GACI,oBAACM,QAAMA;QACH,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAa;QACb,OAAOP,OAAO,WAAW,IAAI;QAC7B,oBAAoB;QACpB,UAAUI;QACV,SAASR;;AAGrB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } 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\nconst options = [\n    { label: \"None\", value: \"none\" },\n    { label: \"Solid\", value: \"solid\" },\n    { label: \"Dashed\", value: \"dashed\" },\n    { label: \"Dotted\", value: \"dotted\" },\n    { label: \"Double\", value: \"double\" }\n];\n\ninterface BorderStyleProps {\n    elementId: string;\n}\n\nexport const BorderStyle = observer(({ elementId }: BorderStyleProps) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const onValueChange = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"borderStyle\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"borderStyle\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.borderStyle ?? {};\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Border style\"}\n                />\n            }\n        >\n            <Select\n                size={\"md\"}\n                variant={\"secondary\"}\n                value={styles.borderStyle ?? \"none\"}\n                displayResetAction={false}\n                onChange={onValueChange}\n                options={options}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["options","BorderStyle","observer","elementId","styles","onChange","inheritanceMap","useStyles","onValueChange","value","onReset","inheritance","SidebarRow","InheritanceLabel","Select"],"mappings":";;;;;;AAOA,MAAMA,UAAU;IACZ;QAAE,OAAO;QAAQ,OAAO;IAAO;IAC/B;QAAE,OAAO;QAAS,OAAO;IAAQ;IACjC;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAU,OAAO;IAAS;CACtC;AAMM,MAAMC,cAAcC,SAAS,CAAC,EAAEC,SAAS,EAAoB;IAChE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,gBAAgB,CAACC;QACnBJ,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,eAAeK;QAC9B;IACJ;IAEA,MAAMC,UAAU;QACZL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMO,cAAcL,gBAAgB,eAAe,CAAC;IAEpD,OAAO,WAAP,GACI,oBAACM,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,QAAMA;QACH,MAAM;QACN,SAAS;QACT,OAAOV,OAAO,WAAW,IAAI;QAC7B,oBAAoB;QACpB,UAAUI;QACV,SAASR;;AAIzB"}

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

@@ -54,21 +54,13 @@ const BorderWidth = 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 width"), /*#__PURE__*/ react.createElement(LinkedEditing, {
-        linked: linked,
-        onToggle: onToggleLinkedEditing
-    }), /*#__PURE__*/ react.createElement("div", {
-        className: rowClassname,
-        style: {
-            paddingTop: "8px"
-        }
+        className: "text-sm"
+    }, "Border width"), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center"
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: linked ? "Border width" : "Top border width",
         ...borderTopWidth,
@@ -77,6 +69,11 @@ const BorderWidth = observer(({ elementId })=>{
         onChange: onBorderTopWidthChange,
         onChangePreview: onBorderTopWidthPreviewChange
     })), /*#__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/BorderWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderWidth.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderWidth.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 widthOptions = UnitsOptions.widthUnits().getOptions();\nconst heightOptions = UnitsOptions.heightUnits().getOptions();\n\ninterface BorderWidthProps {\n    elementId: string;\n}\n\nexport const BorderWidth = observer(({ elementId }: BorderWidthProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const borderTopWidth = useStyleValue(elementId, \"borderTopWidth\");\n    const borderRightWidth = useStyleValue(elementId, \"borderRightWidth\");\n    const borderBottomWidth = useStyleValue(elementId, \"borderBottomWidth\");\n    const borderLeftWidth = useStyleValue(elementId, \"borderLeftWidth\");\n\n    const linked = metadata.get<boolean>(\"borderWidthLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${borderTopWidth.value ?? 0}${borderTopWidth.unit}`;\n                styles.set(\"borderRightWidth\", value);\n                styles.set(\"borderBottomWidth\", value);\n                styles.set(\"borderLeftWidth\", value);\n            }\n            metadata.set(\"borderWidthLinkedEditing\", linked);\n        });\n    };\n\n    const onBorderTopWidthChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"borderTopWidth\", value);\n                styles.set(\"borderRightWidth\", value);\n                styles.set(\"borderBottomWidth\", value);\n                styles.set(\"borderLeftWidth\", value);\n            });\n        } else {\n            borderTopWidth.onChange(value);\n        }\n    };\n\n    const onBorderTopWidthPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"borderTopWidth\", value);\n                styles.set(\"borderRightWidth\", value);\n                styles.set(\"borderBottomWidth\", value);\n                styles.set(\"borderLeftWidth\", value);\n            });\n        } else {\n            borderTopWidth.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"borderTopWidth\");\n                styles.unset(\"borderRightWidth\");\n                styles.unset(\"borderBottomWidth\");\n                styles.unset(\"borderLeftWidth\");\n            });\n        } else {\n            borderTopWidth.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 width\n            </span>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Top border width */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={linked ? \"Border width\" : \"Top border width\"}\n                    {...borderTopWidth}\n                    onReset={onReset}\n                    units={heightOptions}\n                    onChange={onBorderTopWidthChange}\n                    onChangePreview={onBorderTopWidthPreviewChange}\n                />\n            </div>\n\n            {/* Center Row (Left + placeholder + Right) */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Left border width\"}\n                    {...borderLeftWidth}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                <div\n                    className=\"flex border-sm border-neutral-muted bg-neutral-light rounded-md items-center justify-center\"\n                    style={{ width: 170, height: 30 }}\n                >\n                    -\n                </div>\n                <ValueSelector\n                    label={\"Right border width\"}\n                    {...borderRightWidth}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom border width */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom border width\"}\n                    {...borderBottomWidth}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["widthOptions","UnitsOptions","heightOptions","BorderWidth","observer","elementId","onChange","onPreviewChange","metadata","useStyles","borderTopWidth","useStyleValue","borderRightWidth","borderBottomWidth","borderLeftWidth","linked","onToggleLinkedEditing","styles","value","onBorderTopWidthChange","onBorderTopWidthPreviewChange","onReset","rowClassname","LinkedEditing","ValueSelector"],"mappings":";;;;;;;AAQA,MAAMA,eAAeC,aAAa,UAAU,GAAG,UAAU;AACzD,MAAMC,gBAAgBD,aAAa,WAAW,GAAG,UAAU;AAMpD,MAAME,cAAcC,SAAS,CAAC,EAAEC,SAAS,EAAoB;IAChE,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUJ;IAE1D,MAAMK,iBAAiBC,cAAcN,WAAW;IAChD,MAAMO,mBAAmBD,cAAcN,WAAW;IAClD,MAAMQ,oBAAoBF,cAAcN,WAAW;IACnD,MAAMS,kBAAkBH,cAAcN,WAAW;IAEjD,MAAMU,SAASP,SAAS,GAAG,CAAU,+BAA+B;IAEpE,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,QAAQ,GAAGR,eAAe,KAAK,IAAI,IAAIA,eAAe,IAAI,EAAE;gBAClEO,OAAO,GAAG,CAAC,oBAAoBC;gBAC/BD,OAAO,GAAG,CAAC,qBAAqBC;gBAChCD,OAAO,GAAG,CAAC,mBAAmBC;YAClC;YACAV,SAAS,GAAG,CAAC,4BAA4BO;QAC7C;IACJ;IAEA,MAAMI,yBAAyB,CAACD;QAC5B,IAAIH,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,kBAAkBC;YAC7BD,OAAO,GAAG,CAAC,oBAAoBC;YAC/BD,OAAO,GAAG,CAAC,qBAAqBC;YAChCD,OAAO,GAAG,CAAC,mBAAmBC;QAClC;aAEAR,eAAe,QAAQ,CAACQ;IAEhC;IAEA,MAAME,gCAAgC,CAACF;QACnC,IAAIH,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,kBAAkBC;YAC7BD,OAAO,GAAG,CAAC,oBAAoBC;YAC/BD,OAAO,GAAG,CAAC,qBAAqBC;YAChCD,OAAO,GAAG,CAAC,mBAAmBC;QAClC;aAEAR,eAAe,eAAe,CAACQ;IAEvC;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,eAAe,OAAO;IAE9B;IAEA,MAAMY,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAK,WAAU;QAAmB,OAAO;YAAE,KAAK;YAAG,MAAM;QAAE;OAAG,+BAI/D,oBAACC,eAAaA;QAAC,QAAQR;QAAQ,UAAUC;sBAGzC,oBAAC;QAAI,WAAWM;QAAc,OAAO;YAAE,YAAY;QAAM;qBACrD,oBAACE,eAAaA;QACV,OAAOT,SAAS,iBAAiB;QAChC,GAAGL,cAAc;QAClB,SAASW;QACT,OAAOnB;QACP,UAAUiB;QACV,iBAAiBC;uBAKzB,oBAAC;QAAI,WAAWE;QAAc,OAAO;YAAE,OAAO;YAAK,YAAY;QAAM;qBACjE,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGV,eAAe;QACnB,OAAOd;QACP,UAAUe;sBAEd,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,OAAO;YAAK,QAAQ;QAAG;OACnC,oBAGD,oBAACS,eAAaA;QACV,OAAO;QACN,GAAGZ,gBAAgB;QACpB,OAAOZ;QACP,UAAUe;uBAKlB,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGX,iBAAiB;QACrB,OAAOX;QACP,UAAUa;;AAK9B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderWidth.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderWidth.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 widthOptions = UnitsOptions.widthUnits().getOptions();\nconst heightOptions = UnitsOptions.heightUnits().getOptions();\n\ninterface BorderWidthProps {\n    elementId: string;\n}\n\nexport const BorderWidth = observer(({ elementId }: BorderWidthProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const borderTopWidth = useStyleValue(elementId, \"borderTopWidth\");\n    const borderRightWidth = useStyleValue(elementId, \"borderRightWidth\");\n    const borderBottomWidth = useStyleValue(elementId, \"borderBottomWidth\");\n    const borderLeftWidth = useStyleValue(elementId, \"borderLeftWidth\");\n\n    const linked = metadata.get<boolean>(\"borderWidthLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${borderTopWidth.value ?? 0}${borderTopWidth.unit}`;\n                styles.set(\"borderRightWidth\", value);\n                styles.set(\"borderBottomWidth\", value);\n                styles.set(\"borderLeftWidth\", value);\n            }\n            metadata.set(\"borderWidthLinkedEditing\", linked);\n        });\n    };\n\n    const onBorderTopWidthChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"borderTopWidth\", value);\n                styles.set(\"borderRightWidth\", value);\n                styles.set(\"borderBottomWidth\", value);\n                styles.set(\"borderLeftWidth\", value);\n            });\n        } else {\n            borderTopWidth.onChange(value);\n        }\n    };\n\n    const onBorderTopWidthPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"borderTopWidth\", value);\n                styles.set(\"borderRightWidth\", value);\n                styles.set(\"borderBottomWidth\", value);\n                styles.set(\"borderLeftWidth\", value);\n            });\n        } else {\n            borderTopWidth.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"borderTopWidth\");\n                styles.unset(\"borderRightWidth\");\n                styles.unset(\"borderBottomWidth\");\n                styles.unset(\"borderLeftWidth\");\n            });\n        } else {\n            borderTopWidth.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 border width */}\n            <div className={\"grid grid-cols-3 items-center w-full relative\"}>\n                <span className=\"text-sm\">Border width</span>\n                <div className={\"flex justify-center\"}>\n                    <ValueSelector\n                        label={linked ? \"Border width\" : \"Top border width\"}\n                        {...borderTopWidth}\n                        onReset={onReset}\n                        units={heightOptions}\n                        onChange={onBorderTopWidthChange}\n                        onChangePreview={onBorderTopWidthPreviewChange}\n                    />\n                </div>\n                <div className={\"flex justify-end\"}>\n                    <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n                </div>\n            </div>\n\n            {/* Center Row (Left + placeholder + Right) */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Left border width\"}\n                    {...borderLeftWidth}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                <div\n                    className=\"flex border-sm border-neutral-muted bg-neutral-light rounded-md items-center justify-center\"\n                    style={{ width: 170, height: 30 }}\n                >\n                    -\n                </div>\n                <ValueSelector\n                    label={\"Right border width\"}\n                    {...borderRightWidth}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom border width */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom border width\"}\n                    {...borderBottomWidth}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["widthOptions","UnitsOptions","heightOptions","BorderWidth","observer","elementId","onChange","onPreviewChange","metadata","useStyles","borderTopWidth","useStyleValue","borderRightWidth","borderBottomWidth","borderLeftWidth","linked","onToggleLinkedEditing","styles","value","onBorderTopWidthChange","onBorderTopWidthPreviewChange","onReset","rowClassname","ValueSelector","LinkedEditing"],"mappings":";;;;;;;AAQA,MAAMA,eAAeC,aAAa,UAAU,GAAG,UAAU;AACzD,MAAMC,gBAAgBD,aAAa,WAAW,GAAG,UAAU;AAMpD,MAAME,cAAcC,SAAS,CAAC,EAAEC,SAAS,EAAoB;IAChE,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUJ;IAE1D,MAAMK,iBAAiBC,cAAcN,WAAW;IAChD,MAAMO,mBAAmBD,cAAcN,WAAW;IAClD,MAAMQ,oBAAoBF,cAAcN,WAAW;IACnD,MAAMS,kBAAkBH,cAAcN,WAAW;IAEjD,MAAMU,SAASP,SAAS,GAAG,CAAU,+BAA+B;IAEpE,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,QAAQ,GAAGR,eAAe,KAAK,IAAI,IAAIA,eAAe,IAAI,EAAE;gBAClEO,OAAO,GAAG,CAAC,oBAAoBC;gBAC/BD,OAAO,GAAG,CAAC,qBAAqBC;gBAChCD,OAAO,GAAG,CAAC,mBAAmBC;YAClC;YACAV,SAAS,GAAG,CAAC,4BAA4BO;QAC7C;IACJ;IAEA,MAAMI,yBAAyB,CAACD;QAC5B,IAAIH,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,kBAAkBC;YAC7BD,OAAO,GAAG,CAAC,oBAAoBC;YAC/BD,OAAO,GAAG,CAAC,qBAAqBC;YAChCD,OAAO,GAAG,CAAC,mBAAmBC;QAClC;aAEAR,eAAe,QAAQ,CAACQ;IAEhC;IAEA,MAAME,gCAAgC,CAACF;QACnC,IAAIH,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,kBAAkBC;YAC7BD,OAAO,GAAG,CAAC,oBAAoBC;YAC/BD,OAAO,GAAG,CAAC,qBAAqBC;YAChCD,OAAO,GAAG,CAAC,mBAAmBC;QAClC;aAEAR,eAAe,eAAe,CAACQ;IAEvC;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,eAAe,OAAO;IAE9B;IAEA,MAAMY,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBAEX,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAK,WAAU;OAAU,+BAC1B,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA;QACV,OAAOR,SAAS,iBAAiB;QAChC,GAAGL,cAAc;QAClB,SAASW;QACT,OAAOnB;QACP,UAAUiB;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,eAAe;QACnB,OAAOd;QACP,UAAUe;sBAEd,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,OAAO;YAAK,QAAQ;QAAG;OACnC,oBAGD,oBAACQ,eAAaA;QACV,OAAO;QACN,GAAGX,gBAAgB;QACpB,OAAOZ;QACP,UAAUe;uBAKlB,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGV,iBAAiB;QACrB,OAAOX;QACP,UAAUa;;AAK9B"}

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

@@ -1,17 +1,14 @@
 import react from "react";
-import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/border_all.svg";
+import { StyleAccordion } from "../StyleAccordion.js";
 import { BorderControl } from "./Border/Border.js";
-const Border = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+const Border = ({ elementId })=>/*#__PURE__*/ react.createElement(StyleAccordion.Item, {
         title: "Border",
-        description: "Set border width, radius, style, and color"
-    }, /*#__PURE__*/ react.createElement("div", {
-        style: {
-            width: 280,
-            marginLeft: -8
-        }
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        noPadding: true
     }, /*#__PURE__*/ react.createElement(BorderControl, {
         elementId: elementId
-    })));
+    }));
 export { Border };
 
 //# sourceMappingURL=Border.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { BorderControl } from \"./Border/Border.js\";\n\ninterface BorderProps {\n    elementId: string;\n}\n\nexport const Border = ({ elementId }: BorderProps) => {\n    return (\n        <Accordion.Item title={\"Border\"} description={\"Set border width, radius, style, and color\"}>\n            <div style={{ width: 280, marginLeft: -8 }}>\n                <BorderControl elementId={elementId} />\n            </div>\n        </Accordion.Item>\n    );\n};\n"],"names":["Border","elementId","Accordion","BorderControl"],"mappings":";;;AAQO,MAAMA,SAAS,CAAC,EAAEC,SAAS,EAAe,GACtC,WAAP,GACI,oBAACC,UAAU,IAAI;QAAC,OAAO;QAAU,aAAa;qBAC1C,oBAAC;QAAI,OAAO;YAAE,OAAO;YAAK,YAAY;QAAG;qBACrC,oBAACC,eAAaA;QAAC,WAAWF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as BorderIcon } from \"@webiny/icons/border_all.svg\";\nimport { StyleAccordion } from \"../StyleAccordion.js\";\nimport { BorderControl } from \"./Border/Border.js\";\n\ninterface BorderProps {\n    elementId: string;\n}\n\nexport const Border = ({ elementId }: BorderProps) => {\n    return (\n        <StyleAccordion.Item title={\"Border\"} icon={<BorderIcon />} noPadding>\n            <BorderControl elementId={elementId} />\n        </StyleAccordion.Item>\n    );\n};\n"],"names":["Border","elementId","StyleAccordion","BorderIcon","BorderControl"],"mappings":";;;;AASO,MAAMA,SAAS,CAAC,EAAEC,SAAS,EAAe,GACtC,WAAP,GACI,oBAACC,eAAe,IAAI;QAAC,OAAO;QAAU,oBAAM,oBAACC,gBAAUA;QAAK;qBACxD,oBAACC,eAAaA;QAAC,WAAWH"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.js

@@ -8,6 +8,7 @@ import { ReactComponent as align_horizontal_right_svg_ReactComponent } from "@we
 import { ReactComponent as align_horizontal_center_svg_ReactComponent } from "@webiny/icons/align_horizontal_center.svg";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 import { IconButton } from "./IconButton.js";
 const activeVariant = "secondary";
 const inactiveVariant = "ghost";
@@ -70,11 +71,13 @@ const Alignment = observer(({ elementId })=>{
         inheritanceMap.marginBottom,
         inheritanceMap.marginLeft
     ].filter(Boolean).some((item)=>item.overridden);
-    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(InheritanceLabel, {
-        text: "Align",
-        onReset: onReset,
-        isOverridden: isOverridden
-    }), /*#__PURE__*/ react.createElement("div", {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
+        label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
+            text: "Align",
+            onReset: onReset,
+            isOverridden: isOverridden
+        })
+    }, /*#__PURE__*/ react.createElement("div", {
         className: "flex flex-row w-full justify-between"
     }, /*#__PURE__*/ react.createElement(IconButton, {
         icon: /*#__PURE__*/ react.createElement(align_horizontal_left_svg_ReactComponent, null),

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ReactComponent as AlignToBottom } from \"@webiny/icons/vertical_align_bottom.svg\";\nimport { ReactComponent as AlignToTop } from \"@webiny/icons/vertical_align_top.svg\";\nimport { ReactComponent as CenterVertically } from \"@webiny/icons/vertical_align_center.svg\";\nimport { ReactComponent as AlignLeft } from \"@webiny/icons/align_horizontal_left.svg\";\nimport { ReactComponent as AlignRight } from \"@webiny/icons/align_horizontal_right.svg\";\nimport { ReactComponent as CenterHorizontally } from \"@webiny/icons/align_horizontal_center.svg\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst activeVariant = \"secondary\";\nconst inactiveVariant = \"ghost\";\n\n/**\n * Alignment is controlled with margin and display: flex.\n * -----\n * Align to the left => margin-right: auto;\n * Align to the right => margin-left: auto;\n * Center horizontally => margin-left: auto; margin-right: auto;\n * Full width: unset margin-left and margin-right.\n * -----\n * Align to the top => margin-bottom: auto;\n * Align to the bottom => margin-top: auto;\n * Center vertically => margin-top: auto; margin-bottom: auto;\n */\nexport const Alignment = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    /**\n     * Horizontal alignment\n     */\n    const onAlignLeft = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginRight\", \"auto\");\n            if (styles.get(\"marginLeft\") === \"auto\") {\n                styles.set(\"marginLeft\", \"unset\");\n            }\n        });\n    };\n\n    const onAlignRight = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginLeft\", \"auto\");\n            if (styles.get(\"marginRight\") === \"auto\") {\n                styles.set(\"marginRight\", \"unset\");\n            }\n        });\n    };\n\n    const onCenterHorizontally = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginLeft\", \"auto\");\n            styles.set(\"marginRight\", \"auto\");\n        });\n    };\n\n    /**\n     * Vertical alignment\n     */\n    const onAlignTop = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginBottom\", \"auto\");\n            if (styles.get(\"marginTop\") === \"auto\") {\n                styles.set(\"marginTop\", \"unset\");\n            }\n        });\n    };\n\n    const onCenterVertically = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginTop\", \"auto\");\n            styles.set(\"marginBottom\", \"auto\");\n        });\n    };\n\n    const onAlignBottom = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginTop\", \"auto\");\n            if (styles.get(\"marginBottom\") === \"auto\") {\n                styles.set(\"marginBottom\", \"unset\");\n            }\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"width\");\n            styles.unset(\"marginTop\");\n            styles.unset(\"marginRight\");\n            styles.unset(\"marginBottom\");\n            styles.unset(\"marginLeft\");\n        });\n    };\n\n    const isLeftAligned = styles.marginRight === \"auto\" && styles.marginLeft !== \"auto\";\n    const isHorizontallyCentered = styles.marginRight === \"auto\" && styles.marginLeft === \"auto\";\n    const isRightAligned = styles.marginRight !== \"auto\" && styles.marginLeft === \"auto\";\n    const isAlignedToTop = styles.marginBottom === \"auto\" && styles.marginTop !== \"auto\";\n    const isAlignedToBottom = styles.marginBottom !== \"auto\" && styles.marginTop === \"auto\";\n    const isVerticallyCentered = styles.marginBottom === \"auto\" && styles.marginTop === \"auto\";\n\n    const isOverridden = [\n        inheritanceMap.marginTop,\n        inheritanceMap.marginRight,\n        inheritanceMap.marginBottom,\n        inheritanceMap.marginLeft\n    ]\n        .filter(Boolean)\n        .some(item => item.overridden);\n\n    return (\n        <div>\n            <InheritanceLabel text={\"Align\"} onReset={onReset} isOverridden={isOverridden} />\n            <div className={\"flex flex-row w-full justify-between\"}>\n                {/* Horizontal Alignment */}\n                <IconButton\n                    icon={<AlignLeft />}\n                    variant={isLeftAligned ? activeVariant : inactiveVariant}\n                    onClick={onAlignLeft}\n                    tooltip={\"Align to the left side\"}\n                />\n                <IconButton\n                    icon={<CenterHorizontally />}\n                    variant={isHorizontallyCentered ? activeVariant : inactiveVariant}\n                    onClick={onCenterHorizontally}\n                    tooltip={\"Center horizontally\"}\n                />\n                <IconButton\n                    icon={<AlignRight />}\n                    variant={isRightAligned ? activeVariant : inactiveVariant}\n                    onClick={onAlignRight}\n                    tooltip={\"Align to the right side\"}\n                />\n                {/* Vertical Alignment */}\n                <IconButton\n                    icon={<AlignToTop />}\n                    variant={isAlignedToTop ? activeVariant : inactiveVariant}\n                    onClick={onAlignTop}\n                    tooltip={\"Align to the top side\"}\n                />\n                <IconButton\n                    icon={<CenterVertically />}\n                    variant={isVerticallyCentered ? activeVariant : inactiveVariant}\n                    onClick={onCenterVertically}\n                    tooltip={\"Center vertically\"}\n                />\n                <IconButton\n                    icon={<AlignToBottom />}\n                    variant={isAlignedToBottom ? activeVariant : inactiveVariant}\n                    onClick={onAlignBottom}\n                    tooltip={\"Align to the bottom side\"}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["activeVariant","inactiveVariant","Alignment","observer","elementId","styles","onChange","inheritanceMap","useStyles","onAlignLeft","onAlignRight","onCenterHorizontally","onAlignTop","onCenterVertically","onAlignBottom","onReset","isLeftAligned","isHorizontallyCentered","isRightAligned","isAlignedToTop","isAlignedToBottom","isVerticallyCentered","isOverridden","Boolean","item","InheritanceLabel","IconButton","AlignLeft","CenterHorizontally","AlignRight","AlignToTop","CenterVertically","AlignToBottom"],"mappings":"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"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ReactComponent as AlignToBottom } from \"@webiny/icons/vertical_align_bottom.svg\";\nimport { ReactComponent as AlignToTop } from \"@webiny/icons/vertical_align_top.svg\";\nimport { ReactComponent as CenterVertically } from \"@webiny/icons/vertical_align_center.svg\";\nimport { ReactComponent as AlignLeft } from \"@webiny/icons/align_horizontal_left.svg\";\nimport { ReactComponent as AlignRight } from \"@webiny/icons/align_horizontal_right.svg\";\nimport { ReactComponent as CenterHorizontally } from \"@webiny/icons/align_horizontal_center.svg\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst activeVariant = \"secondary\";\nconst inactiveVariant = \"ghost\";\n\n/**\n * Alignment is controlled with margin and display: flex.\n * -----\n * Align to the left => margin-right: auto;\n * Align to the right => margin-left: auto;\n * Center horizontally => margin-left: auto; margin-right: auto;\n * Full width: unset margin-left and margin-right.\n * -----\n * Align to the top => margin-bottom: auto;\n * Align to the bottom => margin-top: auto;\n * Center vertically => margin-top: auto; margin-bottom: auto;\n */\nexport const Alignment = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    /**\n     * Horizontal alignment\n     */\n    const onAlignLeft = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginRight\", \"auto\");\n            if (styles.get(\"marginLeft\") === \"auto\") {\n                styles.set(\"marginLeft\", \"unset\");\n            }\n        });\n    };\n\n    const onAlignRight = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginLeft\", \"auto\");\n            if (styles.get(\"marginRight\") === \"auto\") {\n                styles.set(\"marginRight\", \"unset\");\n            }\n        });\n    };\n\n    const onCenterHorizontally = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginLeft\", \"auto\");\n            styles.set(\"marginRight\", \"auto\");\n        });\n    };\n\n    /**\n     * Vertical alignment\n     */\n    const onAlignTop = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginBottom\", \"auto\");\n            if (styles.get(\"marginTop\") === \"auto\") {\n                styles.set(\"marginTop\", \"unset\");\n            }\n        });\n    };\n\n    const onCenterVertically = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginTop\", \"auto\");\n            styles.set(\"marginBottom\", \"auto\");\n        });\n    };\n\n    const onAlignBottom = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginTop\", \"auto\");\n            if (styles.get(\"marginBottom\") === \"auto\") {\n                styles.set(\"marginBottom\", \"unset\");\n            }\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"width\");\n            styles.unset(\"marginTop\");\n            styles.unset(\"marginRight\");\n            styles.unset(\"marginBottom\");\n            styles.unset(\"marginLeft\");\n        });\n    };\n\n    const isLeftAligned = styles.marginRight === \"auto\" && styles.marginLeft !== \"auto\";\n    const isHorizontallyCentered = styles.marginRight === \"auto\" && styles.marginLeft === \"auto\";\n    const isRightAligned = styles.marginRight !== \"auto\" && styles.marginLeft === \"auto\";\n    const isAlignedToTop = styles.marginBottom === \"auto\" && styles.marginTop !== \"auto\";\n    const isAlignedToBottom = styles.marginBottom !== \"auto\" && styles.marginTop === \"auto\";\n    const isVerticallyCentered = styles.marginBottom === \"auto\" && styles.marginTop === \"auto\";\n\n    const isOverridden = [\n        inheritanceMap.marginTop,\n        inheritanceMap.marginRight,\n        inheritanceMap.marginBottom,\n        inheritanceMap.marginLeft\n    ]\n        .filter(Boolean)\n        .some(item => item.overridden);\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel text={\"Align\"} onReset={onReset} isOverridden={isOverridden} />\n            }\n        >\n            <div className={\"flex flex-row w-full justify-between\"}>\n                {/* Horizontal Alignment */}\n                <IconButton\n                    icon={<AlignLeft />}\n                    variant={isLeftAligned ? activeVariant : inactiveVariant}\n                    onClick={onAlignLeft}\n                    tooltip={\"Align to the left side\"}\n                />\n                <IconButton\n                    icon={<CenterHorizontally />}\n                    variant={isHorizontallyCentered ? activeVariant : inactiveVariant}\n                    onClick={onCenterHorizontally}\n                    tooltip={\"Center horizontally\"}\n                />\n                <IconButton\n                    icon={<AlignRight />}\n                    variant={isRightAligned ? activeVariant : inactiveVariant}\n                    onClick={onAlignRight}\n                    tooltip={\"Align to the right side\"}\n                />\n                {/* Vertical Alignment */}\n                <IconButton\n                    icon={<AlignToTop />}\n                    variant={isAlignedToTop ? activeVariant : inactiveVariant}\n                    onClick={onAlignTop}\n                    tooltip={\"Align to the top side\"}\n                />\n                <IconButton\n                    icon={<CenterVertically />}\n                    variant={isVerticallyCentered ? activeVariant : inactiveVariant}\n                    onClick={onCenterVertically}\n                    tooltip={\"Center vertically\"}\n                />\n                <IconButton\n                    icon={<AlignToBottom />}\n                    variant={isAlignedToBottom ? activeVariant : inactiveVariant}\n                    onClick={onAlignBottom}\n                    tooltip={\"Align to the bottom side\"}\n                />\n            </div>\n        </SidebarRow>\n    );\n});\n"],"names":["activeVariant","inactiveVariant","Alignment","observer","elementId","styles","onChange","inheritanceMap","useStyles","onAlignLeft","onAlignRight","onCenterHorizontally","onAlignTop","onCenterVertically","onAlignBottom","onReset","isLeftAligned","isHorizontallyCentered","isRightAligned","isAlignedToTop","isAlignedToBottom","isVerticallyCentered","isOverridden","Boolean","item","SidebarRow","InheritanceLabel","IconButton","AlignLeft","CenterHorizontally","AlignRight","AlignToTop","CenterVertically","AlignToBottom"],"mappings":"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"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.js

@@ -1,24 +1,25 @@
 import react from "react";
 import { observer } from "mobx-react-lite";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 import { useStyleValue } from "../../useStyleValue.js";
 import { UnitValuePicker } from "../../UnitValuePicker.js";
 const LengthWithUnitInput = observer(({ elementId, label, propertyName, defaultValue, unitOptions })=>{
     const style = useStyleValue(elementId, propertyName, defaultValue);
-    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(InheritanceLabel, {
-        text: label,
-        onReset: style.onReset,
-        isOverridden: style.overridden,
-        inheritedFrom: style.inheritedFrom
-    }), /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-row w-full"
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
+        label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
+            text: label,
+            onReset: style.onReset,
+            isOverridden: style.overridden,
+            inheritedFrom: style.inheritedFrom
+        })
     }, /*#__PURE__*/ react.createElement(UnitValuePicker, {
         value: style.value,
         unit: style.unit,
         units: unitOptions,
         onChange: style.onChange,
         onChangePreview: style.onChangePreview
-    })));
+    }));
 });
 export { LengthWithUnitInput };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\nimport { UnitValuePicker, type UnitOption } from \"../../UnitValuePicker.js\";\n\ninterface LengthWithUnitInputProps {\n    elementId: string;\n    label: string;\n    propertyName: string;\n    unitOptions: UnitOption[];\n    defaultValue?: string;\n}\n\nexport const LengthWithUnitInput = observer(\n    ({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => {\n        const style = useStyleValue(elementId, propertyName, defaultValue);\n\n        return (\n            <div>\n                <InheritanceLabel\n                    text={label}\n                    onReset={style.onReset}\n                    isOverridden={style.overridden}\n                    inheritedFrom={style.inheritedFrom}\n                />\n                <div className={\"flex flex-row w-full\"}>\n                    <UnitValuePicker\n                        value={style.value}\n                        unit={style.unit}\n                        units={unitOptions}\n                        onChange={style.onChange}\n                        onChangePreview={style.onChangePreview}\n                    />\n                </div>\n            </div>\n        );\n    }\n);\n"],"names":["LengthWithUnitInput","observer","elementId","label","propertyName","defaultValue","unitOptions","style","useStyleValue","InheritanceLabel","UnitValuePicker"],"mappings":";;;;;AAcO,MAAMA,sBAAsBC,SAC/B,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAA4B;IACpF,MAAMC,QAAQC,cAAcN,WAAWE,cAAcC;IAErD,OAAO,WAAP,GACI,oBAAC,2BACG,oBAACI,kBAAgBA;QACb,MAAMN;QACN,SAASI,MAAM,OAAO;QACtB,cAAcA,MAAM,UAAU;QAC9B,eAAeA,MAAM,aAAa;sBAEtC,oBAAC;QAAI,WAAW;qBACZ,oBAACG,iBAAeA;QACZ,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,OAAOD;QACP,UAAUC,MAAM,QAAQ;QACxB,iBAAiBA,MAAM,eAAe;;AAK1D"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\nimport { UnitValuePicker, type UnitOption } from \"../../UnitValuePicker.js\";\n\ninterface LengthWithUnitInputProps {\n    elementId: string;\n    label: string;\n    propertyName: string;\n    unitOptions: UnitOption[];\n    defaultValue?: string;\n}\n\nexport const LengthWithUnitInput = observer(\n    ({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => {\n        const style = useStyleValue(elementId, propertyName, defaultValue);\n\n        return (\n            <SidebarRow\n                label={\n                    <InheritanceLabel\n                        text={label}\n                        onReset={style.onReset}\n                        isOverridden={style.overridden}\n                        inheritedFrom={style.inheritedFrom}\n                    />\n                }\n            >\n                <UnitValuePicker\n                    value={style.value}\n                    unit={style.unit}\n                    units={unitOptions}\n                    onChange={style.onChange}\n                    onChangePreview={style.onChangePreview}\n                />\n            </SidebarRow>\n        );\n    }\n);\n"],"names":["LengthWithUnitInput","observer","elementId","label","propertyName","defaultValue","unitOptions","style","useStyleValue","SidebarRow","InheritanceLabel","UnitValuePicker"],"mappings":";;;;;;AAeO,MAAMA,sBAAsBC,SAC/B,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAA4B;IACpF,MAAMC,QAAQC,cAAcN,WAAWE,cAAcC;IAErD,OAAO,WAAP,GACI,oBAACI,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,MAAMP;YACN,SAASI,MAAM,OAAO;YACtB,cAAcA,MAAM,UAAU;YAC9B,eAAeA,MAAM,aAAa;;qBAI1C,oBAACI,iBAAeA;QACZ,OAAOJ,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,OAAOD;QACP,UAAUC,MAAM,QAAQ;QACxB,iBAAiBA,MAAM,eAAe;;AAItD"}

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

@@ -1,14 +1,18 @@
 import react from "react";
-import { Accordion, Grid } from "@webiny/admin-ui";
+import { Grid } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/auto_awesome_mosaic.svg";
+import { StyleAccordion } from "../StyleAccordion.js";
 import { Alignment } from "./Layout/Alignment.js";
 import { LengthWithUnitInput } from "./Layout/LengthWithUnitInput.js";
 import { UnitsOptions } from "../UnitsOptions.js";
 const widthOptions = UnitsOptions.widthUnits().add("auto").getOptions();
 const heightOptions = UnitsOptions.heightUnits().add("auto").getOptions();
-const Layout = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+const Layout = ({ elementId })=>/*#__PURE__*/ react.createElement(StyleAccordion.Item, {
         title: "Layout",
-        description: "Set alignment, width, and height"
-    }, /*#__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(Alignment, {
         elementId: elementId

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion, Grid } from \"@webiny/admin-ui\";\nimport { Alignment } from \"./Layout/Alignment.js\";\nimport { LengthWithUnitInput } from \"./Layout/LengthWithUnitInput.js\";\nimport { UnitsOptions } from \"../UnitsOptions.js\";\n\ninterface LayoutProps {\n    elementId: string;\n}\n\nconst widthOptions = UnitsOptions.widthUnits().add(\"auto\").getOptions();\nconst heightOptions = UnitsOptions.heightUnits().add(\"auto\").getOptions();\n\nexport const Layout = ({ elementId }: LayoutProps) => {\n    return (\n        <Accordion.Item title={\"Layout\"} description={\"Set alignment, width, and height\"}>\n            <Grid>\n                <Grid.Column span={12}>\n                    <Alignment elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Width\"}\n                        propertyName={\"width\"}\n                        defaultValue={\"100%\"}\n                        unitOptions={widthOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Height\"}\n                        propertyName={\"height\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={heightOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Max width\"}\n                        propertyName={\"maxWidth\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={widthOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Max height\"}\n                        propertyName={\"maxHeight\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={heightOptions}\n                    />\n                </Grid.Column>\n            </Grid>\n        </Accordion.Item>\n    );\n};\n"],"names":["widthOptions","UnitsOptions","heightOptions","Layout","elementId","Accordion","Grid","Alignment","LengthWithUnitInput"],"mappings":";;;;;AAUA,MAAMA,eAAeC,aAAa,UAAU,GAAG,GAAG,CAAC,QAAQ,UAAU;AACrE,MAAMC,gBAAgBD,aAAa,WAAW,GAAG,GAAG,CAAC,QAAQ,UAAU;AAEhE,MAAME,SAAS,CAAC,EAAEC,SAAS,EAAe,GACtC,WAAP,GACI,oBAACC,UAAU,IAAI;QAAC,OAAO;QAAU,aAAa;qBAC1C,oBAACC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,WAASA;QAAC,WAAWH;uBAE1B,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,qBAAmBA;QAChB,WAAWJ;QACX,OAAO;QACP,cAAc;QACd,cAAc;QACd,aAAaJ;uBAGrB,oBAACM,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,qBAAmBA;QAChB,WAAWJ;QACX,OAAO;QACP,cAAc;QACd,cAAc;QACd,aAAaF;uBAGrB,oBAACI,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,qBAAmBA;QAChB,WAAWJ;QACX,OAAO;QACP,cAAc;QACd,cAAc;QACd,aAAaJ;uBAGrB,oBAACM,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,qBAAmBA;QAChB,WAAWJ;QACX,OAAO;QACP,cAAc;QACd,cAAc;QACd,aAAaF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { ReactComponent as LayoutIcon } from \"@webiny/icons/auto_awesome_mosaic.svg\";\nimport { StyleAccordion } from \"../StyleAccordion.js\";\nimport { Alignment } from \"./Layout/Alignment.js\";\nimport { LengthWithUnitInput } from \"./Layout/LengthWithUnitInput.js\";\nimport { UnitsOptions } from \"../UnitsOptions.js\";\n\ninterface LayoutProps {\n    elementId: string;\n}\n\nconst widthOptions = UnitsOptions.widthUnits().add(\"auto\").getOptions();\nconst heightOptions = UnitsOptions.heightUnits().add(\"auto\").getOptions();\n\nexport const Layout = ({ elementId }: LayoutProps) => {\n    return (\n        <StyleAccordion.Item title={\"Layout\"} icon={<LayoutIcon />}>\n            <Grid gap={\"small\"}>\n                <Grid.Column span={12}>\n                    <Alignment elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Width\"}\n                        propertyName={\"width\"}\n                        defaultValue={\"100%\"}\n                        unitOptions={widthOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Height\"}\n                        propertyName={\"height\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={heightOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Max width\"}\n                        propertyName={\"maxWidth\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={widthOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Max height\"}\n                        propertyName={\"maxHeight\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={heightOptions}\n                    />\n                </Grid.Column>\n            </Grid>\n        </StyleAccordion.Item>\n    );\n};\n"],"names":["widthOptions","UnitsOptions","heightOptions","Layout","elementId","StyleAccordion","LayoutIcon","Grid","Alignment","LengthWithUnitInput"],"mappings":";;;;;;;AAYA,MAAMA,eAAeC,aAAa,UAAU,GAAG,GAAG,CAAC,QAAQ,UAAU;AACrE,MAAMC,gBAAgBD,aAAa,WAAW,GAAG,GAAG,CAAC,QAAQ,UAAU;AAEhE,MAAME,SAAS,CAAC,EAAEC,SAAS,EAAe,GACtC,WAAP,GACI,oBAACC,eAAe,IAAI;QAAC,OAAO;QAAU,oBAAM,oBAACC,gBAAUA;qBACnD,oBAACC,MAAIA;QAAC,KAAK;qBACP,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,WAASA;QAAC,WAAWJ;uBAE1B,oBAACG,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,qBAAmBA;QAChB,WAAWL;QACX,OAAO;QACP,cAAc;QACd,cAAc;QACd,aAAaJ;uBAGrB,oBAACO,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,qBAAmBA;QAChB,WAAWL;QACX,OAAO;QACP,cAAc;QACd,cAAc;QACd,aAAaF;uBAGrB,oBAACK,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,qBAAmBA;QAChB,WAAWL;QACX,OAAO;QACP,cAAc;QACd,cAAc;QACd,aAAaJ;uBAGrB,oBAACO,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,qBAAmBA;QAChB,WAAWL;QACX,OAAO;QACP,cAAc;QACd,cAAc;QACd,aAAaF"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/LinkedEditing.js

@@ -3,11 +3,7 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/link.svg";
 import { ReactComponent as link_off_svg_ReactComponent } from "@webiny/icons/link_off.svg";
 const LinkedEditing = ({ linked, onToggle })=>/*#__PURE__*/ react.createElement("div", {
-        className: "absolute cursor-pointer fill-neutral-strong",
-        style: {
-            top: 2,
-            right: 4
-        }
+        className: "cursor-pointer fill-neutral-strong right-md"
     }, linked ? /*#__PURE__*/ react.createElement(Icon, {
         icon: /*#__PURE__*/ react.createElement(link_off_svg_ReactComponent, null),
         label: "Disable linked editing.",

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/LinkedEditing.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/LinkedEditing.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/LinkedEditing.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as LinkOn } from \"@webiny/icons/link.svg\";\nimport { ReactComponent as LinkOff } from \"@webiny/icons/link_off.svg\";\n\ninterface LinkedEditingProps {\n    linked: boolean;\n    onToggle: (linked: boolean) => void;\n}\n\nexport const LinkedEditing = ({ linked, onToggle }: LinkedEditingProps) => {\n    return (\n        <div className={\"absolute cursor-pointer fill-neutral-strong\"} style={{ top: 2, right: 4 }}>\n            {linked ? (\n                <Icon\n                    icon={<LinkOff />}\n                    label={\"Disable linked editing.\"}\n                    size={\"sm\"}\n                    onClick={() => onToggle(false)}\n                />\n            ) : (\n                <Icon\n                    icon={<LinkOn />}\n                    label={\"Enable linked editing.\"}\n                    size={\"sm\"}\n                    onClick={() => onToggle(true)}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["LinkedEditing","linked","onToggle","Icon","LinkOff","LinkOn"],"mappings":";;;;AAUO,MAAMA,gBAAgB,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAsB,GAC3D,WAAP,GACI,oBAAC;QAAI,WAAW;QAA+C,OAAO;YAAE,KAAK;YAAG,OAAO;QAAE;OACpFD,SAAS,WAATA,GACG,oBAACE,MAAIA;QACD,oBAAM,oBAACC,6BAAOA;QACd,OAAO;QACP,MAAM;QACN,SAAS,IAAMF,SAAS;uBAG5B,oBAACC,MAAIA;QACD,oBAAM,oBAACE,gBAAMA;QACb,OAAO;QACP,MAAM;QACN,SAAS,IAAMH,SAAS"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/LinkedEditing.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/LinkedEditing.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as LinkOn } from \"@webiny/icons/link.svg\";\nimport { ReactComponent as LinkOff } from \"@webiny/icons/link_off.svg\";\n\ninterface LinkedEditingProps {\n    linked: boolean;\n    onToggle: (linked: boolean) => void;\n}\n\nexport const LinkedEditing = ({ linked, onToggle }: LinkedEditingProps) => {\n    return (\n        <div className={\"cursor-pointer fill-neutral-strong right-md\"}>\n            {linked ? (\n                <Icon\n                    icon={<LinkOff />}\n                    label={\"Disable linked editing.\"}\n                    size={\"sm\"}\n                    onClick={() => onToggle(false)}\n                />\n            ) : (\n                <Icon\n                    icon={<LinkOn />}\n                    label={\"Enable linked editing.\"}\n                    size={\"sm\"}\n                    onClick={() => onToggle(true)}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["LinkedEditing","linked","onToggle","Icon","LinkOff","LinkOn"],"mappings":";;;;AAUO,MAAMA,gBAAgB,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAsB,GAC3D,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,SAAS,WAATA,GACG,oBAACE,MAAIA;QACD,oBAAM,oBAACC,6BAAOA;QACd,OAAO;QACP,MAAM;QACN,SAAS,IAAMF,SAAS;uBAG5B,oBAACC,MAAIA;QACD,oBAAM,oBAACE,gBAAMA;QACb,OAAO;QACP,MAAM;QACN,SAAS,IAAMH,SAAS"}