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

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

@@ -1,156 +1,113 @@
-import React from "react";
+import react from "react";
 import { observer } from "mobx-react-lite";
-import { ReactComponent as AlignToBottom } from "@webiny/icons/vertical_align_bottom.svg";
-import { ReactComponent as AlignToTop } from "@webiny/icons/vertical_align_top.svg";
-import { ReactComponent as CenterVertically } from "@webiny/icons/vertical_align_center.svg";
-import { ReactComponent as AlignLeft } from "@webiny/icons/align_horizontal_left.svg";
-import { ReactComponent as AlignRight } from "@webiny/icons/align_horizontal_right.svg";
-import { ReactComponent as CenterHorizontally } from "@webiny/icons/align_horizontal_center.svg";
+import { ReactComponent } from "@webiny/icons/vertical_align_bottom.svg";
+import { ReactComponent as vertical_align_top_svg_ReactComponent } from "@webiny/icons/vertical_align_top.svg";
+import { ReactComponent as vertical_align_center_svg_ReactComponent } from "@webiny/icons/vertical_align_center.svg";
+import { ReactComponent as align_horizontal_left_svg_ReactComponent } from "@webiny/icons/align_horizontal_left.svg";
+import { ReactComponent as align_horizontal_right_svg_ReactComponent } from "@webiny/icons/align_horizontal_right.svg";
+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 { IconButton } from "./IconButton.js";
 const activeVariant = "secondary";
 const inactiveVariant = "ghost";
-
-/**
- * Alignment is controlled with margin and display: flex.
- * -----
- * Align to the left => margin-right: auto;
- * Align to the right => margin-left: auto;
- * Center horizontally => margin-left: auto; margin-right: auto;
- * Full width: unset margin-left and margin-right.
- * -----
- * Align to the top => margin-bottom: auto;
- * Align to the bottom => margin-top: auto;
- * Center vertically => margin-top: auto; margin-bottom: auto;
- */
-export const Alignment = observer(({
-  elementId
-}) => {
-  const {
-    styles,
-    onChange,
-    inheritanceMap
-  } = useStyles(elementId);
-
-  /**
-   * Horizontal alignment
-   */
-  const onAlignLeft = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.set("marginRight", "auto");
-      if (styles.get("marginLeft") === "auto") {
-        styles.set("marginLeft", "unset");
-      }
-    });
-  };
-  const onAlignRight = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.set("marginLeft", "auto");
-      if (styles.get("marginRight") === "auto") {
-        styles.set("marginRight", "unset");
-      }
-    });
-  };
-  const onCenterHorizontally = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.set("marginLeft", "auto");
-      styles.set("marginRight", "auto");
-    });
-  };
-
-  /**
-   * Vertical alignment
-   */
-  const onAlignTop = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.set("marginBottom", "auto");
-      if (styles.get("marginTop") === "auto") {
-        styles.set("marginTop", "unset");
-      }
-    });
-  };
-  const onCenterVertically = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.set("marginTop", "auto");
-      styles.set("marginBottom", "auto");
-    });
-  };
-  const onAlignBottom = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.set("marginTop", "auto");
-      if (styles.get("marginBottom") === "auto") {
-        styles.set("marginBottom", "unset");
-      }
-    });
-  };
-  const onReset = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.unset("width");
-      styles.unset("marginTop");
-      styles.unset("marginRight");
-      styles.unset("marginBottom");
-      styles.unset("marginLeft");
-    });
-  };
-  const isLeftAligned = styles.marginRight === "auto" && styles.marginLeft !== "auto";
-  const isHorizontallyCentered = styles.marginRight === "auto" && styles.marginLeft === "auto";
-  const isRightAligned = styles.marginRight !== "auto" && styles.marginLeft === "auto";
-  const isAlignedToTop = styles.marginBottom === "auto" && styles.marginTop !== "auto";
-  const isAlignedToBottom = styles.marginBottom !== "auto" && styles.marginTop === "auto";
-  const isVerticallyCentered = styles.marginBottom === "auto" && styles.marginTop === "auto";
-  const isOverridden = [inheritanceMap.marginTop, inheritanceMap.marginRight, 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", {
-    className: "flex flex-row w-full justify-between"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(AlignLeft, null),
-    variant: isLeftAligned ? activeVariant : inactiveVariant,
-    onClick: onAlignLeft,
-    tooltip: "Align to the left side"
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(CenterHorizontally, null),
-    variant: isHorizontallyCentered ? activeVariant : inactiveVariant,
-    onClick: onCenterHorizontally,
-    tooltip: "Center horizontally"
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(AlignRight, null),
-    variant: isRightAligned ? activeVariant : inactiveVariant,
-    onClick: onAlignRight,
-    tooltip: "Align to the right side"
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(AlignToTop, null),
-    variant: isAlignedToTop ? activeVariant : inactiveVariant,
-    onClick: onAlignTop,
-    tooltip: "Align to the top side"
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(CenterVertically, null),
-    variant: isVerticallyCentered ? activeVariant : inactiveVariant,
-    onClick: onCenterVertically,
-    tooltip: "Center vertically"
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(AlignToBottom, null),
-    variant: isAlignedToBottom ? activeVariant : inactiveVariant,
-    onClick: onAlignBottom,
-    tooltip: "Align to the bottom side"
-  })));
+const Alignment = observer(({ elementId })=>{
+    const { styles, onChange, inheritanceMap } = useStyles(elementId);
+    const onAlignLeft = ()=>{
+        onChange(({ styles })=>{
+            styles.set("marginRight", "auto");
+            if ("auto" === styles.get("marginLeft")) styles.set("marginLeft", "unset");
+        });
+    };
+    const onAlignRight = ()=>{
+        onChange(({ styles })=>{
+            styles.set("marginLeft", "auto");
+            if ("auto" === styles.get("marginRight")) styles.set("marginRight", "unset");
+        });
+    };
+    const onCenterHorizontally = ()=>{
+        onChange(({ styles })=>{
+            styles.set("marginLeft", "auto");
+            styles.set("marginRight", "auto");
+        });
+    };
+    const onAlignTop = ()=>{
+        onChange(({ styles })=>{
+            styles.set("marginBottom", "auto");
+            if ("auto" === styles.get("marginTop")) styles.set("marginTop", "unset");
+        });
+    };
+    const onCenterVertically = ()=>{
+        onChange(({ styles })=>{
+            styles.set("marginTop", "auto");
+            styles.set("marginBottom", "auto");
+        });
+    };
+    const onAlignBottom = ()=>{
+        onChange(({ styles })=>{
+            styles.set("marginTop", "auto");
+            if ("auto" === styles.get("marginBottom")) styles.set("marginBottom", "unset");
+        });
+    };
+    const onReset = ()=>{
+        onChange(({ styles })=>{
+            styles.unset("width");
+            styles.unset("marginTop");
+            styles.unset("marginRight");
+            styles.unset("marginBottom");
+            styles.unset("marginLeft");
+        });
+    };
+    const isLeftAligned = "auto" === styles.marginRight && "auto" !== styles.marginLeft;
+    const isHorizontallyCentered = "auto" === styles.marginRight && "auto" === styles.marginLeft;
+    const isRightAligned = "auto" !== styles.marginRight && "auto" === styles.marginLeft;
+    const isAlignedToTop = "auto" === styles.marginBottom && "auto" !== styles.marginTop;
+    const isAlignedToBottom = "auto" !== styles.marginBottom && "auto" === styles.marginTop;
+    const isVerticallyCentered = "auto" === styles.marginBottom && "auto" === styles.marginTop;
+    const isOverridden = [
+        inheritanceMap.marginTop,
+        inheritanceMap.marginRight,
+        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", {
+        className: "flex flex-row w-full justify-between"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(align_horizontal_left_svg_ReactComponent, null),
+        variant: isLeftAligned ? activeVariant : inactiveVariant,
+        onClick: onAlignLeft,
+        tooltip: "Align to the left side"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(align_horizontal_center_svg_ReactComponent, null),
+        variant: isHorizontallyCentered ? activeVariant : inactiveVariant,
+        onClick: onCenterHorizontally,
+        tooltip: "Center horizontally"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(align_horizontal_right_svg_ReactComponent, null),
+        variant: isRightAligned ? activeVariant : inactiveVariant,
+        onClick: onAlignRight,
+        tooltip: "Align to the right side"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(vertical_align_top_svg_ReactComponent, null),
+        variant: isAlignedToTop ? activeVariant : inactiveVariant,
+        onClick: onAlignTop,
+        tooltip: "Align to the top side"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(vertical_align_center_svg_ReactComponent, null),
+        variant: isVerticallyCentered ? activeVariant : inactiveVariant,
+        onClick: onCenterVertically,
+        tooltip: "Center vertically"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        variant: isAlignedToBottom ? activeVariant : inactiveVariant,
+        onClick: onAlignBottom,
+        tooltip: "Align to the bottom side"
+    })));
 });
+export { Alignment };
 
 //# sourceMappingURL=Alignment.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","ReactComponent","AlignToBottom","AlignToTop","CenterVertically","AlignLeft","AlignRight","CenterHorizontally","useStyles","InheritanceLabel","IconButton","activeVariant","inactiveVariant","Alignment","elementId","styles","onChange","inheritanceMap","onAlignLeft","set","get","onAlignRight","onCenterHorizontally","onAlignTop","onCenterVertically","onAlignBottom","onReset","unset","isLeftAligned","marginRight","marginLeft","isHorizontallyCentered","isRightAligned","isAlignedToTop","marginBottom","marginTop","isAlignedToBottom","isVerticallyCentered","isOverridden","filter","Boolean","some","item","overridden","createElement","text","className","icon","variant","onClick","tooltip"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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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"}

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

@@ -1,20 +1,16 @@
-import React from "react";
-import { IconButton as BaseIconButton, Tooltip } from "@webiny/admin-ui";
-export const IconButton = ({
-  tooltip,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    delay: 200,
-    side: "bottom",
-    trigger: /*#__PURE__*/React.createElement(BaseIconButton, {
-      icon: props.icon,
-      size: props.size ?? "md",
-      variant: props.variant,
-      onClick: props.onClick
-    }),
-    content: tooltip
-  });
-};
+import react from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+const IconButton_IconButton = ({ tooltip, ...props })=>/*#__PURE__*/ react.createElement(Tooltip, {
+        delay: 200,
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: props.icon,
+            size: props.size ?? "md",
+            variant: props.variant,
+            onClick: props.onClick
+        }),
+        content: tooltip
+    });
+export { IconButton_IconButton as IconButton };
 
 //# sourceMappingURL=IconButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IconButton","BaseIconButton","Tooltip","tooltip","props","createElement","delay","side","trigger","icon","size","variant","onClick","content"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    IconButton as BaseIconButton,\n    Tooltip,\n    type IconButtonProps as BaseIconButtonProps\n} from \"@webiny/admin-ui\";\n\nexport type IconButtonProps = BaseIconButtonProps & {\n    tooltip: React.ReactNode;\n};\n\nexport const IconButton = ({ tooltip, ...props }: IconButtonProps) => {\n    return (\n        <Tooltip\n            delay={200}\n            side={\"bottom\"}\n            trigger={\n                <BaseIconButton\n                    icon={props.icon}\n                    size={props.size ?? \"md\"}\n                    variant={props.variant}\n                    onClick={props.onClick}\n                />\n            }\n            content={tooltip}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACIC,UAAU,IAAIC,cAAc,EAC5BC,OAAO,QAEJ,kBAAkB;AAMzB,OAAO,MAAMF,UAAU,GAAGA,CAAC;EAAEG,OAAO;EAAE,GAAGC;AAAuB,CAAC,KAAK;EAClE,oBACIL,KAAA,CAAAM,aAAA,CAACH,OAAO;IACJI,KAAK,EAAE,GAAI;IACXC,IAAI,EAAE,QAAS;IACfC,OAAO,eACHT,KAAA,CAAAM,aAAA,CAACJ,cAAc;MACXQ,IAAI,EAAEL,KAAK,CAACK,IAAK;MACjBC,IAAI,EAAEN,KAAK,CAACM,IAAI,IAAI,IAAK;MACzBC,OAAO,EAAEP,KAAK,CAACO,OAAQ;MACvBC,OAAO,EAAER,KAAK,CAACQ;IAAQ,CAC1B,CACJ;IACDC,OAAO,EAAEV;EAAQ,CACpB,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/IconButton.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    IconButton as BaseIconButton,\n    Tooltip,\n    type IconButtonProps as BaseIconButtonProps\n} from \"@webiny/admin-ui\";\n\nexport type IconButtonProps = BaseIconButtonProps & {\n    tooltip: React.ReactNode;\n};\n\nexport const IconButton = ({ tooltip, ...props }: IconButtonProps) => {\n    return (\n        <Tooltip\n            delay={200}\n            side={\"bottom\"}\n            trigger={\n                <BaseIconButton\n                    icon={props.icon}\n                    size={props.size ?? \"md\"}\n                    variant={props.variant}\n                    onClick={props.onClick}\n                />\n            }\n            content={tooltip}\n        />\n    );\n};\n"],"names":["IconButton","tooltip","props","Tooltip","BaseIconButton"],"mappings":";;AAWO,MAAMA,wBAAa,CAAC,EAAEC,OAAO,EAAE,GAAGC,OAAwB,GACtD,WAAP,GACI,oBAACC,SAAOA;QACJ,OAAO;QACP,MAAM;QACN,uBACI,oBAACC,YAAcA;YACX,MAAMF,MAAM,IAAI;YAChB,MAAMA,MAAM,IAAI,IAAI;YACpB,SAASA,MAAM,OAAO;YACtB,SAASA,MAAM,OAAO;;QAG9B,SAASD"}

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

@@ -1,30 +1,25 @@
-import React from "react";
+import react from "react";
 import { observer } from "mobx-react-lite";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
 import { useStyleValue } from "../../useStyleValue.js";
 import { UnitValuePicker } from "../../UnitValuePicker.js";
-export 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"
-  }, /*#__PURE__*/React.createElement(UnitValuePicker, {
-    value: style.value,
-    unit: style.unit,
-    units: unitOptions,
-    onChange: style.onChange,
-    onChangePreview: style.onChangePreview
-  })));
+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"
+    }, /*#__PURE__*/ react.createElement(UnitValuePicker, {
+        value: style.value,
+        unit: style.unit,
+        units: unitOptions,
+        onChange: style.onChange,
+        onChangePreview: style.onChangePreview
+    })));
 });
+export { LengthWithUnitInput };
 
 //# sourceMappingURL=LengthWithUnitInput.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","InheritanceLabel","useStyleValue","UnitValuePicker","LengthWithUnitInput","elementId","label","propertyName","defaultValue","unitOptions","style","createElement","text","onReset","isOverridden","overridden","inheritedFrom","className","value","unit","units","onChange","onChangePreview"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,gBAAgB;AACzB,SAASC,aAAa;AACtB,SAASC,eAAe;AAUxB,OAAO,MAAMC,mBAAmB,GAAGJ,QAAQ,CACvC,CAAC;EAAEK,SAAS;EAAEC,KAAK;EAAEC,YAAY;EAAEC,YAAY;EAAEC;AAAsC,CAAC,KAAK;EACzF,MAAMC,KAAK,GAAGR,aAAa,CAACG,SAAS,EAAEE,YAAY,EAAEC,YAAY,CAAC;EAElE,oBACIT,KAAA,CAAAY,aAAA,2BACIZ,KAAA,CAAAY,aAAA,CAACV,gBAAgB;IACbW,IAAI,EAAEN,KAAM;IACZO,OAAO,EAAEH,KAAK,CAACG,OAAQ;IACvBC,YAAY,EAAEJ,KAAK,CAACK,UAAW;IAC/BC,aAAa,EAAEN,KAAK,CAACM;EAAc,CACtC,CAAC,eACFjB,KAAA,CAAAY,aAAA;IAAKM,SAAS,EAAE;EAAuB,gBACnClB,KAAA,CAAAY,aAAA,CAACR,eAAe;IACZe,KAAK,EAAER,KAAK,CAACQ,KAAM;IACnBC,IAAI,EAAET,KAAK,CAACS,IAAK;IACjBC,KAAK,EAAEX,WAAY;IACnBY,QAAQ,EAAEX,KAAK,CAACW,QAAS;IACzBC,eAAe,EAAEZ,KAAK,CAACY;EAAgB,CAC1C,CACA,CACJ,CAAC;AAEd,CACJ,CAAC","ignoreList":[]}
+{"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"}

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

@@ -1,53 +1,50 @@
-import React from "react";
+import react from "react";
 import { Accordion, Grid } from "@webiny/admin-ui";
 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();
-export const Layout = ({
-  elementId
-}) => {
-  return /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: "Layout",
-    description: "Set alignment, width, and height"
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Alignment, {
-    elementId: elementId
-  })), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(LengthWithUnitInput, {
-    elementId: elementId,
-    label: "Width",
-    propertyName: "width",
-    defaultValue: "100%",
-    unitOptions: widthOptions
-  })), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(LengthWithUnitInput, {
-    elementId: elementId,
-    label: "Height",
-    propertyName: "height",
-    defaultValue: "auto",
-    unitOptions: heightOptions
-  })), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(LengthWithUnitInput, {
-    elementId: elementId,
-    label: "Max width",
-    propertyName: "maxWidth",
-    defaultValue: "auto",
-    unitOptions: widthOptions
-  })), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(LengthWithUnitInput, {
-    elementId: elementId,
-    label: "Max height",
-    propertyName: "maxHeight",
-    defaultValue: "auto",
-    unitOptions: heightOptions
-  }))));
-};
+const Layout = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: "Layout",
+        description: "Set alignment, width, and height"
+    }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Alignment, {
+        elementId: elementId
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(LengthWithUnitInput, {
+        elementId: elementId,
+        label: "Width",
+        propertyName: "width",
+        defaultValue: "100%",
+        unitOptions: widthOptions
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(LengthWithUnitInput, {
+        elementId: elementId,
+        label: "Height",
+        propertyName: "height",
+        defaultValue: "auto",
+        unitOptions: heightOptions
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(LengthWithUnitInput, {
+        elementId: elementId,
+        label: "Max width",
+        propertyName: "maxWidth",
+        defaultValue: "auto",
+        unitOptions: widthOptions
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(LengthWithUnitInput, {
+        elementId: elementId,
+        label: "Max height",
+        propertyName: "maxHeight",
+        defaultValue: "auto",
+        unitOptions: heightOptions
+    }))));
+export { Layout };
 
 //# sourceMappingURL=Layout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Accordion","Grid","Alignment","LengthWithUnitInput","UnitsOptions","widthOptions","widthUnits","add","getOptions","heightOptions","heightUnits","Layout","elementId","createElement","Item","title","description","Column","span","label","propertyName","defaultValue","unitOptions"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,QAAQ,kBAAkB;AAClD,SAASC,SAAS;AAClB,SAASC,mBAAmB;AAC5B,SAASC,YAAY;AAMrB,MAAMC,YAAY,GAAGD,YAAY,CAACE,UAAU,CAAC,CAAC,CAACC,GAAG,CAAC,MAAM,CAAC,CAACC,UAAU,CAAC,CAAC;AACvE,MAAMC,aAAa,GAAGL,YAAY,CAACM,WAAW,CAAC,CAAC,CAACH,GAAG,CAAC,MAAM,CAAC,CAACC,UAAU,CAAC,CAAC;AAEzE,OAAO,MAAMG,MAAM,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAClD,oBACIb,KAAA,CAAAc,aAAA,CAACb,SAAS,CAACc,IAAI;IAACC,KAAK,EAAE,QAAS;IAACC,WAAW,EAAE;EAAmC,gBAC7EjB,KAAA,CAAAc,aAAA,CAACZ,IAAI,qBACDF,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACX,SAAS;IAACU,SAAS,EAAEA;EAAU,CAAE,CACzB,CAAC,eACdb,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,OAAQ;IACfC,YAAY,EAAE,OAAQ;IACtBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEjB;EAAa,CAC7B,CACQ,CAAC,eACdN,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,QAAS;IAChBC,YAAY,EAAE,QAAS;IACvBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEb;EAAc,CAC9B,CACQ,CAAC,eACdV,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,WAAY;IACnBC,YAAY,EAAE,UAAW;IACzBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEjB;EAAa,CAC7B,CACQ,CAAC,eACdN,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,YAAa;IACpBC,YAAY,EAAE,WAAY;IAC1BC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEb;EAAc,CAC9B,CACQ,CACX,CACM,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"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"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/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