easy-email-pro-theme 0.11.0 → 0.12.0

package/lib/index.js

@@ -1690,7 +1690,7 @@ const ElementSelected$1 = ({ element, nodeElement, path: path2 }) => {
     nodeElement
   ));
 };
-const styleText$8 = ".section-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 200px);\n  transform: translate(-100px, 0);\n}\n\n[data-is-full-width=true].section-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-section-category=true].element-tools-container {\n  width: calc(100% + 200px);\n  transform: translate(-100px, 0);\n}\n\n[data-is-section-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 200px);\n  transform: translate(-100px, 0);\n}\n\n[data-is-full-width=true].wrapper-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 200px);\n  transform: translate(-100px, 0);\n  position: absolute;\n}\n\n[data-is-wrapper-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 200px);\n  transform: translate(-100px, 0);\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 200px);\n  transform: translate(-100px, 0);\n  position: absolute;\n}";
+const styleText$8 = "[data-slate-block=page] {\n  --sectionElementOffset: 100px ;\n}\n\n@media screen and (max-width: 1600px) {\n  [data-slate-block=page] {\n    --sectionElementOffset: 50px ;\n  }\n}\n.section-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].section-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-section-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].wrapper-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}\n\n[data-is-wrapper-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}";
 const ElementPlaceholder$1 = ({ element, nodeElement, isSelected, isHover, path: path2 }) => {
   const { deleteBlock } = useElementInteract();
   const onPointerDown = (ev) => {
@@ -2040,59 +2040,67 @@ const DefaultBlockList = () => {
     ],
     [categories]
   );
-  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Collapse$1, { defaultActiveKey }, categories.map((category2, index2) => {
-    var _a2;
-    if (category2.displayType === "grid") {
-      return /* @__PURE__ */ React__default.createElement(
-        Collapse$1.Item,
-        {
-          key: index2,
-          contentStyle: { padding: "20px 20px" },
-          name: index2.toString(),
-          header: category2.label
-        },
-        /* @__PURE__ */ React__default.createElement("div", { className: "block-list-grid" }, category2.blocks.map((item2, index22) => {
-          return /* @__PURE__ */ React__default.createElement(BlockItem, __spreadValues({ key: index22 }, item2));
-        }))
-      );
-    }
-    if (category2.displayType === "column" && !universalElementEditing) {
-      return /* @__PURE__ */ React__default.createElement(
-        Collapse$1.Item,
-        {
-          key: index2,
-          contentStyle: { padding: "0px 20px" },
-          name: index2.toString(),
-          header: category2.label
-        },
-        /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical" }, /* @__PURE__ */ React__default.createElement("div", null)),
-        /* @__PURE__ */ React__default.createElement(Collapse$1, { defaultActiveKey: [((_a2 = category2.blocks[0]) == null ? void 0 : _a2.title) || ""] }, category2.blocks.map((item2) => /* @__PURE__ */ React__default.createElement(
-          LayoutItem,
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      "data-compact": Boolean(editorProps.compact),
+      className: "BlockSideBar-BlockList",
+      id: "BlockSideBar-BlockList"
+    },
+    /* @__PURE__ */ React__default.createElement(Collapse$1, { defaultActiveKey }, categories.map((category2, index2) => {
+      var _a2;
+      if (category2.displayType === "grid") {
+        return /* @__PURE__ */ React__default.createElement(
+          Collapse$1.Item,
           {
-            key: item2.title,
-            title: item2.title || "",
-            columns: item2.payload
-          }
-        ))),
-        /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical" }, /* @__PURE__ */ React__default.createElement("div", null))
-      );
-    }
-    if (category2.displayType === "custom" && !universalElementEditing) {
-      return /* @__PURE__ */ React__default.createElement(
-        Collapse$1.Item,
-        {
-          key: index2,
-          contentStyle: { padding: 0 },
-          name: index2.toString(),
-          header: category2.label
-        },
-        /* @__PURE__ */ React__default.createElement(Grid.Row, null, category2.blocks.map((item2, index22) => {
-          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: index22 }, item2);
-        }))
-      );
-    }
-    return null;
-  })));
+            key: index2,
+            contentStyle: { padding: "20px 20px" },
+            name: index2.toString(),
+            header: category2.label
+          },
+          /* @__PURE__ */ React__default.createElement("div", { className: "block-list-grid" }, category2.blocks.map((item2, index22) => {
+            return /* @__PURE__ */ React__default.createElement(BlockItem, __spreadValues({ key: index22 }, item2));
+          }))
+        );
+      }
+      if (category2.displayType === "column" && !universalElementEditing) {
+        return /* @__PURE__ */ React__default.createElement(
+          Collapse$1.Item,
+          {
+            key: index2,
+            contentStyle: { padding: "0px 20px" },
+            name: index2.toString(),
+            header: category2.label
+          },
+          /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical" }, /* @__PURE__ */ React__default.createElement("div", null)),
+          /* @__PURE__ */ React__default.createElement(Collapse$1, { defaultActiveKey: [((_a2 = category2.blocks[0]) == null ? void 0 : _a2.title) || ""] }, category2.blocks.map((item2) => /* @__PURE__ */ React__default.createElement(
+            LayoutItem,
+            {
+              key: item2.title,
+              title: item2.title || "",
+              columns: item2.payload
+            }
+          ))),
+          /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical" }, /* @__PURE__ */ React__default.createElement("div", null))
+        );
+      }
+      if (category2.displayType === "custom" && !universalElementEditing) {
+        return /* @__PURE__ */ React__default.createElement(
+          Collapse$1.Item,
+          {
+            key: index2,
+            contentStyle: { padding: 0 },
+            name: index2.toString(),
+            header: category2.label
+          },
+          /* @__PURE__ */ React__default.createElement(Grid.Row, null, category2.blocks.map((item2, index22) => {
+            return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: index22 }, item2);
+          }))
+        );
+      }
+      return null;
+    }))
+  );
 };
 const UniversalList = () => {
   const { universalElementSetting } = useEditorProps();
@@ -2227,7 +2235,7 @@ const SlateField$2 = (props) => {
     [onChangeHandle]
   );
   useEffect(() => {
-    if (fallbackValue !== formItemFieldValue) {
+    if (!isEqual$3(fallbackValue, formItemFieldValue)) {
       form.setFieldValue(fieldName, fallbackValue);
     }
   }, [fallbackValue, fieldName, form, formItemFieldValue]);
@@ -16710,24 +16718,27 @@ const SlateField = (props) => {
   return null;
 };
 const RichTextField$1 = "";
+const loop = () => {
+};
 const RichtextBar = (props) => {
   const { clientId } = useEditorProps();
   const editor = useMemo$1(() => createEditor(), []);
-  const [initialValue, path2] = useMemo$1(() => {
+  const lastTemplateRef = useRef(null);
+  const calculateData = useMemo$1(() => {
     const pageElement = cloneDeep(omit$2(props.pageElement, "children"));
     const template = {
       subject: "Blank",
       content: pageElement
     };
-    let path22 = [];
+    let path2 = [];
     if (NodeUtils.isPageElement(props.value)) {
       template.content = props.value;
-      path22 = [0];
+      path2 = [0];
     } else if (NodeUtils.isWrapperElement(props.value) || NodeUtils.isSectionElement(props.value) || NodeUtils.isHeroElement(props.value)) {
       template.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
         children: [props.value]
       }));
-      path22 = [0, 0];
+      path2 = [0, 0];
     } else if (NodeUtils.isColumnElement(props.value) || NodeUtils.isGroupElement(props.value)) {
       template.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
         children: [
@@ -16742,7 +16753,7 @@ const RichtextBar = (props) => {
           })
         ]
       }));
-      path22 = [0, 0, 0];
+      path2 = [0, 0, 0];
     } else if (NodeUtils.isContentElement(props.value)) {
       template.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
         children: [
@@ -16763,37 +16774,46 @@ const RichtextBar = (props) => {
           })
         ]
       }));
-      path22 = [0, 0, 0, 0];
+      path2 = [0, 0, 0, 0];
     }
-    return [template, path22];
+    return [template, path2];
   }, [props.pageElement, props.value]);
-  const onPageChange = (page, editor2) => {
-    const currentElement = Node$1.get(editor2, path2);
-    if (!currentElement) {
-      console.error("Element not found");
-      return;
+  const initialValue = useMemo$1(() => {
+    if (!isEqual$3(lastTemplateRef.current, calculateData[0])) {
+      lastTemplateRef.current = calculateData[0];
+    }
+    return lastTemplateRef.current;
+  }, [calculateData[0]]);
+  const onPageChange = useEventCallback(
+    (page, editor2) => {
+      const currentElement = Node$1.get(editor2, calculateData[1]);
+      if (!currentElement) {
+        console.error("Element not found");
+        return;
+      }
+      props.onChange(currentElement);
     }
-    props.onChange(currentElement);
-  };
-  return /* @__PURE__ */ React__default.createElement(
-    EmailEditorProvider,
-    {
-      height: props.height,
-      clientId,
-      initialValues: initialValue,
-      editor,
-      withEnhanceEditor: withTheme$1,
-      onSubmit: () => {
-      },
-      onPageChange,
-      newLineWithBr: true
-    },
-    /* @__PURE__ */ React__default.createElement(SharedComponents.HoveringToolbar, null),
-    /* @__PURE__ */ React__default.createElement(EmailEditor, null),
-    /* @__PURE__ */ React__default.createElement(SharedComponents.Hotkeys, null),
-    /* @__PURE__ */ React__default.createElement(ResetContent, { initialValue }),
-    /* @__PURE__ */ React__default.createElement("style", null, styleText$c)
   );
+  return useMemo$1(() => {
+    return /* @__PURE__ */ React__default.createElement(
+      EmailEditorProvider,
+      {
+        height: props.height,
+        clientId,
+        initialValues: initialValue,
+        editor,
+        withEnhanceEditor: withTheme$1,
+        onSubmit: loop,
+        onPageChange,
+        newLineWithBr: true
+      },
+      /* @__PURE__ */ React__default.createElement(SharedComponents.HoveringToolbar, null),
+      /* @__PURE__ */ React__default.createElement(EmailEditor, null),
+      /* @__PURE__ */ React__default.createElement(SharedComponents.Hotkeys, null),
+      /* @__PURE__ */ React__default.createElement(FormProvider, null, /* @__PURE__ */ React__default.createElement(ResetContent, { initialValue })),
+      /* @__PURE__ */ React__default.createElement("style", null, styleText$c)
+    );
+  }, [props.height, clientId, initialValue]);
 };
 const ResetContent = ({ initialValue }) => {
   const { reset } = useEditorContext();
@@ -17152,8 +17172,7 @@ const elements = [
   { value: ElementType.STANDARD_PARAGRAPH, label: "Paragraph" },
   { value: ElementType.STANDARD_H1, label: "H1" },
   { value: ElementType.STANDARD_H2, label: "H2" },
-  { value: ElementType.STANDARD_H3, label: "H3" },
-  { value: ElementType.STANDARD_H4, label: "H4" }
+  { value: ElementType.STANDARD_H3, label: "H3" }
 ];
 const path$3 = [0];
 function TextAndHeadingList() {
@@ -18759,14 +18778,21 @@ const DirectionOptions = [
 function Direction$1(props) {
   const _a2 = props, { path: path2, name: name2 } = _a2, rest = __objRest(_a2, ["path", "name"]);
   return useMemo$1(() => {
+    var _a3;
     return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
       AttributeField.ButtonGroupField,
-      __spreadValues({
+      __spreadProps(__spreadValues({
         label: t("Direction"),
         name: `${name2}.direction`,
         path: path2,
         options: DirectionOptions
-      }, rest)
+      }, rest), {
+        formItem: __spreadProps(__spreadValues({}, rest.formItem), {
+          wrapperCol: __spreadProps(__spreadValues({}, (_a3 = rest.formItem) == null ? void 0 : _a3.wrapperCol), {
+            span: 15
+          })
+        })
+      })
     )));
   }, [name2, path2, rest]);
 }
@@ -18824,7 +18850,7 @@ const defaultAttributeFields = {
 const AttributeField = __spreadValues({}, defaultAttributeFields);
 const index$6 = "";
 const AttributesPanelWrapper = (props) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "AttributesPanelWrapper" }, /* @__PURE__ */ React__default.createElement("div", { style: __spreadValues({ padding: "20px 0px" }, props.style) }, props.children));
+  return /* @__PURE__ */ React__default.createElement("div", { id: "AttributesPanelWrapper", className: "AttributesPanelWrapper" }, /* @__PURE__ */ React__default.createElement("div", { style: __spreadValues({ padding: "20px 0px" }, props.style) }, props.children));
 };
 const CollapseWrapper = (props) => {
   const [activeKeys, setActiveKeys] = useState(
@@ -19139,173 +19165,105 @@ function AttributesContainer$9({
   });
   if (!selectedNode)
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2"] }, /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2"] }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "1", header: t("Setting") }, /* @__PURE__ */ React__default.createElement(AttributeField.Columns, { mode, path: nodePath, name: "" }), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "1",
-      header: t("Setting")
-    },
-    /* @__PURE__ */ React__default.createElement(AttributeField.Columns, { mode, path: nodePath, name: "" }),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        name: "",
-        component: AttributeField.Direction,
-        path: nodePath,
-        onChange: onDirectionChange
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        name: "vertical-align",
-        component: AttributeField.VerticalAlign,
-        path: nodePath,
-        onChange: onVerticalAlignChange
-      }
-    )
+      name: "",
+      component: AttributeField.Direction,
+      path: nodePath,
+      onChange: onDirectionChange
+    }
   ), /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+    ResponsiveField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "2",
-      header: t("Dimension")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.Padding,
-        path: nodePath,
-        type: selectedNode.type,
-        name: ""
-      }
-    )
+      name: "vertical-align",
+      component: AttributeField.VerticalAlign,
+      path: nodePath,
+      onChange: onVerticalAlignChange
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "2", header: t("Dimension") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.Padding,
+      path: nodePath,
+      type: selectedNode.type,
+      name: ""
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "0", header: t("Background") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BackgroundImage,
+      path: nodePath,
+      name: ""
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$1, null), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.Border,
+      path: nodePath,
+      name: ""
+    }
   ), /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+    ResponsiveField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "0",
-      header: t("Background")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.BackgroundImage,
-        path: nodePath,
-        name: ""
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Divider$1, null),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.Border,
-        path: nodePath,
-        name: ""
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.BorderRadius,
-        path: nodePath,
-        name: "border-radius"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Divider$1, null),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        name: "background-color",
-        component: AttributeField.BackgroundColor,
-        path: nodePath
-      }
-    )
-  )));
+      component: AttributeField.BorderRadius,
+      path: nodePath,
+      name: "border-radius"
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$1, null), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      name: "background-color",
+      component: AttributeField.BackgroundColor,
+      path: nodePath
+    }
+  ))));
 }
 const Page = ({ nodePath }) => {
-  return /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2", "TEXT"] }, /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, { style: { padding: 0 } }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2", "TEXT"] }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "0", header: t("Email settings") }, /* @__PURE__ */ React__default.createElement(
+    AttributeField.BackgroundColor,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "0",
-      header: t("Email settings")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      AttributeField.BackgroundColor,
-      {
-        label: t("Template background"),
-        path: nodePath,
-        name: "attributes.background-color"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      AttributeField.BackgroundColor,
-      {
-        label: t("Content background"),
-        path: nodePath,
-        name: "attributes.content-background-color"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(AttributeField.Width, { path: nodePath, name: "attributes.width" }),
-    /* @__PURE__ */ React__default.createElement(
-      AttributeField.PixelField,
-      {
-        label: t("Margin top"),
-        suffix: t("px"),
-        path: nodePath,
-        name: "attributes.margin-top"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      AttributeField.PixelField,
-      {
-        label: t("Margin bottom"),
-        suffix: t("px"),
-        path: nodePath,
-        name: "attributes.margin-bottom"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      AttributeField.TextAreaField,
-      {
-        label: "Preheader",
-        path: nodePath,
-        name: "data.preheader"
-      }
-    )
+      label: t("Template background"),
+      path: nodePath,
+      name: "attributes.background-color"
+    }
   ), /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+    AttributeField.BackgroundColor,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "TEXT",
-      header: t("TEXT & HEADINGS")
-    },
-    /* @__PURE__ */ React__default.createElement(AttributeField.TextAndHeadingList, null)
+      label: t("Content background"),
+      path: nodePath,
+      name: "attributes.content-background-color"
+    }
+  ), /* @__PURE__ */ React__default.createElement(AttributeField.Width, { path: nodePath, name: "attributes.width" }), /* @__PURE__ */ React__default.createElement(
+    AttributeField.PixelField,
+    {
+      label: t("Margin top"),
+      suffix: t("px"),
+      path: nodePath,
+      name: "attributes.margin-top"
+    }
   ), /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+    AttributeField.PixelField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "BUTTONS",
-      header: t("BUTTONS")
-    },
-    /* @__PURE__ */ React__default.createElement(AttributeField.ButtonCategory, { type: ElementType.STANDARD_BUTTON })
+      label: t("Margin bottom"),
+      suffix: t("px"),
+      path: nodePath,
+      name: "attributes.margin-bottom"
+    }
   ), /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+    AttributeField.TextAreaField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "LINKS",
-      header: t("LINKS")
-    },
-    /* @__PURE__ */ React__default.createElement(AttributeField.GlobalLink, null)
-  ), /* @__PURE__ */ React__default.createElement(AttributeField.WebFonts, null), /* @__PURE__ */ React__default.createElement(
+      label: "Preheader",
+      path: nodePath,
+      name: "data.preheader"
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "TEXT", header: t("TEXT & HEADINGS") }, /* @__PURE__ */ React__default.createElement(AttributeField.TextAndHeadingList, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "BUTTONS", header: t("BUTTONS") }, /* @__PURE__ */ React__default.createElement(AttributeField.ButtonCategory, { type: ElementType.STANDARD_BUTTON })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "LINKS", header: t("LINKS") }, /* @__PURE__ */ React__default.createElement(AttributeField.GlobalLink, null)), /* @__PURE__ */ React__default.createElement(AttributeField.WebFonts, null), /* @__PURE__ */ React__default.createElement(
     Collapse$1.Item,
     {
       style: { display: "none" },
       name: "WEB FONTS"
     }
-  ));
+  )));
 };
 const buttonWidthAdapter = {
   formatter(val2) {
@@ -20213,57 +20171,43 @@ function AttributesContainer$2({
       path: nodePath,
       name: "vertical-align"
     }
-  ))), /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+  ))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "0", header: t("Background") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "0",
-      header: t("Background")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.BackgroundImage,
-        path: nodePath,
-        hideBackgroundSize: true,
-        name: ""
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.Height,
-        path: nodePath,
-        name: "background-height"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Divider$1, null),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.Border,
-        path: nodePath,
-        name: ""
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.BorderRadius,
-        path: nodePath,
-        name: "border-radius"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Divider$1, null),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        name: "background-color",
-        component: AttributeField.BackgroundColor,
-        path: nodePath
-      }
-    )
-  ), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "2", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
+      component: AttributeField.BackgroundImage,
+      path: nodePath,
+      hideBackgroundSize: true,
+      name: ""
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.Height,
+      path: nodePath,
+      name: "background-height"
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$1, null), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.Border,
+      path: nodePath,
+      name: ""
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BorderRadius,
+      path: nodePath,
+      name: "border-radius"
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$1, null), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      name: "background-color",
+      component: AttributeField.BackgroundColor,
+      path: nodePath
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "2", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
       label: t("Padding"),
@@ -20317,55 +20261,35 @@ function AttributesContainer$1({
   const { selectedNode } = useSelectedNode();
   if (!selectedNode)
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2"] }, /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2"] }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "2", header: t("Dimension") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "2",
-      header: t("Dimension")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.Padding,
-        path: nodePath,
-        name: ""
-      }
-    )
+      component: AttributeField.Padding,
+      path: nodePath,
+      name: ""
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "0", header: t("Background") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      name: "background-color",
+      component: AttributeField.BackgroundColor,
+      path: nodePath
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$1, null), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.Border,
+      path: nodePath,
+      name: ""
+    }
   ), /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+    ResponsiveField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "0",
-      header: t("Background")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        name: "background-color",
-        component: AttributeField.BackgroundColor,
-        path: nodePath
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Divider$1, null),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.Border,
-        path: nodePath,
-        name: ""
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.BorderRadius,
-        path: nodePath,
-        name: "border-radius"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Divider$1, null)
-  )));
+      component: AttributeField.BorderRadius,
+      path: nodePath,
+      name: "border-radius"
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$1, null))));
 }
 const Wrapper$1 = ({ nodePath }) => {
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(
@@ -20422,63 +20346,42 @@ function AttributesContainer({
   });
   if (!selectedNode)
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2"] }, /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2"] }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "2", header: t("Dimension") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "2",
-      header: t("Dimension")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.Padding,
-        path: nodePath,
-        name: ""
-      }
-    )
+      component: AttributeField.Padding,
+      path: nodePath,
+      name: ""
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "0", header: t("Background") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BackgroundImage,
+      path: nodePath,
+      name: ""
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$1, null), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.Border,
+      path: nodePath,
+      name: ""
+    }
   ), /* @__PURE__ */ React__default.createElement(
-    Collapse$1.Item,
+    ResponsiveField,
     {
-      contentStyle: { padding: "28px 13px 8px 13px" },
-      name: "0",
-      header: t("Background")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.BackgroundImage,
-        path: nodePath,
-        name: ""
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Divider$1, null),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.Border,
-        path: nodePath,
-        name: ""
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        component: AttributeField.BorderRadius,
-        path: nodePath,
-        name: "border-radius"
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Divider$1, null),
-    /* @__PURE__ */ React__default.createElement(
-      ResponsiveField,
-      {
-        name: "background-color",
-        component: AttributeField.BackgroundColor,
-        path: nodePath
-      }
-    )
-  )));
+      component: AttributeField.BorderRadius,
+      path: nodePath,
+      name: "border-radius"
+    }
+  ), /* @__PURE__ */ React__default.createElement(Divider$1, null), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      name: "background-color",
+      component: AttributeField.BackgroundColor,
+      path: nodePath
+    }
+  ))));
 }
 const ConfigPanelsMap = {
   [ElementType.PAGE]: Page,
@@ -24886,19 +24789,19 @@ const sortableTreeKeyboardCoordinates = (context, indicator2, indentationWidth)
   }
   return void 0;
 };
-const Wrapper = "_Wrapper_ptvld_1";
-const clone = "_clone_ptvld_8";
-const TreeItem$1 = "_TreeItem_ptvld_15";
-const ghost = "_ghost_ptvld_21";
-const indicator = "_indicator_ptvld_21";
-const selected = "_selected_ptvld_62";
-const hoverHandle = "_hoverHandle_ptvld_77";
-const Text = "_Text_ptvld_87";
-const Count = "_Count_ptvld_95";
-const disableInteraction = "_disableInteraction_ptvld_111";
-const disableSelection = "_disableSelection_ptvld_115";
-const Collapse = "_Collapse_ptvld_123";
-const collapsed = "_collapsed_ptvld_126";
+const Wrapper = "_Wrapper_ng4f3_1";
+const clone = "_clone_ng4f3_8";
+const TreeItem$1 = "_TreeItem_ng4f3_15";
+const ghost = "_ghost_ng4f3_21";
+const indicator = "_indicator_ng4f3_21";
+const selected = "_selected_ng4f3_62";
+const hoverHandle = "_hoverHandle_ng4f3_76";
+const Text = "_Text_ng4f3_86";
+const Count = "_Count_ng4f3_94";
+const disableInteraction = "_disableInteraction_ng4f3_110";
+const disableSelection = "_disableSelection_ng4f3_114";
+const Collapse = "_Collapse_ng4f3_122";
+const collapsed = "_collapsed_ng4f3_125";
 const styles$1 = {
   Wrapper,
   clone,
@@ -25374,19 +25277,19 @@ const BlockLayer = () => {
   const { deleteBlock } = useElementInteract();
   const [items, setItems] = useState([]);
   useEffect(() => {
-    const loop = (element, idx) => {
+    const loop2 = (element, idx) => {
       return {
         data: element,
         id: idx,
         children: NodeUtils.isVoidBlockElement(element) ? [] : element.children.filter(
           (item2) => NodeUtils.isBlockElement(item2) && !NodeUtils.isPlaceholderElement(item2)
         ).map(
-          (item2, index2) => loop(item2, NodeUtils.getChildIdx(idx, index2))
+          (item2, index2) => loop2(item2, NodeUtils.getChildIdx(idx, index2))
         )
       };
     };
     const list = pageElement.children.map((item2, index2) => {
-      return loop(item2, index2.toString());
+      return loop2(item2, index2.toString());
     });
     setItems(list);
   }, [pageElement.children, editor]);
@@ -25491,7 +25394,7 @@ const BlockLayer = () => {
 };
 const BlockSideBar = ({ height }) => {
   const { setSelectedNodePath, selectedNodePath, universalElementEditing } = useEditorState();
-  const { showLayer } = useEditorProps();
+  const { showLayer, compact } = useEditorProps();
   const { selectedNode } = useSelectedNode();
   const [activeTab, setActiveTab] = useState("Content");
   const lastActiveTab = useRef(activeTab);
@@ -25523,7 +25426,7 @@ const BlockSideBar = ({ height }) => {
         height: `calc(${height} - 60px)`
       },
       /* @__PURE__ */ React__default.createElement(BlocksPanel, null)
-    ), /* @__PURE__ */ React__default.createElement(
+    ), !compact && /* @__PURE__ */ React__default.createElement(
       SharedComponents.ConfigurationDrawer,
       {
         height: `calc(${height} - 60px)`,
@@ -25545,13 +25448,21 @@ const BlockSideBar = ({ height }) => {
       },
       /* @__PURE__ */ React__default.createElement(BlocksPanel, null)
     )),
-    /* @__PURE__ */ React__default.createElement(Tabs.TabPane, { destroyOnHide: true, key: "Style", title: /* @__PURE__ */ React__default.createElement("div", null, t("Style")) }, /* @__PURE__ */ React__default.createElement(
-      SharedComponents.FullHeightOverlayScrollbars,
+    !compact && /* @__PURE__ */ React__default.createElement(
+      Tabs.TabPane,
       {
-        height: `calc(${height} - 60px)`
+        destroyOnHide: true,
+        key: "Style",
+        title: /* @__PURE__ */ React__default.createElement("div", null, t("Style"))
       },
-      /* @__PURE__ */ React__default.createElement(AttributePanel, null)
-    )),
+      /* @__PURE__ */ React__default.createElement(
+        SharedComponents.FullHeightOverlayScrollbars,
+        {
+          height: `calc(${height} - 60px)`
+        },
+        /* @__PURE__ */ React__default.createElement(AttributePanel, null)
+      )
+    ),
     showLayer && /* @__PURE__ */ React__default.createElement(
       Tabs.TabPane,
       {
@@ -25567,7 +25478,7 @@ const BlockSideBar = ({ height }) => {
         /* @__PURE__ */ React__default.createElement(BlockLayer, null)
       )
     )
-  ), /* @__PURE__ */ React__default.createElement(
+  ), !compact && /* @__PURE__ */ React__default.createElement(
     ConfigurationDrawer,
     {
       height: `calc(${height} - 60px)`,
@@ -25754,7 +25665,7 @@ const ConfigurationPanel = ({
     universalElementPath,
     lock
   } = useEditorState();
-  const { quantityLimitCheck } = useEditorProps();
+  const { quantityLimitCheck, compact } = useEditorProps();
   const { copyBlock, deleteBlock, isChanged, resetSelectedNode } = useElementInteract();
   const onCopy = useEventCallback((path2) => {
     if (quantityLimitCheck && !quantityLimitCheck({
@@ -25776,6 +25687,7 @@ const ConfigurationPanel = ({
     if (!element || !selectedNodePath)
       return null;
     const isSelectedUniversalElement = universalElementPath && Path.equals(selectedNodePath, universalElementPath);
+    const isHideBackIcon = universalElementEditing && compact;
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
       "div",
       {
@@ -25788,7 +25700,7 @@ const ConfigurationPanel = ({
           textAlign: "center"
         }
       },
-      (!isSelectedUniversalElement || NodeUtils.isSectionElement(element)) && /* @__PURE__ */ React__default.createElement(
+      (!isSelectedUniversalElement || NodeUtils.isSectionElement(element)) && !isHideBackIcon && /* @__PURE__ */ React__default.createElement(
         Button$1,
         {
           size: "large",
@@ -28680,10 +28592,10 @@ var OverlayScrollbars = {
           var _loopInterval = _loopIntervalDefault;
           var _loopTimeOld = _getNow();
           var _loopID;
-          var loop = function() {
+          var loop2 = function() {
             if (_loopingInstances[_strLength] > 0 && _loopIsActive) {
               _loopID = COMPATIBILITY.rAF()(function() {
-                loop();
+                loop2();
               });
               var timeNew = _getNow();
               var timeDelta = timeNew - _loopTimeOld;
@@ -28723,7 +28635,7 @@ var OverlayScrollbars = {
               if (_loopingInstances[_strLength] > 0 && !_loopIsActive) {
                 _loopIsActive = true;
                 globals.autoUpdateLoop = _loopIsActive;
-                loop();
+                loop2();
               }
             }
           };
@@ -38726,10 +38638,69 @@ const UnsplashImages = (props) => {
     ))
   ));
 };
+const ConfigurationSideBar = ({ height }) => {
+  const { setSelectedNodePath, selectedNodePath, universalElementEditing } = useEditorState();
+  const { compact } = useEditorProps();
+  const [activeTab, setActiveTab] = useState("Style");
+  const lastActiveTab = useRef(activeTab);
+  useEffect(() => {
+    if (compact && !selectedNodePath) {
+      setSelectedNodePath([0]);
+    }
+  }, [compact, setSelectedNodePath, selectedNodePath]);
+  const onChange = useCallback$1(
+    (key2) => {
+      lastActiveTab.current = key2;
+      setActiveTab(key2);
+    },
+    [setSelectedNodePath]
+  );
+  const onClose = useCallback$1(() => {
+    setActiveTab(lastActiveTab.current);
+  }, []);
+  if (universalElementEditing) {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      SharedComponents.FullHeightOverlayScrollbars,
+      {
+        height: `calc(${height} - 60px)`
+      },
+      /* @__PURE__ */ React__default.createElement(BlocksPanel, null)
+    ), /* @__PURE__ */ React__default.createElement(
+      SharedComponents.ConfigurationDrawer,
+      {
+        height: `calc(${height} - 60px)`,
+        onClose
+      }
+    ));
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Tabs,
+    {
+      activeTab,
+      className: classnames$1("BlockSideBar"),
+      onChange
+    },
+    /* @__PURE__ */ React__default.createElement(Tabs.TabPane, { destroyOnHide: true, key: "Style", title: /* @__PURE__ */ React__default.createElement("div", null, t("Style")) }, /* @__PURE__ */ React__default.createElement(
+      SharedComponents.FullHeightOverlayScrollbars,
+      {
+        height: `calc(${height} - 60px)`
+      },
+      /* @__PURE__ */ React__default.createElement(AttributePanel, null)
+    ))
+  ), /* @__PURE__ */ React__default.createElement(
+    ConfigurationDrawer,
+    {
+      height: `calc(${height} - 60px)`,
+      onClose
+    }
+  ));
+};
 const SharedComponents = {
   PreviewEmailDrawer,
   PreviewEmail,
   BlockSideBar,
+  ConfigurationSideBar,
+  AttributePanel,
   ColumnLayout,
   ConfigurationDrawer,
   ConfigurationPanel,
@@ -38778,6 +38749,11 @@ const AutoDeselectElement = () => {
   }, [editor, selectedNodePath]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
+const getIsLargeScreen = () => {
+  const windowSize = document.body.clientWidth;
+  const isLargeScreen = windowSize >= 1600;
+  return isLargeScreen;
+};
 const useCreateConfig$1 = (_m) => {
   var _n = _m, {
     interactiveStyle,
@@ -38803,7 +38779,12 @@ const useCreateConfig$1 = (_m) => {
 };
 const Layout$1 = ({ children }) => {
   const { inited } = useEditorContext();
-  const { controller = true, showSidebar = true, height } = useEditorProps();
+  const {
+    controller = true,
+    showSidebar = true,
+    height,
+    compact
+  } = useEditorProps();
   const editor = useSlate();
   const getRoot = () => {
     try {
@@ -38813,6 +38794,7 @@ const Layout$1 = ({ children }) => {
     }
   };
   const root2 = getRoot();
+  const sidebarWidth = getIsLargeScreen() || !compact ? 400 : 350;
   const layoutContent = /* @__PURE__ */ React__default.createElement(SharedComponents.UniversalElementEditorDrawer, null, /* @__PURE__ */ React__default.createElement(
     Card,
     {
@@ -38833,16 +38815,25 @@ const Layout$1 = ({ children }) => {
         Layout$2.Sider,
         {
           style: {
-            minWidth: 300,
-            maxWidth: 400,
-            width: 400,
+            width: sidebarWidth,
             position: "relative",
             zIndex: 1
           }
         },
         /* @__PURE__ */ React__default.createElement(SharedComponents.BlockSideBar, { height })
       ),
-      /* @__PURE__ */ React__default.createElement("div", { style: { height, minWidth: 800, flex: 1 } }, /* @__PURE__ */ React__default.createElement(SharedComponents.EditorTabs, null, /* @__PURE__ */ React__default.createElement(EmailEditor, null, /* @__PURE__ */ React__default.createElement("style", { id: "Retro-CSS" }, styleText$c, RetroStyleText)), children))
+      /* @__PURE__ */ React__default.createElement("div", { style: { height, minWidth: 800, flex: 1 } }, /* @__PURE__ */ React__default.createElement(SharedComponents.EditorTabs, null, /* @__PURE__ */ React__default.createElement(EmailEditor, null, /* @__PURE__ */ React__default.createElement("style", { id: "Retro-CSS" }, styleText$c, RetroStyleText)), children)),
+      compact && /* @__PURE__ */ React__default.createElement(
+        Layout$2.Sider,
+        {
+          style: {
+            width: sidebarWidth,
+            position: "relative",
+            zIndex: 1
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(SharedComponents.ConfigurationSideBar, { height })
+      )
     )
   ));
   if (!root2 || !inited)

package/lib/style.css

@@ -30,10 +30,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}.block-list-grid {
+}.BlockSideBar-BlockList {
+  --block-grid-item-size: 100px;
+}
+
+@media screen and (max-width: 1600px) {
+  [data-compact=true].BlockSideBar-BlockList {
+    --block-grid-item-size: 90px;
+  }
+}
+.block-list-grid {
   display: grid;
   justify-content: space-between;
-  grid-template-columns: repeat(auto-fill, 100px);
+  grid-template-columns: repeat(auto-fill, var(--block-grid-item-size));
   grid-gap: 5px;
   padding: 0px 0px;
 }
@@ -42,9 +51,9 @@
   display: grid;
   cursor: grab;
   justify-content: space-between;
-  grid-template-columns: repeat(auto-fill, 100px);
-  width: 105px;
-  height: 105px;
+  grid-template-columns: repeat(auto-fill, var(--block-grid-item-size));
+  width: calc(var(--block-grid-item-size) + 5px);
+  height: calc(var(--block-grid-item-size) + 5px);
   margin-bottom: 20px;
   box-shadow: rgba(55, 63, 71, 0.04) 0px 0px 0px 1px, rgba(55, 63, 71, 0.08) 0px 4px 4px 0px, rgba(55, 63, 71, 0.08) 0px 8px 24px 0px;
   border: 2px solid transparent;
@@ -327,41 +336,41 @@
   border: none !important;
 }
 .AttributesPanelWrapper .arco-collapse-item-content-box {
-  padding: 20px 0px;
-}._Wrapper_ptvld_1 {
+  padding: 28px 5px 8px 5px;
+}._Wrapper_ng4f3_1 {
   list-style: none;
   box-sizing: border-box;
   padding-left: var(--spacing);
   margin-bottom: -1px;
   width: 100%;
 }
-._Wrapper_ptvld_1._clone_ptvld_8 {
+._Wrapper_ng4f3_1._clone_ng4f3_8 {
   display: inline-block;
   pointer-events: none;
   padding: 0;
   padding-left: 10px;
   padding-top: 5px;
 }
-._Wrapper_ptvld_1._clone_ptvld_8 ._TreeItem_ptvld_15 {
+._Wrapper_ng4f3_1._clone_ng4f3_8 ._TreeItem_ng4f3_15 {
   --vertical-padding: 5px;
   padding-right: 24px;
   border-radius: 4px;
   box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
 }
-._Wrapper_ptvld_1._ghost_ptvld_21._indicator_ptvld_21 {
+._Wrapper_ng4f3_1._ghost_ng4f3_21._indicator_ng4f3_21 {
   opacity: 1;
   position: relative;
   z-index: 1;
   margin-bottom: -1px;
 }
-._Wrapper_ptvld_1._ghost_ptvld_21._indicator_ptvld_21 ._TreeItem_ptvld_15 {
+._Wrapper_ng4f3_1._ghost_ng4f3_21._indicator_ng4f3_21 ._TreeItem_ng4f3_15 {
   position: relative;
   padding: 0;
   height: 8px;
   border-color: #2389ff;
   background-color: #56a1f8;
 }
-._Wrapper_ptvld_1._ghost_ptvld_21._indicator_ptvld_21 ._TreeItem_ptvld_15:before {
+._Wrapper_ng4f3_1._ghost_ng4f3_21._indicator_ng4f3_21 ._TreeItem_ng4f3_15:before {
   position: absolute;
   left: -8px;
   top: -4px;
@@ -373,48 +382,47 @@
   border: 1px solid #2389ff;
   background-color: #ffffff;
 }
-._Wrapper_ptvld_1._ghost_ptvld_21._indicator_ptvld_21 ._TreeItem_ptvld_15 > * {
+._Wrapper_ng4f3_1._ghost_ng4f3_21._indicator_ng4f3_21 ._TreeItem_ng4f3_15 > * {
   /* Items are hidden using height and opacity to retain focus */
   opacity: 0;
   height: 0;
 }
-._Wrapper_ptvld_1._ghost_ptvld_21:not(._indicator_ptvld_21) {
+._Wrapper_ng4f3_1._ghost_ng4f3_21:not(._indicator_ng4f3_21) {
   opacity: 0.3;
 }
-._Wrapper_ptvld_1._ghost_ptvld_21:not(._indicator_ptvld_21) ._TreeItem_ptvld_15 {
+._Wrapper_ng4f3_1._ghost_ng4f3_21:not(._indicator_ng4f3_21) ._TreeItem_ng4f3_15 {
   background-color: #cdcaca;
 }
-._Wrapper_ptvld_1._ghost_ptvld_21 ._TreeItem_ptvld_15 > * {
+._Wrapper_ng4f3_1._ghost_ng4f3_21 ._TreeItem_ng4f3_15 > * {
   box-shadow: none;
   background-color: transparent;
 }
 
-._Wrapper_ptvld_1._selected_ptvld_62 ._TreeItem_ptvld_15 {
+._Wrapper_ng4f3_1._selected_ng4f3_62 ._TreeItem_ng4f3_15 {
   background-color: #f1f1f1;
 }
 
-._TreeItem_ptvld_15 {
+._TreeItem_ng4f3_15 {
   cursor: pointer;
   position: relative;
   display: flex;
   align-items: center;
   height: 40px;
   background-color: #fff;
-  border: 1px solid #dedede;
   color: #222;
   box-sizing: border-box;
 }
-._TreeItem_ptvld_15 ._hoverHandle_ptvld_77 {
+._TreeItem_ng4f3_15 ._hoverHandle_ng4f3_76 {
   opacity: 0;
 }
-._TreeItem_ptvld_15:hover {
-  background-color: #fafafa;
+._TreeItem_ng4f3_15:hover {
+  background-color: #f5f5f5;
 }
-._TreeItem_ptvld_15:hover ._hoverHandle_ptvld_77 {
+._TreeItem_ng4f3_15:hover ._hoverHandle_ng4f3_76 {
   opacity: 1;
 }
 
-._Text_ptvld_87 {
+._Text_ng4f3_86 {
   flex-grow: 1;
   padding-left: 0.5rem;
   white-space: nowrap;
@@ -422,7 +430,7 @@
   overflow: hidden;
 }
 
-._Count_ptvld_95 {
+._Count_ng4f3_94 {
   position: absolute;
   top: -10px;
   right: -10px;
@@ -438,22 +446,22 @@
   color: #fff;
 }
 
-._disableInteraction_ptvld_111 {
+._disableInteraction_ng4f3_110 {
   pointer-events: none;
 }
 
-._disableSelection_ptvld_115 ._Text_ptvld_87,
-._disableSelection_ptvld_115 ._Count_ptvld_95,
-._clone_ptvld_8 ._Text_ptvld_87,
-._clone_ptvld_8 ._Count_ptvld_95 {
+._disableSelection_ng4f3_114 ._Text_ng4f3_86,
+._disableSelection_ng4f3_114 ._Count_ng4f3_94,
+._clone_ng4f3_8 ._Text_ng4f3_86,
+._clone_ng4f3_8 ._Count_ng4f3_94 {
   user-select: none;
   -webkit-user-select: none;
 }
 
-._Collapse_ptvld_123 svg {
+._Collapse_ng4f3_122 svg {
   transition: transform 250ms ease;
 }
-._Collapse_ptvld_123._collapsed_ptvld_126 svg {
+._Collapse_ng4f3_122._collapsed_ng4f3_125 svg {
   transform: rotate(-90deg);
 }._Action_armtj_1 {
   display: flex;

package/lib/typings/components/ConfigurationSideBar/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface ConfigurationSideBarProps {
+    height: string;
+}
+export declare const ConfigurationSideBar: ({ height }: ConfigurationSideBarProps) => JSX.Element;

package/lib/typings/components/index.d.ts

@@ -33,6 +33,8 @@ export declare const SharedComponents: {
         pageDataVariables: Record<string, string | number | boolean | null | undefined> | undefined;
     }) => JSX.Element;
     BlockSideBar: ({ height }: import("./BlockSideBar").BlockSideBarProps) => JSX.Element;
+    ConfigurationSideBar: ({ height }: import("./ConfigurationSideBar").ConfigurationSideBarProps) => JSX.Element;
+    AttributePanel: () => JSX.Element | null;
     ColumnLayout: ({ onSelectColumn, }: {
         onSelectColumn: (columns: string[]) => void;
     }) => JSX.Element;

package/lib/typings/typings/custom-types.d.ts

@@ -81,6 +81,7 @@ export interface PluginsCustomEditorTypes {
         showSidebar?: boolean;
         showLogic?: boolean;
         showLayer?: boolean;
+        compact?: boolean;
         height: string;
         unsplash?: {
             clientId: string;

package/lib/typings/utils/getIsLargeScreen.d.ts

@@ -0,0 +1 @@
+export declare const getIsLargeScreen: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "",
   "files": [
     "lib"