easy-email-pro-theme 1.47.0 → 1.48.0

package/lib/index.js

@@ -61,10 +61,10 @@ import React__default, { useRef, useState, useEffect, useCallback, useMemo, crea
 import { NodeUtils, BlockManager, ElementType, EditorCore, t, ElementCategory, classnames as classnames$1, StandardType, PluginManager, EditorAuth, HtmlNodeAdapter, ConditionOperator, ConditionOperatorSymbol, EmailRenderProvider, components, I18nManager } from "easy-email-pro-core";
 import { Editor, Range, Node, Transforms, Path, Text as Text$2, createEditor } from "slate";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
-import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, uniqueId, isString as isString$1, isFunction as isFunction$4, isNumber as isNumber$1, upperFirst, sum, flatMap } from "lodash";
-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 } from "@arco-design/web-react";
 import { nanoid } from "nanoid";
-import { IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconPlus, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconLock, IconUnlock, IconQuestionCircle, IconLink, IconCloud, IconSend, IconDown } from "@arco-design/web-react/icon";
+import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, uniqueId, isString as isString$1, isFunction as isFunction$4, isNumber as isNumber$1, upperFirst, sum, flatMap } from "lodash";
+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, IconSend, IconDown } from "@arco-design/web-react/icon";
 import mjml from "mjml-browser";
 import { renderToStaticMarkup } from "react-dom/server";
 import { HistoryEditor } from "slate-history";
@@ -677,6 +677,23 @@ function IconFont(props) {
     }
   );
 }
+const assignIdsToElementTree = (element, overwrite = false) => {
+  const newElement = cloneDeep(element);
+  const loop2 = (node) => {
+    if (NodeUtils.isElement(node)) {
+      if (overwrite) {
+        node.id = nanoid();
+      } else {
+        node.id = node.id || nanoid();
+      }
+      if (node.children) {
+        node.children.forEach(loop2);
+      }
+    }
+  };
+  loop2(newElement);
+  return newElement;
+};
 const DraggingProviderContext = React__default.createContext({});
 const DraggingProvider = ({
   children
@@ -693,6 +710,7 @@ const DraggingProvider = ({
   const quantityLimitCheck = useRefState(editorProps.quantityLimitCheck);
   const editor = useSlate();
   const [inited, setInited] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   let root2 = null;
   try {
     root2 = ReactEditor.getWindow(editor).document;
@@ -720,7 +738,7 @@ const DraggingProvider = ({
       clearInterval(timer);
     };
   }, [editor]);
-  const isDragging = useRefState(dragNodePath);
+  const isElementDragging = useRefState(dragNodePath);
   const removePlaceholder = useCallback(() => {
     var _a;
     const rootDoc = ReactEditor.getWindow(editor).document;
@@ -862,6 +880,7 @@ const DraggingProvider = ({
     };
     const onDrop = (ev) => {
       removePlaceholder();
+      setIsDragging(false);
       const propsData = propsDataRef.current;
       if (!propsData)
         return;
@@ -993,7 +1012,10 @@ const DraggingProvider = ({
               }, 0);
             }
           } else {
-            const cloneElement2 = cloneDeep(propsData.element);
+            const cloneElement2 = assignIdsToElementTree(
+              cloneDeep(propsData.element),
+              true
+            );
             if (isInsert) {
               targetPath = [...targetPath, 0];
               Transforms.insertNodes(editor, cloneElement2, {
@@ -1015,7 +1037,7 @@ const DraggingProvider = ({
       setHoverNodePath(null);
     };
     const onMousemove = (event) => {
-      if (isDragging.current) {
+      if (isElementDragging.current) {
         removeDraggingStyle();
         setHoverNodePath(null);
         removePlaceholder();
@@ -1033,7 +1055,7 @@ const DraggingProvider = ({
     editor,
     editorProps.readOnly,
     inited,
-    isDragging,
+    isElementDragging,
     quantityLimitCheck,
     removeDraggingStyle,
     removePlaceholder,
@@ -1075,11 +1097,13 @@ const DraggingProvider = ({
         if ((propsData == null ? void 0 : propsData.action) === "move") {
           setDragNodePath(ReactEditor.findPath(editor, propsData.element));
         }
+        setIsDragging(true);
       },
       onDragEnd() {
         removeDraggingStyle();
         setHoverNodePath(null);
         removePlaceholder();
+        setIsDragging(false);
       },
       draggable: true
     };
@@ -1094,9 +1118,10 @@ const DraggingProvider = ({
   const value = useMemo(() => {
     return {
       propsDataRef,
-      dragHandle
+      dragHandle,
+      isDragging
     };
-  }, [dragHandle]);
+  }, [dragHandle, isDragging]);
   return /* @__PURE__ */ React__default.createElement(DraggingProviderContext.Provider, { value }, children);
 };
 const loop$1 = () => {
@@ -1581,23 +1606,6 @@ const useElementDefault = ({
     mobileAttributes
   };
 };
-const assignIdsToElementTree = (element, overwrite = false) => {
-  const newElement = cloneDeep(element);
-  const loop2 = (node) => {
-    if (NodeUtils.isElement(node)) {
-      if (overwrite) {
-        node.id = nanoid();
-      } else {
-        node.id = node.id || nanoid();
-      }
-      if (node.children) {
-        node.children.forEach(loop2);
-      }
-    }
-  };
-  loop2(newElement);
-  return newElement;
-};
 const useElementInteract = () => {
   const editor = useSlate();
   const { setSelectedNodePath, setHoverNodePath, selectedNodePath, lock } = useEditorState();
@@ -2182,7 +2190,7 @@ const UniversalListItem = ({
     )
   );
 };
-const index$c = "";
+const index$d = "";
 function BlockItem({
   type,
   payload,
@@ -2203,9 +2211,28 @@ function BlockItem({
   });
   if (universalElementEditing && !NodeUtils.isContentElement(element))
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "block-list-grid-item" }, dragHandle), /* @__PURE__ */ React__default.createElement("div", { className: "blockItemContainer" }, /* @__PURE__ */ React__default.createElement("div", null, icon), /* @__PURE__ */ React__default.createElement("div", { style: { width: "100%" } }, !isUndefined$1(title) ? title : block == null ? void 0 : block.name)));
+  const displayTitle = !isUndefined$1(title) ? title : block == null ? void 0 : block.name;
+  return /* @__PURE__ */ React__default.createElement("div", { className: "block-list-grid-item" }, /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "blockItemContainer" }, dragHandle), /* @__PURE__ */ React__default.createElement("div", null, icon), /* @__PURE__ */ React__default.createElement("div", { style: { width: "100%" } }, displayTitle)), /* @__PURE__ */ React__default.createElement(
+    SharedComponents.ElementStyleGallery,
+    {
+      type,
+      payload,
+      title: displayTitle
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "block-list-grid-item-more",
+        onPointerDown: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(IconPlus, null)
+    )
+  ));
 }
-const index$b = "";
+const index$c = "";
 const LayoutItem = ({
   columns,
   title
@@ -2262,7 +2289,7 @@ const ColumnElement = ({ column: column2 }) => {
     );
   }))));
 };
-const index$a = "";
+const index$b = "";
 const defaultCategories = [
   {
     get label() {
@@ -7180,7 +7207,7 @@ const BlockSideBar = ({ height }) => {
     widgetMode
   ]);
 };
-const index$9 = "";
+const index$a = "";
 const LayoutItemList = ({
   columns,
   onSelect,
@@ -7297,7 +7324,7 @@ const ColumnLayout = ({
     }
   ));
 };
-const index$8 = "";
+const index$9 = "";
 const UniversalElementPanel = () => {
   const { selectedNodePath } = useSelectedNode();
   const { setUniversalElementPath } = useEditorState();
@@ -7417,7 +7444,18 @@ const ConfigurationPanel = ({
           )
         }
       ),
-      /* @__PURE__ */ React__default.createElement("div", { style: { flex: 1 } }, " ", BlockManager.getBlockTitle(element)),
+      /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap"
+          }
+        },
+        BlockManager.getBlockTitle(element)
+      ),
       !isSelectedUniversalElement && /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
         Button$2,
         {
@@ -7489,7 +7527,7 @@ const ConfigurationPanel = ({
     deleteBlock
   ]);
 };
-const index$7 = "";
+const index$8 = "";
 const Controller = () => {
   const editor = useSlate();
   const getRoot = () => {
@@ -8155,9 +8193,10 @@ const Hotkeys = () => {
   ]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
-const index$6 = "";
+const index$7 = "";
 const UniversalElementEditorDrawer = ({ children }) => {
   const [loading, setLoading] = React__default.useState(false);
+  const [isEditing, setIsEditing] = React__default.useState(false);
   const editor = useSlate();
   const {
     universalElementEditing,
@@ -8280,24 +8319,26 @@ const UniversalElementEditorDrawer = ({ children }) => {
               style: {
                 height: 40,
                 position: "absolute",
-                width: 300,
+                width: 500,
                 top: 18,
                 display: "flex"
               }
             },
-            /* @__PURE__ */ React__default.createElement(
-              Typography$1.Title,
+            /* @__PURE__ */ React__default.createElement(Space, { style: { width: "100%" } }, isEditing ? /* @__PURE__ */ React__default.createElement(
+              Input,
               {
-                heading: 5,
-                style: {
-                  margin: 0
-                },
-                editable: {
-                  onChange: onChangeTitle
-                }
+                value: universalElement ? BlockManager.getBlockTitle(universalElement) : "",
+                onChange: onChangeTitle,
+                onBlur: () => setIsEditing(false)
+              }
+            ) : /* @__PURE__ */ React__default.createElement("div", null, universalElement ? BlockManager.getBlockTitle(universalElement) : ""), /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Edit") }, /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                style: { cursor: "pointer" },
+                onClick: () => setIsEditing((d) => !d)
               },
-              universalElement && BlockManager.getBlockTitle(universalElement)
-            )
+              /* @__PURE__ */ React__default.createElement(IconEdit, null)
+            )))
           ),
           extra: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Space, null, hasChanged ? /* @__PURE__ */ React__default.createElement(
             Popconfirm,
@@ -8343,7 +8384,8 @@ const UniversalElementEditorDrawer = ({ children }) => {
     onChangeTitle,
     onPublishElement,
     universalElement,
-    visible
+    visible,
+    isEditing
   ]);
 };
 const PreviewEmail = ({
@@ -24080,7 +24122,7 @@ lib.exports = MasonryComponent;
 lib.exports.default = MasonryComponent;
 var libExports = lib.exports;
 const Masonry$1 = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
-const index$5 = "";
+const index$6 = "";
 const defaultQueryList = [
   {
     query: "Staff Favorites",
@@ -29084,7 +29126,7 @@ function Iteration({
     )))))
   ));
 }
-const index$4 = "";
+const index$5 = "";
 const DisplayOptions = ({
   enabledResponsive
 }) => {
@@ -29820,7 +29862,7 @@ const defaultAttributeFields = {
   FieldItem
 };
 const AttributeField = __spreadValues({}, defaultAttributeFields);
-const index$3 = "";
+const index$4 = "";
 const AttributesPanelWrapper = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", { id: "AttributesPanelWrapper", className: "AttributesPanelWrapper" }, /* @__PURE__ */ React__default.createElement("div", { style: __spreadValues({ padding: "1px 0px" }, props.style) }, props.children));
 };
@@ -30917,6 +30959,20 @@ function SocialItem$1({ index: index2, path: path2 }) {
       name: `attributes.src`
     }
   ), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement(
+    AttributeField.ColorPickerField,
+    {
+      path: path2,
+      label: t("Background color"),
+      name: `attributes.background-color`
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    AttributeField.BorderRadius,
+    {
+      path: path2,
+      label: t("Border radius"),
+      name: `attributes.border-radius`
+    }
+  ), /* @__PURE__ */ React__default.createElement(
     AttributeField.TextField,
     {
       path: [...path2, 0],
@@ -32460,7 +32516,7 @@ const MergeTagComponent = React__default.memo((props) => {
     )
   );
 });
-const index$2 = "";
+const index$3 = "";
 const SvgMoreIcon = (props) => /* @__PURE__ */ React$2.createElement("svg", __spreadValues({ viewBox: "0 0 13 3", style: {
   display: "block",
   fill: "currentColor"
@@ -33248,7 +33304,7 @@ const EditorTopBar = () => {
     )), /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(Button$2.Group, null, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: !undoable }, /* @__PURE__ */ React__default.createElement(Tooltip, { position: "top", content: t("Undo") }, /* @__PURE__ */ React__default.createElement(IconUndo, { width: 40, onClick: editor.undo }))), /* @__PURE__ */ React__default.createElement(Button$2, { disabled: !redoable }, /* @__PURE__ */ React__default.createElement(Tooltip, { position: "top", content: t("Redo") }, /* @__PURE__ */ React__default.createElement(IconRedo, { onClick: editor.redo })))), canPreview && (lock ? /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Email preview") }, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: lock }, /* @__PURE__ */ React__default.createElement(IconEye, null))) : /* @__PURE__ */ React__default.createElement(SharedComponents.PreviewEmailDrawer, null, /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Email preview") }, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: lock }, /* @__PURE__ */ React__default.createElement(IconEye, null)))))), /* @__PURE__ */ React__default.createElement("div", null)))
   ), /* @__PURE__ */ React__default.createElement("style", null, styleText$6));
 };
-const index$1 = "";
+const index$2 = "";
 const PopupCard = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     Popover,
@@ -33627,7 +33683,7 @@ const Link$1 = ({ path: path2, name }) => {
     ))
   );
 };
-const index = "";
+const index$1 = "";
 const ConfigurationToolbarAttributeField = {
   Image: Image$3,
   Link: Link$1,
@@ -35933,6 +35989,68 @@ const ElementIcon = (_i) => {
   const Icon2 = getElementIcon(type);
   return /* @__PURE__ */ React__default.createElement(Icon2, __spreadValues({}, props));
 };
+const index = "";
+const ElementStyles = {};
+function ElementStyleGallery({
+  type,
+  payload,
+  title,
+  children
+}) {
+  const { selectedNodePath } = useSelectedNode();
+  const [popupVisible, setPopupVisible] = useState(false);
+  const { isDragging } = useContext(DraggingProviderContext);
+  useEffect(() => {
+    if (isDragging || selectedNodePath) {
+      setPopupVisible(false);
+    }
+  }, [isDragging, selectedNodePath]);
+  const MatchedElement = get(ElementStyles, type);
+  if (!MatchedElement) {
+    console.warn(`ElementStyles: ${type} not found`);
+    return null;
+  }
+  const renderMenu = () => {
+    return /* @__PURE__ */ React__default.createElement(
+      Card,
+      {
+        title: title ? /* @__PURE__ */ React__default.createElement("p", { style: { textAlign: "left" } }, title) : void 0,
+        bodyStyle: { padding: 0 },
+        style: { borderRadius: 4, padding: 0 }
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "block-list-menu-item-card-wrapper" }, /* @__PURE__ */ React__default.createElement(FullHeightOverlayScrollbars, { maxHeight: "60vh" }, /* @__PURE__ */ React__default.createElement("div", { className: "block-list-menu-item-card" }, /* @__PURE__ */ React__default.createElement(MatchedElement, null))))
+    );
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Trigger,
+    {
+      popupVisible,
+      popupStyle: {
+        transform: "translate(10px)"
+      },
+      popup: renderMenu,
+      trigger: ["click"],
+      clickToClose: true,
+      position: "rt",
+      autoFitPosition: true,
+      onVisibleChange: setPopupVisible
+    },
+    children
+  ));
+}
+const DragItem = ({
+  element,
+  children,
+  style
+}) => {
+  const { dragHandle } = useDragging({
+    element,
+    nodeElement: null,
+    action: "copy",
+    cloneGhost: false
+  });
+  return /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({}, dragHandle), { style }), children);
+};
 const SharedComponents = {
   PreviewEmailDrawer,
   PreviewEmail,
@@ -35966,7 +36084,9 @@ const SharedComponents = {
   ConfigurationToolbar,
   AIAssistant,
   AIPromptModal,
-  SourceCodePanel
+  SourceCodePanel,
+  DragItem,
+  ElementStyleGallery
 };
 const table2SelectedDataType = "data-standard-table2-selected";
 const table2TdSelectedDataType = "data-standard-table2-td-selected";
@@ -38681,6 +38801,7 @@ export {
   ControllerProvider,
   DraggingProvider,
   DraggingProviderContext,
+  ElementStyles,
   IconFont,
   Minimalist,
   PluginsProvider,

package/lib/style.css

@@ -60,10 +60,31 @@
   border-radius: 4px;
   box-sizing: border-box;
   background-color: #fff;
+  position: relative;
+}
+.block-list-grid-item .block-list-grid-item-more {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(var(--primary-4, #1890ff));
+  color: white;
+  border-radius: 50%;
+  font-size: 16px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  cursor: pointer;
 }
 .block-list-grid-item:hover {
   box-shadow: 0px 0px 2px 2px rgb(var(--primary-4, #1890ff)) !important;
 }
+.block-list-grid-item:hover .block-list-grid-item-more {
+  opacity: 1;
+}
 .block-list-grid-item .blockItemContainer {
   text-align: center;
   display: flex;
@@ -1395,6 +1416,55 @@ THEMES:
 
 .ConfigurationToolbarAttributeField-Link-content {
   font-size: 14px;
+}.block-list-menu-item-card-wrapper {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.block-list-menu-item-card {
+  width: 400px;
+  padding: 16px;
+  background-color: #fff;
+}
+
+.block-list-menu-cart-item {
+  overflow: hidden;
+  border-radius: 4px;
+}
+.block-list-menu-cart-item .image-container {
+  width: 100%;
+  height: 128px;
+  overflow: hidden;
+  margin-bottom: 12px;
+  position: relative;
+  background-color: #e5e7eb;
+}
+.block-list-menu-cart-item .image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.block-list-menu-cart-item .text {
+  color: #333;
+  font-size: 16px;
+  line-height: 16px;
+  padding: 0 8px 8px 8px;
+  transition: color 0.3s ease;
+}
+
+.block-list-menu-popover-item {
+  position: relative;
+  cursor: grab;
+}
+.block-list-menu-popover-item:hover::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: 1;
 }/*---------------------------------------------------------------------------------------------
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.

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

@@ -0,0 +1,7 @@
+import { Element } from "slate";
+import React from "react";
+export declare const DragItem: ({ element, children, style, }: {
+    element: Element;
+    children: React.ReactNode;
+    style?: React.CSSProperties | undefined;
+}) => React.JSX.Element;

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

@@ -0,0 +1,11 @@
+import { Element } from "easy-email-pro-core";
+import React from "react";
+import "./index.scss";
+declare const ElementStyles: Record<string, React.FC>;
+export declare function ElementStyleGallery({ type, payload, title, children, }: {
+    type: Element["type"];
+    payload?: Partial<Element>;
+    title?: string | null;
+    children: React.ReactNode;
+}): React.JSX.Element | null;
+export { ElementStyles };

package/lib/typings/components/Providers/DraggingProvider.d.ts

@@ -14,6 +14,7 @@ export declare const DraggingProviderContext: React.Context<{
         onDragEnd(): void;
         draggable: boolean;
     };
+    isDragging: boolean;
 }>;
 export declare const DraggingProvider: React.FC<{
     children: React.ReactNode;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { WidgetConfigPanel, WidgetTypeOptions } from "./ConfigurationPanel/components/WidgetConfigPanel";
 import { AIAssistant } from "./HoveringToolbar/componens/AIAssistant";
+import { ElementStyleGallery } from "./ElementStyleGallery";
 export { enhancer } from "./Form";
 export * from "./Providers";
 export declare const SharedComponents: {
@@ -125,11 +126,18 @@ export declare const SharedComponents: {
         onRetry: () => void;
     }) => import("react").JSX.Element;
     SourceCodePanel: () => import("react").JSX.Element;
+    DragItem: ({ element, children, style, }: {
+        element: import("../easy-email-pro-core/lib/typings").Element;
+        children: import("react").ReactNode;
+        style?: import("react").CSSProperties | undefined;
+    }) => import("react").JSX.Element;
+    ElementStyleGallery: typeof ElementStyleGallery;
 };
 export { CollapseWrapper } from "./ConfigurationPanel/components/CollapseWrapper";
 export { AttributesPanelWrapper } from "./ConfigurationPanel/components/AttributesPanelWrapper";
 export { AttributeField } from "./ConfigurationPanel/components/AttributeField";
 export { ConfigPanelsMap } from "./ConfigurationPanel/Elements";
 export { WidgetTypeOptions };
+export { ElementStyles } from "./ElementStyleGallery";
 export { ResponsiveField, ResponsiveTabs, } from "./ConfigurationPanel/components/ResponsiveTabs";
 export { IconFont } from "./IconFont";

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

@@ -41,7 +41,23 @@ export interface CategoryGridItem<T extends keyof ElementMap = any> {
     }>;
     displayType?: "grid";
 }
-export type Categories = Array<CategoryGridItem | {
+export interface CategoryMenuItem<T extends keyof ElementMap = any> {
+    label: string;
+    active?: boolean;
+    blocks: Array<{
+        type: Element["type"];
+        payload?: Partial<ElementMap[T]>;
+        title?: string | undefined | null;
+        icon?: React.ReactNode;
+        blocks?: Array<{
+            payload?: Partial<ElementMap[T]>;
+            title?: string | undefined | null;
+            image?: string;
+        }>;
+    }>;
+    displayType?: "menu";
+}
+export type Categories = Array<CategoryGridItem | CategoryMenuItem | {
     label: string;
     active?: boolean;
     blocks: Array<{

package/package.json

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