@flozy/editor 5.9.0 → 5.9.1

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { Popper, Paper, ClickAwayListener } from "@mui/material";
+import React, { useCallback, useEffect, useState } from "react";
+import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range, Transforms } from "slate";
 import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
@@ -9,7 +9,6 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
 import { isCarouselSelected } from "../../helper";
-import { hideSlateSelection } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
@@ -21,8 +20,7 @@ const PopupTool = props => {
   const classes = usePopupStyles(theme);
   const {
     setPopupType,
-    openAI,
-    selectedElement
+    openAI
   } = useEditorContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
@@ -33,10 +31,13 @@ const PopupTool = props => {
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const [size] = useWindowResize();
-  const updateAnchorEl = isScroll => {
+  const {
+    selectedElement
+  } = useEditorContext();
+  const updateAnchorEl = useCallback(() => {
     try {
       const isHavingSelection = selection && !Range.isCollapsed(selection);
-      if (isHavingSelection && event === "end") {
+      if (isHavingSelection) {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
         const rect = domRange.getBoundingClientRect();
@@ -45,21 +46,16 @@ const PopupTool = props => {
           rect.y = -500; // hide the popper
         }
 
-        // Create a dummy anchor element to match Popper's requirements
-        const anchor = document.createElement("div");
-        anchor.style.position = "absolute";
-        anchor.style.top = `${rect.top + window.scrollY}px`;
-        anchor.style.left = `${rect.left + window.scrollX}px`;
-        document.body.appendChild(anchor);
-        if (!anchorEl || isScroll === "scroll") {
-          setAnchorEl(anchor);
-          setOpen(true);
-        }
+        setAnchorEl({
+          clientWidth: rect.width,
+          clientHeight: rect.height,
+          getBoundingClientRect: () => rect
+        });
       }
     } catch (err) {
       console.log(err);
     }
-  };
+  }, [selection]);
   useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
@@ -87,9 +83,8 @@ const PopupTool = props => {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
-      hideSlateSelection(); // removes slate selection background, when there is no selection
     }
-  }, [selection, event]);
+  }, [selection]);
   useEffect(() => {
     if (selectedElement?.enable === 1) {
       setAnchorEl(null);
@@ -120,18 +115,24 @@ const PopupTool = props => {
       id: id,
       open: open,
       anchorEl: anchorEl,
+      transition: true,
       sx: classes.popupWrapper,
       placement: "top-start",
-      children: /*#__PURE__*/_jsx(Paper, {
-        style: {
-          borderRadius: "6px",
-          border: "1px solid #8360FD"
-        },
-        children: /*#__PURE__*/_jsx(MiniTextFormat, {
-          editor: editor,
-          classes: classes,
-          closeMainPopup: handleClose,
-          customProps: customProps
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        children: /*#__PURE__*/_jsx(Paper, {
+          style: {
+            borderRadius: "6px",
+            border: "1px solid #8360FD"
+          },
+          children: /*#__PURE__*/_jsx(MiniTextFormat, {
+            editor: editor,
+            classes: classes,
+            closeMainPopup: handleClose,
+            customProps: customProps
+          })
         })
       })
     })

package/dist/Editor/common/FontLoader/FontList.js

@@ -1,3 +1,11 @@
-const otherFonts = ["PoppinsRegular", "PoppinsBold", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door"];
-const mostUsedGoogleFonts = ["Roboto", "Poppins", "Lato", "Inter", "Nunito", "Ubuntu", "Oswald", "Rubik", "Roboto Slab", "PT Sans", "Work Sans", "Lora", "Mulish", "DM Sans", "Fira Sans", "Quicksand", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Libre Franklin", "Bebas Neue", "Cabin", "Titillium Web", "Heebo", "Noto Serif", "Jost", "Source Code Pro", "Josefin Sans", "Dosis", "Fira Sans Condensed", "Archivo", "Noto Serif JP", "Crimson Text", "Cairo", "Pacifico", "Red Hat Display", "Assistant", "Comfortaa", "Lexend", "Fjalla One", "Caveat", "Arvo", "Lobster", "Schibsted Grotesk", "EB Garamond", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", "Plus Jakarta Sans"];
-export const googleFontList = [...mostUsedGoogleFonts, ...otherFonts];
+export const defaultFonts = [
+// "EB Garamond",
+"Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Dancing Script", "Gaegu", "Kite One", "Merriweather"];
+export const otherFonts = ["PoppinsRegular", "PoppinsBold", "Monaco", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door", "Helvetica", "Georgia", "Times New Roman", "Courier New", "Impact"];
+export const googleFontList = ["Roboto", "Noto Sans JP", "Poppins", "Lato", "Inter", "Roboto Condensed", "Roboto Mono", "Oswald", "Noto Sans", "Nunito", "Nunito Sans", "Ubuntu", "Rubik", "Playfair Display", "Noto Sans KR", "Roboto Slab", "PT Sans", "Kanit", "Work Sans", "Lora", "DM Sans", "Mulish", "Quicksand", "Fira Sans", "Noto Sans TC", "Inconsolata", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Karla", "Titillium Web", "Heebo", "Noto Serif", "Nanum Gothic", "Noto Color Emoji", "Agdasima", "Bebas Neue", "Libre Franklin", "Mukta", "Outfit", "Josefin Sans", "Source Code Pro", "Jost", "Space Grotesk", "Hind Siliguri", "Arimo", "Cabin", "Barlow Condensed", "Dosis", "Fira Sans Condensed", "Bitter", "Archivo", "Figtree", "Noto Serif JP", "PT Sans Narrow", "Abel", "Noto Sans SC",
+// "Source Sans 3",
+"Hind",
+// "Exo 2",
+"Teko", "Oxygen", "Cairo", "Crimson Text", "Plus Jakarta Sans", "Overpass", "Pacifico", "Prompt", "Red Hat Display", "Varela Round", "Cormorant Garamond", "Assistant", "Comfortaa", "Lexend", "Signika Negative",
+// "M PLUS Rounded 1c",
+"Fjalla One", "Caveat", "IBM Plex Mono", "Arvo", "Lobster", "Schibsted Grotesk", "Chakra Petch", "Maven Pro", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", 'Titillium Web', ...defaultFonts];

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,9 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import WebFont from "webfontloader";
-import { Backdrop, CircularProgress } from "@mui/material";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { googleFontList } from "./FontList";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { defaultFonts, googleFontList, otherFonts } from "./FontList";
 const FontLoader = props => {
   const {
     otherProps,
@@ -12,20 +10,14 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
-  const [loader, setLoader] = useState(true);
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
-    let hideLoaderOn = 30;
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
         // console.log("All fonts have been loaded");
-        setLoader(false);
         return;
       }
-      if (currentIndex >= hideLoaderOn) {
-        setLoader(false);
-      }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
       const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
       WebFont.load({
@@ -49,9 +41,9 @@ const FontLoader = props => {
             // Retry loading the same batch
             loadNextBatch();
           } else {
-            // console.log(
-            //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
-            // );
+            console.log(
+              // `Max retries reached for batch: ${batch}. Moving to the next batch.`
+            );
             currentIndex += batchSize;
             retryCount = 0; // Reset retry count for the next batch
             loadNextBatch();
@@ -62,21 +54,21 @@ const FontLoader = props => {
     loadNextBatch();
   };
   useEffect(() => {
-    let families = [...googleFontList];
+    let families = [...otherFonts, ...defaultFonts];
     if (!readOnly) {
       otherProps?.services("listGoogleFont", []).then(data => {
-        families = [...(data?.data || [])];
+        families = [...families, ...(data?.data || [])];
+        const filteredfamilies = families?.filter(font => !font?.includes("Material"));
         setFontFamilies({
           id: 1,
           format: "fontFamily",
           type: "fontfamilydropdown",
-          options: families || []
+          options: filteredfamilies || []
         });
         loadFontsInBatches(families);
       }).catch(err => {
-        // console.log(err);
+        console.log(err);
       });
-      // setLoading(true);
     } else {
       function correctFontArray(fontString) {
         let fontsArray = fontString.split(",");
@@ -101,15 +93,6 @@ const FontLoader = props => {
       loadFontsInBatches(families);
     }
   }, []);
-  return /*#__PURE__*/_jsx(Backdrop, {
-    open: loader,
-    sx: {
-      color: "#fff",
-      zIndex: theme => theme.zIndex.drawer + 1 // Ensure it's above other UI elements
-    },
-    children: /*#__PURE__*/_jsx(CircularProgress, {
-      color: "inherit"
-    })
-  });
+  return null;
 };
 export default FontLoader;

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -62,7 +62,6 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
-            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {

package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js

@@ -3,35 +3,24 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import useSwitchViewport from "./styles";
 import { useEffect } from "react";
-import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange,
-    show
+    onChange
   } = props;
   const classes = useSwitchViewport();
-  const {
-    setSelectedElement,
-    setActiveBreakPoint
-  } = useEditorContext();
   useEffect(() => {
-    // to reset selection on viewport changes - FS-6589
-    setSelectedElement({});
+    console.log(breakpoint);
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
-    style: {
-      display: show ? "block" : "none"
-    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Desktop View",
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
-          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -41,7 +30,6 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {
-          setActiveBreakPoint("xs");
           onChange("xs");
         },
         children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})

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

@@ -2,44 +2,18 @@ import React, { useRef, useState } from "react";
 import { useTheme } from "@mui/material";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
-// import DragHandle from "../DnD/DragHandleButton";
-// import { useEditorSelection } from "../../hooks/useMouseMove";
+import DragHandle from "../DnD/DragHandleButton";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
 import { SectionSettingIcon } from "../iconListV2";
-
-// const list_types = ["orderedList", "unorderedList"];
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Toolbar = ({
-  readOnly,
-  showTool,
-  onSettings,
-  isSectionFullWidth
-}) => {
-  return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
-    component: "div",
-    className: `element-toolbar no-border-button hr section-tw sectionIcon`,
-    contentEditable: false,
-    sx: {
-      left: isSectionFullWidth ? "0px" : "-28px",
-      top: isSectionFullWidth ? "-28px" : "1px",
-      "&:hover": {
-        backgroundColor: "rgba(0,0,0,0.5)"
-      }
-    },
-    children: /*#__PURE__*/_jsx(Tooltip, {
-      title: "Section Settings",
-      children: /*#__PURE__*/_jsx(IconButton, {
-        onClick: onSettings,
-        children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
-      })
-    })
-  }) : null;
-};
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const themeReact = useTheme();
   const theme = props?.theme;
@@ -53,8 +27,7 @@ const Section = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
-  // const [isHovering, setIsHovering] = useState(false);
-  const [size] = useWindowResize();
+  const [showTool] = useEditorSelection(editor);
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     sectionBgColor,
@@ -71,46 +44,45 @@ const Section = props => {
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
   const anchorEl = useRef(null);
-  // const popperEl = useRef(null);
-  // const [showTool] = useEditorSelection(editor);
+  const popperEl = useRef(null);
+  const [size] = useWindowResize();
   const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
-  const isFreeGrid = element?.children[0]?.type === "freegrid";
-  const needHover = false;
-  let tempProps = {};
-  if (element?.type === "temp") {
-    tempProps = {
-      "--left": `${element?.left}px`,
-      "--top": `${element?.top}px`
-    };
-  }
-  const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
-    backgroundImage: `url(${sectionBackgroundImage})`
-  } : {};
-  const edSectionSp = groupByBreakpoint({
-    padding: {
-      ...getTRBLBreakPoints(sectionBannerSpacing)
-    },
-    borderRadius: {
-      ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
-    }
-  }, themeReact);
-  const edInnerSp = groupByBreakpoint({
-    width: {
-      ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
-    }
-  }, themeReact);
-
-  // const onMouseEnter = () => {
-  //   setIsHovering(true);
-  // };
-
-  // const onMouseLeave = () => {
-  //   setIsHovering(false);
-  // };
-
+  const [isHovering, setIsHovering] = useState(false);
+  const onMouseEnter = () => {
+    setIsHovering(true);
+  };
+  const onMouseLeave = () => {
+    setIsHovering(false);
+  };
   const onSettings = () => {
     setOpenSettings(true);
   };
+  const Toolbar = ({
+    fromPopper
+  }) => {
+    return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: `element-toolbar no-border-button hr section-tw sectionIcon`,
+      contentEditable: false,
+      style: fromPopper ? {
+        position: "unset",
+        marginLeft: "28px",
+        paddingTop: "4px",
+        marginRight: "10px",
+        height: "100%"
+      } : {
+        left: "-28px",
+        top: "1px"
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Section Settings",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
+        })
+      })
+    }) : null;
+  };
   const onSave = data => {
     const updateData = {
       ...data
@@ -131,6 +103,31 @@ const Section = props => {
       at: path
     });
   };
+  const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
+  const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "" : "";
+  let tempProps = {};
+  if (element?.type === "temp") {
+    tempProps = {
+      "--left": `${element?.left}px`,
+      "--top": `${element?.top}px`
+    };
+  }
+  const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
+    backgroundImage: `url(${sectionBackgroundImage})`
+  } : {};
+  const edSectionSp = groupByBreakpoint({
+    padding: {
+      ...getTRBLBreakPoints(sectionBannerSpacing)
+    },
+    borderRadius: {
+      ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
+    }
+  }, themeReact);
+  const edInnerSp = groupByBreakpoint({
+    width: {
+      ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
+    }
+  }, themeReact);
   return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
@@ -145,10 +142,9 @@ const Section = props => {
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
       justifyContent: vertical
-    }
-    // onMouseEnter={onMouseEnter}
-    // onMouseLeave={onMouseLeave}
-    ,
+    },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -156,11 +152,34 @@ const Section = props => {
         ...edInnerSp
       },
       ref: anchorEl,
-      children: [/*#__PURE__*/_jsx(Toolbar, {
-        isSectionFullWidth: isSectionFullWidth,
-        readOnly: readOnly,
-        showTool: false,
-        onSettings: onSettings
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
+        anchorEl: anchorEl?.current,
+        placement: "top-start",
+        sx: {
+          zIndex: 9999
+        },
+        disablePortal: true,
+        ref: popperEl,
+        className: "sectionPopper",
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            bgcolor: "background.paper",
+            height: "30px",
+            position: "relative",
+            background: theme?.palette?.type === 'dark' ? theme?.palette?.editor?.miniToolBarBackground : '#F6F6F6'
+          },
+          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+            ...props,
+            fromPopper: true
+          }) : null, /*#__PURE__*/_jsx(Toolbar, {
+            fromPopper: true
+          })]
+        })
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
       }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {

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

@@ -73,11 +73,6 @@ const BackgroundImage = props => {
             children: "REMOVE"
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
-            sx: {
-              padding: 0,
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

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

@@ -1,7 +1,6 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
-import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,10 +15,7 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px",
-      '& .MuiCheckbox-root svg': {
-        fill: 'unset !important'
-      }
+      padding: "10px"
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -85,9 +81,6 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
-  const {
-    theme
-  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -106,8 +99,7 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        background: theme?.palette?.editor?.miniToolBarBackground,
-        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

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

@@ -18,7 +18,6 @@ import FontSize from "./fontSize";
 import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
-import LineSpacing from "./lineSpacing";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -39,7 +38,6 @@ const FieldMap = {
   fontSize: FontSize,
   selectSwitch: SelectSwitch,
   card: CardsMapping,
-  metadatamapping: MetaDataMapping,
-  lineSpacing: LineSpacing
+  metadatamapping: MetaDataMapping
 };
 export default FieldMap;

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

@@ -25,10 +25,6 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }, {
-    label: "Line Spacing",
-    key: "lineHeight",
-    type: "lineSpacing"
   }]
 }, {
   tab: "Max Width",

package/dist/Editor/common/Uploader.js

@@ -4,7 +4,6 @@ import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
-import { useEditorContext } from "../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,9 +18,6 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
-  const {
-    theme
-  } = useEditorContext();
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
@@ -103,10 +99,6 @@ const Uploader = props => {
           className: "uploadImageSection",
           children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
-            sx: {
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

package/dist/Editor/common/iconslist.js

@@ -1654,12 +1654,13 @@ export const CsvIcon = () => /*#__PURE__*/_jsxs("svg", {
     fill: "white"
   })]
 });
-export const CloseIcon = () => /*#__PURE__*/_jsxs("svg", {
+export const CloseIcon = props => /*#__PURE__*/_jsxs("svg", {
   width: "20",
   height: "20",
   viewBox: "0 0 20 20",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
+  ...(props || {}),
   children: [/*#__PURE__*/_jsx("path", {
     d: "M14.1245 5.875L5.87493 14.1246",
     stroke: "#64748B",