@flozy/editor 4.0.1 → 4.0.2

package/dist/Editor/common/ColorPickerButton.js

@@ -1,7 +1,7 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
-import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
+import CustomColorPicker from "./CustomColorPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -9,10 +9,12 @@ const ColorPickerButton = props => {
   const {
     value,
     onSave,
-    defaultColors = [],
     classes = {},
     recentColors = [],
-    hideGradient
+    children,
+    handleClose: closeDrawer,
+    hideThemeColors,
+    disableEditTheme
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -30,15 +32,14 @@ const ColorPickerButton = props => {
   const handleColorChange = color => {
     setColor(color);
   };
-  const initialColors = useMemo(() => {
-    let colors = [...recentColors, ...defaultColors];
-    if (hideGradient) {
-      colors = colors.filter(c => c && !c.includes("gradient"));
-    }
-    return colors;
-  }, [recentColors, defaultColors, hideGradient]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Button, {
+    children: [children ? /*#__PURE__*/_jsx("div", {
+      onClick: handleColorPicker,
+      style: {
+        cursor: "pointer"
+      },
+      children: children
+    }) : /*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
         height: "22px",
@@ -68,17 +69,24 @@ const ColorPickerButton = props => {
           item: true,
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: hideGradient ? false : true,
-              value: color,
+            children: /*#__PURE__*/_jsx(CustomColorPicker, {
+              gradient: true,
+              color: color,
               onChange: handleColorChange,
-              defaultColors: initialColors
+              recentColors: recentColors,
+              closeDrawer: closeDrawer,
+              hideThemeColors: hideThemeColors,
+              disableEditTheme: disableEditTheme
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {
               display: "flex",
-              justifyContent: "end",
-              margin: "8px"
+              justifyContent: "flex-end",
+              padding: "8px",
+              background: "white",
+              position: "sticky",
+              bottom: 0,
+              boxShadow: "0 -1px 5px rgba(0,0,0,0.1)"
             },
             children: [/*#__PURE__*/_jsx(Button, {
               onClick: handleClose,

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

@@ -0,0 +1,106 @@
+import { Box, Button, Typography, useTheme } from "@mui/material";
+import ColorPickerTool from "react-gcolor-picker";
+import customColorPickerStyles from "./style";
+import { colors } from "../../Elements/Color Picker/defaultColors";
+import { useContext, useMemo } from "react";
+import { ThemeContext } from "../../CommonEditor";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function CustomColorPicker(props) {
+  const {
+    gradient,
+    color,
+    onChange,
+    defaultColors,
+    recentColors = [],
+    closeDrawer,
+    hideThemeColors,
+    disableEditTheme
+  } = props;
+  const {
+    setOpenTheme
+  } = useContext(ThemeContext);
+  const classes = customColorPickerStyles();
+  const theme = useTheme();
+  const colorVars = theme?.vars?.colors || {};
+  const colorTabs = useMemo(() => {
+    const otherColors = {
+      title: "Recent colours",
+      colors: [...recentColors, ...defaultColors],
+      onChange: onChange
+    };
+    const themeColors = Object.values(colorVars);
+    const tabs = [];
+    if (themeColors?.length && !hideThemeColors) {
+      tabs.push({
+        title: "Theme colour",
+        onEdit: () => {
+          setOpenTheme("editThemeColor");
+          closeDrawer();
+        },
+        colors: Object.values(colorVars),
+        onChange: onChange
+      });
+    }
+    tabs.push(otherColors);
+    return tabs;
+  }, [recentColors, defaultColors, onChange, colorVars]);
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "div",
+    sx: classes.customColorPickerContainer,
+    children: [/*#__PURE__*/_jsx(ColorPickerTool, {
+      gradient: gradient,
+      value: color?.startsWith("var") ? "" : color,
+      onChange: onChange,
+      defaultColors: [],
+      popupWidth: "300"
+    }), colorTabs.map((tab, i) => {
+      const {
+        title,
+        onEdit,
+        colors = [],
+        onChange
+      } = tab;
+      return /*#__PURE__*/_jsxs(Box, {
+        component: "div",
+        className: "customColorPickerWrapper",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          component: "div",
+          className: "colorTitleWrapper",
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle2",
+            children: title
+          }), onEdit && !disableEditTheme ? /*#__PURE__*/_jsx(Button, {
+            variant: "text",
+            className: "editBtn",
+            onClick: () => onEdit(tab),
+            children: "Edit"
+          }) : null]
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          className: "colorPickerBtnContainer",
+          children: colors.map((colorVar, i) => {
+            const isSelected = colorVar === color;
+            return /*#__PURE__*/_jsx(Box, {
+              className: isSelected ? "colorPicketBtnActive" : "",
+              component: "div",
+              children: /*#__PURE__*/_jsx("button", {
+                style: {
+                  background: colorVar
+                },
+                onClick: () => onChange(colorVar),
+                className: `colorPicketBtn`,
+                type: "button"
+              })
+            }, i);
+          })
+        })]
+      }, i);
+    })]
+  });
+}
+CustomColorPicker.defaultProps = {
+  defaultColors: [...colors],
+  closeDrawer: () => {}
+};
+export default CustomColorPicker;

package/dist/Editor/common/CustomColorPicker/style.js

@@ -0,0 +1,53 @@
+const styles = () => ({
+  customColorPickerContainer: {
+    background: "white",
+    width: "300px",
+    "& .popup_tabs": {
+      boxShadow: "none"
+    },
+    ".customColorPickerWrapper": {
+      padding: "10px 0px",
+      margin: "0px 16px",
+      borderTop: "1px solid #DCE4EC"
+    },
+    ".colorTitleWrapper": {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingBottom: "10px",
+      ".MuiTypography-root": {
+        fontWeight: "600"
+      },
+      ".editBtn": {
+        textTransform: "none",
+        color: "#2563EB",
+        textDecoration: "underline",
+        padding: "0px",
+        minWidth: "unset"
+      }
+    },
+    ".colorPickerBtnContainer": {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "10px"
+    },
+    ".colorPicketBtn": {
+      width: "26px",
+      height: "26px",
+      outline: "none",
+      borderRadius: "50%",
+      cursor: "pointer",
+      border: "1.5px solid #DCE4EC"
+    },
+    ".colorPicketBtnActive": {
+      borderRadius: "50%",
+      padding: "1px",
+      border: "1.5px solid rgb(83, 83, 249)",
+      width: "fit-content",
+      height: "fit-content",
+      display: "flex",
+      justifyContent: "center"
+    }
+  }
+});
+export default styles;

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

@@ -0,0 +1,94 @@
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Typography, Button } from "@mui/material";
+import SwipeableDrawer from "../SwipeableDrawer";
+import customDialogStyles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function CustomDialog(props) {
+  const {
+    handleClose,
+    customProps,
+    children,
+    onSubmit
+  } = props;
+  const {
+    isMobile
+  } = customProps;
+  const classes = customDialogStyles();
+  if (isMobile) {
+    return /*#__PURE__*/_jsx(Box, {
+      sx: classes.dialogContainer,
+      children: /*#__PURE__*/_jsxs(SwipeableDrawer, {
+        onClose: handleClose,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle1",
+          gutterBottom: true,
+          sx: {
+            fontWeight: 600
+          },
+          children: "What do you want to link to?"
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: classes.mobileDialogContent,
+          children: children
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          sx: classes.mobileActionBtns,
+          children: /*#__PURE__*/_jsx(ActionsButtons, {
+            classes: classes,
+            onCancel: handleClose,
+            onSave: onSubmit
+          })
+        })]
+      })
+    });
+  } else {
+    return /*#__PURE__*/_jsxs(Dialog, {
+      onClose: handleClose,
+      open: true,
+      sx: classes.dialogContainer,
+      fullWidth: true,
+      maxWidth: "sm",
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: "What do you want to link to?"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": "close",
+        onClick: handleClose,
+        sx: classes.closeIcon,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        dividers: true,
+        children: children
+      }), /*#__PURE__*/_jsx(DialogActions, {
+        children: /*#__PURE__*/_jsx(ActionsButtons, {
+          classes: classes,
+          onCancel: handleClose,
+          onSave: onSubmit
+        })
+      })]
+    });
+  }
+}
+export default CustomDialog;
+function ActionsButtons({
+  classes,
+  onCancel,
+  onSave
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: onCancel,
+      sx: classes.closeBtn,
+      children: "Cancel"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: onSave,
+      sx: classes.saveBtn,
+      children: "Save"
+    })]
+  });
+}

package/dist/Editor/common/CustomDialog/style.js

@@ -0,0 +1,67 @@
+const styles = () => ({
+  dialogContainer: {
+    "& .MuiDialogContent-root": {
+      padding: "0px 20px"
+    },
+    "& .MuiDialogActions-root": {
+      padding: "10px"
+    },
+    "& .MuiTypography-h6": {
+      fontWeight: 600,
+      fontSize: "16px",
+      paddingRight: "20px"
+    },
+    "& .MuiGrid-container": {
+      marginTop: "0px"
+    },
+    "& .MuiGrid-item": {
+      padding: "14px"
+    }
+  },
+  saveBtn: {
+    color: "#fff",
+    background: "#2563EB",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 24px",
+    textTransform: "none",
+    "&:hover": {
+      color: "#fff",
+      background: "#2563EB"
+    }
+  },
+  closeBtn: {
+    backgroundColor: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "&:hover": {
+      border: "1px solid #64748B"
+    }
+  },
+  closeIcon: {
+    position: "absolute",
+    right: 8,
+    top: 8,
+    color: theme => theme.palette.grey[500]
+  },
+  gridDivider: {
+    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
+  },
+  mobileActionBtns: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+    paddingTop: "14px",
+    marginTop: "14px",
+    borderTop: theme => `1px solid ${theme.palette.grey[300]}`
+  },
+  mobileDialogContent: {
+    borderTop: theme => `1px solid ${theme.palette.grey[300]}`,
+    paddingTop: "14px"
+  }
+});
+export default styles;

package/dist/Editor/common/CustomSelect.js

@@ -0,0 +1,33 @@
+import { MenuItem, Select } from "@mui/material";
+import { fontFamilyMap } from "../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
+function CustomSelect(props) {
+  const {
+    onChange,
+    options = [],
+    value
+  } = props;
+  return /*#__PURE__*/_jsx(Select, {
+    fullWidth: true,
+    value: value,
+    onChange: onChange,
+    className: "editor-dd",
+    style: {
+      fontFamily: fontFamilyMap[value],
+      width: "100%",
+      height: "36px",
+      borderRadius: "10px",
+      fontSize: "14px"
+    },
+    children: options.map((option, i) => {
+      return /*#__PURE__*/_jsx(MenuItem, {
+        value: option.value,
+        style: {
+          fontFamily: option.text
+        },
+        children: option?.label || option?.text
+      }, i);
+    })
+  });
+}
+export default CustomSelect;

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -7,59 +7,68 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
-const DragHandleStyle = () => ({
-  dragHandle: {
-    opacity: 0,
-    content: '" "',
+const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
+const DragHandleStyle = fromPopper => {
+  const handleDragStyle = fromPopper ? {
+    position: "absolute",
+    top: "6px",
+    left: "4px"
+  } : {
     position: "absolute",
     top: "3px",
-    left: "-52px",
-    borderRadius: "0px",
-    padding: "0px",
-    width: "20px",
-    height: "20px",
-    border: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "grab",
-    color: "#D7D7D6",
-    background: "rgb(221, 221, 221, 0.1)",
-    "& svg": {
-      width: "20px"
+    left: "-52px"
+  };
+  return {
+    dragHandle: {
+      opacity: 0,
+      content: '" "',
+      ...handleDragStyle,
+      borderRadius: "0px",
+      padding: "0px",
+      width: "20px",
+      height: "20px",
+      border: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "grab",
+      color: "#D7D7D6",
+      background: "rgb(221, 221, 221, 0.1)",
+      "& svg": {
+        width: "20px"
+      },
+      "&:hover": {
+        opacity: 1,
+        background: "rgb(221, 221, 221, 0.8)"
+      },
+      "&.active": {
+        opacity: 1,
+        cursor: "grabbing"
+      }
     },
-    "&:hover": {
-      opacity: 1,
-      background: "rgb(221, 221, 221, 0.8)"
+    dropArea: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: -1,
+      "&.dragging": {
+        backgroundColor: "#def4ff"
+      }
     },
-    "&.active": {
-      opacity: 1,
-      cursor: "grabbing"
+    dropAreaOver: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "4px"
     }
-  },
-  dropArea: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    pointerEvents: "none",
-    zIndex: -1,
-    "&.dragging": {
-      backgroundColor: "#def4ff"
-    }
-  },
-  dropAreaOver: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "4px"
-  }
-});
+  };
+};
 const DragHandle = props => {
-  const classes = DragHandleStyle();
+  const classes = DragHandleStyle(props.fromPopper);
   const editor = useSlateStatic();
   const [dragging, setDragging] = useState(false);
   const {

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", {