@flozy/editor 1.2.9 → 1.3.1

package/dist/Editor/CommonEditor.js

@@ -16,6 +16,7 @@ import "./Editor.css";
 import { serialize } from "./utils/serializer";
 import { getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
+import { Button } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -51,6 +52,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [isInteracted, setIsInteracted] = useState(false);
   const [deboundedValue] = useDebounce(value, 500);
   const [fullScreen, setFullScreen] = useState(false);
+  const [viewport, setViewport] = useState({
+    w: null,
+    h: null
+  });
+  const {
+    defaultBG
+  } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     return withCommon(createEditor());
@@ -134,6 +142,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     },
     toggleFullscreen() {
       setFullScreen(!fullScreen);
+    },
+    changeViewport({
+      w,
+      h
+    }) {
+      setViewport({
+        w,
+        h
+      });
     }
   }));
   const [htmlAction, setHtmlAction] = useState({
@@ -205,10 +222,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     ...props,
     fullScreen: fullScreen,
     children: /*#__PURE__*/_jsx("div", {
+      className: "editor-t-wrapper",
       style: {
         display: "flex",
         flexDirection: "column",
-        padding: "0 8px"
+        padding: "0 8px",
+        background: "white",
+        backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
+        backgroundSize: "40px 40px",
+        backgroundPosition: "-19px -19px"
       },
       children: /*#__PURE__*/_jsxs(Slate, {
         editor: editor,
@@ -223,12 +245,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
             className: "editor-wrapper",
             style: {
               border: "1px solid #f3f3f3",
-              background: pageProps?.pageColor || "#FFF",
+              background: pageProps?.pageColor || defaultBG || "#FFF",
               color: pageProps?.color || "#000",
               paddingLeft: `${bannerSpacing?.left}px`,
               paddingRight: `${bannerSpacing?.right}px`,
               paddingTop: `${bannerSpacing?.top}px`,
-              paddingBottom: `${bannerSpacing?.bottom}px`
+              paddingBottom: `${bannerSpacing?.bottom}px`,
+              width: viewport.w ? `${viewport.w}px` : "100%",
+              height: viewport.h ? `${viewport.h}px` : "auto",
+              alignSelf: "center"
             },
             children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__PURE__*/_jsx(Editable, {
               className: "innert-editor-textbox",

package/dist/Editor/DialogWrapper.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+// import styled from "@emotion/styled";
+// import commonStyle from "./commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DialogWrapper = props => {
@@ -11,6 +13,7 @@ const DialogWrapper = props => {
     footer
   } = props;
   return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
+    className: `dialogComp`,
     open: fullScreen,
     fullScreen: fullScreen,
     onClose: onClose,
@@ -18,8 +21,8 @@ const DialogWrapper = props => {
       children: /*#__PURE__*/_jsx(Grid, {
         children: /*#__PURE__*/_jsx(Grid, {
           style: {
-            display: 'flex',
-            justifyContent: 'end'
+            display: "flex",
+            justifyContent: "end"
           },
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onClose,
@@ -37,7 +40,9 @@ const DialogWrapper = props => {
 DialogWrapper.defaultProps = {
   fullScreen: false,
   onClose: () => {},
-  children: '',
-  footer: ''
+  children: "",
+  footer: ""
 };
+
+// export default styled(commonStyle)(DialogWrapper);
 export default DialogWrapper;

package/dist/Editor/Editor.css

@@ -39,7 +39,8 @@ blockquote{
     min-height: 400px;
     height: fit-content;
     max-width: 100%;
-    border: none !important
+    border: none !important;
+    z-index: 1;
 }
 
 .editor-wrapper table{
@@ -53,7 +54,7 @@ blockquote{
     display: inline;
     position: relative;
 }
-.popup{
+.af-popup{
     position: fixed;
     left: 0;
     right: 0;
@@ -64,8 +65,8 @@ blockquote{
     padding: 20px;
     border-radius: 6px;
     /* border: 1px solid lightgray; */
-    height: fit-content;
-    z-index: 1;
+    height: fit-content !important;
+    z-index: 999;
     width: 300px;
 
 }

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -94,6 +94,7 @@ function AppHeader(props) {
       sx: {
         my: 2
       },
+      color: "primary",
       children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
         alt: `${appTitle} Logo`,
         style: {
@@ -146,6 +147,7 @@ function AppHeader(props) {
         }), /*#__PURE__*/_jsxs(Typography, {
           variant: "h6",
           component: "div",
+          color: "primary",
           style: {
             display: "inline-flex",
             alignItems: "center"

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -80,6 +80,7 @@ const Carousel = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
+    className: "sliderBg",
     style: {
       padding: "32px",
       backgroundColor: "#CCC",

package/dist/Editor/Elements/Color Picker/ColorPicker.css

@@ -15,6 +15,7 @@
   border-radius: 20px;
   background-color: #000000;
   border: 1px solid #eee;
+  flex-shrink: 0;
 }
 .color-picker form{
   display: flex;
@@ -24,9 +25,9 @@
 }
 .color-picker input{
   width: 65%;
-  height: 30px;
+  height: 30px !important;
   border:1px solid lightgray;
-  border-radius: 5px;
+  border-radius: 5px !important;
   padding-left:5px
 }
 .color-picker button{
@@ -42,7 +43,7 @@
 }
 .color-picker-dialog .popup {
   width: 100%;
-  max-width: fit-content;
+  max-width: fit-content !important;
 }
 .backdrop {
   position: fixed;
@@ -54,5 +55,9 @@
     z-index: 1;
 }
 .colorSaveBtn {
-  border-radius: 6px;
+  border-radius: 6px !important;
+  height: 30px;
+  padding: 0 15px !important;
+  width: 60px !important;
+  flex-shrink: 0;
 }

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -7,6 +7,7 @@ import { Transforms } from "slate";
 import usePopup from "../../utils/customHooks/usePopup";
 import { logo } from "./LogoIcon";
 import "./ColorPicker.css";
+import { ButtonBase } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -88,7 +89,7 @@ const ColorPicker = ({
           setShowOptions(false);
         }
       }), /*#__PURE__*/_jsxs("div", {
-        className: "popup",
+        className: "af-popup",
         children: [/*#__PURE__*/_jsx("div", {
           className: "color-options",
           children: colors.map((color, index) => {
@@ -123,7 +124,7 @@ const ColorPicker = ({
             style: {
               border: validHex === false ? "1px solid red" : "1px solid lightgray"
             }
-          }), /*#__PURE__*/_jsx("button", {
+          }), /*#__PURE__*/_jsx(ButtonBase, {
             className: "colorSaveBtn",
             style: {
               background: validHex ? "#2563EB" : "#64748B",

package/dist/Editor/Elements/Color Picker/LogoIcon.js

@@ -3,7 +3,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export const logo = {
   color: color => /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "#000000",
+    fill: "#64748B",
     height: "20px",
     width: "20px",
     version: "1.1",
@@ -12,7 +12,7 @@ export const logo = {
     children: /*#__PURE__*/_jsxs("g", {
       children: [/*#__PURE__*/_jsx("path", {
         d: "M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z",
-        fill: color || "#000"
+        fill: color || "#64748B"
       }), /*#__PURE__*/_jsx("path", {
         d: "M5,24h4c0.6,0,1-0.4,1-1s-0.4-1-1-1H8.6l1.9-4h11.1l1.9,4H23c-0.6,0-1,0.4-1,1s0.4,1,1,1h4c0.6,0,1-0.4,1-1s-0.4-1-1-1   h-1.4L16.9,3.6C16.7,3.2,16.4,3,16,3s-0.7,0.2-0.9,0.6L6.4,22H5c-0.6,0-1,0.4-1,1S4.4,24,5,24z M16,6.3l4.6,9.7h-9.2L16,6.3z"
       })]
@@ -33,20 +33,20 @@ export const logo = {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z",
-      fill: "#000000"
+      fill: "#64748B"
     }), /*#__PURE__*/_jsx("path", {
       d: "M20.8535 5.50439L24.389 9.03993",
-      stroke: "#000000",
+      stroke: "#64748B",
       strokeWidth: "4",
       strokeLinecap: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z",
-      stroke: "#000000",
+      stroke: "#64748B",
       strokeWidth: "4",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M12 20.0732L28.961 25.6496",
-      stroke: "#000000",
+      stroke: "#64748B",
       strokeWidth: "4",
       strokeLinecap: "round"
     }), /*#__PURE__*/_jsx("path", {

package/dist/Editor/Elements/Embed/Embed.js

@@ -9,6 +9,8 @@ import usePopup from "../../utils/customHooks/usePopup";
 import { insertEmbed } from "../../utils/embed";
 import Uploader from "../../common/Uploader";
 import "./Embed.css";
+// import commonStyle from "../../commonStyle";
+// import styled from "@emotion/styled";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -19,7 +21,8 @@ const EMBED_LABEL = {
 const Embed = ({
   editor,
   format,
-  customProps
+  customProps,
+  className
 }) => {
   const urlInputRef = useRef();
   const [open, setOpen] = useState(false);
@@ -84,6 +87,7 @@ const Embed = ({
     }), /*#__PURE__*/_jsx(Dialog, {
       open: open,
       fullWidth: true,
+      className: `dialogComp`,
       children: /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
@@ -101,6 +105,7 @@ const Embed = ({
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "h6",
               className: "popupTitle",
+              color: "primary",
               children: EMBED_LABEL[format] || "Embed"
             }), /*#__PURE__*/_jsx(Grid, {
               style: {
@@ -158,4 +163,5 @@ const Embed = ({
     })]
   });
 };
-export default Embed;
+export default Embed;
+// export default styled(commonStyle)(Embed);

package/dist/Editor/Elements/Equation/EquationButton.js

@@ -44,7 +44,7 @@ const EquationButton = ({
         icon: "equation"
       })
     }), showInput && /*#__PURE__*/_jsxs("div", {
-      className: "popup",
+      className: "af-popup",
       children: [/*#__PURE__*/_jsxs("div", {
         style: {
           display: "flex",

package/dist/Editor/Elements/ID/Id.js

@@ -40,7 +40,7 @@ const Id = ({
         icon: "addId"
       })
     }), showInput && /*#__PURE__*/_jsxs("div", {
-      className: "popup",
+      className: "af-popup",
       style: {
         display: "flex",
         gap: "4px"

package/dist/Editor/Elements/Link/Link.js

@@ -22,7 +22,7 @@ const Link = ({
       target: element.target,
       children: children
     }), selected && focused && /*#__PURE__*/_jsxs("div", {
-      className: "link-popup",
+      className: "af-link-popup",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx("a", {
         href: element.href,

package/dist/Editor/Elements/Link/LinkButton.js

@@ -1,10 +1,14 @@
 import { useRef, useState } from "react";
 import { Transforms } from "slate";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox
+// styled,
+} from "@mui/material";
+// import { styled } from "@mui/material/styles";
 import CloseIcon from "@mui/icons-material/Close";
 import { insertLink } from "../../utils/link";
 import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
+// import styled from "@emotion/styled";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
@@ -55,6 +59,7 @@ const LinkButton = props => {
       })
     }), showInput && /*#__PURE__*/_jsx(Dialog, {
       open: true,
+      className: `dialogComp`,
       children: /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
@@ -74,6 +79,7 @@ const LinkButton = props => {
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "h6",
               className: "popupTitle",
+              color: "primary",
               children: "LINK"
             }), /*#__PURE__*/_jsx("div", {
               style: {
@@ -117,6 +123,7 @@ const LinkButton = props => {
                   }),
                   label: /*#__PURE__*/_jsx(Typography, {
                     variant: "body1",
+                    color: "primary",
                     sx: {
                       pl: 1
                     },
@@ -145,4 +152,5 @@ const LinkButton = props => {
     })]
   });
 };
-export default LinkButton;
+export default LinkButton;
+// export default styled(commonStyle)(LinkButton);

package/dist/Editor/Elements/Link/styles.css

@@ -2,7 +2,7 @@
   display: inline;
   position: relative;
 }
-.link-popup{
+.af-link-popup{
     position: absolute;
   left: 0;
   display: flex;

package/dist/Editor/Elements/Signature/Signature.css

@@ -1,4 +1,4 @@
-.signature-popup .MuiTab-root {
+.af-signature-popup .MuiTab-root {
     background: #ffffff;
     border: 1px solid #d3d3d3 !important;
     border-radius: 7px;
@@ -13,18 +13,18 @@
     color: #0f172a !important;
     opacity: 0.7;
   }
-  .signature-popup .MuiTab-root.Mui-selected {
+  .af-signature-popup .MuiTab-root.Mui-selected {
     background: #ffffff;
     border: 1px solid #2563eb !important;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
     border-radius: 7px;
     color: #0f172a !important;
   }
-  .signature-popup .MuiTabs-indicator {
+  .af-signature-popup .MuiTabs-indicator {
     display: none;
 }
 
-.signature-popup input.signColorPicker {
+.af-signature-popup input.signColorPicker {
     margin-bottom: 0px !important;
   }
   input[type="color"].signColorPicker {

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -4,8 +4,10 @@ import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import SignatureOptions from "./SignatureOptions";
-import './Signature.css';
+import "./Signature.css";
 import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../../common/EditorIcons";
+import CommonStyle from "../../commonStyle";
+import { styled } from "@mui/material/styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -14,7 +16,8 @@ const SignaturePopup = props => {
   const {
     onSave,
     onClear,
-    customProps
+    customProps,
+    className
   } = props;
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
@@ -79,6 +82,7 @@ const SignaturePopup = props => {
         children: "Sign Here"
       })
     }), /*#__PURE__*/_jsx(Dialog, {
+      className: `${className} dialogComp`,
       open: open,
       onClose: handleClose,
       fullWidth: true,
@@ -103,6 +107,7 @@ const SignaturePopup = props => {
               children: [/*#__PURE__*/_jsx(Typography, {
                 variant: "h6",
                 className: "popupTitle",
+                color: "primary",
                 children: "SIGNATURE"
               }), /*#__PURE__*/_jsx("div", {
                 style: {
@@ -119,7 +124,7 @@ const SignaturePopup = props => {
             sx: {
               p: 0
             },
-            className: "signature-popup",
+            className: "af-signature-popup",
             children: [/*#__PURE__*/_jsx("div", {
               className: "signature-btn-grps",
               children: /*#__PURE__*/_jsxs(Tabs, {
@@ -293,4 +298,6 @@ const SignaturePopup = props => {
     })]
   });
 };
-export default SignaturePopup;
+
+// export default SignaturePopup;
+export default styled(SignaturePopup)(CommonStyle);

package/dist/Editor/Elements/Table/Table.js

@@ -117,6 +117,7 @@ const Table = props => {
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
+      className: "tableToolBar",
       style: {
         position: "absolute",
         top: "-40px",

package/dist/Editor/Elements/Table/TableSelector.js

@@ -5,6 +5,8 @@ import { Transforms } from "slate";
 import { TableUtil } from "../../utils/table.js";
 import "./TableSelector.css";
 import CloseIcon from "@mui/icons-material/Close";
+// import commonStyle from "../../commonStyle";
+// import styled from "@emotion/styled";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableSelector = ({
@@ -50,7 +52,7 @@ const TableSelector = ({
       })
     }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
       open: showOptions,
-      className: "tablePopup",
+      className: `dialogComp tablePopup`,
       children: /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
@@ -68,6 +70,7 @@ const TableSelector = ({
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "h6",
               className: "popupTitle",
+              color: "primary",
               children: "Table"
             }), /*#__PURE__*/_jsx(Grid, {
               style: {
@@ -103,7 +106,7 @@ const TableSelector = ({
                   variant: "body1",
                   color: "textSecondary",
                   sx: {
-                    fontSize: '14px'
+                    fontSize: "14px"
                   },
                   children: "No.of Rows"
                 })
@@ -129,7 +132,7 @@ const TableSelector = ({
                   variant: "body1",
                   color: "textSecondary",
                   sx: {
-                    fontSize: '14px'
+                    fontSize: "14px"
                   },
                   children: "No.of Columns"
                 })
@@ -163,4 +166,5 @@ const TableSelector = ({
     }) : null]
   });
 };
-export default TableSelector;
+export default TableSelector;
+// export default styled(commonStyle)(TableSelector);

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

@@ -1,6 +1,7 @@
 const usePopupStyle = () => ({
   popupWrapper: {
-    boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)"
+    boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
+    zIndex: 999
   },
   textFormatWrapper: {
     padding: "0px 24px 24px 24px",

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel } from "@mui/material";
+import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Alignment = props => {
@@ -21,7 +21,6 @@ const Alignment = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    padding: 3,
     style: {
       paddingTop: "12px"
     },
@@ -32,7 +31,11 @@ const Alignment = props => {
       children: /*#__PURE__*/_jsxs(FormControl, {
         children: [/*#__PURE__*/_jsx(FormLabel, {
           id: "demo-row-radio-buttons-group-label",
-          children: "Horizantal Position"
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            children: "Horizantal Position"
+          })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
           "aria-labelledby": "demo-row-radio-buttons-group-label",
@@ -60,7 +63,11 @@ const Alignment = props => {
       children: /*#__PURE__*/_jsxs(FormControl, {
         children: [/*#__PURE__*/_jsx(FormLabel, {
           id: "demo-row-radio-buttons-group-label",
-          children: "Vertical Position"
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            children: "Vertical Position"
+          })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
           "aria-labelledby": "demo-row-radio-buttons-group-label",

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Grid, Button } from "@mui/material";
+import { Grid, Button, Typography } from "@mui/material";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { convertBase64 } from "../../../utils/helper";
 import { uploadFile } from "../../../service/fileupload";
@@ -43,14 +43,13 @@ const BackgroundImage = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    padding: 3,
     children: [/*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
         display: "flex"
       },
-      justifyContent: "center",
+      justifyContent: "space-between",
       alignItems: "center",
       children: [/*#__PURE__*/_jsxs(Button, {
         component: "label",
@@ -59,16 +58,24 @@ const BackgroundImage = props => {
         children: ["Upload file", /*#__PURE__*/_jsx("input", {
           type: "file",
           style: {
-            opacity: 0
+            opacity: 0,
+            width: "0px"
           },
           onChange: handleChange
         })]
-      }), /*#__PURE__*/_jsx("input", {
-        type: "checkbox",
-        value: "none",
-        checked: value === "none",
-        onChange: onRemoveBG
-      }), " ", "None"]
+      }), /*#__PURE__*/_jsxs(Grid, {
+        className: "dflex",
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "checkbox",
+          value: "none",
+          checked: value === "none",
+          onChange: onRemoveBG
+        }), " ", /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          children: "Remove"
+        })]
+      })]
     }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

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

@@ -18,7 +18,6 @@ const GridSize = props => {
   };
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
-    padding: 3,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,

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

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Tabs, Tab, Grid, IconButton, Typography } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
+import commonStyle from "../../commonStyle";
+import { styled } from "@mui/material/styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const StyleContent = props => {
@@ -70,6 +72,7 @@ const StyleBuilder = props => {
     onClose,
     onDelete,
     customProps
+    // className,
   } = props;
   const [elementProps, setElementProps] = useState(element);
   const [tab, setTab] = useState(renderTabs[0]?.value);
@@ -88,6 +91,7 @@ const StyleBuilder = props => {
   return /*#__PURE__*/_jsx(Dialog, {
     open: true,
     fullWidth: true,
+    className: ` dialogComp`,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
@@ -105,6 +109,7 @@ const StyleBuilder = props => {
           children: [/*#__PURE__*/_jsx(Typography, {
             variant: "h6",
             className: "popupTitle",
+            color: "primary",
             children: title
           }), /*#__PURE__*/_jsx(Grid, {
             style: {
@@ -155,4 +160,6 @@ const StyleBuilder = props => {
     })
   });
 };
-export default StyleBuilder;
+
+// export default StyleBuilder;
+export default styled(StyleBuilder)(commonStyle);

package/dist/Editor/common/Uploader.js

@@ -55,9 +55,9 @@ const Uploader = props => {
         children: [/*#__PURE__*/_jsxs(Button, {
           component: "label",
           sx: {
-            display: 'inline-flex',
-            width: '154px',
-            whiteSpace: 'nowrap'
+            display: "inline-flex",
+            width: "154px",
+            whiteSpace: "nowrap"
           },
           variant: "contained",
           startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
@@ -73,7 +73,7 @@ const Uploader = props => {
           color: "secondary",
           onClick: onRemoveBG,
           children: "Clear"
-        }) : '']
+        }) : ""]
       })
     }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
       item: true,

package/dist/Editor/commonStyle.js

@@ -0,0 +1,11 @@
+const commonStyle = theme => ({
+  "&.dialogComp": {
+    "& .close-popupbtn": {
+      //   background: theme.palette.containers.bg7,
+    }
+  },
+  ".close-popupbtn": {
+    // background: theme.palette.containers.bg7,
+  }
+});
+export default commonStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"