easy-email-pro-theme 1.51.0 → 1.51.2

package/lib/index.js

@@ -677,7 +677,7 @@ const withTheme$1 = (editor) => {
   };
   return editor;
 };
-const styleText$g = "[data-slate-hide-cursor=true][data-slate-hover=true] {\n  cursor: none;\n}\n[data-slate-hide-cursor=true][data-slate-hover=true]:hover {\n  outline: none !important;\n}\n\n[data-slate-hide-cursor=true] [data-slate-hover=true] .element-tools-container {\n  opacity: 0;\n}\n\n.element-tools-container {\n  position: absolute;\n  font-size: 14px;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  pointer-events: none;\n}\n\n.element-tools {\n  pointer-events: auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(0, -100%);\n  display: flex;\n  align-items: center;\n  font-size: 14px !important;\n  height: 22px;\n  padding: 1px 5px;\n  line-height: 22px;\n  font-weight: normal !important;\n  font-style: normal !important;\n}\n.element-tools .element-tools-item {\n  font-size: 12px !important;\n  line-height: 20px;\n  width: 25px;\n  display: flex;\n  pointer-events: auto;\n  cursor: pointer;\n  justify-content: center;\n}\n\n.element-tools-move-handle {\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translate(50%, -50%);\n  width: 35px;\n  height: 35px;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  cursor: grab;\n}\n\n.element-tools-bottom {\n  top: 100%;\n  transform: translate(0, 0);\n}\n\n.element-drag-button {\n  pointer-events: auto;\n  position: absolute;\n  z-index: 4;\n  top: 50%;\n  right: 0%;\n  color: #fff;\n  color: rgb(255, 255, 255);\n  height: 28px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: translate(50%, -50%);\n  border-radius: 50%;\n  cursor: grab;\n}\n.element-drag-button .iconfont {\n  cursor: grab !important;\n}";
+const styleText$g = "[data-slate-hide-cursor=true][data-slate-hover=true] {\n  cursor: none;\n}\n[data-slate-hide-cursor=true][data-slate-hover=true]:hover {\n  outline: none !important;\n}\n\n[data-slate-hide-cursor=true] [data-slate-hover=true] .element-tools-container {\n  opacity: 0;\n}\n\n.element-tools-container {\n  position: absolute;\n  font-size: 14px;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  pointer-events: none;\n}\n\n.element-tools {\n  pointer-events: auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(0, -100%);\n  display: flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  align-items: center;\n  font-size: 14px !important;\n  height: 22px;\n  padding: 1px 5px;\n  line-height: 22px;\n  font-weight: normal !important;\n  font-style: normal !important;\n}\n.element-tools .element-tools-item {\n  font-size: 12px !important;\n  line-height: 20px;\n  width: 25px;\n  display: flex;\n  pointer-events: auto;\n  cursor: pointer;\n  justify-content: center;\n}\n\n.element-tools-move-handle {\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translate(50%, -50%);\n  width: 35px;\n  height: 35px;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  cursor: grab;\n}\n\n.element-tools-bottom {\n  top: 100%;\n  transform: translate(0, 0);\n}\n\n.element-drag-button {\n  pointer-events: auto;\n  position: absolute;\n  z-index: 4;\n  top: 50%;\n  right: 0%;\n  color: #fff;\n  color: rgb(255, 255, 255);\n  height: 28px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: translate(50%, -50%);\n  border-radius: 50%;\n  cursor: grab;\n}\n.element-drag-button .iconfont {\n  cursor: grab !important;\n}";
 function IconFont(props) {
   var _a;
   return /* @__PURE__ */ React__default.createElement(
@@ -2487,7 +2487,7 @@ function BlockItem({
   ));
 }
 const index$d = "";
-const LayoutItem = ({
+const SectionLayout = ({
   columns,
   title
 }) => {
@@ -2543,6 +2543,99 @@ const ColumnElement = ({ column: column2 }) => {
     );
   }))));
 };
+const WrapperLayout = ({
+  variants,
+  title
+}) => {
+  return /* @__PURE__ */ React__default.createElement(Collapse.Item, { contentStyle: { padding: 10 }, header: title, name: title }, /* @__PURE__ */ React__default.createElement("div", { className: "LayoutWrapperItemList" }, variants.map((block, index2) => {
+    return /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        key: index2,
+        style: {
+          marginBottom: index2 === variants.length - 1 ? 0 : 10
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(SectionElement, { sections: block.sections })
+    ));
+  })));
+};
+const SectionElement = ({
+  sections
+}) => {
+  const isMultipleSections = sections.length > 1;
+  const element = useMemo(() => {
+    if (isMultipleSections) {
+      const wrapperBlock = BlockManager.getBlockByType(
+        ElementType.STANDARD_WRAPPER
+      );
+      return wrapperBlock.create({
+        attributes: {
+          "background-repeat": "no-repeat"
+        },
+        children: sections.map((section) => ({
+          type: StandardType.STANDARD_SECTION,
+          attributes: {},
+          data: {},
+          children: section.columns.map((column2) => ({
+            type: StandardType.STANDARD_COLUMN,
+            attributes: {
+              width: column2
+            },
+            data: {},
+            children: []
+          }))
+        }))
+      });
+    } else {
+      const sectionBlock = BlockManager.getBlockByType(
+        ElementType.STANDARD_SECTION
+      );
+      return sectionBlock.create({
+        attributes: {},
+        data: {},
+        children: sections[0].columns.map((column2) => ({
+          type: StandardType.STANDARD_COLUMN,
+          attributes: {
+            width: column2
+          },
+          data: {},
+          children: []
+        }))
+      });
+    }
+  }, [isMultipleSections, sections]);
+  const { dragHandle } = useDragging({
+    element,
+    nodeElement: null,
+    action: "copy",
+    cloneGhost: false
+  });
+  return /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: classnames$1("LayoutWrapperItem") }, dragHandle), sections.map((section, index2) => {
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        key: index2,
+        style: { paddingTop: isMultipleSections && index2 === 0 ? 10 : 0 }
+      },
+      isMultipleSections && /* @__PURE__ */ React__default.createElement("div", { className: "LayoutWrapperItemRowTitle" }, "Row ", index2 + 1),
+      /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: "LayoutItemOuter" }, /* @__PURE__ */ React__default.createElement("div", { className: "LayoutItemInner" }, section.columns.map((width, index22) => {
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: classnames$1("LayoutItemInnerPart"),
+            key: index22,
+            style: {
+              width,
+              borderRight: index22 === section.columns.length - 1 ? "none" : void 0
+            }
+          },
+          width
+        );
+      }))))
+    );
+  }));
+};
 const index$c = "";
 const defaultCategories = [
   {
@@ -2739,7 +2832,7 @@ const DefaultBlockList = () => {
         id: "BlockSideBar-BlockList"
       },
       /* @__PURE__ */ React__default.createElement(Collapse, { defaultActiveKey }, categories.map((category2, index2) => {
-        var _a;
+        var _a, _b;
         if (category2.displayType === "grid") {
           return /* @__PURE__ */ React__default.createElement(
             Collapse.Item,
@@ -2784,7 +2877,7 @@ const DefaultBlockList = () => {
                 defaultActiveKey: [((_a = category2.blocks[0]) == null ? void 0 : _a.title) || ""]
               },
               category2.blocks.map((item2) => /* @__PURE__ */ React__default.createElement(
-                LayoutItem,
+                SectionLayout,
                 {
                   key: item2.title,
                   title: item2.title || "",
@@ -2795,6 +2888,39 @@ const DefaultBlockList = () => {
             /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical" }, /* @__PURE__ */ React__default.createElement("div", null))
           );
         }
+        if (category2.displayType === "section" && !universalElementEditing) {
+          if (standaloneElementEditing && initialStandaloneElement && !NodeUtils.isParentCategoryType(
+            ElementType.SECTION,
+            initialStandaloneElement.type
+          )) {
+            return null;
+          }
+          return /* @__PURE__ */ React__default.createElement(
+            Collapse.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,
+              {
+                defaultActiveKey: [((_b = category2.blocks[0]) == null ? void 0 : _b.title) || ""]
+              },
+              category2.blocks.map((item2, index22) => /* @__PURE__ */ React__default.createElement(
+                WrapperLayout,
+                {
+                  key: index22,
+                  title: item2.title || "",
+                  variants: item2.variants
+                }
+              ))
+            ),
+            /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical" }, /* @__PURE__ */ React__default.createElement("div", null))
+          );
+        }
         if (category2.displayType === "custom" && !universalElementEditing && !standaloneElementEditing) {
           return /* @__PURE__ */ React__default.createElement(
             Collapse.Item,
@@ -2829,16 +2955,26 @@ const BlocksPanel = () => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !universalElementEditing && universalElementSetting && /* @__PURE__ */ React__default.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React__default.createElement(Button$2.Group, { style: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(
     Button$2,
     {
-      type: tab === "Default" ? "outline" : void 0,
-      style: { width: "50%" },
+      type: "outline",
+      style: {
+        width: "50%",
+        borderColor: tab === "Default" ? void 0 : "#000",
+        color: tab === "Default" ? void 0 : "#000",
+        borderRightColor: tab === "Default" ? void 0 : "transparent"
+      },
       onClick: () => setTab("Default")
     },
     /* @__PURE__ */ React__default.createElement(Space, null, t("Default"))
   ), /* @__PURE__ */ React__default.createElement(
     Button$2,
     {
-      type: tab === "Universal" ? "outline" : void 0,
-      style: { width: "50%" },
+      type: "outline",
+      style: {
+        width: "50%",
+        borderColor: tab !== "Default" ? void 0 : "#000",
+        color: tab !== "Default" ? void 0 : "#000",
+        borderLeftColor: tab !== "Default" ? void 0 : "transparent"
+      },
       onClick: () => setTab("Universal")
     },
     /* @__PURE__ */ React__default.createElement(Space, null, t("Universal"))
@@ -7919,16 +8055,28 @@ const TabHeader = (props) => {
     /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React__default.createElement(Button$2.Group, null, /* @__PURE__ */ React__default.createElement(
       Button$2,
       {
-        style: { paddingLeft: grid, paddingRight: grid },
-        type: !isMobileActive ? "outline" : "secondary",
+        style: {
+          paddingLeft: grid,
+          paddingRight: grid,
+          borderColor: !isMobileActive ? void 0 : "#000",
+          color: !isMobileActive ? void 0 : "#000",
+          borderRightColor: !isMobileActive ? void 0 : "transparent"
+        },
+        type: "outline",
         onClick: () => onChangeTab(ActiveTabKeys.DESKTOP)
       },
       /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-desktop" }), " ", t("desktop"))
     ), /* @__PURE__ */ React__default.createElement(
       Button$2,
       {
-        style: { paddingLeft: grid, paddingRight: grid },
-        type: isMobileActive ? "outline" : "secondary",
+        style: {
+          paddingLeft: grid,
+          paddingRight: grid,
+          borderColor: isMobileActive ? void 0 : "#000",
+          color: isMobileActive ? void 0 : "#000",
+          borderLeftColor: isMobileActive ? void 0 : "transparent"
+        },
+        type: "outline",
         onClick: () => onChangeTab(ActiveTabKeys.MOBILE)
       },
       /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-mobile" }), " ", t("mobile"))
@@ -15623,7 +15771,7 @@ const paragraphIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAY
 const heading1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAYAAAB1h9JkAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMASURBVHgB7dwtU9xQAEDR/kM8Ho/H4/F4PB6PwOFBYxn8dl5nakp2ext2m81yzswzfLwym7vJ2zTJjw0EPzYQCIVEKCRCIREKiVBIhEIiFBKhkAiFRCgkQiERColQSIRCIhQSoZAIhUQoJEIhEQqJUEiEQiIUEqGQCIVEKCRCIREKiVBIhEIiFJLFQ3l5edk8PDzMGh8fH1vnfX5+nj0vny0eyt3d3ebs7GzWeHt72zrvzc3N7Hn5bPFQxjt/bNSLi4u0EcfPjZ8fge3aozw+Ps6el8+Oao0yDkPbNuz5+fmvqOYYv7dt3vH1ufN+J0e3mB2Hk6kNOt7tXzFimJr39vZ2w98d5aeeqXf/Pg4JY6/057wWr823CmVqXqE0QhFKIpQ9hjLWV+Pv/NsnsjUSyp5C+fMT265zPGsklC+GMgKZOrlnj/IfHGMoY8P/PsV/f3//62P15eXltzm7K5QYyrbzO0JZ0LGGcnV1NTmEspC1LWaFspC1hzL+nVOzmlDGLv73OYq541Cn8IWykHppwD6GUJrVhDK+tm0xWYc9ynzWKEJJhCKURChCSYQilEQoQkmEIpREKEJJhCKURChCSYQilEQoQkmEIpTEnYIuXEpWc+/x+N/fNc17aje+H1Uo40W/vr6efOHHGN+bswHGLRW7rpgft1v867zjbx2P1tj19IVxpf6pBLN4KGPXP17sqcPCrjE2/K6brMahau6824zvzb2oavzemp+c4IlLE2ObufPt6zC3JA/7IxEKiVBIhEIiFBKhkAiFRCgkQiERColQSIRCIhQSoZAIhWSxUJ6enowDjUMQygmOQxDKCY5DsEYhEQqJUEiEQiIUEqGQCIVEKCRCIXFm9ojH6+vr5lgIRSiJUISSWKOQCIVEKCRCIREKiVBIhEIiFBKhkDgz+8Xx/v6++Q6EIpREKEJJrFFIhEIiFBKhkAiFRCgkQiERColQSIRCIhQSoZAIhUQoJEIhEQqJUEiEQiIUEqGQCIVEKCRCIREKiVBIhEIiFJKffNuO46yGVJYAAAAASUVORK5CYII=";
 const heading2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAYAAAB1h9JkAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPJSURBVHgB7dwxT+NKGIZR/iE9PT09PT09PT09PQUdPdS0iD6rbyVLlrHDGzsmmeQcaYqLcmfZ9YM9HidcbCBwsYGAUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgcPJT39/fN8/PzrPH9/T0579vb2+x5+engoTw+Pm4uLy9njc/Pz8l57+/vZ8/LTwcPpX7y66BeX19HB7FeV6+vwLadUV5eXmbPy09HtUapy9DUgb26uvof1Rz1/03NW1+fO+85ObrFbF1Oxg5o/bQvUTGMzfvw8LDhd0d51zP207+PS0KdlYbzWrxmziqUsXmFkhGKUCJC2UModffV7dvU99mN+u/6+ra7s1YIZUEoFcHt7e3o2mc46nUtn72EMuPg1Z1ZHfjh7Xu3D1N3Und3d6MB1fewbaPwWAllx1DqIPfn2bYPU5ecsZ3nCqj2jFoilB1CGYskOTs8PT2NxtLSmUUoO4QyfH5Ul5/U8FK1j03EvySUMJSxHeM6K6Smziqt3BEJJQylHjKO3c2ka42pRwitPGdqJpQ6dff3KOaMJVv49bqxA10BJaZCaeWWuZlQ1hrpgaozx5IzglBWMBZKfa3OKkvG0oeCw8XsLk+eXXpWcMz7KN1W/a77IGOL2RoWswuc4kNBt8crOLVQpu6YbLgtdEqhDHdz9/n3+UtCWTGUsfcA14K6xafIQlnhoE09DKx1SotPjotQ9hxKzTf8cyqQ1t/pL5Q9hdK9iak/d70n5VQ+CiKUhaEM38RUa5DfPpzWIqEsCKX//OhUA+kIZeZbIW9ubjb9rfxTDaQjlB1Dqdd3Z5GK5Vw+juqTgjuE0r/lre+xnt/M/dUa/dFCbM189niXtx2uMe/UQ719jBae+RxVKHUw65Zy6h907u1m7ZD21xRjB+q3eZf8vhWh7EG3QZV8iKo/6sBv2+Wsy8TceccI5cBa+Y1LQoGAUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgIhcjBQnl9fTVWGmsQygmONQjlBMcarFGICIWIUIgIhYhQiAiFiFCICIWIUIjYmT3i8fHxsTkWQhFKRChCiVijEBEKEaEQEQoRoRARChGhEBEKEaEQsTO7cHx9fW3OgVCEEhGKUCLWKESEQkQoRIRCRChEhEJEKESEQkQoRIRCRChEhEJEKESEQkQoRIRCRChEhEJEKESEQkQoRIRCRChEhEJEKESEQkQoRP4Bc7zC5nyOk6IAAAAASUVORK5CYII=";
 const heading3 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAYAAAB1h9JkAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUpSURBVHgB7dwtTCNBGMbxucs5giJBg0HhEHg8Hk+CxJMgSZAkSBIkCR6PR+DweDz67p4mkyzDbPvstGVn2v8vaS4c7ZKwD/Px7rv76+9/AZjhdwAMBAUWggILQYGFoMBCUGAhKLAQFFgICiwEBRaCAgtBgYWgwEJQYCEosBAUWAgKLAQFFoICC0GBhaDAQlBgISiwEBRYCAosBAUWggILQYGFoMBCUGAhKLAQFFj+hJG9v79PXiUODw/DxsZG9ntvb2/h4+MjlDg6Ogr4avSgvLy8hMfHx1Di7u6uNyjPz8+TVwmC8t3oQdnf35+cGHcE2N7ennxG//aFRDTaSMlx8d2vmp7hpino+vo6e2IViouLi8nJHEphub29zR5XwTg/Py867jqpajG7u7sbrq6ust/TCFF6MvU5hWHRx10n1e169BeeG/7nnRIUhtxUpXBitrXaHk9b02A66iiwjL7rWQWfn5+ThbgWy90Fs0YwTW2rsAYiKHPQbko1IIVEYZlGJYCTk5Nmt98EpYBGDW23FZQo1mD0iiNM9/uxAKiw6NUagjJQWuvR1HJ6epqdXvSey8vLL9ORRiB93bddrxWL2QF0gtOQ3Nzc9K5BNLqoLpTutjSyPD09hZYQlAHu7++/jA7OIlVhyU01GllmrWtqQlBMmnJ0AbOruwaZJneRUSFJj1czgmLKhcJtY9DUk9vtlLZXjKGZxWzcis5jnqE+91n9n8JSuuUt7ZcZQ1NBcYf6ZegLwzyXBVq6pNBMUPouFg7hFMb66Cqzfn53FNAi1T3ZuZ/bUvGtmaDEyuY8zs7OioOiQKijTgtQHWNIk5Pen/u5LZX2KbgNFDvnhshNmbGjrhXsen5ArrjW16BVK0aUJVNIuiOKpjCV/Fu7OEhQlkRrEoWku6VXONT322JXHUFZAC1wu1XW2JsSF7DxToOWbwMhKAugYPTdQ3R8fDxZALfem0tQlkzTT1zMtjyyEJQF0IlPt7qaemI1ORbp4tdat2jXQ8FtzfRVjePIoWB0F7WxoamlsFBH+QGqKGut0hWboFpBUH5I7rrQtEVwbdYqKGN2lMVbN1IEpVB6b0w0b4tBt67R9ZMnKheUMVsnhqgqKDqZ6kvN0S9Uc3rJLzZ2zvcdN731Yln6aiktNDCNvuvRX3RsNJ41NXQroPqlqxzet2vQMXVs57jdh+7EzvpU7GaL71k3owelb6qZZVa/6SKPm96fE2/DGLq17QtsC51uVT1Ip1aamtK1jLa7ugo8hKbVtOVAIXl4eAi1Y3tsyI1MJR30uc+UNEKNgaAYclPG0OkilvRTrVz3ISiGXMvi0DbG3K0muWtEtSIohrT8LkN2PlqXpGucvltNa0VQDDqp6cI1duPPooCktaHSXdOY2PUMkF4F1onW9JE2JsX7ihWSdF2i9+qRF609T46gDJR7iI5DaxFNNa0+pougFFJgtPaIz/JPpyGNNhpl4jPcWn+OG0FZoG7ldtUQFFjY9cBCUGAhKLAQFFhG60d5fX0NWI6Dg4OwaIwosBAUWKijwMKIAgtBgYWgwEJQYCEosBAUWAgKLAQFFq71VGxrayvs7OyEGjCiwEJQYOFaDyyMKLAQFFgICiwEBRaCAgtBgYWgwEJQYOFaz5z29vbC5uZmWHWMKLAQFFi41gMLIwosBAUWggILQYGFoMBCUGAhKLAQFFgICiwEBRaCAgtBgYWgwEJQYCEosBAUWAgKLAQFFoICC0GBhaDAQlBgISiwEBRYCAosBAWWf5H+W8ILZAmzAAAAAElFTkSuQmCC";
-const options$8 = [
+const options$9 = [
   {
     icon: paragraphIcon,
     get content() {
@@ -15696,7 +15844,7 @@ const TurnInto = () => {
       style: { minWidth: 95 },
       onChange,
       renderFormat: (option) => {
-        const matchItem = options$8.find((o) => o.value === (option == null ? void 0 : option.value));
+        const matchItem = options$9.find((o) => o.value === (option == null ? void 0 : option.value));
         return /* @__PURE__ */ React__default.createElement("span", { className: "TurnInto-content" }, matchItem ? matchItem.content : "");
       },
       triggerProps: {
@@ -15704,7 +15852,7 @@ const TurnInto = () => {
         autoAlignPopupMinWidth: true
       }
     },
-    options$8.map((option, index2) => {
+    options$9.map((option, index2) => {
       return /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: index2, value: option.value }, /* @__PURE__ */ React__default.createElement("div", { className: "TurnInto-item" }, /* @__PURE__ */ React__default.createElement("img", { src: option.icon, alt: "", className: "TurnInto-icon" }), /* @__PURE__ */ React__default.createElement("span", { className: "TurnInto-content" }, option.content)));
     })
   ), /* @__PURE__ */ React__default.createElement("style", null, `.easy-email-pro-turnInto .arco-select-view { border-width: 0px !important; }`));
@@ -15880,7 +16028,7 @@ const TextAlign$1 = () => {
     }
   ));
 };
-const options$7 = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
+const options$8 = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
 const FontSize$2 = () => {
   const [selectRef, setSelectRef] = useState(null);
   const { fontSizeList } = useEditorProps();
@@ -15906,7 +16054,7 @@ const FontSize$2 = () => {
     setFontSizeValue(fontSizeValue2);
   }, [editor, textNode, textNode == null ? void 0 : textNode.fontSize]);
   const optionsList = useMemo(() => {
-    const list = [...fontSizeList || options$7];
+    const list = [...fontSizeList || options$8];
     if (fontSizeValue) {
       list.push(fontSizeValue);
     }
@@ -25019,15 +25167,25 @@ const DefaultButton = (props) => {
 const ButtonField = enhancer(DefaultButton);
 const DefaultButtonGroup = (props) => {
   const _a = props, { options: options2, value, onChange } = _a, rest = __objRest(_a, ["options", "value", "onChange"]);
-  return /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical" }, /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "center" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "center" }, /* @__PURE__ */ React__default.createElement(
     Radio.Group,
-    __spreadProps(__spreadValues({}, rest), {
+    __spreadProps(__spreadValues({
+      style: { width: "100%", display: "flex" }
+    }, rest), {
       value,
       type: "button",
-      options: options2,
       onChange
-    })
-  )));
+    }),
+    options2.map((option) => /* @__PURE__ */ React__default.createElement(
+      Radio,
+      {
+        style: { width: `${(100 / options2.length).toFixed(2)}%` },
+        key: option.value,
+        value: option.value
+      },
+      /* @__PURE__ */ React__default.createElement("div", { style: { width: "100%", textAlign: "center" } }, option.label)
+    ))
+  ));
 };
 const ButtonGroupField = enhancer(DefaultButtonGroup);
 var colorString$1 = { exports: {} };
@@ -26719,7 +26877,7 @@ const ColorPickerContainer = (props) => {
       title: "",
       trigger: "click"
     }, props), {
-      className: "color-picker-popup",
+      className: "easy-email-pro-theme-color-picker-popup",
       content: /* @__PURE__ */ React__default.createElement(
         ColorPickerContent,
         {
@@ -26732,6 +26890,7 @@ const ColorPickerContainer = (props) => {
     children || /* @__PURE__ */ React__default.createElement(
       "div",
       {
+        className: "easy-email-pro-theme-color-picker-trigger",
         style: {
           display: "inline-block",
           height: 32,
@@ -26784,6 +26943,7 @@ const ColorPickerContainer = (props) => {
   ), showInput && /* @__PURE__ */ React__default.createElement(
     Input,
     {
+      className: "easy-email-pro-theme-color-picker-input",
       prefix: !isPageVarMatch && !isTemplateVarMatch && !value.includes("rgb") ? "#" : "",
       value: inputColor,
       style: { outline: "none", flex: 1 },
@@ -26850,7 +27010,7 @@ function EditPanelList(props) {
   const [activeId, setActiveId] = useState(null);
   const [activeItem, setActiveItem] = useState(null);
   const getItemId = useCallback((item2) => {
-    let id = idMap.get(item2);
+    let id = get(item2, "id") || idMap.get(item2);
     if (!id) {
       id = +(/* @__PURE__ */ new Date()).getTime().toString() + "-" + uniqueId();
       idMap.set(item2, id);
@@ -27419,7 +27579,11 @@ function ImageUploader(props) {
           position: "relative",
           minHeight: 100,
           height: props.size === "small" ? 100 : void 0,
-          boxSizing: "border-box"
+          boxSizing: "border-box",
+          backgroundColor: "#fafafa",
+          backgroundImage: image2 ? "linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0), linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0)" : void 0,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 10px 10px"
         }
       },
       content
@@ -28729,7 +28893,7 @@ function TextAndHeadingStyle(props) {
     [props.name, props.path]
   );
 }
-const options$6 = [
+const options$7 = [
   {
     value: "normal",
     get label() {
@@ -28785,7 +28949,7 @@ function FontWeight(props) {
       SelectField,
       __spreadProps(__spreadValues({
         label: t("Font weight"),
-        options: options$6
+        options: options$7
       }, props), {
         formItem: __spreadValues(__spreadValues({}, fontWeightAdapter), props.formItem)
       })
@@ -29063,7 +29227,7 @@ function LineHeight(props) {
     )));
   }, [label, onChangeUnit, props, unit]);
 }
-const options$5 = [
+const options$6 = [
   {
     value: "left",
     label: /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-align-left" })
@@ -29083,7 +29247,7 @@ function TextAlign(props) {
     return /* @__PURE__ */ React__default.createElement(
       AttributeField.ButtonGroupField,
       __spreadProps(__spreadValues({}, props), {
-        options: options$5,
+        options: options$6,
         label
       })
     );
@@ -30047,7 +30211,7 @@ const ConditionModal = ({
     /* @__PURE__ */ React__default.createElement(Form.Item, { field: "condition.enabled", noStyle: true }, /* @__PURE__ */ React__default.createElement(Input, { hidden: true }))
   );
 };
-const options$4 = [
+const options$5 = [
   {
     tootip: "Truthy",
     label: "Truthy",
@@ -30173,7 +30337,7 @@ function ConditionItem({
       layout: "vertical",
       style: {}
     },
-    /* @__PURE__ */ React__default.createElement(Select$1, { options: options$4 }, options$4.map((item2) => {
+    /* @__PURE__ */ React__default.createElement(Select$1, { options: options$5 }, options$5.map((item2) => {
       return /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: item2.value, value: item2.value }, /* @__PURE__ */ React__default.createElement("div", null, item2.label));
     }))
   )), !hideRight && /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 8, style: { paddingLeft: 5 } }, /* @__PURE__ */ React__default.createElement(
@@ -30534,23 +30698,23 @@ function Heading(props) {
     return /* @__PURE__ */ React__default.createElement(Form.Item, __spreadValues({ label }, props.formItem), /* @__PURE__ */ React__default.createElement(Select$1, { options: options2, value: node.type, onChange }));
   }, [label, node.type, onChange, options2, props.formItem]);
 }
-const options$3 = [
+const options$4 = [
   {
     value: "top",
     get label() {
-      return t("top");
+      return t("Top");
     }
   },
   {
     value: "middle",
     get label() {
-      return t("middle");
+      return t("Middle");
     }
   },
   {
     value: "bottom",
     get label() {
-      return t("bottom");
+      return t("Bottom");
     }
   }
 ];
@@ -30560,7 +30724,7 @@ function VerticalAlign(props) {
     return /* @__PURE__ */ React__default.createElement(
       AttributeField.ButtonGroupField,
       __spreadProps(__spreadValues({
-        options: options$3
+        options: options$4
       }, props), {
         label
       })
@@ -30655,41 +30819,56 @@ function PixelAndPercentField(props) {
         return val + unit;
       }
     };
-    return /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 16, style: { textAlign: "right" } }, /* @__PURE__ */ React__default.createElement(
-      AttributeField.NumberField,
-      __spreadProps(__spreadValues({}, rest), {
-        label,
-        formItem: __spreadValues(__spreadProps(__spreadValues({}, adapter), {
-          disabled: props.disabled,
-          labelCol: {
-            span: 10,
-            offset: 2
-          },
-          wrapperCol: {
-            span: 12
-          }
-        }), props.formItem)
-      })
-    )), /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 6 }, /* @__PURE__ */ React__default.createElement(
-      Form.Item,
+    return /* @__PURE__ */ React__default.createElement(Grid.Row, { className: "easy-email-pro-theme-PixelAndPercentField" }, /* @__PURE__ */ React__default.createElement(
+      Grid.Col,
       {
-        labelCol: {
-          span: 0,
-          style: { lineHeight: 1.15 }
-        },
-        wrapperCol: { span: 24 }
+        className: "easy-email-pro-theme-PixelAndPercentField-number",
+        span: 16,
+        style: { textAlign: "right" }
       },
       /* @__PURE__ */ React__default.createElement(
-        Select$1,
+        AttributeField.NumberField,
+        __spreadProps(__spreadValues({}, rest), {
+          label,
+          formItem: __spreadValues(__spreadProps(__spreadValues({}, adapter), {
+            disabled: props.disabled,
+            labelCol: {
+              span: 10,
+              offset: 2
+            },
+            wrapperCol: {
+              span: 12
+            }
+          }), props.formItem)
+        })
+      )
+    ), /* @__PURE__ */ React__default.createElement(
+      Grid.Col,
+      {
+        className: "easy-email-pro-theme-PixelAndPercentField-unit",
+        span: 6
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Form.Item,
         {
-          disabled: props.disabled,
-          value: unit,
-          onChange: onChangeUnit
+          labelCol: {
+            span: 0,
+            style: { lineHeight: 1.15 }
+          },
+          wrapperCol: { span: 24 }
         },
-        /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "px" }, t("px")),
-        /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "" }, t("%"))
+        /* @__PURE__ */ React__default.createElement(
+          Select$1,
+          {
+            disabled: props.disabled,
+            value: unit,
+            onChange: onChangeUnit
+          },
+          /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "px" }, t("px")),
+          /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "" }, t("%"))
+        )
       )
-    )));
+    ));
   }, [label, onChangeUnit, props.disabled, props.formItem, rest, unit]);
 }
 function ImageWidth(props) {
@@ -30778,7 +30957,7 @@ function Direction(props) {
       }, rest), {
         formItem: __spreadProps(__spreadValues({}, rest.formItem), {
           wrapperCol: __spreadProps(__spreadValues({}, (_a2 = rest.formItem) == null ? void 0 : _a2.wrapperCol), {
-            span: 15
+            span: 14
           })
         })
       })
@@ -30862,7 +31041,7 @@ function RTLDirection(props) {
     )));
   }, [name, path2, rest]);
 }
-const options$2 = [
+const options$3 = [
   {
     value: "auto",
     get label() {
@@ -30882,7 +31061,7 @@ function TableLayout(props) {
     return /* @__PURE__ */ React__default.createElement(
       AttributeField.ButtonGroupField,
       __spreadProps(__spreadValues({}, props), {
-        options: options$2,
+        options: options$3,
         label
       })
     );
@@ -31033,6 +31212,116 @@ function BackgroundGradient(props) {
     t("Create gradient")
   )));
 }
+const options$2 = [
+  {
+    value: "left",
+    label: t("Left")
+  },
+  {
+    value: "right",
+    label: t("Right")
+  }
+];
+const verticalAlignOptions = [
+  {
+    value: "middle",
+    get label() {
+      return t("Middle");
+    }
+  },
+  {
+    value: "baseline",
+    get label() {
+      return t("Baseline");
+    }
+  }
+];
+function ButtonIcon(props) {
+  const { label = t("Icon"), path: path2, name } = props;
+  const { getFieldValue, setFieldValue } = useEditorContext();
+  const editor = useSlateStatic();
+  const isEnabledBorder = getFieldValue(path2, `${name}.icon-enabled`);
+  const handleChangeEnabled = useCallback(
+    (value) => {
+      console.log(value);
+      if (isUndefined$1(isEnabledBorder)) {
+        editor.withoutNormalizing(() => {
+          setFieldValue(
+            path2,
+            `${name}.icon-src`,
+            "https://cdn.shopify.com/s/files/1/0863/8971/9346/files/xmxnt4qg5xuogsoasxrfy_image.png"
+          );
+          setFieldValue(path2, `${name}.icon-position`, "right");
+          setFieldValue(path2, `${name}.icon-vertical-align`, "middle");
+          setFieldValue(path2, `${name}.icon-width`, "12px");
+          setFieldValue(path2, `${name}.icon-height`, "12px");
+        });
+      }
+    },
+    [setFieldValue, path2, name, isEnabledBorder, editor]
+  );
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+      AttributeField.SwitchField,
+      {
+        label,
+        name: `${name}.icon-enabled`,
+        path: path2,
+        onChange: handleChangeEnabled
+      }
+    ), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isEnabledBorder && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      AttributeField.ImageUrl,
+      {
+        path: path2,
+        name: props.name + ".icon-src",
+        formItem: { layout: "vertical" }
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.Width,
+      {
+        label: t("Width"),
+        path: path2,
+        suffix: t("px"),
+        name: `${name}.icon-width`,
+        min: 1,
+        required: true,
+        fallbackValue: "12px"
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.Height,
+      {
+        label: t("Height"),
+        path: path2,
+        suffix: t("px"),
+        name: `${name}.icon-height`,
+        min: 1,
+        required: true,
+        fallbackValue: "12px"
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.ButtonGroupField,
+      {
+        path: path2,
+        name: `${name}.icon-position`,
+        options: options$2,
+        label: t("Position")
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.ButtonGroupField,
+      {
+        path: path2,
+        name: `${name}.icon-vertical-align`,
+        options: verticalAlignOptions,
+        label: /* @__PURE__ */ React__default.createElement(Space, null, t("Vertical Align"), " "),
+        formItem: {
+          help: t(
+            "This option is not available in classic Outlook and is always baseline."
+          )
+        }
+      }
+    ))));
+  }, [handleChangeEnabled, isEnabledBorder, label, name, path2, props.name]);
+}
 const defaultAttributeFields = {
   // Basic Form Field
   WatchField,
@@ -31090,7 +31379,8 @@ const defaultAttributeFields = {
   WebFonts,
   RichTextField,
   FieldItem,
-  GradientGeneratorField
+  GradientGeneratorField,
+  ButtonIcon
 };
 const AttributeField = __spreadValues({}, defaultAttributeFields);
 const index$5 = "";
@@ -31506,12 +31796,13 @@ function AttributesContainer$d({
   mode
 }) {
   const { selectedNode } = useSelectedNode();
+  const { enabledButtonIcon } = useEditorProps();
   const textPath = useMemo(() => {
     return [...nodePath, 0];
   }, [nodePath]);
   if (!selectedNode)
     return null;
-  return /* @__PURE__ */ React__default.createElement(CollapseWrapper$1, { defaultActiveKey: ["0", "1", "2", "3", "4"] }, /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "3", header: t("Content") }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(CollapseWrapper$1, { defaultActiveKey: ["0", "1", "2", "3", "4", "5"] }, /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "3", header: t("Content") }, /* @__PURE__ */ React__default.createElement(
     AttributeField.ButtonContent,
     {
       path: textPath,
@@ -31578,6 +31869,13 @@ function AttributesContainer$d({
       path: nodePath,
       name: "border-radius"
     }
+  )), enabledButtonIcon && /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "5", header: t("Icon") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.ButtonIcon,
+      path: nodePath,
+      name: ""
+    }
   )), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "4", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
@@ -31917,6 +32215,13 @@ function AttributesContainer$9({
       type: selectedNode.type
     }
   )), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "2", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BackgroundColor,
+      path: nodePath,
+      name: "container-background-color"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
       component: AttributeField.TextAlign,
@@ -32159,6 +32464,13 @@ function AttributesContainer$8({
       type: selectedNode.type
     }
   )), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "2", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BackgroundColor,
+      path: nodePath,
+      name: "container-background-color"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
       component: AttributeField.ButtonGroupField,

package/lib/style.css

@@ -30,6 +30,101 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
+.LayoutItemList * .LayoutWrapperItem {
+  position: relative;
+  cursor: grab;
+  color: rgb(85, 85, 85);
+  background-color: #fff;
+}
+.LayoutItemList * .LayoutWrapperItem .LayoutItemOuter {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+  padding: 10px;
+}
+.LayoutItemList * .LayoutWrapperItem .LayoutItemInner {
+  height: 36px;
+  border: 1px solid rgb(85, 85, 85);
+  border-radius: 3px;
+  overflow: hidden;
+  display: flex;
+}
+.LayoutItemList * .LayoutWrapperItem .LayoutItemInnerPart {
+  border-right: 1px solid rgb(85, 85, 85);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.LayoutWrapperItemList {
+  box-sizing: border-box;
+}
+.LayoutWrapperItemList .LayoutItem {
+  position: relative;
+  cursor: grab;
+  color: rgb(85, 85, 85);
+  background-color: #fff;
+}
+.LayoutWrapperItemList .LayoutItem .LayoutItemOuter {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+  padding: 10px;
+  border: 1px solid rgb(229, 229, 229);
+}
+.LayoutWrapperItemList .LayoutItem .LayoutItemOuter:hover {
+  box-shadow: inset 0px 0px 2px #ccc;
+}
+.LayoutWrapperItemList .LayoutItem .LayoutItemInner {
+  height: 36px;
+  border: 1px solid rgb(85, 85, 85);
+  border-radius: 3px;
+  overflow: hidden;
+  display: flex;
+}
+.LayoutWrapperItemList .LayoutItem .LayoutItemInnerPart {
+  border-right: 1px solid rgb(85, 85, 85);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.LayoutWrapperItemList .LayoutWrapperItemRowTitle {
+  padding-left: 10px;
+}
+.LayoutWrapperItemList .LayoutWrapperItem {
+  position: relative;
+  cursor: grab;
+  color: rgb(85, 85, 85);
+  background-color: #fff;
+  border: 1px solid rgb(229, 229, 229);
+  border-radius: 3px;
+  margin-bottom: 16px;
+}
+.LayoutWrapperItemList .LayoutWrapperItem:hover {
+  box-shadow: 1px 1px 2px #ccc;
+}
+.LayoutWrapperItemList .LayoutWrapperItem .LayoutItemOuter {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+  padding: 10px;
+}
+.LayoutWrapperItemList .LayoutWrapperItem .LayoutItemInner {
+  height: 36px;
+  border: 1px solid rgb(85, 85, 85);
+  border-radius: 3px;
+  overflow: hidden;
+  display: flex;
+}
+.LayoutWrapperItemList .LayoutWrapperItem .LayoutItemInnerPart {
+  border-right: 1px solid rgb(85, 85, 85);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }.BlockSideBar-BlockList {
   --block-grid-item-size: 100px;
 }
@@ -241,6 +336,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}.easy-email-pro-theme-PixelAndPercentField .easy-email-pro-theme-PixelAndPercentField-number .arco-input-inner-wrapper {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.easy-email-pro-theme-PixelAndPercentField .easy-email-pro-theme-PixelAndPercentField-unit .arco-select-view {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+}
+
+.easy-email-pro-theme-color-picker-trigger {
+  border-top-left-radius: var(--border-radius-small) !important;
+  border-bottom-left-radius: var(--border-radius-small) !important;
+}
+
+.easy-email-pro-theme-color-picker-input .arco-input-inner-wrapper {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-left: 0 !important;
+}
+
+.arco-radio-group-type-button .arco-radio-button::after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  background-color: var(--color-fill-2);
 }.easy-email-pro-editor-controller {
   font-size: 14px;
   background: #fff;

package/lib/typings/components/BlockSideBar/LayoutItem/SectionLayout.d.ts

@@ -0,0 +1,6 @@
+import { CategoryLayoutSectionItemPayload } from "../../../typings";
+import React from "react";
+export declare const SectionLayout: ({ columns, title, }: {
+    columns: CategoryLayoutSectionItemPayload[];
+    title: string;
+}) => React.JSX.Element;

package/lib/typings/components/BlockSideBar/LayoutItem/WrapperLayout.d.ts

@@ -0,0 +1,6 @@
+import { CategoryLayoutWrapperItemPayload } from "../../../typings";
+import React from "react";
+export declare const WrapperLayout: ({ variants, title, }: {
+    variants: CategoryLayoutWrapperItemPayload["variants"];
+    title: string;
+}) => React.JSX.Element;

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

@@ -1,6 +1,3 @@
-import React from "react";
 import "./index.scss";
-export declare const LayoutItem: ({ columns, title, }: {
-    columns: string[][];
-    title: string;
-}) => React.JSX.Element;
+export * from "./SectionLayout";
+export * from "./WrapperLayout";

package/lib/typings/components/ConfigurationPanel/components/AttributeField/ButtonIcon.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Path } from "slate";
+export declare function ButtonIcon(props: {
+    label?: React.ReactNode;
+    path: Path;
+    name: string;
+}): React.JSX.Element;

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

@@ -37,6 +37,7 @@ import { ButtonContent } from "./ButtonContent";
 import { RTLDirection } from "./RTLDirection";
 import { TableLayout } from "./TableLayout";
 import { BackgroundGradient } from "./BackgroundGradient";
+import { ButtonIcon } from "./ButtonIcon";
 export declare const defaultAttributeFields: {
     WatchField: (props: import("../../../Form/WatchField").WatchFieldProps) => import("react").JSX.Element;
     SyncChildrenField: (props: import("../../../Form/SyncChildrenField").SyncChildrenFieldProps) => import("react").JSX.Element;
@@ -127,5 +128,6 @@ export declare const defaultAttributeFields: {
     }, "onChange" | "value">) => import("react").JSX.Element;
     FieldItem: typeof FieldItem;
     GradientGeneratorField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<import("../../../Form/GradientGenerator").GradientGeneratorProps, "onChange" | "value">) => import("react").JSX.Element;
+    ButtonIcon: typeof ButtonIcon;
 };
 export declare const AttributeField: AttributeFieldsMap;

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

@@ -57,14 +57,28 @@ export interface CategoryMenuItem<T extends keyof ElementMap = any> {
     }>;
     displayType?: "menu";
 }
+export type CategoryLayoutSectionItemPayload = Array<string>;
+export type CategoryLayoutWrapperItemPayload = {
+    title: string;
+    variants: Array<{
+        sections: Array<{
+            columns: string[];
+        }>;
+    }>;
+};
 export type Categories = Array<CategoryGridItem | CategoryMenuItem | {
     label: string;
     active?: boolean;
     blocks: Array<{
-        payload: string[][];
+        payload: Array<CategoryLayoutSectionItemPayload>;
         title: string | undefined;
     }>;
     displayType: "column";
+} | {
+    label: string;
+    active?: boolean;
+    blocks: Array<CategoryLayoutWrapperItemPayload>;
+    displayType: "section";
 } | {
     label: string;
     active?: boolean;
@@ -140,6 +154,7 @@ export interface PluginsCustomEditorTypes {
         enabledHtmlBlockNodeAlign?: boolean;
         enabledPreviewEmailSubjectEdit?: boolean;
         enabledGradientImage?: boolean;
+        enabledButtonIcon?: boolean;
         hideSectionBackgroundImage?: boolean;
         layerConfig?: {
             scrollWhenSelect?: boolean;

package/package.json

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