@flozy/editor 3.8.6 → 3.8.8

package/dist/Editor/assets/svg/AIIcons.js

@@ -435,156 +435,4 @@ export function DeleteIcon(props) {
       strokeLinejoin: "round"
     })]
   });
-}
-export const PauseRecordingIcon = () => /*#__PURE__*/_jsxs("svg", {
-  width: "30",
-  height: "30",
-  viewBox: "0 0 30 30",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "15",
-    cy: "15",
-    r: "14.5",
-    fill: "white",
-    stroke: "url(#paint0_linear_29403_449555)"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M13.6916 21.125H10.8817C10.5953 21.125 10.3447 20.8744 10.3447 20.5881V9.84943C10.3447 9.54517 10.5953 9.3125 10.8817 9.3125H13.6916C13.932 9.3125 14.2285 9.54517 14.2285 9.84943V20.5881C14.2285 20.8744 13.932 21.125 13.6916 21.125Z",
-    fill: "url(#paint1_linear_29403_449555)"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M20.1346 21.125H17.3426C17.0383 21.125 16.8057 20.8744 16.8057 20.5881V9.84943C16.8057 9.54517 17.0383 9.3125 17.3426 9.3125H20.1525C20.4568 9.3125 20.6895 9.54517 20.6895 9.84943V20.5881C20.6716 20.8744 20.4389 21.125 20.1346 21.125Z",
-    fill: "url(#paint2_linear_29403_449555)"
-  }), /*#__PURE__*/_jsxs("defs", {
-    children: [/*#__PURE__*/_jsxs("linearGradient", {
-      id: "paint0_linear_29403_449555",
-      x1: "15",
-      y1: "0",
-      x2: "15",
-      y2: "30",
-      gradientUnits: "userSpaceOnUse",
-      children: [/*#__PURE__*/_jsx("stop", {
-        stopColor: "#8061FD"
-      }), /*#__PURE__*/_jsx("stop", {
-        offset: "1",
-        stopColor: "#2C64ED"
-      })]
-    }), /*#__PURE__*/_jsxs("linearGradient", {
-      id: "paint1_linear_29403_449555",
-      x1: "12.2866",
-      y1: "9.3125",
-      x2: "12.2866",
-      y2: "21.125",
-      gradientUnits: "userSpaceOnUse",
-      children: [/*#__PURE__*/_jsx("stop", {
-        stopColor: "#8161FD"
-      }), /*#__PURE__*/_jsx("stop", {
-        offset: "1",
-        stopColor: "#2A64EC"
-      })]
-    }), /*#__PURE__*/_jsxs("linearGradient", {
-      id: "paint2_linear_29403_449555",
-      x1: "18.7476",
-      y1: "9.3125",
-      x2: "18.7476",
-      y2: "21.125",
-      gradientUnits: "userSpaceOnUse",
-      children: [/*#__PURE__*/_jsx("stop", {
-        stopColor: "#8161FD"
-      }), /*#__PURE__*/_jsx("stop", {
-        offset: "1",
-        stopColor: "#2A64EC"
-      })]
-    })]
-  })]
-});
-export const CloseGreyCircle = () => /*#__PURE__*/_jsxs("svg", {
-  width: "30",
-  height: "30",
-  viewBox: "0 0 30 30",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  children: [/*#__PURE__*/_jsx("rect", {
-    width: "30",
-    height: "30",
-    rx: "15",
-    fill: "#DAE4ED"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M19.1245 10.875L10.8749 19.1246",
-    stroke: "#2563EB",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M10.875 10.875L19.1246 19.1246",
-    stroke: "#2563EB",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })]
-});
-export const TickBlueCircle = () => /*#__PURE__*/_jsxs("svg", {
-  width: "30",
-  height: "30",
-  viewBox: "0 0 30 30",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  children: [/*#__PURE__*/_jsx("rect", {
-    width: "30",
-    height: "30",
-    rx: "15",
-    fill: "url(#paint0_linear_30220_64249)"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M9 15L13.0011 19L21 11",
-    stroke: "white",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_jsx("defs", {
-    children: /*#__PURE__*/_jsxs("linearGradient", {
-      id: "paint0_linear_30220_64249",
-      x1: "15",
-      y1: "0",
-      x2: "15",
-      y2: "30",
-      gradientUnits: "userSpaceOnUse",
-      children: [/*#__PURE__*/_jsx("stop", {
-        stopColor: "#8360FD"
-      }), /*#__PURE__*/_jsx("stop", {
-        offset: "1",
-        stopColor: "#2563EB"
-      })]
-    })
-  })]
-});
-export const ChatMicIcon = props => /*#__PURE__*/_jsxs("svg", {
-  width: "26",
-  height: "26",
-  viewBox: "0 0 26 26",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M13 19.3194C15.9882 19.3194 18.4166 16.8909 18.4166 13.9028V9.38887C18.4166 6.40067 15.9882 3.9722 13 3.9722C10.0118 3.9722 7.58331 6.40067 7.58331 9.38887V13.9028C7.58331 16.8909 10.0118 19.3194 13 19.3194Z",
-    stroke: "#94A3B8",
-    strokeWidth: "1.4",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M4.875 12.0972V13.9028C4.875 18.3896 8.51319 22.0278 13 22.0278C17.4868 22.0278 21.125 18.3896 21.125 13.9028V12.0972",
-    stroke: "#94A3B8",
-    strokeWidth: "1.4",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M10.3913 8.91914C11.9982 8.33233 13.7496 8.33233 15.3565 8.91914",
-    stroke: "#94A3B8",
-    strokeWidth: "1.4",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M11.2218 11.6295C12.3051 11.3316 13.4516 11.3316 14.535 11.6295",
-    stroke: "#94A3B8",
-    strokeWidth: "1.4",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })]
-});
+}

package/dist/Editor/assets/svg/AddTemplateIcon.js

@@ -1,32 +1,29 @@
 import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const AddTemplateIcon = () => {
+const AddElementIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
     width: "17",
-    height: "18",
-    viewBox: "0 0 17 18",
+    height: "16",
+    viewBox: "0 0 17 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M9.21541 2.18999L13.3946 4.15499C14.5987 4.71749 14.5987 5.64749 13.3946 6.20999L9.21541 8.17499C8.74083 8.39999 7.96166 8.39999 7.48708 8.17499L3.30791 6.20999C2.10374 5.64749 2.10374 4.71749 3.30791 4.15499L7.48708 2.18999C7.96166 1.96499 8.74083 1.96499 9.21541 2.18999Z",
-      stroke: "#64748B",
-      strokeWidth: "1.5",
+      d: "M9.17334 1.94688L13.1067 3.69354C14.24 4.19354 14.24 5.02021 13.1067 5.52021L9.17334 7.26688C8.72667 7.46688 7.99334 7.46688 7.54667 7.26688L3.61334 5.52021C2.48 5.02021 2.48 4.19354 3.61334 3.69354L7.54667 1.94688C7.99334 1.74687 8.72667 1.74687 9.17334 1.94688Z",
+      strokeWidth: "1.2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M2.125 8.25C2.125 8.88 2.57125 9.6075 3.11667 9.8625L7.92625 12.1275C8.29458 12.3 8.7125 12.3 9.07375 12.1275L13.8833 9.8625C14.4287 9.6075 14.875 8.88 14.875 8.25",
-      stroke: "#64748B",
-      strokeWidth: "1.5",
+      d: "M2.5 7.3335C2.5 7.8935 2.92 8.54016 3.43333 8.76683L7.96 10.7802C8.30667 10.9335 8.7 10.9335 9.04 10.7802L13.5667 8.76683C14.08 8.54016 14.5 7.8935 14.5 7.3335",
+      strokeWidth: "1.2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M2.125 12C2.125 12.6975 2.51458 13.3275 3.11667 13.6125L7.92625 15.8775C8.29458 16.05 8.7125 16.05 9.07375 15.8775L13.8833 13.6125C14.4854 13.3275 14.875 12.6975 14.875 12",
-      stroke: "#64748B",
-      strokeWidth: "1.5",
+      d: "M2.5 10.6665C2.5 11.2865 2.86667 11.8465 3.43333 12.0998L7.96 14.1132C8.30667 14.2665 8.7 14.2665 9.04 14.1132L13.5667 12.0998C14.1333 11.8465 14.5 11.2865 14.5 10.6665",
+      strokeWidth: "1.2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     })]
   });
 };
-export default AddTemplateIcon;
+export default AddElementIcon;

package/dist/Editor/assets/svg/TextIcon.js

@@ -4,25 +4,22 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const TextIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
     width: "15",
-    height: "16",
-    viewBox: "0 0 15 16",
+    height: "14",
+    viewBox: "0 0 15 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M1.66895 4.9813V3.8438C1.66895 3.12505 2.2502 2.55005 2.9627 2.55005H12.0377C12.7564 2.55005 13.3314 3.1313 13.3314 3.8438V4.9813",
-      stroke: "#64748B",
+      d: "M2.0575 4.18274V3.12107C2.0575 2.45024 2.59999 1.91357 3.265 1.91357H11.735C12.4058 1.91357 12.9425 2.45607 12.9425 3.12107V4.18274",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M7.5 13.4501V3.06885",
-      stroke: "#64748B",
+      d: "M7.5 12.0866V2.39746",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M5.0376 13.45H9.9626",
-      stroke: "#64748B",
+      d: "M5.20166 12.0864H9.79833",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"

package/dist/Editor/common/ColorPickerButton.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
+import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
-import CustomColorPicker from "./CustomColorPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -9,12 +9,9 @@ const ColorPickerButton = props => {
   const {
     value,
     onSave,
+    defaultColors = [],
     classes = {},
-    recentColors = [],
-    children,
-    handleClose: closeDrawer,
-    hideThemeColors,
-    disableEditTheme
+    recentColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -33,13 +30,7 @@ const ColorPickerButton = props => {
     setColor(color);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [children ? /*#__PURE__*/_jsx("div", {
-      onClick: handleColorPicker,
-      style: {
-        cursor: "pointer"
-      },
-      children: children
-    }) : /*#__PURE__*/_jsx(Button, {
+    children: [/*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
         height: "22px",
@@ -69,24 +60,17 @@ const ColorPickerButton = props => {
           item: true,
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(CustomColorPicker, {
+            children: /*#__PURE__*/_jsx(ColorPickerTool, {
               gradient: true,
-              color: color,
+              value: color,
               onChange: handleColorChange,
-              recentColors: recentColors,
-              closeDrawer: closeDrawer,
-              hideThemeColors: hideThemeColors,
-              disableEditTheme: disableEditTheme
+              defaultColors: [...recentColors, ...defaultColors] || []
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {
               display: "flex",
-              justifyContent: "flex-end",
-              padding: "8px",
-              background: "white",
-              position: "sticky",
-              bottom: 0,
-              boxShadow: "0 -1px 5px rgba(0,0,0,0.1)"
+              justifyContent: "end",
+              margin: "8px"
             },
             children: [/*#__PURE__*/_jsx(Button, {
               onClick: handleClose,

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -7,68 +7,59 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
-const DragHandleStyle = fromPopper => {
-  const handleDragStyle = fromPopper ? {
-    position: "absolute",
-    top: "6px",
-    left: "4px"
-  } : {
+const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
+const DragHandleStyle = () => ({
+  dragHandle: {
+    opacity: 0,
+    content: '" "',
     position: "absolute",
     top: "3px",
-    left: "-52px"
-  };
-  return {
-    dragHandle: {
-      opacity: 0,
-      content: '" "',
-      ...handleDragStyle,
-      borderRadius: "0px",
-      padding: "0px",
-      width: "20px",
-      height: "20px",
-      border: 0,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "grab",
-      color: "#D7D7D6",
-      background: "rgb(221, 221, 221, 0.1)",
-      "& svg": {
-        width: "20px"
-      },
-      "&:hover": {
-        opacity: 1,
-        background: "rgb(221, 221, 221, 0.8)"
-      },
-      "&.active": {
-        opacity: 1,
-        cursor: "grabbing"
-      }
+    left: "-52px",
+    borderRadius: "0px",
+    padding: "0px",
+    width: "20px",
+    height: "20px",
+    border: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "grab",
+    color: "#D7D7D6",
+    background: "rgb(221, 221, 221, 0.1)",
+    "& svg": {
+      width: "20px"
     },
-    dropArea: {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      width: "100%",
-      height: "100%",
-      pointerEvents: "none",
-      zIndex: -1,
-      "&.dragging": {
-        backgroundColor: "#def4ff"
-      }
+    "&:hover": {
+      opacity: 1,
+      background: "rgb(221, 221, 221, 0.8)"
     },
-    dropAreaOver: {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      width: "100%",
-      height: "4px"
+    "&.active": {
+      opacity: 1,
+      cursor: "grabbing"
     }
-  };
-};
+  },
+  dropArea: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: -1,
+    "&.dragging": {
+      backgroundColor: "#def4ff"
+    }
+  },
+  dropAreaOver: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "4px"
+  }
+});
 const DragHandle = props => {
-  const classes = DragHandleStyle(props.fromPopper);
+  const classes = DragHandleStyle();
   const editor = useSlateStatic();
   const [dragging, setDragging] = useState(false);
   const {

package/dist/Editor/common/Icon.js

@@ -10,26 +10,10 @@ import { IoIosImage } from "react-icons/io";
 import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import SettingsIcon from "../assets/svg/SettingsIcon";
-import UndoIcon from "../assets/svg/UndoIcon";
-import RedoIcon from "../assets/svg/RedoIcon";
-import TextIcon from "../assets/svg/TextIcon";
-import AddElementIcon from "../assets/svg/AddElementIcon";
-import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const HeadingIcon = ({
-  variant
-}) => {
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      color: "#64748B"
-    },
-    children: variant
-  });
-};
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
     size: 20
@@ -65,24 +49,6 @@ const iconList = {
     size: 18,
     fill: "#64748B"
   }),
-  headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H4"
-  }),
-  headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H5"
-  }),
-  headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H6"
-  }),
-  paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P1"
-  }),
-  paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P2"
-  }),
-  paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P3"
-  }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
     fill: "#64748B"
@@ -278,13 +244,7 @@ const iconList = {
   checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
   uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
   infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {}),
-  resetIcon: /*#__PURE__*/_jsx(ResetIcon, {}),
-  pagesSettings: /*#__PURE__*/_jsx(SettingsIcon, {}),
-  undoIcon: /*#__PURE__*/_jsx(UndoIcon, {}),
-  redoIcon: /*#__PURE__*/_jsx(RedoIcon, {}),
-  textIcon: /*#__PURE__*/_jsx(TextIcon, {}),
-  addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
-  addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
+  resetIcon: /*#__PURE__*/_jsx(ResetIcon, {})
 };
 const Icon = props => {
   const {

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -134,13 +134,10 @@ export const SelectPage = props => {
   });
 };
 export const Trigger = props => {
-  const {
-    nav
-  } = props;
-  return /*#__PURE__*/_jsxs(Typography, {
+  return /*#__PURE__*/_jsx(Typography, {
     variant: "subtitle1",
     gutterBottom: true,
-    children: ["Choosing this will trigger the ", nav.type, " step"]
+    children: "Choosing this will trigger the next step"
   });
 };
 const scrollToOptions = [{

package/dist/Editor/common/LinkSettings/index.js

@@ -18,8 +18,7 @@ const MAP_COMPONENT = {
   webAddress: TextInput,
   email: TextInput,
   phone: TextInput,
-  nextTrigger: Trigger,
-  prevTrigger: Trigger,
+  actionTrigger: Trigger,
   scrollTopOrBottom: ScrollTopBottom,
   page: SelectPage
 };
@@ -36,12 +35,11 @@ export default function LinkSettings(props) {
     customProps,
     navType
   } = props;
-  const themeType = localStorage.getItem("themeType");
   const {
     isMobile
   } = customProps;
   const navOptions = getNavOptions(customProps.hideTools);
-  const classes = LinkSettingsStyles(themeType);
+  const classes = LinkSettingsStyles();
   const [nav, setNav] = useState(getNav(navType, navOptions));
   const [navValue, setNavValue] = useState(props?.navValue || "");
   const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -3,13 +3,8 @@ export const getNavOptions = (hideTools = []) => {
     label: "None",
     value: ""
   }, {
-    label: "Next Trigger",
-    value: "nextTrigger",
-    type: "next"
-  }, {
-    label: "Previous Trigger",
-    value: "prevTrigger",
-    type: "previous"
+    label: "Trigger",
+    value: "actionTrigger"
   }, {
     label: "Web Address",
     value: "webAddress",

package/dist/Editor/common/LinkSettings/style.js

@@ -1,35 +1,32 @@
-const ButtonNavSettingsStyles = themeType => ({
+const ButtonNavSettingsStyles = () => ({
   dialogContainer: {
-    "& .MuiPaper-root": {
-      background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
-    },
-    "& .MuiDialogContent-root": {
+    '& .MuiDialogContent-root': {
       padding: "0px 20px"
     },
-    "& .MuiDialogActions-root": {
+    '& .MuiDialogActions-root': {
       padding: "10px"
     },
-    "& .MuiTypography-h6": {
+    '& .MuiTypography-h6': {
       fontWeight: 600,
       fontSize: "16px",
       paddingRight: "20px"
     },
     "& .MuiGrid-container": {
-      marginTop: "0px"
+      marginTop: '0px'
     },
     "& .MuiGrid-item": {
       padding: "14px"
     }
   },
   saveBtn: {
-    color: "#fff",
+    color: '#fff',
     background: "#2563EB",
     fontSize: "14px",
     fontWeight: 500,
     padding: "4px 24px",
     textTransform: "none",
     "&:hover": {
-      color: "#fff",
+      color: '#fff',
       background: "#2563EB"
     }
   },
@@ -46,7 +43,7 @@ const ButtonNavSettingsStyles = themeType => ({
     }
   },
   closeIcon: {
-    position: "absolute",
+    position: 'absolute',
     right: 8,
     top: 8,
     color: theme => theme.palette.grey[500]

package/dist/Editor/common/MentionsPopup/MentionsListCard.js

@@ -39,7 +39,12 @@ const MentionsListCard = props => {
       },
       alt: name,
       children: /*#__PURE__*/_jsx(Avatar, {
-        src: avatar_filename
+        sx: {
+          background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
+        },
+        alt: name,
+        src: avatar_filename,
+        children: !avatar_filename && name && name.charAt(0).toUpperCase()
       })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {