@flozy/editor 4.0.1 → 4.0.2

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

@@ -1,6 +1,7 @@
 import React from "react";
-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, Divider } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import LinkPopupStyles from "./LinkPopupStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkPopup = props => {
@@ -9,13 +10,19 @@ const LinkPopup = props => {
     handleClose,
     linkData,
     handleInputChange,
-    handleInsertLink
+    handleInsertLink,
+    theme
   } = props;
+  const themeType = localStorage.getItem("themeType");
+  const classes = LinkPopupStyles(themeType);
   return /*#__PURE__*/_jsxs(Dialog, {
     fullWidth: true,
     open: open,
     className: `dialogComp`,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
+      sx: {
+        padding: "13px 19px 9px 19px"
+      },
       children: /*#__PURE__*/_jsxs("div", {
         style: {
           display: "flex",
@@ -24,8 +31,10 @@ const LinkPopup = props => {
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "h6",
           className: "popupTitle",
-          color: "primary",
-          children: "LINK"
+          sx: {
+            textTransform: "none"
+          },
+          children: "Link"
         }), /*#__PURE__*/_jsx("div", {
           style: {
             display: "flex"
@@ -37,35 +46,84 @@ const LinkPopup = props => {
           })
         })]
       })
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        width: "auto",
+        // Or set a fixed width like "90%"
+        margin: "0px 20px" // Horizontal margin
+      }
     }), /*#__PURE__*/_jsxs(DialogContent, {
-      children: [/*#__PURE__*/_jsx(Grid, {
+      sx: {
+        padding: "5px 19px 0px 19px"
+      },
+      children: [/*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
         style: {
           paddingTop: "12px"
         },
-        children: /*#__PURE__*/_jsx(TextField, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontFamily: 'Inter, sans-serif',
+            fontSize: "14px",
+            marginBottom: "6px"
+          },
+          children: "Title"
+        }), /*#__PURE__*/_jsx(TextField, {
           size: "small",
           fullWidth: true,
           value: linkData?.name,
           name: "name",
           placeholder: "Link Title",
-          onChange: handleInputChange
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
+          onChange: handleInputChange,
+          sx: {
+            '& .MuiOutlinedInput-root': {
+              borderRadius: '8px'
+            },
+            '& .MuiInputBase-input': {
+              color: themeType === "dark" ? "#FFFFFF" : '#000'
+            },
+            '& .MuiInputBase-input::placeholder': {
+              color: '#94A3B8',
+              fontFamily: '"Inter", sans-serif'
+            }
+          }
+          // sx={classes.addLinkField}
+        })]
+      }), /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
         style: {
           paddingTop: "12px"
         },
-        children: /*#__PURE__*/_jsx(TextField, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontFamily: 'Inter, sans-serif',
+            fontSize: "14px",
+            marginBottom: "6px"
+          },
+          children: "URL"
+        }), /*#__PURE__*/_jsx(TextField, {
           size: "small",
           fullWidth: true,
           name: "url",
           value: linkData?.url,
           placeholder: "https://google.com",
-          onChange: handleInputChange
-        })
+          onChange: handleInputChange,
+          sx: {
+            '& .MuiOutlinedInput-root': {
+              borderRadius: '8px'
+            },
+            '& .MuiInputBase-input': {
+              color: themeType === "dark" ? "#FFFFFF" : '#000'
+            },
+            '& .MuiInputBase-input::placeholder': {
+              color: '#94A3B8',
+              fontFamily: '"Inter", sans-serif'
+            }
+          }
+          // sx={classes.addLinkField}
+        })]
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -81,9 +139,10 @@ const LinkPopup = props => {
             }),
             label: /*#__PURE__*/_jsx(Typography, {
               variant: "body1",
-              color: "primary",
               sx: {
-                pl: 1
+                paddingLeft: "0px",
+                fontSize: "14px",
+                fontFamily: '"Inter", sans-serif'
               },
               children: "Open in new tab"
             })

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

@@ -0,0 +1,28 @@
+const LinkPopupStyles = themeType => ({
+  addLinkField: {
+    "& .MuiOutlinedInput-input": {
+      fontSize: "12px",
+      fontWeight: 500,
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
+    },
+    "& .MuiFormHelperText-root": {
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
+    },
+    "& .MuiOutlinedInput-root": {
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
+      borderRadius: "7px",
+      "& fieldset": {
+        borderColor: "#D8DDE1"
+      },
+      "&:hover fieldset": {
+        borderColor: "#64748B"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "#2563EB"
+      },
+      "& .MuiFormLabel-root": {}
+    }
+  }
+});
+export default LinkPopupStyles;

package/dist/Editor/Elements/List/CheckList.js

@@ -68,8 +68,7 @@ const CheckList = ({
         style: {
           flex: 1,
           opacity: checked ? 1 : 1,
-          textDecoration: !checked ? "none" : "none",
-          width: '90%'
+          textDecoration: !checked ? "none" : "none"
         },
         className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: nestedCheckList ? "" : "Todo List",

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -3,6 +3,7 @@ import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import ToolbarIcon from "../../common/ToolbarIcon";
+import { NewLineElementIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NewLineButton = ({
   icoBtnType
@@ -23,7 +24,7 @@ const NewLineButton = ({
   return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "New Line",
     onClick: onAddNewLine,
-    icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
+    icon: /*#__PURE__*/_jsx(NewLineElementIcon, {
       sx: {
         fill: "#64748B",
         width: "18px",

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { useSlateStatic } from "slate-react";
 import PageSettingsPopup from "./PageSettingsPopup";
-import { PageSettings } from "../../common/iconslist";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
+import SettingsIcon from "../../assets/svg/SettingsIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,13 +45,13 @@ const PageSettingsButton = props => {
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
+    children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(SettingsIcon, {
       onClick: onSettings,
       className: "removeDefaultSvgCls"
     }) : /*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Page Settings",
       onClick: onSettings,
-      icon: /*#__PURE__*/_jsx(PageSettings, {}),
+      icon: /*#__PURE__*/_jsx(SettingsIcon, {}),
       icoBtnType: icoBtnType
     }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
       element: openSetttings?.element || {},

package/dist/Editor/Elements/Redo/RedoButton.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { useSlateStatic } from "slate-react";
+import RedoIcon from "../../assets/svg/RedoIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RedoButton = () => {
+  const editor = useSlateStatic();
+  const onRedo = () => {
+    editor?.redo();
+  };
+  return /*#__PURE__*/_jsx(RedoIcon, {
+    onClick: onRedo
+  });
+};
+export default RedoButton;

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

@@ -1,6 +1,6 @@
 .af-signature-popup .MuiTab-root {
     background: #ffffff;
-    border: 1px solid #d3d3d3 !important;
+    border: 1px solid #D3D3D3 !important;
     border-radius: 7px;
     height: 37px;
     min-height: 37px;
@@ -15,10 +15,10 @@
   }
   .af-signature-popup .MuiTab-root.Mui-selected {
     background: #ffffff;
-    border: 1px solid #2563eb !important;
+    border: 1.5px solid #2563EB !important;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
     border-radius: 7px;
-    color: #0f172a !important;
+    color: #000000 !important;
   }
   .af-signature-popup .MuiTabs-indicator {
     display: none;
@@ -60,16 +60,23 @@
     cursor: pointer;
 }
   .upload-wrapper-ui {
-    border: 1px solid #2563eb !important;
-    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important;
+    border: 1px dashed #92B1F5 !important;
+    /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
     border-radius: 7px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     width: 100%;
-    height: 100px;
+    height: 187px;
     top: 0px;
     left: 0px;
     cursor: pointer;
+    background-color: #F8F9FF;
+  }
+
+  .upload-wrapper-ui-text {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    font-family: 'Wavehaus';
   }

package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js

@@ -28,7 +28,7 @@ const UploadSignature = props => {
     });
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: "signature-tab",
+    className: "signature-tab2",
     children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
       className: "upload-sign-img-wrapper",
       children: /*#__PURE__*/_jsx("img", {
@@ -48,6 +48,7 @@ const UploadSignature = props => {
           justifyContent: "center",
           alignItems: "center",
           children: [/*#__PURE__*/_jsx(CloudUpload, {}), /*#__PURE__*/_jsx(Typography, {
+            className: "upload-wrapper-ui-text",
             variant: "h6",
             color: "textSecondary",
             sx: {

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab } from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -9,6 +9,7 @@ import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../..
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { validationMethods } from "../Form/FormElements/validations";
+import { CalenderDownIconSignature, CalenderIconSignature } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -32,12 +33,14 @@ const SignaturePopup = props => {
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
   const SeletectedTab = SignatureOptions[tab];
+  const defaultName = metadata?.signatureDetails?.name;
+  const defaultEmail = metadata?.signatureDetails?.email;
   const [signedData, setSignedData] = useState({
     signedOn: new Date(),
     signature: "",
     signedText: "",
-    signedBy: "",
-    signedByEmail: ""
+    signedBy: defaultName || "",
+    signedByEmail: defaultEmail || ""
   });
   const [brush, setBrush] = useState({
     size: 1,
@@ -133,7 +136,15 @@ const SignaturePopup = props => {
       open: open,
       onClose: handleClose,
       fullWidth: true,
-      sx: classes.signaturePopup,
+      PaperProps: {
+        sx: {
+          borderRadius: '8px',
+          boxShadow: "0px 4px 10px 0px #00000029",
+          overflowY: tab === 0 ? "hidden" : "auto",
+          maxWidth: "560px",
+          ...classes.signaturePopup
+        }
+      },
       children: /*#__PURE__*/_jsx(Grid, {
         container: true,
         children: /*#__PURE__*/_jsxs(Grid, {
@@ -154,9 +165,13 @@ const SignaturePopup = props => {
                 item: true,
                 children: /*#__PURE__*/_jsx(Typography, {
                   variant: "h6",
-                  className: "popupTitle",
+                  className: `${classes.popupTitle2}`,
                   color: "primary",
-                  children: "SIGNATURE"
+                  sx: {
+                    fontWeight: 600,
+                    color: "#000000"
+                  },
+                  children: "Signature"
                 })
               }), /*#__PURE__*/_jsx(Grid, {
                 item: true,
@@ -196,24 +211,39 @@ const SignaturePopup = props => {
                 children: [/*#__PURE__*/_jsx(Tab, {
                   label: /*#__PURE__*/_jsxs(Grid, {
                     className: "dflex alignCenter",
-                    children: [/*#__PURE__*/_jsx(DrawSignature, {}), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(DrawSignature, {
+                      fill: tab === 0 ? "#2563EB" : "#A2B0B9"
+                    }), /*#__PURE__*/_jsx("span", {
                       className: "ml-1",
+                      style: {
+                        textTransform: "none"
+                      },
                       children: "Draw Signature"
                     })]
                   })
                 }), /*#__PURE__*/_jsx(Tab, {
                   label: /*#__PURE__*/_jsxs(Grid, {
                     className: "dflex alignCenter",
-                    children: [/*#__PURE__*/_jsx(TypeSignature, {}), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(TypeSignature, {
+                      fill: tab === 1 ? "#2563EB" : "#A2B0B9"
+                    }), /*#__PURE__*/_jsx("span", {
                       className: "ml-1",
+                      style: {
+                        textTransform: "none"
+                      },
                       children: "Type Signature"
                     })]
                   })
                 }), /*#__PURE__*/_jsx(Tab, {
                   label: /*#__PURE__*/_jsxs(Grid, {
                     className: "dflex alignCenter",
-                    children: [/*#__PURE__*/_jsx(UploadSignature, {}), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(UploadSignature, {
+                      fill: tab === 2 ? "#2563EB" : "#A2B0B9"
+                    }), /*#__PURE__*/_jsx("span", {
                       className: "ml-1",
+                      style: {
+                        textTransform: "none"
+                      },
                       children: "Upload Signature"
                     })]
                   })
@@ -244,7 +274,9 @@ const SignaturePopup = props => {
                 xs: 6,
                 style: {
                   display: "flex",
-                  alignItems: "center"
+                  alignItems: "center",
+                  fontSize: "14px",
+                  fontFamily: '"Inter", sans-serif"'
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   style: {
@@ -252,6 +284,11 @@ const SignaturePopup = props => {
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
+                    style: {
+                      fontFamily: '"Inter", sans-serif',
+                      fontWeight: 500,
+                      fontSize: "14px"
+                    },
                     children: "Name:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
@@ -262,8 +299,28 @@ const SignaturePopup = props => {
                     id: "signedBy",
                     name: "signedBy",
                     placeholder: "Enter Name",
+                    defaultValue: defaultName || "",
                     size: "small",
-                    onChange: onChange
+                    onChange: onChange,
+                    sx: {
+                      '& .MuiOutlinedInput-root': {
+                        borderRadius: '10px',
+                        '& fieldset': {
+                          borderColor: "1px solid #D8DDE1"
+                        }
+                        // '&:hover fieldset': {
+                        //   borderColor: 'yourHoverColor', 
+                        // },
+                        // '&.Mui-focused fieldset': {
+                        //   borderColor: 'yourFocusedColor',
+                        // },
+                      },
+
+                      '& .MuiInputBase-input::placeholder': {
+                        fontFamily: '"Inter", sans-serif"',
+                        fontSize: "14px"
+                      }
+                    }
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -277,8 +334,14 @@ const SignaturePopup = props => {
                   style: {
                     marginRight: "8px"
                   },
+                  xs: 2,
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedOn",
+                    style: {
+                      fontFamily: '"Inter", sans-serif',
+                      fontWeight: 500,
+                      fontSize: "14px"
+                    },
                     children: "Date:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
@@ -288,23 +351,72 @@ const SignaturePopup = props => {
                   },
                   xs: 12,
                   children: /*#__PURE__*/_jsx(DatePicker, {
-                    showIcon: true,
-                    id: "signedOn",
-                    name: "signedOn",
-                    selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
-                    value: signedData?.signedOn || "",
-                    dateFormat: "MM/dd/yyyy",
+                    selected: signedData.signedOn,
                     onChange: date => {
                       setSignedData({
                         ...signedData,
-                        signedOn: date ? new Date(date).toISOString().split("T")[0] : ""
+                        signedOn: date
                       });
-                    }
+                    },
+                    dateFormat: "yyyy/MM/dd",
+                    customInput: /*#__PURE__*/_jsx(TextField, {
+                      fullWidth: true,
+                      name: "signedOn",
+                      placeholder: "Select Date",
+                      size: "small",
+                      InputProps: {
+                        startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                          position: "start",
+                          sx: {
+                            padding: 0,
+                            // Remove padding around the InputAdornment
+                            margin: 0 // Remove any margins
+                          },
+                          children: /*#__PURE__*/_jsx(IconButton, {
+                            children: /*#__PURE__*/_jsx(CalenderIconSignature, {})
+                          })
+                        }),
+                        endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                          position: "end",
+                          children: /*#__PURE__*/_jsx(IconButton, {
+                            children: /*#__PURE__*/_jsx(CalenderDownIconSignature, {})
+                          })
+                        }),
+                        sx: {
+                          "& .MuiOutlinedInput-notchedOutline": {
+                            borderColor: "transparent" // Remove the internal border
+                          },
+
+                          "& .MuiInputBase-input": {
+                            border: "none",
+                            // Ensure no border inside the input field
+                            padding: "4px 0",
+                            // Adjust padding for consistency
+                            boxShadow: "none !important",
+                            color: "#778599 !important"
+                          }
+                        }
+                      },
+                      sx: {
+                        "& .MuiOutlinedInput-root": {
+                          borderRadius: "10px",
+                          backgroundColor: "#fff",
+                          padding: "0px !important",
+                          "&:hover fieldset": {
+                            borderColor: "#D8DDE1" // Keeps the border on hover only around the outer field
+                          },
+
+                          "& fieldset": {
+                            borderColor: "#D8DDE1" // Keeps the outer border light
+                          }
+                        }
+                      }
+                    })
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
                 item: true,
-                xs: 6,
+                xs: 12,
                 style: {
                   display: "flex",
                   alignItems: "center"
@@ -313,20 +425,47 @@ const SignaturePopup = props => {
                   style: {
                     marginRight: "8px"
                   },
+                  xs: 1,
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
+                    style: {
+                      fontFamily: '"Inter", sans-serif',
+                      fontWeight: 500,
+                      fontSize: "14px"
+                    },
                     children: "Email:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
+                  container: true,
                   item: true,
-                  xs: 12,
+                  xs: 11,
                   children: /*#__PURE__*/_jsx(TextField, {
                     fullWidth: true,
                     id: "signedByEmail",
                     name: "signedByEmail",
                     placeholder: "Enter Email",
                     size: "small",
-                    onChange: onChange
+                    onChange: onChange,
+                    sx: {
+                      '& .MuiOutlinedInput-root': {
+                        borderRadius: '10px',
+                        '& fieldset': {
+                          borderColor: "1px solid #D8DDE1"
+                        }
+                        // '&:hover fieldset': {
+                        //   borderColor: 'yourHoverColor', 
+                        // },
+                        // '&.Mui-focused fieldset': {
+                        //   borderColor: 'yourFocusedColor',
+                        // },
+                      },
+
+                      '& .MuiInputBase-input::placeholder': {
+                        fontFamily: '"Inter", sans-serif"',
+                        fontSize: "14px"
+                      }
+                    },
+                    defaultValue: defaultEmail || ""
                   })
                 })]
               })]
@@ -343,14 +482,30 @@ const SignaturePopup = props => {
               children: [/*#__PURE__*/_jsx(Grid, {
                 item: true,
                 sx: {
-                  mr: 4
+                  mr: 3
                 },
-                children: /*#__PURE__*/_jsx("input", {
-                  type: "color",
-                  className: "brushcolorpic signColorPicker",
-                  onChange: onBrushColor,
-                  size: "4",
-                  value: brush?.color
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  container: true,
+                  alignItems: "center",
+                  sx: {
+                    display: 'flex'
+                  },
+                  children: [/*#__PURE__*/_jsx("input", {
+                    type: "color",
+                    className: "brushcolorpic signColorPicker",
+                    onChange: onBrushColor,
+                    size: "4",
+                    value: brush?.color
+                  }), /*#__PURE__*/_jsx("span", {
+                    style: {
+                      marginLeft: "10px",
+                      fontFamily: '"Inter", sans-serif',
+                      fontSize: "14px",
+                      fontWeight: 500,
+                      color: "#333"
+                    },
+                    children: brush.color
+                  })]
                 })
               }), /*#__PURE__*/_jsx(Grid, {
                 item: true,
@@ -381,7 +536,7 @@ const SignaturePopup = props => {
               children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
                 className: "secondaryBtn",
-                children: "Delete"
+                children: "Clear"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
                 className: `primaryBtn ${isEmpty ? "disabled" : ""}`,