easy-email-pro-theme 1.51.0 → 1.51.1

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"))
@@ -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 },
@@ -30538,19 +30698,19 @@ const options$3 = [
   {
     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");
     }
   }
 ];
@@ -30655,41 +30815,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 +30953,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
           })
         })
       })

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/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;

package/package.json

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