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

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

@@ -1,4 +1,4 @@
-import React from "react";
+import react from "react";
 import { observer } from "mobx-react-lite";
 import { LinkedEditing } from "./LinkedEditing.js";
 import { useStyles } from "../../useStyles.js";
@@ -7,132 +7,106 @@ import { useStyleValue } from "../../useStyleValue.js";
 import { UnitsOptions } from "../../UnitsOptions.js";
 const widthOptions = UnitsOptions.widthUnits().getOptions();
 const heightOptions = UnitsOptions.heightUnits().getOptions();
-export const BorderWidth = observer(({
-  elementId
-}) => {
-  const {
-    onChange,
-    onPreviewChange,
-    metadata
-  } = useStyles(elementId);
-  const borderTopWidth = useStyleValue(elementId, "borderTopWidth");
-  const borderRightWidth = useStyleValue(elementId, "borderRightWidth");
-  const borderBottomWidth = useStyleValue(elementId, "borderBottomWidth");
-  const borderLeftWidth = useStyleValue(elementId, "borderLeftWidth");
-  const linked = metadata.get("borderWidthLinkedEditing") ?? true;
-  const onToggleLinkedEditing = linked => {
-    onChange(({
-      styles,
-      metadata
-    }) => {
-      if (linked) {
-        const value = `${borderTopWidth.value ?? 0}${borderTopWidth.unit}`;
-        styles.set("borderRightWidth", value);
-        styles.set("borderBottomWidth", value);
-        styles.set("borderLeftWidth", value);
-      }
-      metadata.set("borderWidthLinkedEditing", linked);
-    });
-  };
-  const onBorderTopWidthChange = value => {
-    if (linked) {
-      onChange(({
-        styles
-      }) => {
-        styles.set("borderTopWidth", value);
-        styles.set("borderRightWidth", value);
-        styles.set("borderBottomWidth", value);
-        styles.set("borderLeftWidth", value);
-      });
-    } else {
-      borderTopWidth.onChange(value);
-    }
-  };
-  const onBorderTopWidthPreviewChange = value => {
-    if (linked) {
-      onPreviewChange(({
-        styles
-      }) => {
-        styles.set("borderTopWidth", value);
-        styles.set("borderRightWidth", value);
-        styles.set("borderBottomWidth", value);
-        styles.set("borderLeftWidth", value);
-      });
-    } else {
-      borderTopWidth.onChangePreview(value);
-    }
-  };
-  const onReset = () => {
-    if (linked) {
-      onChange(({
-        styles
-      }) => {
-        styles.unset("borderTopWidth");
-        styles.unset("borderRightWidth");
-        styles.unset("borderBottomWidth");
-        styles.unset("borderLeftWidth");
-      });
-    } else {
-      borderTopWidth.onReset();
-    }
-  };
-  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"
-  }, /*#__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"
-    }
-  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
-    label: linked ? "Border width" : "Top border width"
-  }, borderTopWidth, {
-    onReset: onReset,
-    units: heightOptions,
-    onChange: onBorderTopWidthChange,
-    onChangePreview: onBorderTopWidthPreviewChange
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: rowClassname,
-    style: {
-      width: 168,
-      paddingTop: "8px"
-    }
-  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
-    label: "Left border width"
-  }, borderLeftWidth, {
-    units: widthOptions,
-    disabled: linked
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex border-sm border-neutral-muted bg-neutral-light rounded-md items-center justify-center",
-    style: {
-      width: 170,
-      height: 30
-    }
-  }, "-"), /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
-    label: "Right border width"
-  }, borderRightWidth, {
-    units: widthOptions,
-    disabled: linked
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: rowClassname,
-    style: {
-      padding: "8px 0"
-    }
-  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
-    label: "Bottom border width"
-  }, borderBottomWidth, {
-    units: heightOptions,
-    disabled: linked
-  }))));
+const BorderWidth = observer(({ elementId })=>{
+    const { onChange, onPreviewChange, metadata } = useStyles(elementId);
+    const borderTopWidth = useStyleValue(elementId, "borderTopWidth");
+    const borderRightWidth = useStyleValue(elementId, "borderRightWidth");
+    const borderBottomWidth = useStyleValue(elementId, "borderBottomWidth");
+    const borderLeftWidth = useStyleValue(elementId, "borderLeftWidth");
+    const linked = metadata.get("borderWidthLinkedEditing") ?? true;
+    const onToggleLinkedEditing = (linked)=>{
+        onChange(({ styles, metadata })=>{
+            if (linked) {
+                const value = `${borderTopWidth.value ?? 0}${borderTopWidth.unit}`;
+                styles.set("borderRightWidth", value);
+                styles.set("borderBottomWidth", value);
+                styles.set("borderLeftWidth", value);
+            }
+            metadata.set("borderWidthLinkedEditing", linked);
+        });
+    };
+    const onBorderTopWidthChange = (value)=>{
+        if (linked) onChange(({ styles })=>{
+            styles.set("borderTopWidth", value);
+            styles.set("borderRightWidth", value);
+            styles.set("borderBottomWidth", value);
+            styles.set("borderLeftWidth", value);
+        });
+        else borderTopWidth.onChange(value);
+    };
+    const onBorderTopWidthPreviewChange = (value)=>{
+        if (linked) onPreviewChange(({ styles })=>{
+            styles.set("borderTopWidth", value);
+            styles.set("borderRightWidth", value);
+            styles.set("borderBottomWidth", value);
+            styles.set("borderLeftWidth", value);
+        });
+        else borderTopWidth.onChangePreview(value);
+    };
+    const onReset = ()=>{
+        if (linked) onChange(({ styles })=>{
+            styles.unset("borderTopWidth");
+            styles.unset("borderRightWidth");
+            styles.unset("borderBottomWidth");
+            styles.unset("borderLeftWidth");
+        });
+        else borderTopWidth.onReset();
+    };
+    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 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: "text-sm"
+    }, "Border width"), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center"
+    }, /*#__PURE__*/ react.createElement(ValueSelector, {
+        label: linked ? "Border width" : "Top border width",
+        ...borderTopWidth,
+        onReset: onReset,
+        units: heightOptions,
+        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,
+            paddingTop: "8px"
+        }
+    }, /*#__PURE__*/ react.createElement(ValueSelector, {
+        label: "Left border width",
+        ...borderLeftWidth,
+        units: widthOptions,
+        disabled: linked
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex border-sm border-neutral-muted bg-neutral-light rounded-md items-center justify-center",
+        style: {
+            width: 170,
+            height: 30
+        }
+    }, "-"), /*#__PURE__*/ react.createElement(ValueSelector, {
+        label: "Right border width",
+        ...borderRightWidth,
+        units: widthOptions,
+        disabled: linked
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: rowClassname,
+        style: {
+            padding: "8px 0"
+        }
+    }, /*#__PURE__*/ react.createElement(ValueSelector, {
+        label: "Bottom border width",
+        ...borderBottomWidth,
+        units: heightOptions,
+        disabled: linked
+    })));
 });
+export { BorderWidth };
 
 //# sourceMappingURL=BorderWidth.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","LinkedEditing","useStyles","ValueSelector","useStyleValue","UnitsOptions","widthOptions","widthUnits","getOptions","heightOptions","heightUnits","BorderWidth","elementId","onChange","onPreviewChange","metadata","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","linked","get","onToggleLinkedEditing","styles","value","unit","set","onBorderTopWidthChange","onBorderTopWidthPreviewChange","onChangePreview","onReset","unset","rowClassname","createElement","className","style","top","left","onToggle","paddingTop","Object","assign","label","units","width","disabled","height","padding"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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/LinkedEditing.js

@@ -1,28 +1,24 @@
-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: "absolute cursor-pointer 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: "absolute cursor-pointer fill-neutral-strong",
+        style: {
+            top: 2,
+            right: 4
+        }
+    }, 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/Border/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 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"],"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;IAAKC,SAAS,EAAE,6CAA8C;IAACC,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE;EAAE,GACtFN,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/Border/LinkedEditing.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/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"}

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

@@ -1,20 +1,14 @@
-import React from "react";
-import { Accordion } from "@webiny/admin-ui";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/border_all.svg";
+import { StyleAccordion } from "../StyleAccordion.js";
 import { BorderControl } from "./Border/Border.js";
-export const Border = ({
-  elementId
-}) => {
-  return /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: "Border",
-    description: "Set border width, radius, style, and color"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: 280,
-      marginLeft: -8
-    }
-  }, /*#__PURE__*/React.createElement(BorderControl, {
-    elementId: elementId
-  })));
-};
+const Border = ({ elementId })=>/*#__PURE__*/ react.createElement(StyleAccordion.Item, {
+        title: "Border",
+        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,"names":["React","Accordion","BorderControl","Border","elementId","createElement","Item","title","description","style","width","marginLeft"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,aAAa;AAMtB,OAAO,MAAMC,MAAM,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAClD,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,SAAS,CAACK,IAAI;IAACC,KAAK,EAAE,QAAS;IAACC,WAAW,EAAE;EAA6C,gBACvFR,KAAA,CAAAK,aAAA;IAAKI,KAAK,EAAE;MAAEC,KAAK,EAAE,GAAG;MAAEC,UAAU,EAAE,CAAC;IAAE;EAAE,gBACvCX,KAAA,CAAAK,aAAA,CAACH,aAAa;IAACE,SAAS,EAAEA;EAAU,CAAE,CACrC,CACO,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"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;
 };