@flozy/editor 5.5.8 → 5.6.0

package/dist/Editor/common/iconslist.js

@@ -138,8 +138,8 @@ export const StrikethroughIcon = props => /*#__PURE__*/_jsx("svg", {
   children: /*#__PURE__*/_jsx("path", {
     className: "strokeFillPath",
     d: "M2.7607 11.125C2.7607 13.0718 4.33885 14.65 6.28568 14.65H8.21432C10.1611 14.65 11.7393 13.0718 11.7393 11.125V10.6429C11.7393 9.78254 11.4309 8.99403 10.9189 8.38214H13.5179C13.867 8.38214 14.15 8.0991 14.15 7.75C14.15 7.4009 13.867 7.11786 13.5179 7.11786H8.21597H8.21435H6.28579C5.03727 7.11786 4.02509 6.10568 4.02509 4.85714V4.375C4.02509 3.12647 5.03727 2.11429 6.28579 2.11429H8.21435C9.46288 2.11429 10.4751 3.12647 10.4751 4.375V4.84874C10.4751 5.19784 10.7581 5.48088 11.1072 5.48088C11.4563 5.48088 11.7393 5.19784 11.7393 4.84874V4.375C11.7393 2.42817 10.1612 0.85 8.21435 0.85H6.28579C4.33897 0.85 2.76081 2.42817 2.76081 4.375V4.85714C2.76081 5.71746 3.06916 6.50597 3.58108 7.11786H0.982141C0.633044 7.11786 0.35 7.4009 0.35 7.75C0.35 8.0991 0.633044 8.38214 0.982141 8.38214H8.21424L8.21556 8.38214C8.21559 8.38214 8.21562 8.38214 8.21564 8.38214C9.46353 8.38289 10.4749 9.39474 10.4749 10.6429V11.125C10.4749 12.3735 9.46276 13.3857 8.21424 13.3857H6.28568C5.03715 13.3857 4.02498 12.3735 4.02498 11.125V10.6429C4.02498 10.2938 3.74193 10.0107 3.39284 10.0107C3.04374 10.0107 2.7607 10.2938 2.7607 10.6429V11.125Z",
-    fill: "#64748B",
-    stroke: "#64748B",
+    fill: "currentColor",
+    stroke: "currentColor",
     strokeWidth: "0.3"
   })
 });
@@ -864,19 +864,19 @@ export const TextLeftAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M12.47 11.0557H3C2.59 11.0557 2.25 10.7157 2.25 10.3057C2.25 9.89566 2.59 9.55566 3 9.55566H12.47C12.88 9.55566 13.22 9.89566 13.22 10.3057C13.22 10.7157 12.89 11.0557 12.47 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M12.47 21.0557H3C2.59 21.0557 2.25 20.7157 2.25 20.3057C2.25 19.8957 2.59 19.5557 3 19.5557H12.47C12.88 19.5557 13.22 19.8957 13.22 20.3057C13.22 20.7157 12.89 21.0557 12.47 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const TextCenterAlign = props => /*#__PURE__*/_jsxs("svg", {
@@ -888,19 +888,19 @@ export const TextCenterAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M16.7417 11.0557H7.26172C6.85172 11.0557 6.51172 10.7157 6.51172 10.3057C6.51172 9.89566 6.85172 9.55566 7.26172 9.55566H16.7317C17.1417 9.55566 17.4817 9.89566 17.4817 10.3057C17.4817 10.7157 17.1517 11.0557 16.7417 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M16.7417 21.0557H7.26172C6.85172 21.0557 6.51172 20.7157 6.51172 20.3057C6.51172 19.8957 6.85172 19.5557 7.26172 19.5557H16.7317C17.1417 19.5557 17.4817 19.8957 17.4817 20.3057C17.4817 20.7157 17.1517 21.0557 16.7417 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const TextRightAlign = props => /*#__PURE__*/_jsxs("svg", {
@@ -912,19 +912,19 @@ export const TextRightAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21.0013 11.0557H11.5312C11.1213 11.0557 10.7812 10.7157 10.7812 10.3057C10.7812 9.89566 11.1213 9.55566 11.5312 9.55566H21.0013C21.4113 9.55566 21.7513 9.89566 21.7513 10.3057C21.7513 10.7157 21.4113 11.0557 21.0013 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21.0013 21.0557H11.5312C11.1213 21.0557 10.7812 20.7157 10.7812 20.3057C10.7812 19.8957 11.1213 19.5557 11.5312 19.5557H21.0013C21.4113 19.5557 21.7513 19.8957 21.7513 20.3057C21.7513 20.7157 21.4113 21.0557 21.0013 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const JustifyStartIcon = props => /*#__PURE__*/_jsxs("svg", {
@@ -933,6 +933,9 @@ export const JustifyStartIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "25",
   viewBox: "0 0 24 25",
   fill: "none",
+  style: {
+    color: "red"
+  },
   children: [/*#__PURE__*/_jsx("path", {
     d: "M5.10156 20.0557H16.9016C18.4016 20.0557 19.0016 19.4157 19.0016 17.8257V16.7857C19.0016 15.1957 18.4016 14.5557 16.9016 14.5557H5.10156",
     stroke: "#64748B",
@@ -1343,19 +1346,22 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M10.1733 6.125V14.875",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M5.79834 10.5H14.5483",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   })]
 });
 export const FormIcon = () => {
@@ -1575,10 +1581,10 @@ export const CheckListButtonActive = () => /*#__PURE__*/_jsxs("svg", {
       id: "Gradient1",
       children: [/*#__PURE__*/_jsx("stop", {
         offset: "0%",
-        stopColor: "#5351FC"
+        stopColor: "#8361FD"
       }), /*#__PURE__*/_jsx("stop", {
         offset: "50%",
-        stopColor: "#19A9FC"
+        stopColor: "#2F63ED"
       })]
     })
   }), /*#__PURE__*/_jsx("rect", {

package/dist/Editor/commonStyle.js

@@ -1,7 +1,147 @@
 const useCommonStyle = theme => ({
   sideBarDrawer: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.textFormatBgColor,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
+      "@media only screen and (min-width: 899px)": {
+        borderRadius: "20px",
+        margin: "5px",
+        height: "calc(100% - 10px)",
+        overflow: "hidden"
+      },
+      "@media only screen and (max-width: 599px)": {
+        borderRadius: "20px 20px 0px 0px"
+      }
+    },
+    "& .optionePopupHeader": {
+      borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`,
+      padding: "0px 0px 10px 0px",
+      margin: "0px 10px",
+      "& .MuiTypography-root": {
+        textTransform: "capitalize"
+      },
+      "& .close-popupbtn": {
+        background: theme?.palette?.editor?.closeButtonBgColor,
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
+        "& svg": {
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    },
+    "& .MuiDialogActions-root": {
+      // paddingTop: "10px",
+      "& .primaryBtn, .deleteBtn": {
+        height: "32px !important",
+        fontSize: "14px !important",
+        fontWeight: "600 !important",
+        padding: "0px 20px !important"
+      },
+      "& .deleteBtn": {
+        background: `${theme?.palette?.type === "light" && "#FFF7F9"} !important`
+      }
+    },
+    "& .MuiDialogContent-root": {
+      padding: "0px 5px 0px 10px!important",
+      height: "100%",
+      fontFamily: "Inter, sans-serif",
+      "& .MuiTypography-root": {
+        fontSize: "14px",
+        fontWeight: "500",
+        fontFamily: "Inter, sans-serif"
+      },
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
+      },
+      "& .muiIconsListParent": {
+        "& svg": {
+          color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: `none !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
+      "& .MuiGrid-root>.MuiGrid-item": {
+        paddingRight: "0px !important",
+        fontFamily: "Inter, sans-serif",
+        height: 'fit-content'
+      },
+      "& .MuiInputBase-root": {
+        borderRadius: "10px",
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        border: `none`,
+        height: "36px",
+        boxShadow: "0px 4px 16px 0px #0000000D",
+        fontFamily: "Inter, sans-serif",
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+        },
+        "& input::placeholder": {
+          color: "#94A3B8 !important",
+          opacity: "unset",
+          fontFamily: "Inter, sans-serif"
+        },
+        "& .colorPickerButton": {
+          border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+        }
+      },
+      "& .MuiInputBase-root:has(.colorPickerButton)": {
+        "& .MuiInputBase-input": {
+          padding: "8.5px 14px 8.5px 0px",
+          fontFamily: "Inter, sans-serif"
+        }
+      },
+      "& .MuiInputBase-input": {
+        color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+        textTransform: "math-auto",
+        fontFamily: "Inter, sans-serif"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      },
+      "& fieldset": {
+        border: `1px solid transparent`,
+        borderRadius: "10px"
+      },
+      "&::-webkit-scrollbar-thumb, & .MuiPaper-root ::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track, & .MuiPaper-root ::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "&:hover": {
+        "&::-webkit-scrollbar-thumb, & .MuiPaper-root ::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track, & .MuiPaper-root ::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
+      "& .sld-wrpr": {
+        paddingLeft: "5px",
+        "& .sliderInput": {
+          background: theme?.palette?.editor?.inputFieldBgColor,
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+          borderRadius: "10px",
+          width: "46px !important",
+          marginLeft: "10px",
+          height: '36px !important'
+        }
+      },
+      '& .MuiFormHelperText-root': {
+        margin: '4px 0px 0px 0px',
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        fontFamily: "Inter, sans-serif"
+      }
     },
     "& .MuiTypography-root": {
       color: theme?.palette?.editor?.textColor
@@ -17,19 +157,61 @@ const useCommonStyle = theme => ({
     },
     "& .close-popupbtn": {
       color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiSvgIcon-root": {
+      color: theme?.palette?.editor?.textColor
     }
   },
   sapcingInput: {
     backgroundColor: theme?.palette?.editor?.background,
     color: theme?.palette?.editor?.textColor
   },
+  customCheckBox: {
+    padding: "0px",
+    "& .MuiCheckbox-root": {
+      padding: "8px 8px 8px 10px",
+      "&:hover": {
+        background: "unset !important"
+      }
+    },
+    "& button": {
+      width: "18px !important",
+      height: "18px !important",
+      borderRadius: "3px",
+      border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
+      "& svg": {
+        width: "14px",
+        height: "14px"
+      }
+    },
+    "& .checkedIcon": {
+      background: "#2563EB",
+      borderColor: "#2563EB",
+      padding: "0px"
+    },
+    "& .unCheckedIcon": {
+      background: theme?.palette?.editor?.checkedIconBg
+    },
+    "& p": {
+      margin: "0px !important"
+    }
+  },
+  customPaddingInput: {
+    background: theme?.palette?.editor?.inputFieldBgColor,
+    border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+    color: theme?.palette?.editor?.textColor,
+    borderRadius: "6px"
+  },
   colorPickerPopup: {
     "& .MuiPaper-root": {
       overflow: "auto",
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      "@media only screen and (max-width: 899px)": {
+        width: "100% !important"
+      }
     },
     "& .popup_tabs-header": {
       backgroundColor: theme?.palette?.editor?.background,
@@ -39,7 +221,7 @@ const useCommonStyle = theme => ({
       }
     },
     "& .colorpicker": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "& .default-color-panel": {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, 20px)",
@@ -57,20 +239,23 @@ const useCommonStyle = theme => ({
       }
     },
     "& .color-picker-panel": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .input_rgba": {
       "& input": {
-        backgroundColor: theme?.palette?.editor?.background,
+        backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
         color: theme?.palette?.editor?.textColor
       }
     }
   },
+  colorPickerBtnBorder: {
+    border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+  },
   signaturePopup: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "& .signature-canvas": {
-        backgroundColor: "#FFF"
+        backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
       },
       "& label": {
         color: theme?.palette?.editor?.textColor
@@ -97,26 +282,97 @@ const useCommonStyle = theme => ({
         borderColor: theme?.palette?.editor?.textColor
       },
       "& .upload-wrapper-ui": {
-        backgroundColor: theme?.palette?.type === "dark" ? "transparent" : "#F8F9FF",
+        backgroundColor: theme?.palette?.type === "dark" ? "#2563EB0F" : "#F8F9FF",
         "& .MuiTypography-root": {
           color: theme?.palette?.editor?.textColor
         }
       },
+      "& .typesignature-input-wrapper": {
+        "& .MuiInputBase-root": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          borderRadius: "7px !important",
+          paddingRight: "6px !important"
+        },
+        "& .MuiInputBase-input": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder}`
+        },
+        "& .Mui-focused": {
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid #2563EB !important`
+          }
+        },
+        "& button": {
+          background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      },
       "& .typesignature-fontfamily": {
         "& button": {
-          color: theme?.palette?.editor?.textColor
+          color: theme?.palette?.editor?.textColor,
+          background: `${theme?.palette?.editor?.signatureFontBtnBg} !important`,
+          border: `1px solid ${theme?.palette?.editor?.sectionSettingIconHover} !important`,
+          "& p": {
+            fontSize: "13px !important"
+          }
+        },
+        "& .active ": {
+          border: `1px solid #2563EB !important`
         }
       },
       "& .MuiTab-root": {
-        color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
+        backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        opacity: "unset",
+        fontSize: "12px !important",
+        fontWeight: "500 !important",
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpTabButtonBorder} !important`
+      },
+      "& .Mui-selected": {
+        background: `${theme?.palette?.editor?.signaturePopUpTabButtonSelectedBg} !important`,
+        color: `${theme?.palette?.editor?.textColor} !important`,
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpTabButtonSelectedBorder} !important`,
+        "& .MuiGrid-root": {
+          "& svg": {
+            "& path": {
+              fill: `${theme?.palette?.editor?.signaturePopUpTabButtonSelectedSvg} !important`
+            }
+          }
+        }
       },
       "& .close-popupbtn": {
-        color: theme?.palette?.editor?.textColor
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        background: `${theme?.palette?.editor?.closeButtonBgColor} !important`
       },
       "& .deleteBtn": {
-        background: "transparent"
+        background: "transparent",
+        margin: "0px !important"
+      },
+      "& .MuiGrid-container": {
+        "& .workFlowButton": {
+          background: `${theme?.palette?.editor?.workFlowButtonBackground} !important`,
+          textTransform: "unset !important",
+          color: `${theme?.palette?.editor?.textColor} !important`,
+          fontSize: "14px !important",
+          fontWeight: "500 !important",
+          borderRadius: "25px",
+          padding: "5px 15px"
+        }
+      },
+      "& .MuiDialogActions-root": {
+        "& .deleteButtonSignature": {
+          background: `${theme?.palette?.editor?.closeButtonBackground} !important`,
+          color: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
+          border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`
+        }
       }
+    },
+    "& .disabledSaveBtn": {
+      background: "#2563EB33 !important",
+      color: theme?.palette?.type === "dark" && "#FFFFFF33 !important",
+      border: "1px solid #2563EB33 !important"
     }
   },
   popupTitle2: {
@@ -126,11 +382,161 @@ const useCommonStyle = theme => ({
   textOptions: {
     "& .MuiPopover-root": {
       backgroundColor: theme?.palette?.editor?.background
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px",
+      color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+    }
+  },
+  textOptionsList: {
+    "& .MuiMenuItem-root": {
+      padding: "8px 12px",
+      fontSize: "12px",
+      color: theme?.palette?.editor?.menuOptionTextColor,
+      fontWeight: '500',
+      fontFamily: "Inter, sans-serif",
+      minHeight: '36px',
+      "&:hover": {
+        backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
+      }
+    },
+    '& .Mui-selected': {
+      background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+    },
+    "& .MuiListSubheader-root": {
+      color: "gray",
+      fontWeight: "bold",
+      fontSize: "12px"
+    },
+    "& .MuiPaper-root": {
+      borderRadius: '8px',
+      padding: '0px',
+      background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
+    },
+    '& .MuiButtonBase-root': {
+      margin: '4px',
+      borderRadius: '6px'
+    },
+    '& .MuiList-root': {
+      padding: '0px'
     }
   },
   datePicker: {
     "& .react-datepicker-wrapper": {
-      width: "100%"
+      width: "100%",
+      "& .react-datepicker__input-container": {
+        "& .MuiInputBase-root": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          "& .MuiInputBase-input": {
+            background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+            color: `${theme?.palette?.editor?.textColor} !important`
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder} !important`
+          }
+        }
+      }
+    }
+  },
+  signaturePopUpNameField: {
+    background: "transparent !important",
+    "& .MuiInputBase-root": {
+      borderRadius: "10px !important",
+      background: "transparent !important",
+      "& .MuiOutlinedInput-input": {
+        background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        borderRadius: "10px !important",
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder} !important`,
+        fontSize: "14px !important",
+        fontWeight: "500 !important"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid transparent !important`
+      }
+    },
+    "& .Mui-focused": {
+      "& .MuiOutlinedInput-input": {
+        border: `1px solid #2563EB !important`
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid transparent !important`
+      }
+    }
+  },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
+  buttonMoreOption: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '4px !important',
+    '& svg': {
+      width: '18px !important',
+      height: '18px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  buttonMoreOption2: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    '& svg': {
+      '& path': {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  buttonMoreOption3: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '5px !important',
+    '& svg': {
+      width: '16px !important',
+      height: '16px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  resizeButton: {
+    background: theme?.palette?.editor?.aiInputBackground,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    '&:hover': {
+      background: theme?.palette?.editor?.aiInputBackground
+    }
+  },
+  gradientFillBtn: {
+    background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
+    textTransform: 'math-auto !important',
+    color: '#FFFFFF !important',
+    padding: '0px 12px !important',
+    height: '32px',
+    borderRadius: '8px',
+    fontWeight: '500',
+    fontSize: '14px'
+  },
+  emptyThumbBtn: {
+    background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
+    color: `${theme?.palette?.editor?.textColor} !important`,
+    fontSize: '14px !important',
+    '& svg': {
+      width: '20px !important',
+      height: '20px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
     }
   }
 });