@flozy/editor 4.0.3 → 4.0.5

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

@@ -1,19 +1,17 @@
 import React, { useState } from "react";
-import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
-import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
-import WidthFullIcon from "@mui/icons-material/WidthFull";
-import WidthNormalIcon from "@mui/icons-material/WidthNormal";
+import { Button, ButtonGroup, Divider, Grid, Typography } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import FormatClearIcon from "@mui/icons-material/FormatClear";
 import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
 import { toolbarGroups } from "../toolbarGroups";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
 import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive, addMarkData } from "../../utils/SlateUtilityFunctions";
 import LinkButton from "../../Elements/Link/LinkButton";
-import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
 import { AllColors } from "../../Elements/Color Picker/ColorButtons";
 import { fontFamilyMap } from "../../utils/font";
 import { getBorderColor } from "../../utils/helper";
+import SelectTypography from "./MiniTextFormat/SelectTypography";
+import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
+import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -23,24 +21,20 @@ const ButtonComp = {
 const TextFormat = props => {
   const {
     classes,
-    editor
+    editor,
+    onClose,
+    closeMainPopup
   } = props;
+  console.log("PROPS:", props);
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
   const fontFamily = allTools.find(f => f.format === "fontFamily");
   const fontWeight = allTools.find(f => f.format === "fontWeight");
-  const fontStyle = allTools.filter(f => f.type === "mark");
+  const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
   const link = allTools.find(f => f.format?.indexOf("link") >= 0);
   const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
-  const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
-  const {
-    pageProps
-  } = getPageSettings(editor)?.element || {};
-  const {
-    pageWidth
-  } = pageProps;
   const {
     isActive: isBlockQuoteActive,
     props: bqProps
@@ -52,12 +46,6 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-  const handlePageWidth = width => () => {
-    updatePageSettings(editor, {
-      ...(pageProps || {}),
-      pageWidth: width
-    });
-  };
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -100,6 +88,7 @@ const TextFormat = props => {
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
+    className: "text-formatter-popup",
     children: [/*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
@@ -118,19 +107,19 @@ const TextFormat = props => {
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
+            sx: classes.defaultBtn1,
+            startIcon: /*#__PURE__*/_jsx(TextDefaultStyleIcon, {}),
             onClick: handleDefault({
               format: "fontFamily",
               val: Object.values(fontFamilyMap)[0]
             }),
-            children: "Default"
+            children: "Default Text"
           })
         })]
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
-        sx: classes.textFormatField,
+        sx: classes.textFormatField1,
         children: /*#__PURE__*/_jsx(Dropdown, {
           classes: classes,
           ...fontFamily,
@@ -180,10 +169,15 @@ const TextFormat = props => {
           })
         })]
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatField,
+      sx: classes.textFormatField2,
       children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         justifyContent: "space-between",
@@ -199,12 +193,12 @@ const TextFormat = props => {
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+            sx: classes.defaultBtn1,
+            startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {}),
             onClick: handleDefault({
               format: "color"
             }),
-            children: "Default"
+            children: "Default Color"
           })
         })]
       }), /*#__PURE__*/_jsx(Grid, {
@@ -223,7 +217,7 @@ const TextFormat = props => {
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      sx: classes.textFormatField,
+      sx: classes.textFormatField2,
       children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         justifyContent: "space-between",
@@ -234,19 +228,21 @@ const TextFormat = props => {
             variant: "body1",
             color: "primary",
             sx: classes.typoLabel,
-            children: "Text Background Color"
+            children: "Background Color"
           })
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsx(Grid, {
             item: true,
             children: /*#__PURE__*/_jsx(Button, {
-              sx: classes.defaultBtn,
-              startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+              sx: classes.defaultBtn2,
+              startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
+                stroke: "#A2B0B9"
+              }),
               onClick: handleDefault({
                 format: "bgColor"
               }),
-              children: "Default"
+              children: "Default Color"
             })
           })
         })]
@@ -265,6 +261,11 @@ const TextFormat = props => {
           id: "12_cc"
         }, "12_cc")
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 6,
@@ -272,8 +273,8 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        sx: classes.typoLabel,
-        children: "Text Alignment"
+        sx: classes.typoLabel2,
+        children: "Alignment"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -292,7 +293,7 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        sx: classes.typoLabel,
+        sx: classes.typoLabel2,
         children: "Lists"
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -306,6 +307,11 @@ const TextFormat = props => {
           }, `pptool_block_${i}_${m.id}`);
         })
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
@@ -319,21 +325,29 @@ const TextFormat = props => {
         xs: 12,
         className: "typo-icons",
         sx: classes.evenSpace,
-        children: [typo?.map((m, i) => {
-          return /*#__PURE__*/_jsx(BlockButton, {
-            editor: editor,
-            ...m
-          }, `pptool_mark_${i}_${m.id}`);
+        children: [/*#__PURE__*/_jsx(SelectTypography, {
+          classes: classes,
+          editor: editor,
+          closeMainPopup: closeMainPopup || onClose
         }), fontStyle?.map((m, i) => {
           return /*#__PURE__*/_jsx(MarkButton, {
             editor: editor,
             ...m
           }, `pptool_mark_${i}_${m.id}`);
+        }), /*#__PURE__*/_jsx(SelectSuperSubscript, {
+          classes: classes,
+          editor: editor,
+          closeMainPopup: closeMainPopup || onClose
         }), /*#__PURE__*/_jsx(LinkButton, {
           active: isBlockActive(editor, link.format),
           editor: editor
         }, link.id)]
       })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -371,7 +385,7 @@ const TextFormat = props => {
           children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
         })]
       }), /*#__PURE__*/_jsxs(ButtonGroup, {
-        sx: classes.btnGroup,
+        sx: classes.btnGroup2,
         children: [/*#__PURE__*/_jsx(Button, {
           className: `no-hover ${bqColor ? "active" : ""}`,
           onClick: handleQuote({
@@ -389,24 +403,6 @@ const TextFormat = props => {
           onClick: handleColorPicker("color"),
           children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
         })]
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: handlePageWidth("fixed"),
-        startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
-        sx: classes.pageWidthBtn,
-        className: pageWidth === "fixed" || !pageWidth ? "active" : "",
-        style: {
-          width: "45%"
-        },
-        children: "Centered"
-      }), /*#__PURE__*/_jsx(Button, {
-        sx: classes.pageWidthBtn,
-        className: pageWidth === "full" ? "active" : "",
-        onClick: handlePageWidth("full"),
-        startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
-        style: {
-          width: "45%"
-        },
-        children: "Full width"
       })]
     }), /*#__PURE__*/_jsx(AllColors, {
       open: open,

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

@@ -30,8 +30,13 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
+  const {
+    selectedElement
+  } = useEditorContext();
   useEffect(() => {
-    if (event === "end" && anchorEl && !open) {
+    const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
+
+    if (userStoppedSelection && anchorEl && !open) {
       // for table cell selection
       const isCellsSelected = table.isCellSelected(editor.selection);
       if (!isCellsSelected) {
@@ -52,6 +57,11 @@ const PopupTool = props => {
       updateAnchorEl();
     }
   }, [selection]);
+  useEffect(() => {
+    if (selectedElement?.enable === 1) {
+      setAnchorEl(null);
+    }
+  }, [selection, selectedElement?.path, selectedElement?.enable]);
   const updateAnchorEl = () => {
     try {
       const domSelection = window.getSelection();
@@ -100,14 +110,14 @@ const PopupTool = props => {
       transition: true,
       placement: "auto-end",
       sx: classes.popupWrapper,
-      className: `tools-drawer ${size?.device}`,
       children: ({
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {
         ...TransitionProps,
         children: /*#__PURE__*/_jsx(Paper, {
           style: {
-            borderRadius: "10px"
+            borderRadius: "6px",
+            border: "1px solid #8360FD"
           },
           children: /*#__PURE__*/_jsx(MiniTextFormat, {
             editor: editor,

package/dist/Editor/Toolbar/Toolbar.js

@@ -31,6 +31,7 @@ import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
 import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
 import DividerButton from "../Elements/Divider/DividerButton.js";
 import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
+import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const RenderToolbarIcon = props => {
@@ -133,6 +134,12 @@ export const RenderToolbarIcon = props => {
           customProps: customProps,
           icoBtnType: icoBtnType
         }, element.id);
+      case "freegrid":
+        return /*#__PURE__*/_jsx(FreeGridButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
       case "newLine":
         return /*#__PURE__*/_jsx(NewLineButton, {
           editor: editor,

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -47,17 +47,17 @@ export const toolbarGroups = [[{
   type: "mark",
   title: "Bold",
   basic: true
+}, {
+  id: 5,
+  format: "underline",
+  type: "mark",
+  title: "Underline"
 }, {
   id: 4,
   format: "italic",
   type: "mark",
   title: "Italic",
   basic: true
-}, {
-  id: 5,
-  format: "underline",
-  type: "mark",
-  title: "Underline"
 }, {
   id: 6,
   format: "strikethrough",
@@ -140,6 +140,11 @@ export const toolbarGroups = [[{
   format: "alignRight",
   type: "block",
   title: "Right Align"
+}, {
+  id: 39,
+  format: "alignJustify",
+  type: "block",
+  title: "Justify"
 }], [{
   id: 20,
   format: "link",
@@ -196,6 +201,11 @@ export const toolbarGroups = [[{
   format: "grid",
   type: "grid",
   group: "elements"
+}, {
+  id: 50,
+  format: "freegrid",
+  type: "freegrid",
+  group: "elements"
 }, {
   id: 41,
   format: "emoji",

package/dist/Editor/assets/svg/AIIcons.js

@@ -435,4 +435,156 @@ export function DeleteIcon(props) {
       strokeLinejoin: "round"
     })]
   });
-}
+}
+export const PauseRecordingIcon = () => /*#__PURE__*/_jsxs("svg", {
+  width: "30",
+  height: "30",
+  viewBox: "0 0 30 30",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "15",
+    cy: "15",
+    r: "14.5",
+    fill: "white",
+    stroke: "url(#paint0_linear_29403_449555)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M13.6916 21.125H10.8817C10.5953 21.125 10.3447 20.8744 10.3447 20.5881V9.84943C10.3447 9.54517 10.5953 9.3125 10.8817 9.3125H13.6916C13.932 9.3125 14.2285 9.54517 14.2285 9.84943V20.5881C14.2285 20.8744 13.932 21.125 13.6916 21.125Z",
+    fill: "url(#paint1_linear_29403_449555)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M20.1346 21.125H17.3426C17.0383 21.125 16.8057 20.8744 16.8057 20.5881V9.84943C16.8057 9.54517 17.0383 9.3125 17.3426 9.3125H20.1525C20.4568 9.3125 20.6895 9.54517 20.6895 9.84943V20.5881C20.6716 20.8744 20.4389 21.125 20.1346 21.125Z",
+    fill: "url(#paint2_linear_29403_449555)"
+  }), /*#__PURE__*/_jsxs("defs", {
+    children: [/*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint0_linear_29403_449555",
+      x1: "15",
+      y1: "0",
+      x2: "15",
+      y2: "30",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#8061FD"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "1",
+        stopColor: "#2C64ED"
+      })]
+    }), /*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint1_linear_29403_449555",
+      x1: "12.2866",
+      y1: "9.3125",
+      x2: "12.2866",
+      y2: "21.125",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#8161FD"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "1",
+        stopColor: "#2A64EC"
+      })]
+    }), /*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint2_linear_29403_449555",
+      x1: "18.7476",
+      y1: "9.3125",
+      x2: "18.7476",
+      y2: "21.125",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#8161FD"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "1",
+        stopColor: "#2A64EC"
+      })]
+    })]
+  })]
+});
+export const CloseGreyCircle = () => /*#__PURE__*/_jsxs("svg", {
+  width: "30",
+  height: "30",
+  viewBox: "0 0 30 30",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("rect", {
+    width: "30",
+    height: "30",
+    rx: "15",
+    fill: "#DAE4ED"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19.1245 10.875L10.8749 19.1246",
+    stroke: "#2563EB",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.875 10.875L19.1246 19.1246",
+    stroke: "#2563EB",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const TickBlueCircle = () => /*#__PURE__*/_jsxs("svg", {
+  width: "30",
+  height: "30",
+  viewBox: "0 0 30 30",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("rect", {
+    width: "30",
+    height: "30",
+    rx: "15",
+    fill: "url(#paint0_linear_30220_64249)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9 15L13.0011 19L21 11",
+    stroke: "white",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("defs", {
+    children: /*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint0_linear_30220_64249",
+      x1: "15",
+      y1: "0",
+      x2: "15",
+      y2: "30",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#8360FD"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "1",
+        stopColor: "#2563EB"
+      })]
+    })
+  })]
+});
+export const ChatMicIcon = props => /*#__PURE__*/_jsxs("svg", {
+  width: "26",
+  height: "26",
+  viewBox: "0 0 26 26",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M13 19.3194C15.9882 19.3194 18.4166 16.8909 18.4166 13.9028V9.38887C18.4166 6.40067 15.9882 3.9722 13 3.9722C10.0118 3.9722 7.58331 6.40067 7.58331 9.38887V13.9028C7.58331 16.8909 10.0118 19.3194 13 19.3194Z",
+    stroke: "#94A3B8",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M4.875 12.0972V13.9028C4.875 18.3896 8.51319 22.0278 13 22.0278C17.4868 22.0278 21.125 18.3896 21.125 13.9028V12.0972",
+    stroke: "#94A3B8",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.3913 8.91914C11.9982 8.33233 13.7496 8.33233 15.3565 8.91914",
+    stroke: "#94A3B8",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M11.2218 11.6295C12.3051 11.3316 13.4516 11.3316 14.535 11.6295",
+    stroke: "#94A3B8",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});

package/dist/Editor/common/EditorCmds.js

@@ -7,9 +7,6 @@ const selectAll = (event, {
     if (needLayout) {
       event.preventDefault();
       // Select the entire document
-      const {
-        selection
-      } = editor;
       const [firstNode] = Editor.nodes(editor, {
         at: [0]
       }); // First node

package/dist/Editor/common/EditorIcons.js

@@ -9,23 +9,23 @@ export const DrawSignature = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21.3748 1.49609L12.1426 10.7274C11.6087 11.2606 11.6087 12.126 12.1426 12.6598L12.6527 13.17C13.1859 13.7031 14.052 13.7031 14.5851 13.17L23.8183 3.93768L21.3748 1.49609Z",
-    fill: "#A2B0B9"
+    fill: props.fill
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M11.7399 13.0617C11.4885 12.8102 11.3279 12.5025 11.2544 12.1797L11.2125 12.2944C11.1271 12.5293 10.9854 12.9153 10.8993 13.1501L10.3267 14.7154C10.3236 14.7233 10.3227 14.7313 10.3203 14.7367L11.0133 14.0446C11.0837 13.9751 11.1975 13.9751 11.268 14.0446C11.3385 14.1158 11.3385 14.2298 11.268 14.2994L10.5759 14.9931C10.5837 14.99 10.5901 14.9883 10.5981 14.9852L12.1634 14.4133C12.3983 14.327 12.7836 14.1863 13.0192 14.1002L13.1339 14.0583C12.8103 13.984 12.5026 13.8234 12.2511 13.5734L11.7399 13.0617Z",
-    fill: "#A2B0B9"
+    fill: props.fill
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M24.9119 0.911237L24.4018 0.401078C23.8679 -0.133693 23.0025 -0.133693 22.4694 0.401078L21.7852 1.08533L24.2277 3.52785L24.9119 2.8436C25.4451 2.30976 25.4451 1.44433 24.9119 0.911237Z",
-    fill: "#A2B0B9"
+    fill: props.fill
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M23.8386 4.55868L19.678 8.71929C19.511 8.88625 19.511 9.15663 19.678 9.3236C19.8449 9.49056 20.1153 9.49056 20.2823 9.3236L24.4419 5.16299C24.6089 4.99603 24.6089 4.72565 24.4419 4.55868C24.2752 4.3919 24.0046 4.3919 23.8386 4.55868Z",
-    fill: "#A2B0B9"
+    fill: props.fill
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M12.3531 15.8358H9.24616C8.12385 15.8358 7.46165 16.0692 7.02266 16.2235C6.5125 16.4046 6.4706 16.4181 5.99284 15.9839C5.84645 15.8493 5.7088 15.669 5.56332 15.4768C5.20573 15.007 4.75821 14.4169 3.98619 14.4635C2.88281 14.5253 2.78539 15.6729 2.72768 16.3587C2.71822 16.4742 2.70711 16.6031 2.69218 16.7296C2.61698 16.4948 2.54433 16.2384 2.48898 16.0423C2.39886 15.7211 2.30545 15.3905 2.20494 15.1121C1.9961 14.5371 1.63139 14.4588 1.41311 14.4635C1.19717 14.4683 0.622914 14.4801 0.0266173 16.3713C-0.0682457 16.671 0.0985384 16.9907 0.398416 17.0863C0.699748 17.1805 1.01928 17.0135 1.11432 16.7138C1.17604 16.5177 1.25196 16.3136 1.32862 16.1301C1.3492 16.2029 1.3705 16.2772 1.39107 16.3508C1.68458 17.3933 1.91638 18.215 2.54596 18.3655C2.59421 18.3766 2.65429 18.3853 2.72384 18.3853C2.9041 18.3853 3.14462 18.3219 3.37803 18.0658C3.7633 17.6443 3.81701 17.0121 3.86363 16.456C3.88584 16.1902 3.92772 15.6942 4.0488 15.6018C4.21339 15.5954 4.39128 15.8193 4.65549 16.1673C4.81772 16.3809 5.00198 16.6228 5.22503 16.8253C6.14103 17.6597 6.65833 17.5609 7.40173 17.2983C7.80994 17.1543 8.31848 16.9757 9.24543 16.9757H12.3523C12.6672 16.9757 12.9226 16.7193 12.9226 16.4054C12.9233 16.0914 12.6688 15.8359 12.353 15.8359L12.3531 15.8358Z",
-    fill: "#A2B0B9"
+    fill: props.fill
   })]
 });
 export const TypeSignature = props => /*#__PURE__*/_jsx("svg", {
@@ -37,7 +37,7 @@ export const TypeSignature = props => /*#__PURE__*/_jsx("svg", {
   children: /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M20.6332 10.8976H13.0855V10.1307C13.0855 10.0886 13.0811 10.0476 13.0728 10.008H13.0736C13.0726 10.0021 13.0687 9.99736 13.0674 9.99145C13.0567 9.9473 13.0404 9.9056 13.0203 9.86571C12.9221 9.65741 12.7112 9.51065 12.4594 9.51065H11.3456V9.48406C11.3456 9.04891 11.7123 8.69365 12.1615 8.69365H16.9192C17.7488 8.69365 18.4225 8.03654 18.4225 7.23285C18.4225 6.42917 17.7488 5.77205 16.9192 5.77205H4.06291C3.39377 5.77205 2.84834 5.24366 2.84834 4.59541C2.84834 3.94276 3.39377 3.41436 4.06291 3.41436H17.5286C18.5781 3.41436 19.4306 2.58853 19.4306 1.57174V0H18.7432V1.57174C18.7432 2.21999 18.1978 2.74838 17.5286 2.74838H4.06291C3.01339 2.74838 2.16089 3.57867 2.16089 4.59541C2.16089 5.61216 3.01334 6.43803 4.06291 6.43803H16.9192C17.3683 6.43803 17.7351 6.79326 17.7351 7.23285C17.7351 7.668 17.3684 8.02767 16.9192 8.02767H12.1615C11.3319 8.02767 10.6582 8.68033 10.6582 9.48402V9.51061H9.86996C9.62477 9.51061 9.41974 9.64932 9.31945 9.84877C9.27336 9.9333 9.24473 10.0282 9.24473 10.1304V10.8974L1.36692 10.8975C0.612058 10.8975 0 11.4904 0 12.2218V19.6758C0 20.4071 0.612015 21 1.36692 21L20.6331 20.9998C21.3879 20.9998 22 20.4069 22 19.6756V12.2216C22 11.4905 21.388 10.8975 20.6331 10.8975L20.6332 10.8976ZM15.62 12.4314C15.62 12.2068 15.808 12.0248 16.0398 12.0248H17.2884C17.5202 12.0248 17.7081 12.2068 17.7081 12.4314V13.641C17.7081 13.8656 17.5202 14.0476 17.2884 14.0476H16.0398C15.808 14.0476 15.62 13.8656 15.62 13.641V12.4314ZM11.6247 14.0477H10.3761C10.1443 14.0477 9.95641 13.8656 9.95641 13.641V12.4314C9.95641 12.2069 10.1443 12.0248 10.3761 12.0248H11.6247C11.8566 12.0248 12.0445 12.2069 12.0445 12.4314V13.641C12.0445 13.8656 11.8566 14.0477 11.6247 14.0477ZM12.0445 15.2478V16.4574C12.0445 16.682 11.8566 16.864 11.6247 16.864H10.3761C10.1443 16.864 9.95641 16.682 9.95641 16.4574V15.2478C9.95641 15.0232 10.1443 14.8412 10.3761 14.8412H11.6247C11.8566 14.841 12.0445 15.0232 12.0445 15.2478ZM7.12457 12.4314C7.12457 12.2068 7.31249 12.0248 7.54429 12.0248H8.79291C9.02471 12.0248 9.21263 12.2068 9.21263 12.4314V13.641C9.21263 13.8656 9.02471 14.0476 8.79291 14.0476H7.54429C7.31249 14.0476 7.12457 13.8656 7.12457 13.641V12.4314ZM7.12457 15.2478C7.12457 15.0232 7.31249 14.8412 7.54429 14.8412H8.79291C9.02471 14.8412 9.21263 15.0232 9.21263 15.2478V16.4574C9.21263 16.682 9.02471 16.864 8.79291 16.864H7.54429C7.31249 16.864 7.12457 16.682 7.12457 16.4574V15.2478ZM3.54896 19.2736C3.54896 19.4982 3.36104 19.6802 3.12924 19.6802H1.88062C1.64882 19.6802 1.4609 19.4982 1.4609 19.2736V18.064C1.4609 17.8394 1.64882 17.6574 1.88062 17.6574H3.12924C3.36104 17.6574 3.54896 17.8394 3.54896 18.064V19.2736ZM3.54896 16.4574C3.54896 16.682 3.36104 16.864 3.12924 16.864H1.88062C1.64882 16.864 1.4609 16.682 1.4609 16.4574V15.2478C1.4609 15.0232 1.64882 14.8412 1.88062 14.8412H3.12924C3.36104 14.8412 3.54896 15.0232 3.54896 15.2478V16.4574ZM3.54896 13.641C3.54896 13.8656 3.36104 14.0476 3.12924 14.0476H1.88062C1.64882 14.0476 1.4609 13.8656 1.4609 13.641V12.4314C1.4609 12.2068 1.64882 12.0248 1.88062 12.0248H3.12924C3.36104 12.0248 3.54896 12.2068 3.54896 12.4314V13.641ZM6.38069 19.2738C6.38069 19.4983 6.19278 19.6804 5.96098 19.6804H4.71235C4.48055 19.6804 4.29264 19.4983 4.29264 19.2738V18.0642C4.29264 17.8396 4.48055 17.6576 4.71235 17.6576H5.96098C6.19278 17.6576 6.38069 17.8396 6.38069 18.0642V19.2738ZM6.38069 16.4576C6.38069 16.6821 6.19278 16.8642 5.96098 16.8642H4.71235C4.48055 16.8642 4.29264 16.6821 4.29264 16.4576V15.248C4.29264 15.0234 4.48055 14.8413 4.71235 14.8413H5.96098C6.19278 14.8413 6.38069 15.0234 6.38069 15.248V16.4576ZM6.38069 13.6412C6.38069 13.8658 6.19278 14.0478 5.96098 14.0478H4.71235C4.48055 14.0478 4.29264 13.8658 4.29264 13.6412V12.4316C4.29264 12.207 4.48055 12.025 4.71235 12.025H5.96098C6.19278 12.025 6.38069 12.207 6.38069 12.4316V13.6412ZM14.8762 19.274C14.8762 19.4985 14.6883 19.6806 14.4565 19.6806H7.54426C7.31246 19.6806 7.12455 19.4985 7.12455 19.274V18.0643C7.12455 17.8398 7.31246 17.6577 7.54426 17.6577H14.4565C14.6883 17.6577 14.8762 17.8398 14.8762 18.0643V19.274ZM14.8762 16.4577C14.8762 16.6823 14.6883 16.8644 14.4565 16.8644H13.2079C12.9761 16.8644 12.7881 16.6823 12.7881 16.4577V15.2481C12.7881 15.0236 12.9761 14.8415 13.2079 14.8415H14.4565C14.6883 14.8415 14.8762 15.0236 14.8762 15.2481V16.4577ZM14.8762 13.6414C14.8762 13.8659 14.6883 14.048 14.4565 14.048H13.2079C12.9761 14.048 12.7881 13.8659 12.7881 13.6414V12.4317C12.7881 12.2072 12.9761 12.0251 13.2079 12.0251H14.4565C14.6883 12.0251 14.8762 12.2072 14.8762 12.4317V13.6414ZM17.7081 19.2741C17.7081 19.4987 17.5202 19.6807 17.2884 19.6807H16.0398C15.808 19.6807 15.6201 19.4987 15.6201 19.2741V18.0645C15.6201 17.8399 15.808 17.6579 16.0398 17.6579H17.2884C17.5202 17.6579 17.7081 17.8399 17.7081 18.0645V19.2741ZM20.5398 19.2741C20.5398 19.4987 20.3519 19.6807 20.1201 19.6807H18.8715C18.6397 19.6807 18.4518 19.4987 18.4518 19.2741V18.0645C18.4518 17.8399 18.6397 17.6579 18.8715 17.6579H20.1201C20.3519 17.6579 20.5398 17.8399 20.5398 18.0645V19.2741ZM20.5398 16.4579C20.5398 16.6825 20.3519 16.8645 20.1201 16.8645H16.0398C15.808 16.8645 15.6201 16.6825 15.6201 16.4579V15.2483C15.6201 15.0237 15.808 14.8417 16.0398 14.8417H20.1201C20.3519 14.8417 20.5398 15.0237 20.5398 15.2483V16.4579ZM20.5398 13.6415C20.5398 13.8661 20.3519 14.0481 20.1201 14.0481H18.8715C18.6397 14.0481 18.4518 13.8661 18.4518 13.6415V12.4319C18.4518 12.2074 18.6397 12.0253 18.8715 12.0253H20.1201C20.3519 12.0253 20.5398 12.2074 20.5398 12.4319V13.6415Z",
-    fill: "#A2B0B9"
+    fill: props.fill
   })
 });
 export const UploadSignature = props => /*#__PURE__*/_jsx("svg", {
@@ -51,7 +51,7 @@ export const UploadSignature = props => /*#__PURE__*/_jsx("svg", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9.11105 6.94403V12H3.90249C1.74708 12 0 10.3115 0 8.22877C0 6.2095 1.64226 4.56091 3.70654 4.46225C3.89348 1.96767 6.04701 0 8.67605 0C10.7426 0 12.5153 1.21592 13.2701 2.94791C13.5384 2.87841 13.8204 2.84119 14.1116 2.84119C15.9012 2.84119 17.3519 4.24319 17.3519 5.97277C17.3519 6.01559 17.351 6.05819 17.3494 6.10079C18.8463 6.29676 20 7.53667 20 9.03682C20 10.6734 18.6273 12 16.9338 12H10.8892V6.94403L12.4098 8.24737C12.7768 8.56172 13.3385 8.52988 13.6647 8.17607C13.9907 7.82226 13.9577 7.28055 13.5908 6.966L10.5909 4.39451L10.0003 3.88847L9.40974 4.39451L6.40986 6.966C6.04295 7.28057 6.00994 7.82227 6.33592 8.17607C6.66214 8.52988 7.2239 8.56172 7.5908 8.24737L9.11105 6.94403Z",
-    fill: "#A2B0B9"
+    fill: props.fill
   })
 });
 export const PencilIcon = props => /*#__PURE__*/_jsx("svg", {