@webiny/app-website-builder 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

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

@@ -1,28 +1,20 @@
-import React from "react";
+import react from "react";
 import { Icon } from "@webiny/admin-ui";
-import { ReactComponent as LinkOn } from "@webiny/icons/link.svg";
-import { ReactComponent as LinkOff } from "@webiny/icons/link_off.svg";
-export const LinkedEditing = ({
-  linked,
-  onToggle
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "wby-absolute wby-cursor-pointer wby-fill-neutral-strong",
-    style: {
-      top: 2,
-      right: 4
-    }
-  }, linked ? /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LinkOff, null),
-    label: "Disable linked editing.",
-    size: "sm",
-    onClick: () => onToggle(false)
-  }) : /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LinkOn, null),
-    label: "Enable linked editing.",
-    size: "sm",
-    onClick: () => onToggle(true)
-  }));
-};
+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: "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.",
+        size: "sm",
+        onClick: ()=>onToggle(false)
+    }) : /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Enable linked editing.",
+        size: "sm",
+        onClick: ()=>onToggle(true)
+    }));
+export { LinkedEditing };
 
 //# sourceMappingURL=LinkedEditing.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","ReactComponent","LinkOn","LinkOff","LinkedEditing","linked","onToggle","createElement","className","style","top","right","icon","label","size","onClick"],"sources":["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\n            className={\"wby-absolute wby-cursor-pointer wby-fill-neutral-strong\"}\n            style={{ top: 2, right: 4 }}\n        >\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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,cAAc,IAAIC,MAAM,QAAQ,wBAAwB;AACjE,SAASD,cAAc,IAAIE,OAAO,QAAQ,4BAA4B;AAOtE,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,MAAM;EAAEC;AAA6B,CAAC,KAAK;EACvE,oBACIP,KAAA,CAAAQ,aAAA;IACIC,SAAS,EAAE,yDAA0D;IACrEC,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE;EAAE,GAE3BN,MAAM,gBACHN,KAAA,CAAAQ,aAAA,CAACP,IAAI;IACDY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACJ,OAAO,MAAE,CAAE;IAClBU,KAAK,EAAE,yBAA0B;IACjCC,IAAI,EAAE,IAAK;IACXC,OAAO,EAAEA,CAAA,KAAMT,QAAQ,CAAC,KAAK;EAAE,CAClC,CAAC,gBAEFP,KAAA,CAAAQ,aAAA,CAACP,IAAI;IACDY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACL,MAAM,MAAE,CAAE;IACjBW,KAAK,EAAE,wBAAyB;IAChCC,IAAI,EAAE,IAAK;IACXC,OAAO,EAAEA,CAAA,KAAMT,QAAQ,CAAC,IAAI;EAAE,CACjC,CAEJ,CAAC;AAEd,CAAC","ignoreList":[]}
+{"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

@@ -1,134 +1,102 @@
-import React from "react";
+import react from "react";
 import { observer } from "mobx-react-lite";
-import { useStyles } from "../../useStyles";
-import { LinkedEditing } from "./LinkedEditing";
-import { ValueSelector } from "../../ValueSelector";
-import { UnitsOptions } from "../../UnitsOptions";
-import { useStyleValue } from "../../useStyleValue";
-const additionalUnits = ["auto", "unset"];
+import { useStyles } from "../../useStyles.js";
+import { LinkedEditing } from "./LinkedEditing.js";
+import { ValueSelector } from "../../ValueSelector.js";
+import { UnitsOptions } from "../../UnitsOptions.js";
+import { useStyleValue } from "../../useStyleValue.js";
+const additionalUnits = [
+    "auto",
+    "unset"
+];
 const widthOptions = UnitsOptions.widthUnits().add(...additionalUnits).getOptions();
 const heightOptions = UnitsOptions.heightUnits().add(...additionalUnits).getOptions();
-export const Margin = observer(({
-  elementId,
-  children
-}) => {
-  const {
-    onChange,
-    onPreviewChange,
-    metadata
-  } = useStyles(elementId);
-  const marginTop = useStyleValue(elementId, "marginTop");
-  const marginRight = useStyleValue(elementId, "marginRight");
-  const marginBottom = useStyleValue(elementId, "marginBottom");
-  const marginLeft = useStyleValue(elementId, "marginLeft");
-  const linked = metadata.get("marginLinkedEditing") ?? true;
-  const onToggleLinkedEditing = linked => {
-    onChange(({
-      styles,
-      metadata
-    }) => {
-      if (linked) {
-        const isKeyword = marginTop.isKeyword;
-        const value = isKeyword ? marginTop.value : `${marginTop.value ?? 0}${marginTop.unit}`;
-        styles.set("marginRight", value);
-        styles.set("marginBottom", value);
-        styles.set("marginLeft", value);
-      }
-      metadata.set("marginLinkedEditing", linked);
-    });
-  };
-  const onMarginTopChange = value => {
-    if (linked) {
-      onChange(({
-        styles
-      }) => {
-        styles.set("marginTop", value);
-        styles.set("marginRight", value);
-        styles.set("marginBottom", value);
-        styles.set("marginLeft", value);
-      });
-    } else {
-      marginTop.onChange(value);
-    }
-  };
-  const onMarginTopPreviewChange = value => {
-    if (linked) {
-      onPreviewChange(({
-        styles
-      }) => {
-        styles.set("marginTop", value);
-        styles.set("marginRight", value);
-        styles.set("marginBottom", value);
-        styles.set("marginLeft", value);
-      });
-    } else {
-      marginTop.onChangePreview(value);
-    }
-  };
-  const onReset = () => {
-    if (linked) {
-      onChange(({
-        styles
-      }) => {
-        styles.unset("marginTop");
-        styles.unset("marginRight");
-        styles.unset("marginBottom");
-        styles.unset("marginLeft");
-      });
-    } else {
-      marginTop.onReset();
-    }
-  };
-  const rowClassname = "wby-flex wby-flex-row wby-w-full wby-justify-center wby-items-center";
-  return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-col wby-rounded-md wby-relative"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "wby-absolute wby-text-sm",
-    style: {
-      top: 5,
-      left: 7
-    }
-  }, "Margin"), /*#__PURE__*/React.createElement("div", {
-    className: rowClassname,
-    style: {
-      paddingTop: "8px"
-    }
-  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
-    label: linked ? "Margin" : "Top margin"
-  }, marginTop, {
-    onReset: onReset,
-    units: heightOptions,
-    onChange: onMarginTopChange,
-    onChangePreview: onMarginTopPreviewChange
-  }))), /*#__PURE__*/React.createElement(LinkedEditing, {
-    linked: linked,
-    onToggle: onToggleLinkedEditing
-  }), /*#__PURE__*/React.createElement("div", {
-    className: rowClassname,
-    style: {
-      paddingTop: "8px"
-    }
-  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
-    label: "Left margin"
-  }, marginLeft, {
-    units: widthOptions,
-    disabled: linked
-  })), children, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
-    label: "Right margin"
-  }, marginRight, {
-    units: widthOptions,
-    disabled: linked
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: rowClassname,
-    style: {
-      padding: "8px 0"
-    }
-  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
-    label: "Bottom margin"
-  }, marginBottom, {
-    units: heightOptions,
-    disabled: linked
-  }))));
+const Margin = observer(({ elementId, children })=>{
+    const { onChange, onPreviewChange, metadata } = useStyles(elementId);
+    const marginTop = useStyleValue(elementId, "marginTop");
+    const marginRight = useStyleValue(elementId, "marginRight");
+    const marginBottom = useStyleValue(elementId, "marginBottom");
+    const marginLeft = useStyleValue(elementId, "marginLeft");
+    const linked = metadata.get("marginLinkedEditing") ?? true;
+    const onToggleLinkedEditing = (linked)=>{
+        onChange(({ styles, metadata })=>{
+            if (linked) {
+                const isKeyword = marginTop.isKeyword;
+                const value = isKeyword ? marginTop.value : `${marginTop.value ?? 0}${marginTop.unit}`;
+                styles.set("marginRight", value);
+                styles.set("marginBottom", value);
+                styles.set("marginLeft", value);
+            }
+            metadata.set("marginLinkedEditing", linked);
+        });
+    };
+    const onMarginTopChange = (value)=>{
+        if (linked) onChange(({ styles })=>{
+            styles.set("marginTop", value);
+            styles.set("marginRight", value);
+            styles.set("marginBottom", value);
+            styles.set("marginLeft", value);
+        });
+        else marginTop.onChange(value);
+    };
+    const onMarginTopPreviewChange = (value)=>{
+        if (linked) onPreviewChange(({ styles })=>{
+            styles.set("marginTop", value);
+            styles.set("marginRight", value);
+            styles.set("marginBottom", value);
+            styles.set("marginLeft", value);
+        });
+        else marginTop.onChangePreview(value);
+    };
+    const onReset = ()=>{
+        if (linked) onChange(({ styles })=>{
+            styles.unset("marginTop");
+            styles.unset("marginRight");
+            styles.unset("marginBottom");
+            styles.unset("marginLeft");
+        });
+        else marginTop.onReset();
+    };
+    const rowClassname = "flex flex-row w-full justify-center items-center";
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-3 items-center"
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "text-sm text-neutral-strong"
+    }, "Margin"), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center"
+    }, /*#__PURE__*/ react.createElement(ValueSelector, {
+        label: linked ? "Margin" : "Top margin",
+        ...marginTop,
+        onReset: onReset,
+        units: heightOptions,
+        onChange: onMarginTopChange,
+        onChangePreview: onMarginTopPreviewChange
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-end"
+    }, /*#__PURE__*/ react.createElement(LinkedEditing, {
+        linked: linked,
+        onToggle: onToggleLinkedEditing
+    }))), /*#__PURE__*/ react.createElement("div", {
+        className: rowClassname
+    }, /*#__PURE__*/ react.createElement(ValueSelector, {
+        label: "Left margin",
+        ...marginLeft,
+        units: widthOptions,
+        disabled: linked
+    }), children, /*#__PURE__*/ react.createElement(ValueSelector, {
+        label: "Right margin",
+        ...marginRight,
+        units: widthOptions,
+        disabled: linked
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: rowClassname
+    }, /*#__PURE__*/ react.createElement(ValueSelector, {
+        label: "Bottom margin",
+        ...marginBottom,
+        units: heightOptions,
+        disabled: linked
+    })));
 });
+export { Margin };
 
 //# sourceMappingURL=Margin.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","useStyles","LinkedEditing","ValueSelector","UnitsOptions","useStyleValue","additionalUnits","widthOptions","widthUnits","add","getOptions","heightOptions","heightUnits","Margin","elementId","children","onChange","onPreviewChange","metadata","marginTop","marginRight","marginBottom","marginLeft","linked","get","onToggleLinkedEditing","styles","isKeyword","value","unit","set","onMarginTopChange","onMarginTopPreviewChange","onChangePreview","onReset","unset","rowClassname","createElement","className","style","top","left","paddingTop","Object","assign","label","units","onToggle","disabled","padding"],"sources":["Margin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useStyles } from \"../../useStyles\";\nimport { LinkedEditing } from \"./LinkedEditing\";\nimport { ValueSelector } from \"../../ValueSelector\";\nimport { UnitsOptions } from \"../../UnitsOptions\";\nimport { useStyleValue } from \"../../useStyleValue\";\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 = \"wby-flex wby-flex-row wby-w-full wby-justify-center wby-items-center\";\n\n    return (\n        <div className=\"wby-flex wby-flex-col wby-rounded-md wby-relative\">\n            {/* Margin Label */}\n            <span className=\"wby-absolute wby-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"],"mappings":"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","ignoreList":[]}
+{"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

@@ -1,16 +1,14 @@
-import React from "react";
-import { Margin } from "./Margin";
-import { Padding } from "./Padding";
-export const MarginPaddingControl = ({
-  elementId
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-light wby-text-neutral-strong wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted"
-  }, /*#__PURE__*/React.createElement(Margin, {
-    elementId: elementId
-  }, /*#__PURE__*/React.createElement(Padding, {
-    elementId: elementId
-  })));
-};
+import react from "react";
+import { Margin } from "./Margin.js";
+import { Padding } from "./Padding.js";
+const MarginPaddingControl = ({ elementId })=>/*#__PURE__*/ react.createElement("div", {
+        "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, {
+        elementId: elementId
+    })));
+export { MarginPaddingControl };
 
 //# sourceMappingURL=MarginPadding.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Margin","Padding","MarginPaddingControl","elementId","createElement","className"],"sources":["MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { Margin } from \"./Margin\";\nimport { Padding } from \"./Padding\";\n\nexport const MarginPaddingControl = ({ elementId }: { elementId: string }) => {\n    return (\n        <div className=\"wby-bg-neutral-light wby-text-neutral-strong wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted\">\n            <Margin elementId={elementId}>\n                <Padding elementId={elementId} />\n            </Margin>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM;AACf,SAASC,OAAO;AAEhB,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC;AAAiC,CAAC,KAAK;EAC1E,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAA+G,gBAC1HN,KAAA,CAAAK,aAAA,CAACJ,MAAM;IAACG,SAAS,EAAEA;EAAU,gBACzBJ,KAAA,CAAAK,aAAA,CAACH,OAAO;IAACE,SAAS,EAAEA;EAAU,CAAE,CAC5B,CACP,CAAC;AAEd,CAAC","ignoreList":[]}
+{"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 {};