easy-email-pro-theme 1.50.19 → 1.51.1

package/lib/index.js

@@ -54,7 +54,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { classnames, useEditorActions, useDragNodePath, useStandaloneElementEditing, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useLockState, useEventCallback, useSelectedNodePath, useSelectedNode, useSetSelectedNodePath, useSetHoverNodePath, useUniversalElementEditing, useUniversalElementPath, useStandaloneElementPath, useStandaloneElement, useActiveTab, ActiveTabKeys, toggleFormat, TextFormat, useUniversalElement, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, useForceUpdate, IframeComponent, useEditorState, HtmlStringToReactNodes, useStandaloneElementSaveButton, useEqualState, ExternalComponents, useDragoverDirection } from "easy-email-pro-editor";
+import { classnames, useEditorActions, useDragNodePath, useStandaloneElementEditing, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useLockState, useEventCallback, useSelectedNodePath, useSelectedNode, useSetSelectedNodePath, useSetHoverNodePath, useUniversalElementEditing, useUniversalElementPath, useStandaloneElementPath, useStandaloneElement, useActiveTab, ActiveTabKeys, toggleFormat, TextFormat, useUniversalElement, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, useEditorState, useForceUpdate, useEqualState, IframeComponent, HtmlStringToReactNodes, useStandaloneElementSaveButton, ExternalComponents, useDragoverDirection } from "easy-email-pro-editor";
 import { useSlate, ReactEditor, useSlateStatic, useSelected } from "slate-react";
 import * as React$2 from "react";
 import React__default, { useRef, useState, useEffect, useCallback, useMemo, createContext, useContext, useLayoutEffect, memo, useReducer, cloneElement, forwardRef, Suspense, Component, createElement } from "react";
@@ -63,7 +63,7 @@ import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounc
 import { Editor, Range, Node, Transforms, Path, Text as Text$2, createEditor } from "slate";
 import { nanoid } from "nanoid";
 import { Form, Input, Modal, Collapse, Space, Empty, Card, Grid, Button as Button$2, Drawer, Switch, Typography as Typography$1, Tabs, Radio, Divider as Divider$2, Alert, Popconfirm, Tooltip, Message, PageHeader, Spin, Layout as Layout$2, Popover, Select as Select$1, Slider, InputNumber, Tag, Link as Link$3, List as List$1, Skeleton, Trigger } from "@arco-design/web-react";
-import { IconPlus, IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconLock, IconUnlock, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown } from "@arco-design/web-react/icon";
+import { IconPlus, IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconPalette, IconLock, IconUnlock, IconImage, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown } from "@arco-design/web-react/icon";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import mjml from "mjml-browser";
 import { HistoryEditor } from "slate-history";
@@ -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"))
@@ -6964,7 +7100,7 @@ const action = "_action_14paa_43";
 const itemTitle = "_itemTitle_14paa_60";
 const itemCollapse = "_itemCollapse_14paa_66";
 const itemChildren = "_itemChildren_14paa_87";
-const styles$3 = {
+const styles$4 = {
   item: item$2,
   itemContent,
   itemActions,
@@ -7154,7 +7290,7 @@ function SortableComponentItem({
   const isVoid = BlockManager.getBlockByType(component.block.type).void;
   const hasBlockChildren = !isVoid && component.block.children.every((child) => NodeUtils.isBlockElement(child));
   const hideWhenDragging = isDraggingLevel && !isCurrentDragging;
-  return /* @__PURE__ */ React__default.createElement("div", { ref: setNodeRef, style, className: styles$3.sortableItem }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref: setNodeRef, style, className: styles$4.sortableItem }, /* @__PURE__ */ React__default.createElement(
     ComponentItem,
     {
       component,
@@ -7164,7 +7300,7 @@ function SortableComponentItem({
       onToggleCollapse,
       dragHandleProps: __spreadValues(__spreadValues({}, attributes), listeners)
     }
-  ), hasBlockChildren && !isCollapsed && !isDragging && !hideWhenDragging && /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemChildren }, /* @__PURE__ */ React__default.createElement(
+  ), hasBlockChildren && !isCollapsed && !isDragging && !hideWhenDragging && /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemChildren }, /* @__PURE__ */ React__default.createElement(
     ElementList,
     {
       blocks: component.block.children,
@@ -7229,10 +7365,10 @@ function ComponentItem({
     }
     return text;
   }, [component.block, label]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: styles$3.item, onClick }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemTitle }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles$4.item, onClick }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemTitle }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: styles$3.itemCollapse,
+      className: styles$4.itemCollapse,
       style: { opacity: hasBlockChildren ? 1 : 0 },
       onClick: handleCollapseClick
     },
@@ -7246,27 +7382,27 @@ function ComponentItem({
       },
       collapseIcon
     )
-  ), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
     SharedComponents.ElementIcon,
     {
       type: component.block.type,
       width: 16,
       height: 16
     }
-  ), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: styles$3.itemActions,
+      className: styles$4.itemActions,
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: styles$3.action, onClick: onRemove }, /* @__PURE__ */ React__default.createElement(IconDelete, null)),
+    /* @__PURE__ */ React__default.createElement("div", { className: styles$4.action, onClick: onRemove }, /* @__PURE__ */ React__default.createElement(IconDelete, null)),
     /* @__PURE__ */ React__default.createElement(
       "div",
       __spreadValues({
         style: {
           cursor: "grab"
         },
-        className: styles$3.action
+        className: styles$4.action
       }, dragHandleProps),
       /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 20 20", width: "12" }, /* @__PURE__ */ React__default.createElement("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }))
     )
@@ -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"))
@@ -7948,7 +8096,7 @@ const TabHeader = (props) => {
   ));
 };
 const hoverUnderline = "_hoverUnderline_8d8dl_1";
-const styles$2 = {
+const styles$3 = {
   hoverUnderline
 };
 function BlockPaths({
@@ -8010,7 +8158,7 @@ function BlockPaths({
           /* @__PURE__ */ React__default.createElement(
             "span",
             {
-              className: styles$2.hoverUnderline,
+              className: styles$3.hoverUnderline,
               onClick: () => setSelectedNodePath(item2.path)
             },
             item2.name
@@ -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: {} };
@@ -26663,7 +26821,7 @@ const directionAdapter = {
 };
 const transparentIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABAElEQVRIie2WwW7CMBBEZ8NKOJd8CPRABVVJ+fxUUEgQPbT9kBziFAWbU4FkjXCBICExtxk9Z7KxZYWSJLFoiJmbEYwxMMaI/JC1dv+oQmvE8QTWWvDo5VUs/FwtHSUWvmxTwUniQhHRdUuIyJm3Oslf6dVLmtMQEfhjNhVgFEUiq6oCvmye5zXPSnUF1Os/iSxLF/BlZ9P3mm9tTw4/231uvKuo9RIA4MHzUITHrgpfNgxDFFrv/E0meZT8S/zz/SXCsvyVIDP82U7dr9cSGsdvIsvSBXzZm10rj5KzJf99AGTpXGRB4H4fF6uUgi7LfYnrCLq18eSAqtpAddXObwEoMVtvVloS0QAAAABJRU5ErkJggg==";
 const transparentColor$1 = "rgba(0,0,0,0)";
-function ColorPicker$1(props) {
+const ColorPickerContainer = (props) => {
   const {
     value = "",
     onChange,
@@ -26719,7 +26877,7 @@ function ColorPicker$1(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 @@ function ColorPicker$1(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 @@ function ColorPicker$1(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 },
@@ -26793,10 +26953,13 @@ function ColorPicker$1(props) {
       placeholder: placeholder == null ? void 0 : placeholder.replace("#", "")
     }
   ));
-}
+};
+const ColorPicker$1 = (props) => {
+  return /* @__PURE__ */ React__default.createElement(ColorProvider, null, /* @__PURE__ */ React__default.createElement(ColorPickerContainer, __spreadValues({}, props)));
+};
 const DefaultColorPicker = enhancer(ColorPicker$1);
 const ColorPickerField = (props) => {
-  return /* @__PURE__ */ React__default.createElement(ColorProvider, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     DefaultColorPicker,
     __spreadProps(__spreadValues({}, props), {
       formItem: __spreadValues(__spreadProps(__spreadValues({}, colorAdapter), {
@@ -26818,7 +26981,7 @@ const ColorPickerField = (props) => {
         ]
       }), props.formItem)
     })
-  ));
+  );
 };
 const idMap = /* @__PURE__ */ new Map();
 function reorder(list, startIndex, endIndex) {
@@ -27137,7 +27300,7 @@ const cardItemLeft = "_cardItemLeft_8uw8m_71";
 const cardItemRight = "_cardItemRight_8uw8m_85";
 const selectImage = "_selectImage_8uw8m_93";
 const exportFreeImage = "_exportFreeImage_8uw8m_110";
-const styles$1 = {
+const styles$2 = {
   container,
   error,
   item,
@@ -27356,7 +27519,7 @@ function ImageUploader(props) {
   );
   const content = useMemo(() => {
     if (isUploading) {
-      return /* @__PURE__ */ React__default.createElement("div", { className: styles$1["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$1["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$1["btn-wrap"] })));
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles$2["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$2["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$2["btn-wrap"] })));
     }
     if (!props.value) {
       return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
@@ -27377,10 +27540,10 @@ function ImageUploader(props) {
             lineHeight: "22px"
           }
         },
-        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
+        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$2.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$1.exportFreeImage,
+            className: styles$2.exportFreeImage,
             onClick: () => setUnsplashVisible(true)
           },
           t("Export free images")
@@ -27426,7 +27589,7 @@ function ImageUploader(props) {
         triggerProps: {
           popupStyle: { display: "inline-flex" }
         },
-        triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$1.actionItem }, t("Replace"))
+        triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$2.actionItem }, t("Replace"))
       },
       /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "1", onClick: onUpload }, t("Select image")),
       /* @__PURE__ */ React__default.createElement(
@@ -27437,10 +27600,10 @@ function ImageUploader(props) {
         },
         t("Export free images")
       )
-    ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$1.actionItem, onClick: onUpload }, t("Replace")), enablePreview && /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), enablePreview && /* @__PURE__ */ React__default.createElement(
+    ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$2.actionItem, onClick: onUpload }, t("Replace")), enablePreview && /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), enablePreview && /* @__PURE__ */ React__default.createElement(
       "span",
       {
-        className: styles$1.actionItem,
+        className: styles$2.actionItem,
         onClick: () => setPreview(true)
       },
       t("Preview")
@@ -27908,11 +28071,621 @@ function PixelField(props) {
     })
   );
 }
+const controlSection = "_controlSection_1t3ne_1";
+const controlGroup = "_controlGroup_1t3ne_7";
+const colorHeader = "_colorHeader_1t3ne_11";
+const colorList = "_colorList_1t3ne_18";
+const colorItem = "_colorItem_1t3ne_34";
+const positionControl = "_positionControl_1t3ne_44";
+const percentSign = "_percentSign_1t3ne_50";
+const deleteButton = "_deleteButton_1t3ne_55";
+const sizeInputs = "_sizeInputs_1t3ne_62";
+const styles$1 = {
+  controlSection,
+  controlGroup,
+  colorHeader,
+  colorList,
+  colorItem,
+  positionControl,
+  percentSign,
+  deleteButton,
+  sizeInputs
+};
+const MAX_COLORS = 4;
+const MIN_COLORS = 2;
+const GRADIENT_PRESETS = [
+  {
+    value: "1",
+    colors: [
+      { color: "#2CD8D5", position: 0 },
+      { color: "#C5C1FF", position: 56 },
+      { color: "#FFBAC3", position: 100 }
+    ],
+    label: "Prism"
+  },
+  {
+    value: "2",
+    colors: [
+      { color: "#00C6FB", position: 0 },
+      { color: "#005BEA", position: 100 }
+    ],
+    label: "Ocean"
+  },
+  {
+    value: "3",
+    colors: [
+      { color: "#F6D365", position: 0 },
+      { color: "#FDA085", position: 100 }
+    ],
+    label: "Sun"
+  },
+  {
+    value: "4",
+    colors: [
+      { color: "#21D4FD", position: 0 },
+      { color: "#B721FF", position: 100 }
+    ],
+    label: "Purple"
+  },
+  {
+    value: "5",
+    colors: [
+      { color: "#3EECAC", position: 0 },
+      { color: "#EE74E1", position: 100 }
+    ],
+    label: "Aurora"
+  },
+  {
+    value: "6",
+    colors: [
+      { color: "#FA8BFF", position: 0 },
+      { color: "#2BD2FF", position: 52 },
+      { color: "#2BFF88", position: 100 }
+    ],
+    label: "Rainbow"
+  },
+  {
+    value: "7",
+    colors: [
+      { color: "#08AEEA", position: 0 },
+      { color: "#2AF598", position: 100 }
+    ],
+    label: "Mint"
+  },
+  {
+    value: "8",
+    colors: [
+      { color: "#FBAB7E", position: 0 },
+      { color: "#F7CE68", position: 100 }
+    ],
+    label: "Amber"
+  },
+  {
+    value: "9",
+    colors: [
+      { color: "#85FFBD", position: 0 },
+      { color: "#FFFB7D", position: 100 }
+    ],
+    label: "Lime"
+  },
+  {
+    value: "10",
+    colors: [
+      { color: "#FF3CAC", position: 0 },
+      { color: "#784BA0", position: 50 },
+      { color: "#2B86C5", position: 100 }
+    ],
+    label: "Dream"
+  },
+  {
+    value: "11",
+    colors: [
+      { color: "#0093E9", position: 0 },
+      { color: "#80D0C7", position: 100 }
+    ],
+    label: "Aqua"
+  },
+  {
+    value: "12",
+    colors: [
+      { color: "#D9AFD9", position: 0 },
+      { color: "#97D9E1", position: 100 }
+    ],
+    label: "Lilac"
+  },
+  {
+    value: "13",
+    colors: [
+      { color: "#8BC6EC", position: 0 },
+      { color: "#9599E2", position: 100 }
+    ],
+    label: "Violet"
+  },
+  {
+    value: "14",
+    colors: [
+      { color: "#A9C9FF", position: 0 },
+      { color: "#FFBBEC", position: 100 }
+    ],
+    label: "Pink"
+  },
+  {
+    value: "15",
+    colors: [
+      { color: "#FEE140", position: 0 },
+      { color: "#FA709A", position: 100 }
+    ],
+    label: "Peach"
+  },
+  {
+    value: "16",
+    colors: [
+      { color: "#00DBDE", position: 0 },
+      { color: "#FC00FF", position: 100 }
+    ],
+    label: "Neon"
+  },
+  {
+    value: "17",
+    colors: [
+      { color: "#4158D0", position: 0 },
+      { color: "#C850C0", position: 46 },
+      { color: "#FFCC70", position: 100 }
+    ],
+    label: "Sunset"
+  },
+  {
+    value: "18",
+    colors: [
+      { color: "#0BA360", position: 0 },
+      { color: "#3CBA92", position: 100 }
+    ],
+    label: "Jade"
+  },
+  {
+    value: "19",
+    colors: [
+      { color: "#FFDEE9", position: 0 },
+      { color: "#B5FFFC", position: 100 }
+    ],
+    label: "Candy"
+  },
+  {
+    value: "20",
+    colors: [
+      { color: "#74EBD5", position: 0 },
+      { color: "#9FACE6", position: 100 }
+    ],
+    label: "Dawn"
+  }
+];
+function GradientGenerator(props) {
+  const [loading, setLoading] = useState(false);
+  const { setLock } = useEditorState();
+  const canvasRef = useRef(null);
+  const { isOpen, setIsOpen } = props;
+  const { resetSelectedNode } = useElementInteract();
+  const { lastSelectedNode, isChanged } = useLastSelectedNode();
+  const changeRef = useRefState(isChanged);
+  const { selectedNode } = useSelectedNode();
+  const data = props.data;
+  const colors = data.colors;
+  const lock = useLockState();
+  const onChangeRef = useRefState(props.onChange);
+  const setData = useCallback(
+    (val) => {
+      onChangeRef.current(val);
+    },
+    [onChangeRef]
+  );
+  const addColor = () => {
+    if (colors.length >= MAX_COLORS) {
+      Message.warning(t(`Maximum 4 colors allowed`));
+      return;
+    }
+    const newColor = {
+      id: nanoid(),
+      color: "#ffffff",
+      position: 50
+    };
+    setData(__spreadProps(__spreadValues({}, data), {
+      colors: [...colors, newColor].sort((a, b) => a.position - b.position)
+    }));
+  };
+  const previewRef = useRefState(props.onPreview);
+  const removeColor = (index2) => {
+    const newColors = cloneDeep(colors).filter((_, i) => i !== index2);
+    setData(__spreadProps(__spreadValues({}, data), {
+      colors: newColors.sort((a, b) => a.position - b.position)
+    }));
+  };
+  const generateGradientBlob = useCallback(
+    (params) => __async(this, null, function* () {
+      const { colors: colors2, gradientAngle, gradientSize, gradientType } = params;
+      const canvas = canvasRef.current;
+      if (!canvas)
+        return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx)
+        return;
+      const size = gradientSize;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      canvas.width = size.width;
+      canvas.height = size.height;
+      let gradient;
+      if (gradientType === "linear") {
+        const canvasAngle = (360 - gradientAngle + 90) % 360 * Math.PI / 180;
+        const x1 = size.width / 2 - Math.cos(canvasAngle) * size.width / 2;
+        const y1 = size.height / 2 - Math.sin(canvasAngle) * size.height / 2;
+        const x2 = size.width / 2 + Math.cos(canvasAngle) * size.width / 2;
+        const y2 = size.height / 2 + Math.sin(canvasAngle) * size.height / 2;
+        gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+      } else {
+        gradient = ctx.createRadialGradient(
+          size.width / 2,
+          size.height / 2,
+          0,
+          size.width / 2,
+          size.height / 2,
+          Math.min(size.width, size.height) / 2
+        );
+      }
+      colors2.forEach((color2) => {
+        gradient.addColorStop(color2.position / 100, color2.color);
+      });
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, size.width, size.height);
+      const blob = yield new Promise((resolve) => {
+        canvas.toBlob((blob2) => {
+          resolve(blob2);
+        });
+      });
+      return blob;
+    }),
+    []
+  );
+  const generatePreview = useCallback(
+    debounce$2(
+      (params) => {
+        generateGradientBlob(params).then((blob) => {
+          var _a;
+          if (!blob)
+            return;
+          const url = URL.createObjectURL(blob);
+          (_a = previewRef.current) == null ? void 0 : _a.call(previewRef, url);
+        });
+      },
+      100
+    ),
+    [generateGradientBlob, previewRef]
+  );
+  const handelSave = () => __async(this, null, function* () {
+    var _a;
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    try {
+      setLoading(true);
+      const blob = yield generateGradientBlob({
+        colors,
+        gradientAngle: data.angle,
+        gradientSize: { width: data.width, height: data.height },
+        gradientType: data.type
+      });
+      if (!blob)
+        return;
+      yield (_a = props.onSave) == null ? void 0 : _a.call(props, data, blob);
+      handleClose();
+    } catch (error2) {
+      console.error(error2);
+      Message.error(t(`Save failed`));
+    } finally {
+      setLoading(false);
+    }
+  });
+  useEffect(() => {
+    if (!isOpen)
+      return;
+    if (!changeRef.current)
+      return;
+    generatePreview({
+      colors,
+      gradientAngle: data.angle,
+      gradientSize: {
+        width: data.width,
+        height: data.height
+      },
+      gradientType: data.type
+    });
+    return () => {
+      generatePreview.cancel();
+    };
+  }, [
+    colors,
+    generatePreview,
+    data.angle,
+    data.width,
+    data.height,
+    data.type,
+    isOpen,
+    changeRef
+  ]);
+  useEffect(() => {
+    if (lastSelectedNode.current && !isEqual(lastSelectedNode.current, selectedNode)) {
+      console.log("set lock");
+      setLock(true);
+    } else {
+      resetSelectedNode();
+      setLock(false);
+    }
+  }, [lastSelectedNode, selectedNode, setLock, resetSelectedNode]);
+  const handleClose = () => {
+    lastSelectedNode.current = null;
+    setIsOpen(false);
+    setLock(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Drawer,
+    {
+      className: "GradientGeneratorDrawer",
+      bodyStyle: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 60
+      },
+      closable: false,
+      width: "100%",
+      visible: isOpen && props.enable,
+      getPopupContainer: () => {
+        return document.body.querySelector("#ConfigurationDrawer") || document.body;
+      },
+      title: /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "left" } }, /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
+        Button$2,
+        {
+          type: "text",
+          icon: /* @__PURE__ */ React__default.createElement(IconLeft, null),
+          disabled: lock,
+          onClick: handleClose
+        }
+      ), /* @__PURE__ */ React__default.createElement(IconPalette, null), " ", t(`Gradient Generator`))),
+      okButtonProps: {
+        type: "primary",
+        onClick: handelSave,
+        loading
+      },
+      okText: t(`Generate`),
+      cancelText: t(`Cancel`),
+      onCancel: handleClose,
+      cancelButtonProps: {
+        disabled: lock
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("div", { key: isOpen.toString() }, isChanged && lock && /* @__PURE__ */ React__default.createElement(
+      Alert,
+      {
+        type: "warning",
+        content: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("span", null, t(`Content has been modified. Please save before leaving.`)), " ", /* @__PURE__ */ React__default.createElement(
+          Popconfirm,
+          {
+            focusLock: true,
+            title: t("Do you want to discard?"),
+            okText: t("Discard"),
+            cancelText: t("Cancel"),
+            style: { zIndex: 9999 },
+            getPopupContainer: () => document.body,
+            okButtonProps: {
+              status: "danger"
+            },
+            onOk: () => {
+              resetSelectedNode();
+              handleClose();
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "span",
+            {
+              style: {
+                color: "rgb(var(--danger-6))",
+                cursor: "pointer"
+              }
+            },
+            t("Discard")
+          )
+        ))
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlSection }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(
+      Form.Item,
+      {
+        label: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                width: "20px",
+                height: "20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: "4px",
+                backgroundImage: "linear-gradient(to right, rgb(99, 102, 241), rgb(168, 85, 247))",
+                color: "white"
+              }
+            },
+            /* @__PURE__ */ React__default.createElement(IconPalette, { color: "white" })
+          ),
+          /* @__PURE__ */ React__default.createElement("span", null, "Preset")
+        )),
+        layout: "vertical"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Select$1,
+        {
+          style: { width: "100%" },
+          onChange: (value) => {
+            const preset = GRADIENT_PRESETS.find(
+              (p) => p.value === value
+            );
+            if (preset) {
+              setData(__spreadProps(__spreadValues({}, data), {
+                colors: preset.colors.map((c) => __spreadProps(__spreadValues({}, c), {
+                  id: nanoid()
+                }))
+              }));
+            }
+          }
+        },
+        GRADIENT_PRESETS.map((preset) => /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: preset.value, value: preset.value }, /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              width: "100%"
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                width: `calc(100% - 80px)`,
+                height: "24px",
+                borderRadius: "4px",
+                backgroundImage: `linear-gradient(to right, ${preset.colors.map((c) => `${c.color} ${c.position}%`).join(", ")})`,
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                fontSize: "12px",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              }
+            },
+            preset.label
+          )
+        )))
+      )
+    )), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: "0px 0 10px 0" } }), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Gradient Type`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+      Select$1,
+      {
+        style: { width: "100%" },
+        options: [
+          {
+            label: t(`Linear Gradient`),
+            value: "linear"
+          },
+          {
+            label: t(`Radial Gradient`),
+            value: "radial"
+          }
+        ],
+        value: data.type,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), {
+            type: value
+          }));
+        }
+      }
+    ))), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 11 }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Width`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+      InputNumber,
+      {
+        style: { width: "100%" },
+        value: data.width,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), { width: value }));
+        }
+      }
+    ))), /* @__PURE__ */ React__default.createElement(Grid.Col, { offset: 2, span: 11 }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Height`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+      InputNumber,
+      {
+        style: { width: "100%" },
+        value: data.height,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), { height: value }));
+        }
+      }
+    ))))), /* @__PURE__ */ React__default.createElement(Divider$2, null), data.type === "linear" && /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Angle`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+      Slider,
+      {
+        value: data.angle,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), { angle: value }));
+        },
+        style: { width: "100%" },
+        max: 360,
+        min: 0,
+        step: 1,
+        showInput: true
+      }
+    ))), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorHeader }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.label }, t(`Colors`), " (", colors.length, "/", MAX_COLORS, ")"), /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        type: "text",
+        icon: /* @__PURE__ */ React__default.createElement(IconPlus, null),
+        onClick: addColor,
+        size: "small",
+        disabled: colors.length >= MAX_COLORS
+      },
+      t(`Add Color`)
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorList }, colors.map((color2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: color2.id, className: styles$1.colorItem }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorInputs }, /* @__PURE__ */ React__default.createElement(
+      ColorPicker$1,
+      {
+        value: color2.color,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), {
+            colors: data.colors.map(
+              (c, i) => i === index2 ? __spreadProps(__spreadValues({}, c), { color: value }) : c
+            )
+          }));
+        }
+      }
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.positionControl }, /* @__PURE__ */ React__default.createElement(
+      InputNumber,
+      {
+        value: color2.position,
+        onChange: (value) => {
+          setData(__spreadProps(__spreadValues({}, data), {
+            colors: data.colors.map(
+              (c, i) => i === index2 ? __spreadProps(__spreadValues({}, c), { position: value }) : c
+            )
+          }));
+        },
+        style: { width: "80px" },
+        min: 0,
+        max: 100
+      }
+    ), /* @__PURE__ */ React__default.createElement("span", { className: styles$1.percentSign }, "%"), colors.length > MIN_COLORS && /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        type: "text",
+        icon: /* @__PURE__ */ React__default.createElement(IconDelete, null),
+        onClick: () => removeColor(index2),
+        className: styles$1.deleteButton
+      }
+    )))))))),
+    /* @__PURE__ */ React__default.createElement("canvas", { ref: canvasRef, style: { display: "none" } })
+  );
+}
 const TextField = enhancer(Input);
 enhancer(Input.Search);
 const TextAreaField = enhancer(Input.TextArea);
 const NumberField = enhancer(InputNumber);
 const SelectField = enhancer(Select);
+const GradientGeneratorField = enhancer(GradientGenerator);
 function BackgroundColor(props) {
   const { label = t("Background color") } = props;
   return useMemo(() => {
@@ -28843,11 +29616,73 @@ const backgroundSizeOptions = [
   }
 ];
 function BackgroundImage(props) {
-  const { getFieldValue } = useEditorContext();
-  const isEnabledImage = getFieldValue(
+  const { getFieldValue: useGetFieldValue, setFieldValue } = useEditorContext();
+  const editor = useSlateStatic();
+  const { enabledGradientImage } = useEditorProps();
+  const isEnabledImage = useGetFieldValue(
     props.path,
     props.name + ".background-image-enabled"
   );
+  const hasGradient = useGetFieldValue(props.path, "data.gradient");
+  const isEnabledGradient = useGetFieldValue(
+    props.path,
+    "data.gradient.enabled"
+  );
+  const handleChangeEnabledGradient = useCallback(
+    (value) => {
+      if (hasGradient) {
+        setFieldValue(
+          props.path,
+          "data.gradient.enabled",
+          value === "gradient"
+        );
+      } else {
+        let width = 600;
+        let height = 400;
+        const domNode = ReactEditor.toDOMNode(
+          editor,
+          Node.get(editor, props.path)
+        );
+        try {
+          width = domNode.offsetWidth;
+          height = parseInt((domNode.offsetHeight * 1.5).toString());
+        } catch (error2) {
+          console.log("error", error2);
+        }
+        const gradient = {
+          enabled: true,
+          colors: [
+            {
+              id: nanoid(),
+              color: "#4a90e2",
+              position: 0
+            },
+            {
+              id: nanoid(),
+              color: "#c6dffb",
+              position: 30
+            },
+            {
+              id: nanoid(),
+              color: "#ffffff",
+              position: 100
+            }
+          ],
+          angle: 45,
+          type: "linear",
+          width,
+          height
+        };
+        setFieldValue(props.path, "data.gradient", gradient);
+        setFieldValue(
+          props.path,
+          props.name + ".background-url",
+          "https://cdn.shopify.com/s/files/1/0863/8971/9346/files/vt4tumq_4aorkduqi2c-s_nwiysq709yi-nbxh-c8sk.png"
+        );
+      }
+    },
+    [editor, hasGradient, props.name, props.path, setFieldValue]
+  );
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
       AttributeField.SwitchField,
@@ -28856,7 +29691,52 @@ function BackgroundImage(props) {
         label: t("Image"),
         name: props.name + ".background-image-enabled"
       }
-    ), isEnabledImage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    ), isEnabledImage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, enabledGradientImage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 20, offset: 4 }, /* @__PURE__ */ React__default.createElement(
+      Radio.Group,
+      {
+        type: "button",
+        value: isEnabledGradient ? "gradient" : "image",
+        onChange: handleChangeEnabledGradient,
+        options: [
+          {
+            value: "image",
+            label: /* @__PURE__ */ React__default.createElement(
+              Space,
+              {
+                align: "center",
+                style: {
+                  minWidth: "100px",
+                  justifyContent: "center"
+                }
+              },
+              /* @__PURE__ */ React__default.createElement(IconImage, null),
+              t("Image")
+            )
+          },
+          {
+            value: "gradient",
+            label: /* @__PURE__ */ React__default.createElement(
+              Space,
+              {
+                align: "center",
+                style: {
+                  minWidth: "100px",
+                  justifyContent: "center"
+                }
+              },
+              /* @__PURE__ */ React__default.createElement(IconPalette, null),
+              t("Gradient")
+            )
+          }
+        ]
+      }
+    ))), /* @__PURE__ */ React__default.createElement(Divider$2, null)), isEnabledGradient ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      AttributeField.BackgroundGradient,
+      __spreadProps(__spreadValues({}, props), {
+        targetName: props.name + ".background-url",
+        formItem: __spreadValues({ layout: "vertical" }, props.formItem)
+      })
+    )) : /* @__PURE__ */ React__default.createElement(
       AttributeField.ImageUrl,
       __spreadProps(__spreadValues({}, props), {
         name: props.name + ".background-url",
@@ -28876,7 +29756,13 @@ function BackgroundImage(props) {
         name: props.name + ".background-position"
       })
     )));
-  }, [isEnabledImage, props]);
+  }, [
+    enabledGradientImage,
+    handleChangeEnabledGradient,
+    isEnabledGradient,
+    isEnabledImage,
+    props
+  ]);
 }
 function ImageUrl(props) {
   const { onUpload } = useEditorProps();
@@ -29812,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");
     }
   }
 ];
@@ -29929,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) {
@@ -30052,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
           })
         })
       })
@@ -30237,6 +31138,76 @@ const MergeTagSelectInputField = (props) => {
     ))
   ));
 };
+function BackgroundGradient(props) {
+  const { onUpload } = useEditorProps();
+  const { getFieldValue, setFieldValue } = useEditorContext();
+  const editor = useSlateStatic();
+  const fieldName = "data.gradient";
+  const gradient = useEqualState(getFieldValue(props.path, fieldName));
+  const [isOpen, setIsOpen] = useState(false);
+  const handelSave = useCallback(
+    (val, blob) => __async(this, null, function* () {
+      if (!onUpload)
+        return;
+      const gradientUrl = yield onUpload(blob);
+      setFieldValue(props.path, props.targetName, gradientUrl);
+    }),
+    [onUpload, props.path, props.targetName, setFieldValue]
+  );
+  const handelPreview = useCallback(
+    (url) => {
+      HistoryEditor.withoutSaving(editor, () => {
+        setFieldValue(props.path, props.targetName, url);
+      });
+    },
+    [editor, props.path, props.targetName, setFieldValue]
+  );
+  const handleChange = useCallback(
+    (val) => {
+      setFieldValue(props.path, fieldName, val);
+    },
+    [props.path, fieldName, setFieldValue]
+  );
+  const enableGradient = useEqualState(
+    getFieldValue(props.path, `${fieldName}.enabled`)
+  );
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen && /* @__PURE__ */ React__default.createElement(
+    GradientGenerator,
+    {
+      data: gradient,
+      onSave: handelSave,
+      onPreview: handelPreview,
+      onChange: handleChange,
+      enable: enableGradient,
+      isOpen,
+      setIsOpen
+    }
+  ), /* @__PURE__ */ React__default.createElement(Form.Item, { wrapperCol: { offset: 8, span: 14 } }, /* @__PURE__ */ React__default.createElement(
+    Button$2,
+    {
+      onClick: () => setIsOpen(true),
+      type: "primary",
+      size: "large",
+      icon: /* @__PURE__ */ React__default.createElement(IconPalette, null),
+      style: {
+        width: "100%",
+        border: "none",
+        borderRadius: "6px",
+        fontWeight: "500",
+        background: "linear-gradient(to right, #9333ea, #db2777)",
+        transition: "background 0.3s ease",
+        marginBottom: "10px"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "linear-gradient(to right, #7e22ce, #be185d)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "linear-gradient(to right, #9333ea, #db2777)";
+      }
+    },
+    t("Create gradient")
+  )));
+}
 const defaultAttributeFields = {
   // Basic Form Field
   WatchField,
@@ -30264,6 +31235,7 @@ const defaultAttributeFields = {
   TextAreaField,
   Link: Link$2,
   BackgroundImage,
+  BackgroundGradient,
   DisplayOptions,
   Columns,
   BackgroundColor,
@@ -30292,7 +31264,8 @@ const defaultAttributeFields = {
   ButtonCategory,
   WebFonts,
   RichTextField,
-  FieldItem
+  FieldItem,
+  GradientGeneratorField
 };
 const AttributeField = __spreadValues({}, defaultAttributeFields);
 const index$5 = "";