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

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.d.ts

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

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.d.ts

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

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/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":";;;;;;;;;;;;AAaA,MAAMA,gBAAgB;AACtB,MAAMC,kBAAkB;AAcjB,MAAMC,YAAYC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACnE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAKvD,MAAMK,cAAc;QAChBH,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,eAAe;YAC1B,IAAIA,AAA6B,WAA7BA,OAAO,GAAG,CAAC,eACXA,OAAO,GAAG,CAAC,cAAc;QAEjC;IACJ;IAEA,MAAMK,eAAe;QACjBJ,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,cAAc;YACzB,IAAIA,AAA8B,WAA9BA,OAAO,GAAG,CAAC,gBACXA,OAAO,GAAG,CAAC,eAAe;QAElC;IACJ;IAEA,MAAMM,uBAAuB;QACzBL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,cAAc;YACzBA,OAAO,GAAG,CAAC,eAAe;QAC9B;IACJ;IAKA,MAAMO,aAAa;QACfN,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,gBAAgB;YAC3B,IAAIA,AAA4B,WAA5BA,OAAO,GAAG,CAAC,cACXA,OAAO,GAAG,CAAC,aAAa;QAEhC;IACJ;IAEA,MAAMQ,qBAAqB;QACvBP,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,aAAa;YACxBA,OAAO,GAAG,CAAC,gBAAgB;QAC/B;IACJ;IAEA,MAAMS,gBAAgB;QAClBR,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,aAAa;YACxB,IAAIA,AAA+B,WAA/BA,OAAO,GAAG,CAAC,iBACXA,OAAO,GAAG,CAAC,gBAAgB;QAEnC;IACJ;IAEA,MAAMU,UAAU;QACZT,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMW,gBAAgBX,AAAuB,WAAvBA,OAAO,WAAW,IAAeA,AAAsB,WAAtBA,OAAO,UAAU;IACxE,MAAMY,yBAAyBZ,AAAuB,WAAvBA,OAAO,WAAW,IAAeA,AAAsB,WAAtBA,OAAO,UAAU;IACjF,MAAMa,iBAAiBb,AAAuB,WAAvBA,OAAO,WAAW,IAAeA,AAAsB,WAAtBA,OAAO,UAAU;IACzE,MAAMc,iBAAiBd,AAAwB,WAAxBA,OAAO,YAAY,IAAeA,AAAqB,WAArBA,OAAO,SAAS;IACzE,MAAMe,oBAAoBf,AAAwB,WAAxBA,OAAO,YAAY,IAAeA,AAAqB,WAArBA,OAAO,SAAS;IAC5E,MAAMgB,uBAAuBhB,AAAwB,WAAxBA,OAAO,YAAY,IAAeA,AAAqB,WAArBA,OAAO,SAAS;IAE/E,MAAMiB,eAAe;QACjBf,eAAe,SAAS;QACxBA,eAAe,WAAW;QAC1BA,eAAe,YAAY;QAC3BA,eAAe,UAAU;KAC5B,CACI,MAAM,CAACgB,SACP,IAAI,CAACC,CAAAA,OAAQA,KAAK,UAAU;IAEjC,OAAO,WAAP,GACI,oBAACC,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YAAC,MAAM;YAAS,SAASX;YAAS,cAAcO;;qBAGrE,oBAAC;QAAI,WAAW;qBAEZ,oBAACK,YAAUA;QACP,oBAAM,oBAACC,0CAASA;QAChB,SAASZ,gBAAgBhB,gBAAgBC;QACzC,SAASQ;QACT,SAAS;sBAEb,oBAACkB,YAAUA;QACP,oBAAM,oBAACE,4CAAkBA;QACzB,SAASZ,yBAAyBjB,gBAAgBC;QAClD,SAASU;QACT,SAAS;sBAEb,oBAACgB,YAAUA;QACP,oBAAM,oBAACG,2CAAUA;QACjB,SAASZ,iBAAiBlB,gBAAgBC;QAC1C,SAASS;QACT,SAAS;sBAGb,oBAACiB,YAAUA;QACP,oBAAM,oBAACI,uCAAUA;QACjB,SAASZ,iBAAiBnB,gBAAgBC;QAC1C,SAASW;QACT,SAAS;sBAEb,oBAACe,YAAUA;QACP,oBAAM,oBAACK,0CAAgBA;QACvB,SAASX,uBAAuBrB,gBAAgBC;QAChD,SAASY;QACT,SAAS;sBAEb,oBAACc,YAAUA;QACP,oBAAM,oBAACM,gBAAaA;QACpB,SAASb,oBAAoBpB,gBAAgBC;QAC7C,SAASa;QACT,SAAS;;AAK7B"}

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

@@ -7,7 +7,7 @@ interface LengthWithUnitInputProps {
     unitOptions: UnitOption[];
     defaultValue?: string;
 }
-export declare const LengthWithUnitInput: (({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const LengthWithUnitInput: (({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element) & React.NamedExoticComponent<LengthWithUnitInputProps> & {
+    readonly type: ({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => React.JSX.Element;
 };
 export {};

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

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Margin.d.ts

@@ -3,7 +3,7 @@ interface MarginProps {
     elementId: string;
     children: React.ReactNode;
 }
-export declare const Margin: (({ elementId, children }: MarginProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Margin: (({ elementId, children }: MarginProps) => React.JSX.Element) & React.NamedExoticComponent<MarginProps> & {
+    readonly type: ({ elementId, children }: MarginProps) => React.JSX.Element;
 };
 export {};

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":"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"}
+{"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.d.ts

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