@flozy/editor 3.8.1 → 3.8.2

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/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,7 +7,7 @@ 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 DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
 const DragHandleStyle = () => ({
   dragHandle: {
     opacity: 0,

package/dist/Editor/common/Icon.js

@@ -10,20 +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 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
@@ -59,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"

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

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/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: {

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

@@ -39,13 +39,10 @@ const usePopupStyles = theme => ({
       color: theme?.palette?.editor?.textColor
     },
     "&.active": {
-      background: `#2563EB2B`,
-      "& .MuiTypography-root": {
-        color: `${theme?.palette?.editor?.activeColor} !important`
-      }
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&:hover": {
-      background: theme?.palette?.action?.hover || `#F4F4F4`
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&.renderComp": {
       padding: "0px",

package/dist/Editor/common/Shorthands/elements.js

@@ -40,60 +40,6 @@ const ELEMENTS_LIST = [{
     icon: "headingThree"
   }),
   onInsert: editor => toggleBlock(editor, "headingThree", false)
-}, {
-  name: "Heading 4",
-  desc: "",
-  group: "Text",
-  type: "headingFour",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingFour"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingFour", false)
-}, {
-  name: "Heading 5",
-  desc: "",
-  group: "Text",
-  type: "headingFive",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingFive"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingFive", false)
-}, {
-  name: "Heading 6",
-  desc: "",
-  group: "Text",
-  type: "headingSix",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingSix"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingSix", false)
-}, {
-  name: "Paragraph 1",
-  desc: "",
-  group: "Text",
-  type: "paragraphOne",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphOne"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphOne", false)
-}, {
-  name: "Paragraph 2",
-  desc: "",
-  group: "Text",
-  type: "paragraphTwo",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphTwo"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
-}, {
-  name: "Paragraph 3",
-  desc: "",
-  group: "Text",
-  type: "paragraphThree",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphThree"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphThree", false)
 }, {
   name: "Quote",
   desc: "",

package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js

@@ -1,18 +1,18 @@
 const accordionTitleBtnStyle = [{
   tab: "Colors",
-  value: "accordionColor",
+  value: "colors",
   fields: [{
-    label: "Accordion Color",
-    key: "accordionTextColor",
+    label: "Text Color",
+    key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Accordion Background Color",
-    key: "accordionBgColor",
+    label: "Background Color",
+    key: "bgColor",
     type: "color"
   }, {
-    label: "Accordion Border Color",
-    key: "accordionBorderColor",
+    label: "Border Color",
+    key: "borderColor",
     type: "color"
   }]
 }];

package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js

@@ -1,4 +1,20 @@
 const accordionTitleStyle = [{
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
   tab: "Colors",
   value: "colors",
   fields: [{
@@ -15,21 +31,5 @@ const accordionTitleStyle = [{
     key: "borderColor",
     type: "color"
   }]
-}, {
-  tab: "Banner Spacing",
-  value: "bannerSpacing",
-  fields: [{
-    label: "Banner Spacing",
-    key: "bannerSpacing",
-    type: "bannerSpacing"
-  }]
-}, {
-  tab: "Border Radius",
-  value: "borderRadius",
-  fields: [{
-    label: "Border Radius",
-    key: "borderRadius",
-    type: "borderRadius"
-  }]
 }];
 export default accordionTitleStyle;

package/dist/Editor/common/StyleBuilder/buttonStyle.js

@@ -20,8 +20,7 @@ const buttonStyle = [{
         },
         children: option.text
       });
-    },
-    themeEnabled: true
+    }
   }, {
     label: "Font Size",
     key: "textSize",
@@ -45,8 +44,7 @@ const buttonStyle = [{
   }, {
     label: "Button Color",
     key: "bgColor",
-    type: "color",
-    themeEnabled: true
+    type: "color"
   }, {
     label: "Border Color",
     key: "borderColor",

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -3,12 +3,12 @@ import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/
 import { squreStyle } from "./radiusStyle";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
 const BannerSpacing = props => {
   const {
+    value: val,
     data,
     onChange,
     elementProps,
@@ -18,21 +18,11 @@ const BannerSpacing = props => {
     key
   } = data;
   const lockKeyVal = `lock${key}`;
-  const [size] = useWindowResize();
-  const {
-    selectedTheme
-  } = useEditorTheme();
-  const {
-    bannerSpacing,
-    lockbannerSpacing
-  } = selectedTheme?.elementProps?.button || {};
-  const isUserValue = Object.keys(props?.value || {})?.length;
-  const isUserLockedSpacing = typeof elementProps[lockKeyVal] === "boolean";
-  const val = isUserValue ? props?.value : bannerSpacing;
-  let lockSpacing = isUserLockedSpacing ? elementProps[lockKeyVal] : lockbannerSpacing;
+  let lockSpacing = elementProps[lockKeyVal];
   if (lockSpacing === undefined) {
     lockSpacing = true;
   }
+  const [size] = useWindowResize();
   const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -3,35 +3,27 @@ import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { getBreakPointsValue } from "../../../helper/theme";
-import { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
 const BorderRadius = props => {
   const {
+    value: val,
     data,
     onChange,
     elementProps,
     classes
   } = props;
+  let {
+    lockRadius
+  } = elementProps;
+  if (lockRadius === undefined) {
+    lockRadius = true;
+  }
   const {
     key
   } = data;
   const [size] = useWindowResize();
-  const {
-    selectedTheme
-  } = useEditorTheme();
-  const {
-    borderRadius,
-    lockRadius: themeLockRadius
-  } = selectedTheme?.elementProps?.button || {};
-  const isUserValue = Object.keys(props?.value || {})?.length;
-  const isUserLockedRadius = typeof elementProps?.lockRadius === "boolean";
-  const val = isUserValue ? props?.value : borderRadius;
-  let lockRadius = isUserLockedRadius ? elementProps?.lockRadius : themeLockRadius;
-  if (lockRadius === undefined) {
-    lockRadius = true;
-  }
   const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};

package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js

@@ -59,7 +59,7 @@ const ButtonLink = props => {
           value: elementProps?.url
         })
       });
-    } else if (value?.linkType === "prevTrigger" || value?.linkType === "nextTrigger") {
+    } else if (value?.linkType === "actionTrigger") {
       return null;
     }
   };

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -1,44 +1,22 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
-import { useSlateStatic } from "slate-react";
-import { getElementStyle, getVariableValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const MAP_STYLE_PROPS = {
-  bgColor: "background-color",
-  textColor: "color"
-};
 const Color = props => {
   const {
-    value: val,
+    value,
     data,
     onChange,
-    classes,
-    elementProps,
-    handleClose,
-    customProps
+    classes
   } = props;
   const {
     key,
     label
   } = data;
   const [recentColors, setRecentColors] = useState({});
-  const editor = useSlateStatic();
-  const {
-    value,
-    inputValue
-  } = useMemo(() => {
-    const isVariable = val && val.startsWith("var");
-    const value = isVariable ? val : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
-    const inputValue = isVariable ? getVariableValue(val) : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
-    return {
-      value: value || val,
-      inputValue: inputValue || val
-    };
-  }, [editor, val]);
   useEffect(() => {
-    const storedColors = JSON.parse(localStorage.getItem("recentColors"));
+    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
     if (storedColors) {
       setRecentColors(storedColors);
     }
@@ -61,7 +39,7 @@ const Color = props => {
       [key]: updatedColors
     };
     setRecentColors(updatedColors);
-    localStorage.setItem("recentColors", JSON.stringify(updatedColors));
+    localStorage.setItem('recentColors', JSON.stringify(updatedColors));
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
@@ -78,7 +56,7 @@ const Color = props => {
       children: label
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
-      value: inputValue,
+      value: value,
       placeholder: `${label} color code`,
       InputLabelProps: {
         shrink: true
@@ -90,9 +68,7 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key],
-            handleClose: handleClose,
-            disableEditTheme: customProps?.disableEditTheme
+            recentColors: recentColors[key]
           })
         })
       }