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

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

@@ -58,19 +58,12 @@ const Margin = observer(({ elementId, children })=>{
         else marginTop.onReset();
     };
     const rowClassname = "flex flex-row w-full justify-center items-center";
-    return /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col rounded-md relative"
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-3 items-center"
     }, /*#__PURE__*/ react.createElement("span", {
-        className: "absolute text-sm",
-        style: {
-            top: 5,
-            left: 7
-        }
+        className: "text-sm text-neutral-strong"
     }, "Margin"), /*#__PURE__*/ react.createElement("div", {
-        className: rowClassname,
-        style: {
-            paddingTop: "8px"
-        }
+        className: "flex justify-center"
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: linked ? "Margin" : "Top margin",
         ...marginTop,
@@ -78,14 +71,13 @@ const Margin = observer(({ elementId, children })=>{
         units: heightOptions,
         onChange: onMarginTopChange,
         onChangePreview: onMarginTopPreviewChange
-    })), /*#__PURE__*/ react.createElement(LinkedEditing, {
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-end"
+    }, /*#__PURE__*/ react.createElement(LinkedEditing, {
         linked: linked,
         onToggle: onToggleLinkedEditing
-    }), /*#__PURE__*/ react.createElement("div", {
-        className: rowClassname,
-        style: {
-            paddingTop: "8px"
-        }
+    }))), /*#__PURE__*/ react.createElement("div", {
+        className: rowClassname
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: "Left margin",
         ...marginLeft,
@@ -97,10 +89,7 @@ const Margin = observer(({ elementId, children })=>{
         units: widthOptions,
         disabled: linked
     })), /*#__PURE__*/ react.createElement("div", {
-        className: rowClassname,
-        style: {
-            padding: "8px 0"
-        }
+        className: rowClassname
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: "Bottom margin",
         ...marginBottom,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Margin.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Margin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { LinkedEditing } from \"./LinkedEditing.js\";\nimport { ValueSelector } from \"../../ValueSelector.js\";\nimport { UnitsOptions } from \"../../UnitsOptions.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\n\nconst additionalUnits = [\"auto\", \"unset\"];\n\nconst widthOptions = UnitsOptions.widthUnits()\n    .add(...additionalUnits)\n    .getOptions();\n\nconst heightOptions = UnitsOptions.heightUnits()\n    .add(...additionalUnits)\n    .getOptions();\n\ninterface MarginProps {\n    elementId: string;\n    children: React.ReactNode;\n}\n\nexport const Margin = observer(({ elementId, children }: MarginProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const marginTop = useStyleValue(elementId, \"marginTop\");\n    const marginRight = useStyleValue(elementId, \"marginRight\");\n    const marginBottom = useStyleValue(elementId, \"marginBottom\");\n    const marginLeft = useStyleValue(elementId, \"marginLeft\");\n\n    const linked = metadata.get<boolean>(\"marginLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const isKeyword = marginTop.isKeyword;\n                const value = isKeyword\n                    ? marginTop.value\n                    : `${marginTop.value ?? 0}${marginTop.unit}`;\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            }\n            metadata.set(\"marginLinkedEditing\", linked);\n        });\n    };\n\n    const onMarginTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"marginTop\", value);\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            });\n        } else {\n            marginTop.onChange(value);\n        }\n    };\n\n    const onMarginTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"marginTop\", value);\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            });\n        } else {\n            marginTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"marginTop\");\n                styles.unset(\"marginRight\");\n                styles.unset(\"marginBottom\");\n                styles.unset(\"marginLeft\");\n            });\n        } else {\n            marginTop.onReset();\n        }\n    };\n\n    const rowClassname = \"flex flex-row w-full justify-center items-center\";\n\n    return (\n        <div className=\"flex flex-col rounded-md relative\">\n            {/* Margin Label */}\n            <span className=\"absolute text-sm\" style={{ top: 5, left: 7 }}>\n                Margin\n            </span>\n\n            {/* Top Margin */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={linked ? \"Margin\" : \"Top margin\"}\n                    {...marginTop}\n                    onReset={onReset}\n                    units={heightOptions}\n                    onChange={onMarginTopChange}\n                    onChangePreview={onMarginTopPreviewChange}\n                />\n            </div>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Middle Row (Left Margin + Padding Box + Right Margin) */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Left margin\"}\n                    {...marginLeft}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                {children}\n                <ValueSelector\n                    label={\"Right margin\"}\n                    {...marginRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Margin */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom margin\"}\n                    {...marginBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["additionalUnits","widthOptions","UnitsOptions","heightOptions","Margin","observer","elementId","children","onChange","onPreviewChange","metadata","useStyles","marginTop","useStyleValue","marginRight","marginBottom","marginLeft","linked","onToggleLinkedEditing","styles","isKeyword","value","onMarginTopChange","onMarginTopPreviewChange","onReset","rowClassname","ValueSelector","LinkedEditing"],"mappings":";;;;;;;AAQA,MAAMA,kBAAkB;IAAC;IAAQ;CAAQ;AAEzC,MAAMC,eAAeC,aAAa,UAAU,GACvC,GAAG,IAAIF,iBACP,UAAU;AAEf,MAAMG,gBAAgBD,aAAa,WAAW,GACzC,GAAG,IAAIF,iBACP,UAAU;AAOR,MAAMI,SAASC,SAAS,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAe;IAChE,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUL;IAE1D,MAAMM,YAAYC,cAAcP,WAAW;IAC3C,MAAMQ,cAAcD,cAAcP,WAAW;IAC7C,MAAMS,eAAeF,cAAcP,WAAW;IAC9C,MAAMU,aAAaH,cAAcP,WAAW;IAE5C,MAAMW,SAASP,SAAS,GAAG,CAAU,0BAA0B;IAE/D,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,YAAYR,UAAU,SAAS;gBACrC,MAAMS,QAAQD,YACRR,UAAU,KAAK,GACf,GAAGA,UAAU,KAAK,IAAI,IAAIA,UAAU,IAAI,EAAE;gBAChDO,OAAO,GAAG,CAAC,eAAeE;gBAC1BF,OAAO,GAAG,CAAC,gBAAgBE;gBAC3BF,OAAO,GAAG,CAAC,cAAcE;YAC7B;YACAX,SAAS,GAAG,CAAC,uBAAuBO;QACxC;IACJ;IAEA,MAAMK,oBAAoB,CAACD;QACvB,IAAIJ,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,aAAaE;YACxBF,OAAO,GAAG,CAAC,eAAeE;YAC1BF,OAAO,GAAG,CAAC,gBAAgBE;YAC3BF,OAAO,GAAG,CAAC,cAAcE;QAC7B;aAEAT,UAAU,QAAQ,CAACS;IAE3B;IAEA,MAAME,2BAA2B,CAACF;QAC9B,IAAIJ,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,aAAaE;YACxBF,OAAO,GAAG,CAAC,eAAeE;YAC1BF,OAAO,GAAG,CAAC,gBAAgBE;YAC3BF,OAAO,GAAG,CAAC,cAAcE;QAC7B;aAEAT,UAAU,eAAe,CAACS;IAElC;IAEA,MAAMG,UAAU;QACZ,IAAIP,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;aAEAP,UAAU,OAAO;IAEzB;IAEA,MAAMa,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBAEX,oBAAC;QAAK,WAAU;QAAmB,OAAO;YAAE,KAAK;YAAG,MAAM;QAAE;OAAG,yBAK/D,oBAAC;QAAI,WAAWA;QAAc,OAAO;YAAE,YAAY;QAAM;qBACrD,oBAACC,eAAaA;QACV,OAAOT,SAAS,WAAW;QAC1B,GAAGL,SAAS;QACb,SAASY;QACT,OAAOrB;QACP,UAAUmB;QACV,iBAAiBC;uBAIzB,oBAACI,eAAaA;QAAC,QAAQV;QAAQ,UAAUC;sBAGzC,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,YAAY;QAAM;qBACrD,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGV,UAAU;QACd,OAAOf;QACP,UAAUgB;QAEbV,UAAAA,WAAAA,GACD,oBAACmB,eAAaA;QACV,OAAO;QACN,GAAGZ,WAAW;QACf,OAAOb;QACP,UAAUgB;uBAKlB,oBAAC;QAAI,WAAWQ;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGX,YAAY;QAChB,OAAOZ;QACP,UAAUc;;AAK9B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Margin.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Margin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { LinkedEditing } from \"./LinkedEditing.js\";\nimport { ValueSelector } from \"../../ValueSelector.js\";\nimport { UnitsOptions } from \"../../UnitsOptions.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\n\nconst additionalUnits = [\"auto\", \"unset\"];\n\nconst widthOptions = UnitsOptions.widthUnits()\n    .add(...additionalUnits)\n    .getOptions();\n\nconst heightOptions = UnitsOptions.heightUnits()\n    .add(...additionalUnits)\n    .getOptions();\n\ninterface MarginProps {\n    elementId: string;\n    children: React.ReactNode;\n}\n\nexport const Margin = observer(({ elementId, children }: MarginProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const marginTop = useStyleValue(elementId, \"marginTop\");\n    const marginRight = useStyleValue(elementId, \"marginRight\");\n    const marginBottom = useStyleValue(elementId, \"marginBottom\");\n    const marginLeft = useStyleValue(elementId, \"marginLeft\");\n\n    const linked = metadata.get<boolean>(\"marginLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const isKeyword = marginTop.isKeyword;\n                const value = isKeyword\n                    ? marginTop.value\n                    : `${marginTop.value ?? 0}${marginTop.unit}`;\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            }\n            metadata.set(\"marginLinkedEditing\", linked);\n        });\n    };\n\n    const onMarginTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"marginTop\", value);\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            });\n        } else {\n            marginTop.onChange(value);\n        }\n    };\n\n    const onMarginTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"marginTop\", value);\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            });\n        } else {\n            marginTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"marginTop\");\n                styles.unset(\"marginRight\");\n                styles.unset(\"marginBottom\");\n                styles.unset(\"marginLeft\");\n            });\n        } else {\n            marginTop.onReset();\n        }\n    };\n\n    const rowClassname = \"flex flex-row w-full justify-center items-center\";\n\n    return (\n        <>\n            {/* Top Margin */}\n            <div className={\"grid grid-cols-3 items-center\"}>\n                <span className=\"text-sm text-neutral-strong\">Margin</span>\n\n                <div className={\"flex justify-center\"}>\n                    <ValueSelector\n                        label={linked ? \"Margin\" : \"Top margin\"}\n                        {...marginTop}\n                        onReset={onReset}\n                        units={heightOptions}\n                        onChange={onMarginTopChange}\n                        onChangePreview={onMarginTopPreviewChange}\n                    />\n                </div>\n\n                <div className={\"flex justify-end\"}>\n                    <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n                </div>\n            </div>\n\n            {/* Middle Row (Left Margin + Padding Box + Right Margin) */}\n            <div className={rowClassname}>\n                <ValueSelector\n                    label={\"Left margin\"}\n                    {...marginLeft}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                {children}\n                <ValueSelector\n                    label={\"Right margin\"}\n                    {...marginRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Margin */}\n            <div className={rowClassname}>\n                <ValueSelector\n                    label={\"Bottom margin\"}\n                    {...marginBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </>\n    );\n});\n"],"names":["additionalUnits","widthOptions","UnitsOptions","heightOptions","Margin","observer","elementId","children","onChange","onPreviewChange","metadata","useStyles","marginTop","useStyleValue","marginRight","marginBottom","marginLeft","linked","onToggleLinkedEditing","styles","isKeyword","value","onMarginTopChange","onMarginTopPreviewChange","onReset","rowClassname","ValueSelector","LinkedEditing"],"mappings":";;;;;;;AAQA,MAAMA,kBAAkB;IAAC;IAAQ;CAAQ;AAEzC,MAAMC,eAAeC,aAAa,UAAU,GACvC,GAAG,IAAIF,iBACP,UAAU;AAEf,MAAMG,gBAAgBD,aAAa,WAAW,GACzC,GAAG,IAAIF,iBACP,UAAU;AAOR,MAAMI,SAASC,SAAS,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAe;IAChE,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUL;IAE1D,MAAMM,YAAYC,cAAcP,WAAW;IAC3C,MAAMQ,cAAcD,cAAcP,WAAW;IAC7C,MAAMS,eAAeF,cAAcP,WAAW;IAC9C,MAAMU,aAAaH,cAAcP,WAAW;IAE5C,MAAMW,SAASP,SAAS,GAAG,CAAU,0BAA0B;IAE/D,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,YAAYR,UAAU,SAAS;gBACrC,MAAMS,QAAQD,YACRR,UAAU,KAAK,GACf,GAAGA,UAAU,KAAK,IAAI,IAAIA,UAAU,IAAI,EAAE;gBAChDO,OAAO,GAAG,CAAC,eAAeE;gBAC1BF,OAAO,GAAG,CAAC,gBAAgBE;gBAC3BF,OAAO,GAAG,CAAC,cAAcE;YAC7B;YACAX,SAAS,GAAG,CAAC,uBAAuBO;QACxC;IACJ;IAEA,MAAMK,oBAAoB,CAACD;QACvB,IAAIJ,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,aAAaE;YACxBF,OAAO,GAAG,CAAC,eAAeE;YAC1BF,OAAO,GAAG,CAAC,gBAAgBE;YAC3BF,OAAO,GAAG,CAAC,cAAcE;QAC7B;aAEAT,UAAU,QAAQ,CAACS;IAE3B;IAEA,MAAME,2BAA2B,CAACF;QAC9B,IAAIJ,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,aAAaE;YACxBF,OAAO,GAAG,CAAC,eAAeE;YAC1BF,OAAO,GAAG,CAAC,gBAAgBE;YAC3BF,OAAO,GAAG,CAAC,cAAcE;QAC7B;aAEAT,UAAU,eAAe,CAACS;IAElC;IAEA,MAAMG,UAAU;QACZ,IAAIP,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;aAEAP,UAAU,OAAO;IAEzB;IAEA,MAAMa,eAAe;IAErB,OAAO,WAAP,GACI,wDAEI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAK,WAAU;OAA8B,yBAE9C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA;QACV,OAAOT,SAAS,WAAW;QAC1B,GAAGL,SAAS;QACb,SAASY;QACT,OAAOrB;QACP,UAAUmB;QACV,iBAAiBC;uBAIzB,oBAAC;QAAI,WAAW;qBACZ,oBAACI,eAAaA;QAAC,QAAQV;QAAQ,UAAUC;wBAKjD,oBAAC;QAAI,WAAWO;qBACZ,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGV,UAAU;QACd,OAAOf;QACP,UAAUgB;QAEbV,UAAAA,WAAAA,GACD,oBAACmB,eAAaA;QACV,OAAO;QACN,GAAGZ,WAAW;QACf,OAAOb;QACP,UAAUgB;uBAKlB,oBAAC;QAAI,WAAWQ;qBACZ,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGX,YAAY;QAChB,OAAOZ;QACP,UAAUc;;AAK9B"}

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

@@ -2,7 +2,8 @@ import react from "react";
 import { Margin } from "./Margin.js";
 import { Padding } from "./Padding.js";
 const MarginPaddingControl = ({ elementId })=>/*#__PURE__*/ react.createElement("div", {
-        className: "bg-neutral-light text-neutral-strong w-full rounded-md border-sm border-neutral-muted"
+        "data-role": "margin-padding",
+        className: "bg-neutral-light text-neutral-strong w-full rounded-md p-sm rounded-xl flex flex-col gap-y-sm"
     }, /*#__PURE__*/ react.createElement(Margin, {
         elementId: elementId
     }, /*#__PURE__*/ react.createElement(Padding, {

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/MarginPadding.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { Margin } from \"./Margin.js\";\nimport { Padding } from \"./Padding.js\";\n\nexport const MarginPaddingControl = ({ elementId }: { elementId: string }) => {\n    return (\n        <div className=\"bg-neutral-light text-neutral-strong w-full rounded-md border-sm border-neutral-muted\">\n            <Margin elementId={elementId}>\n                <Padding elementId={elementId} />\n            </Margin>\n        </div>\n    );\n};\n"],"names":["MarginPaddingControl","elementId","Margin","Padding"],"mappings":";;;AAIO,MAAMA,uBAAuB,CAAC,EAAEC,SAAS,EAAyB,GAC9D,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,QAAMA;QAAC,WAAWD;qBACf,oBAACE,SAAOA;QAAC,WAAWF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/MarginPadding.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { Margin } from \"./Margin.js\";\nimport { Padding } from \"./Padding.js\";\n\nexport const MarginPaddingControl = ({ elementId }: { elementId: string }) => {\n    return (\n        <div\n            data-role=\"margin-padding\"\n            className=\"bg-neutral-light text-neutral-strong w-full rounded-md p-sm rounded-xl flex flex-col gap-y-sm\"\n        >\n            <Margin elementId={elementId}>\n                <Padding elementId={elementId} />\n            </Margin>\n        </div>\n    );\n};\n"],"names":["MarginPaddingControl","elementId","Margin","Padding"],"mappings":";;;AAIO,MAAMA,uBAAuB,CAAC,EAAEC,SAAS,EAAyB,GAC9D,WAAP,GACI,oBAAC;QACG,aAAU;QACV,WAAU;qBAEV,oBAACC,QAAMA;QAAC,WAAWD;qBACf,oBAACE,SAAOA;QAAC,WAAWF"}

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

@@ -52,23 +52,15 @@ const Padding = observer(({ elementId })=>{
         });
         else paddingTop.onReset();
     };
-    const rowClassname = "flex flex-row w-full justify-center items-center py-xs";
+    const rowClassname = "flex flex-row w-full justify-center items-center";
     return /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col items-center bg-neutral-muted border-sm border-neutral-muted relative rounded-md"
+        className: "flex flex-col items-center bg-neutral-disabled relative rounded-lg p-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-3 items-center w-full"
     }, /*#__PURE__*/ react.createElement("span", {
-        className: "absolute text-sm",
-        style: {
-            top: 3,
-            left: 5
-        }
-    }, "Padding"), /*#__PURE__*/ react.createElement(LinkedEditing, {
-        linked: linked,
-        onToggle: onToggleLinkedEditing
-    }), /*#__PURE__*/ react.createElement("div", {
-        className: rowClassname,
-        style: {
-            paddingTop: "8px"
-        }
+        className: "text-sm text-neutral-strong"
+    }, "Padding"), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center"
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: "Top padding",
         ...paddingTop,
@@ -77,10 +69,15 @@ const Padding = observer(({ elementId })=>{
         onChange: onPaddingTopChange,
         onChangePreview: onPaddingTopPreviewChange
     })), /*#__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,
-            paddingTop: "8px"
+            paddingTop: "16px"
         }
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: "Left padding",

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.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 PaddingProps {\n    elementId: string;\n}\n\nexport const Padding = observer(({ elementId }: PaddingProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const paddingTop = useStyleValue(elementId, \"paddingTop\");\n    const paddingRight = useStyleValue(elementId, \"paddingRight\");\n    const paddingBottom = useStyleValue(elementId, \"paddingBottom\");\n    const paddingLeft = useStyleValue(elementId, \"paddingLeft\");\n\n    const linked = metadata.get<boolean>(\"paddingLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${paddingTop.value ?? 0}${paddingTop.unit}`;\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            }\n            metadata.set(\"paddingLinkedEditing\", linked);\n        });\n    };\n\n    const onPaddingTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChange(value);\n        }\n    };\n\n    const onPaddingTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"paddingTop\");\n                styles.unset(\"paddingRight\");\n                styles.unset(\"paddingBottom\");\n                styles.unset(\"paddingLeft\");\n            });\n        } else {\n            paddingTop.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-muted border-sm border-neutral-muted relative rounded-md\">\n            <span className=\"absolute text-sm\" style={{ top: 3, left: 5 }}>\n                Padding\n            </span>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Top Padding */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Top padding\"}\n                    {...paddingTop}\n                    onReset={onReset}\n                    units={heightOptions}\n                    onChange={onPaddingTopChange}\n                    onChangePreview={onPaddingTopPreviewChange}\n                />\n            </div>\n\n            {/* Center Row (Left Padding + Content + Right Padding) */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Left padding\"}\n                    {...paddingLeft}\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 padding\"}\n                    {...paddingRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Padding */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom padding\"}\n                    {...paddingBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["widthOptions","UnitsOptions","heightOptions","Padding","observer","elementId","onChange","onPreviewChange","metadata","useStyles","paddingTop","useStyleValue","paddingRight","paddingBottom","paddingLeft","linked","onToggleLinkedEditing","styles","value","onPaddingTopChange","onPaddingTopPreviewChange","onReset","rowClassname","LinkedEditing","ValueSelector"],"mappings":";;;;;;;AAQA,MAAMA,eAAeC,aAAa,UAAU,GAAG,UAAU;AACzD,MAAMC,gBAAgBD,aAAa,WAAW,GAAG,UAAU;AAMpD,MAAME,UAAUC,SAAS,CAAC,EAAEC,SAAS,EAAgB;IACxD,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUJ;IAE1D,MAAMK,aAAaC,cAAcN,WAAW;IAC5C,MAAMO,eAAeD,cAAcN,WAAW;IAC9C,MAAMQ,gBAAgBF,cAAcN,WAAW;IAC/C,MAAMS,cAAcH,cAAcN,WAAW;IAE7C,MAAMU,SAASP,SAAS,GAAG,CAAU,2BAA2B;IAEhE,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,QAAQ,GAAGR,WAAW,KAAK,IAAI,IAAIA,WAAW,IAAI,EAAE;gBAC1DO,OAAO,GAAG,CAAC,gBAAgBC;gBAC3BD,OAAO,GAAG,CAAC,iBAAiBC;gBAC5BD,OAAO,GAAG,CAAC,eAAeC;YAC9B;YACAV,SAAS,GAAG,CAAC,wBAAwBO;QACzC;IACJ;IAEA,MAAMI,qBAAqB,CAACD;QACxB,IAAIH,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,cAAcC;YACzBD,OAAO,GAAG,CAAC,gBAAgBC;YAC3BD,OAAO,GAAG,CAAC,iBAAiBC;YAC5BD,OAAO,GAAG,CAAC,eAAeC;QAC9B;aAEAR,WAAW,QAAQ,CAACQ;IAE5B;IAEA,MAAME,4BAA4B,CAACF;QAC/B,IAAIH,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,cAAcC;YACzBD,OAAO,GAAG,CAAC,gBAAgBC;YAC3BD,OAAO,GAAG,CAAC,iBAAiBC;YAC5BD,OAAO,GAAG,CAAC,eAAeC;QAC9B;aAEAR,WAAW,eAAe,CAACQ;IAEnC;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,WAAW,OAAO;IAE1B;IAEA,MAAMY,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAK,WAAU;QAAmB,OAAO;YAAE,KAAK;YAAG,MAAM;QAAE;OAAG,0BAI/D,oBAACC,eAAaA;QAAC,QAAQR;QAAQ,UAAUC;sBAGzC,oBAAC;QAAI,WAAWM;QAAc,OAAO;YAAE,YAAY;QAAM;qBACrD,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGd,UAAU;QACd,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,WAAW;QACf,OAAOd;QACP,UAAUe;sBAEd,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,OAAO;YAAK,QAAQ;QAAG;OACnC,oBAGD,oBAACS,eAAaA;QACV,OAAO;QACN,GAAGZ,YAAY;QAChB,OAAOZ;QACP,UAAUe;uBAKlB,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGX,aAAa;QACjB,OAAOX;QACP,UAAUa;;AAK9B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.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 PaddingProps {\n    elementId: string;\n}\n\nexport const Padding = observer(({ elementId }: PaddingProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const paddingTop = useStyleValue(elementId, \"paddingTop\");\n    const paddingRight = useStyleValue(elementId, \"paddingRight\");\n    const paddingBottom = useStyleValue(elementId, \"paddingBottom\");\n    const paddingLeft = useStyleValue(elementId, \"paddingLeft\");\n\n    const linked = metadata.get<boolean>(\"paddingLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${paddingTop.value ?? 0}${paddingTop.unit}`;\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            }\n            metadata.set(\"paddingLinkedEditing\", linked);\n        });\n    };\n\n    const onPaddingTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChange(value);\n        }\n    };\n\n    const onPaddingTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"paddingTop\");\n                styles.unset(\"paddingRight\");\n                styles.unset(\"paddingBottom\");\n                styles.unset(\"paddingLeft\");\n            });\n        } else {\n            paddingTop.onReset();\n        }\n    };\n\n    const rowClassname = \"flex flex-row w-full justify-center items-center\";\n\n    return (\n        <div className=\"flex flex-col items-center bg-neutral-disabled relative rounded-lg p-sm\">\n            {/* Top Padding */}\n            <div className={\"grid grid-cols-3 items-center w-full\"}>\n                <span className=\"text-sm text-neutral-strong\">Padding</span>\n                <div className={\"flex justify-center\"}>\n                    <ValueSelector\n                        label={\"Top padding\"}\n                        {...paddingTop}\n                        onReset={onReset}\n                        units={heightOptions}\n                        onChange={onPaddingTopChange}\n                        onChangePreview={onPaddingTopPreviewChange}\n                    />\n                </div>\n                <div className={\"flex justify-end\"}>\n                    <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n                </div>\n            </div>\n\n            {/* Center Row (Left Padding + Content + Right Padding) */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"16px\" }}>\n                <ValueSelector\n                    label={\"Left padding\"}\n                    {...paddingLeft}\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 padding\"}\n                    {...paddingRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Padding */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom padding\"}\n                    {...paddingBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["widthOptions","UnitsOptions","heightOptions","Padding","observer","elementId","onChange","onPreviewChange","metadata","useStyles","paddingTop","useStyleValue","paddingRight","paddingBottom","paddingLeft","linked","onToggleLinkedEditing","styles","value","onPaddingTopChange","onPaddingTopPreviewChange","onReset","rowClassname","ValueSelector","LinkedEditing"],"mappings":";;;;;;;AAQA,MAAMA,eAAeC,aAAa,UAAU,GAAG,UAAU;AACzD,MAAMC,gBAAgBD,aAAa,WAAW,GAAG,UAAU;AAMpD,MAAME,UAAUC,SAAS,CAAC,EAAEC,SAAS,EAAgB;IACxD,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUJ;IAE1D,MAAMK,aAAaC,cAAcN,WAAW;IAC5C,MAAMO,eAAeD,cAAcN,WAAW;IAC9C,MAAMQ,gBAAgBF,cAAcN,WAAW;IAC/C,MAAMS,cAAcH,cAAcN,WAAW;IAE7C,MAAMU,SAASP,SAAS,GAAG,CAAU,2BAA2B;IAEhE,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,QAAQ,GAAGR,WAAW,KAAK,IAAI,IAAIA,WAAW,IAAI,EAAE;gBAC1DO,OAAO,GAAG,CAAC,gBAAgBC;gBAC3BD,OAAO,GAAG,CAAC,iBAAiBC;gBAC5BD,OAAO,GAAG,CAAC,eAAeC;YAC9B;YACAV,SAAS,GAAG,CAAC,wBAAwBO;QACzC;IACJ;IAEA,MAAMI,qBAAqB,CAACD;QACxB,IAAIH,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,cAAcC;YACzBD,OAAO,GAAG,CAAC,gBAAgBC;YAC3BD,OAAO,GAAG,CAAC,iBAAiBC;YAC5BD,OAAO,GAAG,CAAC,eAAeC;QAC9B;aAEAR,WAAW,QAAQ,CAACQ;IAE5B;IAEA,MAAME,4BAA4B,CAACF;QAC/B,IAAIH,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,cAAcC;YACzBD,OAAO,GAAG,CAAC,gBAAgBC;YAC3BD,OAAO,GAAG,CAAC,iBAAiBC;YAC5BD,OAAO,GAAG,CAAC,eAAeC;QAC9B;aAEAR,WAAW,eAAe,CAACQ;IAEnC;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,WAAW,OAAO;IAE1B;IAEA,MAAMY,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBAEX,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAK,WAAU;OAA8B,0BAC9C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGb,UAAU;QACd,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;QAAO;qBAClE,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGT,WAAW;QACf,OAAOd;QACP,UAAUe;sBAEd,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,OAAO;YAAK,QAAQ;QAAG;OACnC,oBAGD,oBAACQ,eAAaA;QACV,OAAO;QACN,GAAGX,YAAY;QAChB,OAAOZ;QACP,UAAUe;uBAKlB,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGV,aAAa;QACjB,OAAOX;QACP,UAAUa;;AAK9B"}

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

@@ -1,17 +1,14 @@
 import react from "react";
-import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/border_inner.svg";
+import { StyleAccordion } from "../StyleAccordion.js";
 import { MarginPaddingControl } from "./MarginPadding/MarginPadding.js";
-const MarginPadding = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+const MarginPadding = ({ elementId })=>/*#__PURE__*/ react.createElement(StyleAccordion.Item, {
         title: "Margin & Padding",
-        description: "Set spacing in and around the element"
-    }, /*#__PURE__*/ react.createElement("div", {
-        style: {
-            width: 280,
-            marginLeft: -8
-        }
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        noPadding: true
     }, /*#__PURE__*/ react.createElement(MarginPaddingControl, {
         elementId: elementId
-    })));
+    }));
 export { MarginPadding };
 
 //# sourceMappingURL=MarginPadding.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { MarginPaddingControl } from \"./MarginPadding/MarginPadding.js\";\n\ninterface MarginPaddingProps {\n    elementId: string;\n}\n\nexport const MarginPadding = ({ elementId }: MarginPaddingProps) => {\n    return (\n        <Accordion.Item\n            title={\"Margin & Padding\"}\n            description={\"Set spacing in and around the element\"}\n        >\n            <div style={{ width: 280, marginLeft: -8 }}>\n                <MarginPaddingControl elementId={elementId} />\n            </div>\n        </Accordion.Item>\n    );\n};\n"],"names":["MarginPadding","elementId","Accordion","MarginPaddingControl"],"mappings":";;;AAQO,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAsB,GACpD,WAAP,GACI,oBAACC,UAAU,IAAI;QACX,OAAO;QACP,aAAa;qBAEb,oBAAC;QAAI,OAAO;YAAE,OAAO;YAAK,YAAY;QAAG;qBACrC,oBAACC,sBAAoBA;QAAC,WAAWF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as MarginPaddingIcon } from \"@webiny/icons/border_inner.svg\";\nimport { StyleAccordion } from \"../StyleAccordion.js\";\nimport { MarginPaddingControl } from \"./MarginPadding/MarginPadding.js\";\n\ninterface MarginPaddingProps {\n    elementId: string;\n}\n\nexport const MarginPadding = ({ elementId }: MarginPaddingProps) => {\n    return (\n        <StyleAccordion.Item title={\"Margin & Padding\"} icon={<MarginPaddingIcon />} noPadding>\n            <MarginPaddingControl elementId={elementId} />\n        </StyleAccordion.Item>\n    );\n};\n"],"names":["MarginPadding","elementId","StyleAccordion","MarginPaddingIcon","MarginPaddingControl"],"mappings":";;;;AASO,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAsB,GACpD,WAAP,GACI,oBAACC,eAAe,IAAI;QAAC,OAAO;QAAoB,oBAAM,oBAACC,gBAAiBA;QAAK;qBACzE,oBAACC,sBAAoBA;QAAC,WAAWH"}

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

@@ -1,8 +1,19 @@
 import react from "react";
 import { observer } from "mobx-react-lite";
-import { Switch } from "@webiny/admin-ui";
+import { SegmentedControl } from "@webiny/admin-ui";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
+const ITEMS = [
+    {
+        label: "Visible",
+        value: "show"
+    },
+    {
+        label: "Hidden",
+        value: "hide"
+    }
+];
 const Visibility = observer(({ elementId })=>{
     const { styles, onChange, inheritanceMap } = useStyles(elementId);
     const isVisible = "none" !== styles.display;
@@ -17,16 +28,19 @@ const Visibility = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap.display ?? {};
-    return /*#__PURE__*/ react.createElement(Switch, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
-            text: "Hide element"
-        }),
-        checked: !isVisible,
-        onChange: toggleVisibility
-    });
+            text: "Visibility"
+        })
+    }, /*#__PURE__*/ react.createElement(SegmentedControl, {
+        fullWidth: true,
+        items: ITEMS,
+        value: isVisible ? "show" : "hide",
+        onChange: (value)=>toggleVisibility("hide" === value)
+    }));
 });
 export { Visibility };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Switch } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\nexport interface VisibilityProps {\n    elementId: string;\n}\n\nexport const Visibility = observer(({ elementId }: VisibilityProps) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const isVisible = styles.display !== \"none\";\n\n    const toggleVisibility = (isHidden: boolean) => {\n        onChange(({ styles }) => {\n            styles.set(\"display\", isHidden ? \"none\" : \"flex\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"display\");\n        });\n    };\n\n    const inheritance = inheritanceMap.display ?? {};\n\n    return (\n        <Switch\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Hide element\"}\n                />\n            }\n            checked={!isVisible}\n            onChange={toggleVisibility}\n        />\n    );\n});\n"],"names":["Visibility","observer","elementId","styles","onChange","inheritanceMap","useStyles","isVisible","toggleVisibility","isHidden","onReset","inheritance","Switch","InheritanceLabel"],"mappings":";;;;;AAUO,MAAMA,aAAaC,SAAS,CAAC,EAAEC,SAAS,EAAmB;IAC9D,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,YAAYJ,AAAmB,WAAnBA,OAAO,OAAO;IAEhC,MAAMK,mBAAmB,CAACC;QACtBL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,WAAWM,WAAW,SAAS;QAC9C;IACJ;IAEA,MAAMC,UAAU;QACZN,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMQ,cAAcN,eAAe,OAAO,IAAI,CAAC;IAE/C,OAAO,WAAP,GACI,oBAACO,QAAMA;QACH,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,SAAS,CAACJ;QACV,UAAUC;;AAGtB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\nexport interface VisibilityProps {\n    elementId: string;\n}\n\nconst ITEMS = [\n    { label: \"Visible\", value: \"show\" },\n    { label: \"Hidden\", value: \"hide\" }\n];\n\nexport const Visibility = observer(({ elementId }: VisibilityProps) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const isVisible = styles.display !== \"none\";\n\n    const toggleVisibility = (isHidden: boolean) => {\n        onChange(({ styles }) => {\n            styles.set(\"display\", isHidden ? \"none\" : \"flex\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"display\");\n        });\n    };\n\n    const inheritance = inheritanceMap.display ?? {};\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Visibility\"}\n                />\n            }\n        >\n            <SegmentedControl\n                fullWidth\n                items={ITEMS}\n                value={isVisible ? \"show\" : \"hide\"}\n                onChange={value => toggleVisibility(value === \"hide\")}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["ITEMS","Visibility","observer","elementId","styles","onChange","inheritanceMap","useStyles","isVisible","toggleVisibility","isHidden","onReset","inheritance","SidebarRow","InheritanceLabel","SegmentedControl","value"],"mappings":";;;;;;AAWA,MAAMA,QAAQ;IACV;QAAE,OAAO;QAAW,OAAO;IAAO;IAClC;QAAE,OAAO;QAAU,OAAO;IAAO;CACpC;AAEM,MAAMC,aAAaC,SAAS,CAAC,EAAEC,SAAS,EAAmB;IAC9D,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,YAAYJ,AAAmB,WAAnBA,OAAO,OAAO;IAEhC,MAAMK,mBAAmB,CAACC;QACtBL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,WAAWM,WAAW,SAAS;QAC9C;IACJ;IAEA,MAAMC,UAAU;QACZN,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMQ,cAAcN,eAAe,OAAO,IAAI,CAAC;IAE/C,OAAO,WAAP,GACI,oBAACO,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,kBAAgBA;QACb;QACA,OAAOf;QACP,OAAOQ,YAAY,SAAS;QAC5B,UAAUQ,CAAAA,QAASP,iBAAiBO,AAAU,WAAVA;;AAIpD"}

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

@@ -1,9 +1,10 @@
 import react from "react";
-import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/visibility.svg";
+import { StyleAccordion } from "../StyleAccordion.js";
 import { Visibility } from "./Visibility/index.js";
-const VisibilityGroup = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+const VisibilityGroup = ({ elementId })=>/*#__PURE__*/ react.createElement(StyleAccordion.Item, {
         title: "Visibility",
-        description: "Set element visibility"
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
     }, /*#__PURE__*/ react.createElement(Visibility, {
         elementId: elementId
     }));

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { Visibility, type VisibilityProps } from \"./Visibility/index.js\";\n\nexport const VisibilityGroup = ({ elementId }: VisibilityProps) => {\n    return (\n        <Accordion.Item title={\"Visibility\"} description={\"Set element visibility\"}>\n            <Visibility elementId={elementId} />\n        </Accordion.Item>\n    );\n};\n"],"names":["VisibilityGroup","elementId","Accordion","Visibility"],"mappings":";;;AAIO,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAmB,GACnD,WAAP,GACI,oBAACC,UAAU,IAAI;QAAC,OAAO;QAAc,aAAa;qBAC9C,oBAACC,YAAUA;QAAC,WAAWF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as VisibilityIcon } from \"@webiny/icons/visibility.svg\";\nimport { StyleAccordion } from \"../StyleAccordion.js\";\nimport { Visibility, type VisibilityProps } from \"./Visibility/index.js\";\n\nexport const VisibilityGroup = ({ elementId }: VisibilityProps) => {\n    return (\n        <StyleAccordion.Item title={\"Visibility\"} icon={<VisibilityIcon />}>\n            <Visibility elementId={elementId} />\n        </StyleAccordion.Item>\n    );\n};\n"],"names":["VisibilityGroup","elementId","StyleAccordion","VisibilityIcon","Visibility"],"mappings":";;;;AAKO,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAmB,GACnD,WAAP,GACI,oBAACC,eAAe,IAAI;QAAC,OAAO;QAAc,oBAAM,oBAACC,gBAAcA;qBAC3D,oBAACC,YAAUA;QAAC,WAAWH"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SidebarRowProps {
+    label: React.ReactNode;
+    tooltip?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const SidebarRow: ({ label, tooltip, children }: SidebarRowProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { Icon, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/info.svg";
+const SidebarRow = ({ label, tooltip, children })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xxs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-[80px] flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong"
+    }, label, tooltip ? /*#__PURE__*/ react.createElement(Tooltip, {
+        trigger: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "xs",
+            label: "More information",
+            color: "neutral-light"
+        }),
+        content: tooltip,
+        side: "left"
+    }) : /*#__PURE__*/ react.createElement("div", {
+        className: "w-xs shrink-0"
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1"
+    }, children));
+export { SidebarRow };
+
+//# sourceMappingURL=SidebarRow.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\n\ninterface SidebarRowProps {\n    label: React.ReactNode;\n    tooltip?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nexport const SidebarRow = ({ label, tooltip, children }: SidebarRowProps) => {\n    return (\n        <div className={\"flex items-center gap-xxs\"}>\n            <div\n                className={\n                    \"w-[80px] flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong\"\n                }\n            >\n                {label}\n\n                {tooltip ? (\n                    <Tooltip\n                        trigger={\n                            <Icon\n                                icon={<InfoIcon />}\n                                size={\"xs\"}\n                                label={\"More information\"}\n                                color={\"neutral-light\"}\n                            />\n                        }\n                        content={tooltip}\n                        side={\"left\"}\n                    />\n                ) : (\n                    <div className={\"w-xs shrink-0\"} />\n                )}\n            </div>\n            <div className={\"flex-1\"}>{children}</div>\n        </div>\n    );\n};\n"],"names":["SidebarRow","label","tooltip","children","Tooltip","Icon","InfoIcon"],"mappings":";;;AAUO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAmB,GAC7D,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;OAGHF,OAEAC,UAAU,WAAVA,GACG,oBAACE,SAAOA;QACJ,uBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAQA;YACf,MAAM;YACN,OAAO;YACP,OAAO;;QAGf,SAASJ;QACT,MAAM;uBAGV,oBAAC;QAAI,WAAW;uBAGxB,oBAAC;QAAI,WAAW;OAAWC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface StyleAccordionProps {
+    children: React.ReactNode;
+}
+export declare const StyleAccordion: (({ children }: StyleAccordionProps) => React.JSX.Element) & {
+    Item: ({ title, icon, defaultOpen, noPadding, children }: import("./StyleAccordionItem.js").StyleAccordionItemProps) => React.JSX.Element;
+};
+export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.js

@@ -0,0 +1,11 @@
+import react from "react";
+import { StyleAccordionItem } from "./StyleAccordionItem.js";
+const StyleAccordionRoot = ({ children })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-y-sm"
+    }, children);
+const StyleAccordion = Object.assign(StyleAccordionRoot, {
+    Item: StyleAccordionItem
+});
+export { StyleAccordion };
+
+//# sourceMappingURL=StyleAccordion.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { StyleAccordionItem } from \"./StyleAccordionItem.js\";\n\ninterface StyleAccordionProps {\n    children: React.ReactNode;\n}\n\nconst StyleAccordionRoot = ({ children }: StyleAccordionProps) => (\n    <div className={\"flex flex-col gap-y-sm\"}>{children}</div>\n);\n\nexport const StyleAccordion = Object.assign(StyleAccordionRoot, {\n    Item: StyleAccordionItem\n});\n"],"names":["StyleAccordionRoot","children","StyleAccordion","Object","StyleAccordionItem"],"mappings":";;AAOA,MAAMA,qBAAqB,CAAC,EAAEC,QAAQ,EAAuB,iBACzD,oBAAC;QAAI,WAAW;OAA2BA;AAGxC,MAAMC,iBAAiBC,OAAO,MAAM,CAACH,oBAAoB;IAC5D,MAAMI;AACV"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface StyleAccordionItemProps {
+    title: string;
+    icon?: React.ReactElement;
+    defaultOpen?: boolean;
+    noPadding?: boolean;
+    children: React.ReactNode;
+}
+export declare const StyleAccordionItem: ({ title, icon, defaultOpen, noPadding, children }: StyleAccordionItemProps) => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js

@@ -0,0 +1,45 @@
+import react, { useState } from "react";
+import { Collapsible } from "radix-ui";
+import { ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
+import { Icon } from "@webiny/admin-ui";
+const StyleAccordionItem = ({ title, icon, defaultOpen = false, noPadding = false, children })=>{
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    return /*#__PURE__*/ react.createElement(Collapsible.Root, {
+        defaultOpen: defaultOpen,
+        onOpenChange: setIsOpen
+    }, /*#__PURE__*/ react.createElement(Collapsible.Trigger, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        className: "w-full flex items-center justify-between py-sm px-sm cursor-pointer select-none rounded-lg " + (isOpen ? "" : "bg-neutral-subtle"),
+        onKeyDown: (e)=>{
+            if ("Enter" === e.key || " " === e.key) {
+                e.preventDefault();
+                e.currentTarget.click();
+            }
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, icon && /*#__PURE__*/ react.createElement(Icon, {
+        icon: icon,
+        label: title,
+        size: "md",
+        color: isOpen ? "accent" : "neutral-light"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text-md text-neutral-primary " + (isOpen ? "font-semibold" : "")
+    }, title)), /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Toggle",
+        size: "md",
+        color: "neutral-strong",
+        className: "transition-transform " + (isOpen ? "rotate-180" : "")
+    }))), /*#__PURE__*/ react.createElement(Collapsible.Content, {
+        className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: noPadding ? "px-sm pt-sm pb-lg" : "px-md pt-sm pb-lg"
+    }, children)));
+};
+export { StyleAccordionItem };
+
+//# sourceMappingURL=StyleAccordionItem.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Collapsible } from \"radix-ui\";\nimport { ReactComponent as ChevronIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { Icon } from \"@webiny/admin-ui\";\n\nexport interface StyleAccordionItemProps {\n    title: string;\n    icon?: React.ReactElement;\n    defaultOpen?: boolean;\n    noPadding?: boolean;\n    children: React.ReactNode;\n}\n\nexport const StyleAccordionItem = ({\n    title,\n    icon,\n    defaultOpen = false,\n    noPadding = false,\n    children\n}: StyleAccordionItemProps) => {\n    const [isOpen, setIsOpen] = useState(defaultOpen);\n\n    return (\n        <Collapsible.Root defaultOpen={defaultOpen} onOpenChange={setIsOpen}>\n            <Collapsible.Trigger asChild>\n                <div\n                    role=\"button\"\n                    tabIndex={0}\n                    className={\n                        \"w-full flex items-center justify-between py-sm px-sm cursor-pointer select-none rounded-lg \" +\n                        (isOpen ? \"\" : \"bg-neutral-subtle\")\n                    }\n                    onKeyDown={e => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            e.currentTarget.click();\n                        }\n                    }}\n                >\n                    <div className={\"flex items-center gap-sm\"}>\n                        {icon && (\n                            <Icon\n                                icon={icon}\n                                label={title}\n                                size={\"md\"}\n                                color={isOpen ? \"accent\" : \"neutral-light\"}\n                            />\n                        )}\n                        <span\n                            className={\n                                \"text-md text-neutral-primary \" + (isOpen ? \"font-semibold\" : \"\")\n                            }\n                        >\n                            {title}\n                        </span>\n                    </div>\n                    <Icon\n                        icon={<ChevronIcon />}\n                        label={\"Toggle\"}\n                        size={\"md\"}\n                        color={\"neutral-strong\"}\n                        className={\"transition-transform \" + (isOpen ? \"rotate-180\" : \"\")}\n                    />\n                </div>\n            </Collapsible.Trigger>\n            <Collapsible.Content\n                className={\n                    \"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n                }\n            >\n                <div className={noPadding ? \"px-sm pt-sm pb-lg\" : \"px-md pt-sm pb-lg\"}>\n                    {children}\n                </div>\n            </Collapsible.Content>\n        </Collapsible.Root>\n    );\n};\n"],"names":["StyleAccordionItem","title","icon","defaultOpen","noPadding","children","isOpen","setIsOpen","useState","Collapsible","e","Icon","ChevronIcon"],"mappings":";;;;AAaO,MAAMA,qBAAqB,CAAC,EAC/BC,KAAK,EACLC,IAAI,EACJC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,QAAQ,EACc;IACtB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASL;IAErC,OAAO,WAAP,GACI,oBAACM,YAAY,IAAI;QAAC,aAAaN;QAAa,cAAcI;qBACtD,oBAACE,YAAY,OAAO;QAAC;qBACjB,oBAAC;QACG,MAAK;QACL,UAAU;QACV,WACI,gGACCH,CAAAA,SAAS,KAAK,mBAAkB;QAErC,WAAWI,CAAAA;YACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;gBACpCA,EAAE,cAAc;gBAChBA,EAAE,aAAa,CAAC,KAAK;YACzB;QACJ;qBAEA,oBAAC;QAAI,WAAW;OACXR,QAAQ,WAARA,GACG,oBAACS,MAAIA;QACD,MAAMT;QACN,OAAOD;QACP,MAAM;QACN,OAAOK,SAAS,WAAW;sBAGnC,oBAAC;QACG,WACI,kCAAmCA,CAAAA,SAAS,kBAAkB,EAAC;OAGlEL,SAAAA,WAAAA,GAGT,oBAACU,MAAIA;QACD,oBAAM,oBAACC,gBAAWA;QAClB,OAAO;QACP,MAAM;QACN,OAAO;QACP,WAAW,0BAA2BN,CAAAA,SAAS,eAAe,EAAC;wBAI3E,oBAACG,YAAY,OAAO;QAChB,WACI;qBAGJ,oBAAC;QAAI,WAAWL,YAAY,sBAAsB;OAC7CC;AAKrB"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js

@@ -1,6 +1,7 @@
 import react, { useCallback } from "react";
-import { Accordion } from "@webiny/admin-ui";
+import { StyleAccordion } from "./StyleAccordion.js";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { ElementPreview } from "../ElementPreview.js";
 import { Background } from "./Groups/Background.js";
 import { Border } from "./Groups/Border.js";
 import { MarginPadding } from "./Groups/MarginPadding.js";
@@ -22,7 +23,11 @@ const ElementStyleProperties = ({ element })=>{
     const isHidden = useCallback((name)=>hideStyles.includes(name), [
         hideStyles
     ]);
-    return /*#__PURE__*/ react.createElement(Accordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "pt-md mb-md px-sm"
+    }, /*#__PURE__*/ react.createElement(ElementPreview, {
+        element: element
+    })), /*#__PURE__*/ react.createElement(StyleAccordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
         elementId: element.id
     }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/ react.createElement(MarginPadding, {
         elementId: element.id
@@ -32,7 +37,7 @@ const ElementStyleProperties = ({ element })=>{
         elementId: element.id
     }), isHidden(StyleSettings.Visibility) ? null : /*#__PURE__*/ react.createElement(VisibilityGroup, {
         elementId: element.id
-    }));
+    })));
 };
 export { StyleProperties };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return <ElementStyleProperties element={element} />;\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <Accordion>\n            {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n            {isHidden(StyleSettings.MarginPadding) ? null : (\n                <MarginPadding elementId={element.id} />\n            )}\n            {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n            {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n            {isHidden(StyleSettings.Visibility) ? null : <VisibilityGroup elementId={element.id} />}\n        </Accordion>\n    );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","Accordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;AAYO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACE,wBAAsBA;QAAC,SAASF;;AAC5C;AAEA,MAAMG,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,EAAEF,OAAO,EAAgC;IACrE,MAAMI,oBAAoBC,4BAA4BL,QAAQ,EAAE;IAChE,MAAMM,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,oBAACI,WAASA,MACLH,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWZ,QAAQ,EAAE;QACrEO,SAASI,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWb,QAAQ,EAAE;QAEvCO,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWd,QAAQ,EAAE;QACrEO,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWf,QAAQ,EAAE;QAC7EO,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACK,iBAAeA;QAAC,WAAWhB,QAAQ,EAAE;;AAG/F"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { StyleAccordion } from \"./StyleAccordion.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { ElementPreview } from \"~/BaseEditor/defaultConfig/Sidebar/ElementPreview.js\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return <ElementStyleProperties element={element} />;\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <>\n            <div className={\"pt-md mb-md px-sm\"}>\n                <ElementPreview element={element} />\n            </div>\n            <StyleAccordion>\n                {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n                {isHidden(StyleSettings.MarginPadding) ? null : (\n                    <MarginPadding elementId={element.id} />\n                )}\n                {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n                {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n                {isHidden(StyleSettings.Visibility) ? null : (\n                    <VisibilityGroup elementId={element.id} />\n                )}\n            </StyleAccordion>\n        </>\n    );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","ElementPreview","StyleAccordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;;AAaO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACE,wBAAsBA;QAAC,SAASF;;AAC5C;AAEA,MAAMG,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,EAAEF,OAAO,EAAgC;IACrE,MAAMI,oBAAoBC,4BAA4BL,QAAQ,EAAE;IAChE,MAAMM,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,gBAAcA;QAAC,SAASV;uBAE7B,oBAACW,gBAAcA,MACVJ,SAASK,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWb,QAAQ,EAAE;QACrEO,SAASK,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWd,QAAQ,EAAE;QAEvCO,SAASK,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWf,QAAQ,EAAE;QACrEO,SAASK,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWhB,QAAQ,EAAE;QAC7EO,SAASK,cAAc,UAAU,IAAI,OAAO,WAAP,GAClC,oBAACK,iBAAeA;QAAC,WAAWjB,QAAQ,EAAE;;AAK1D"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js

@@ -1,20 +1,21 @@
 import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/select_all.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
 import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
-import { useActiveElement } from "../../../hooks/useActiveElement.js";
-const StyleSettingsGroup = ()=>{
-    const [element] = useActiveElement();
-    return /*#__PURE__*/ react.createElement(ScrollableContainer, {
+const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableContainer, {
         tabIndex: -1
     }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
         name: "style",
         label: "Style",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Style"
+        }),
         element: /*#__PURE__*/ react.createElement(Sidebar.Elements, {
             group: "style"
-        }),
-        noPadding: !!element
+        })
     }));
-};
 export { StyleSettingsGroup };
 
 //# sourceMappingURL=StyleSettingsGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\n\nexport const StyleSettingsGroup = () => {\n    const [element] = useActiveElement();\n\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"style\"}\n                label={\"Style\"}\n                element={<Sidebar.Elements group={\"style\"} />}\n                noPadding={element ? true : false}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"names":["StyleSettingsGroup","element","useActiveElement","ScrollableContainer","Sidebar"],"mappings":";;;;AAKO,MAAMA,qBAAqB;IAC9B,MAAM,CAACC,QAAQ,GAAGC;IAElB,OAAO,WAAP,GACI,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,uBAAS,oBAACA,QAAQ,QAAQ;YAAC,OAAO;;QAClC,SAAS,IAAEH;;AAI3B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as SelectAllIcon } from \"@webiny/icons/select_all.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const StyleSettingsGroup = () => {\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"style\"}\n                label={\"Style\"}\n                icon={<Icon icon={<SelectAllIcon />} label={\"Style\"} />}\n                element={<Sidebar.Elements group={\"style\"} />}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"names":["StyleSettingsGroup","ScrollableContainer","Sidebar","Icon","SelectAllIcon"],"mappings":";;;;;AAMO,MAAMA,qBAAqB,IACvB,WAAP,GACI,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,OAAO;;QAC5C,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js

@@ -1,7 +1,7 @@
 import { BindingsProcessor, ComponentManifestToAstConverter, InheritanceProcessor, StylesBindingsProcessor } from "@webiny/website-builder-sdk";
 import { BreakpointElementMetadata, ElementMetadata, NullMetadata, StylesMetadata } from "../../../metadata/index.js";
 import { Commands } from "../../../index.js";
-import { autorun, makeAutoObservable, runInAction } from "mobx";
+import { autorun, makeAutoObservable, runInAction, toJS } from "mobx";
 import { $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
 import { BASE_BREAKPOINT } from "../../../../constants.js";
 class StylesStore {
@@ -28,7 +28,7 @@ class StylesStore {
         };
         this.onPreviewChange = (cb)=>{
             if (!this.stylesProcessor) return;
-            const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));
+            const styles = new StylesValueObject(structuredClone(toJS(this.devFriendlyStyles)));
             cb({
                 styles,
                 metadata: this.elementMetadata