@flozy/editor 4.4.7 → 4.4.9

package/dist/Editor/ChatEditor.js

@@ -46,8 +46,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [deboundedValue] = useDebounce(value, 500);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
-      needLayout,
-      isChatEditor: true
+      needLayout
     });
   }, []);
   const isReadOnly = readOnly === "readonly";
@@ -249,16 +248,6 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       restVal
     });
   };
-  const handlePaste = event => {
-    const items = event.clipboardData.items;
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].type.startsWith("image/")) {
-        event.preventDefault(); // Prevent the default paste behavior
-        return; // Exit early to keep the editor empty
-      }
-    }
-  };
-
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -278,8 +267,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         placeholder: "Start typing ...",
         spellCheck: true,
         onBlur: handleBlur,
-        onKeyDown: onKeyDown,
-        onPaste: handlePaste
+        onKeyDown: onKeyDown
       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,
         mentions: mentions,

package/dist/Editor/CommonEditor.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
-import { createEditor, Transforms, Range } from "slate";
+import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
@@ -27,16 +27,16 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints } from "./helper/theme";
-import { getPreviousNode, handleInsertLastElement, isFreeGridFragment, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, isFreeGridFragment, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
 import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
 import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
-import FontLoader from "./common/FontLoader/FontLoader";
 import "./font.css";
 import "./Editor.css";
 import "animate.css";
+import FontLoader from "./common/FontLoader/FontLoader";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Item = /*#__PURE__*/forwardRef(({
@@ -365,24 +365,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     } else if (event.key === "Enter") {
       enterEvent(event, editor, customProps?.isMobile);
-    } else if (event.key === 'Backspace') {
-      const {
-        selection
-      } = editor;
-      event.preventDefault();
-      if (selection) {
-        if (!Range.isCollapsed(selection)) {
-          editor.deleteFragment();
-        } else {
-          const match = getPreviousNode(editor);
-          if (match?.type === "page-settings") {
-            return;
-          }
-          editor.deleteBackward({
-            unit: "character"
-          });
-        }
-      }
+    } else if (event.key === "ArrowUp" && otherProps?.tagName !== 'Pages') {
+      upDownArrowKeyEvents(event, editor);
+    } else if (event.key === "ArrowDown" && otherProps?.tagName !== 'Pages') {
+      upDownArrowKeyEvents(event, editor);
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -447,22 +433,19 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const selection = window?.getSelection();
         if (selection && selection.rangeCount > 0) {
           const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
-          const containerRect = container?.getBoundingClientRect();
-          const containerBottom = containerRect?.bottom;
+          const containerBottom = container?.getBoundingClientRect()?.bottom;
           if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
-            // Calculate dynamic scroll based on remaining space
-            const scrollAmount = Math.min(200, cursorPosition.bottom - containerBottom + 250);
             container?.scrollBy({
-              top: scrollAmount,
+              top: 200,
               behavior: "smooth"
             });
           }
         } else {
-          console.warn('No valid selection range found');
+          console.warn("No valid selection range found");
         }
       }
     } catch (err) {
-      console.log('handleCursorScroll', err);
+      console.log("handleCursorScroll", err);
     }
   };
   return /*#__PURE__*/_jsx(EditorProvider, {
@@ -527,7 +510,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
-                        decorate: decorators,
+                        decorate: d => decorators(d, editor),
                         onKeyDown: onKeyDown,
                         onSelect: () => handleCursorScroll(editorWrapper.current)
                       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {

package/dist/Editor/Editor.css

@@ -244,6 +244,13 @@ blockquote {
   width: 17px !important;
 }
 
+.react-datepicker__input-container input {
+    height: 40px !important;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 100%;
+}
+
 .close-popupbtn {
   border-radius: 4px !important;
   width: 24px;
@@ -884,7 +891,6 @@ blockquote {
 /* For Firefox */
 .removeScroll {
     -moz-appearance: textfield;
-    appearance: none;
 }
 
 .borderInput:focus-visible {

package/dist/Editor/Elements/AI/AIInput.js

@@ -90,6 +90,7 @@ function AIInput({
     children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
+      ref: refs[0],
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
         style: {
@@ -104,7 +105,6 @@ function AIInput({
         onSubmit: e => {
           e.preventDefault();
         },
-        ref: refs[0],
         children: [/*#__PURE__*/_jsx("div", {
           className: "icon-container icons-elements",
           ref: inputWrapperRef,
@@ -116,22 +116,21 @@ function AIInput({
           children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
-          placeholder: fromToolBar ? "" : "Ask AI to write anything...",
+          placeholder: "Ask AI to write anything...",
           ref: inputRef,
           value: inputValue,
           onChange: onInputChange,
-          disabled: fromToolBar,
           onKeyDown: event => {
             if (event.key === "Enter" && !event.shiftKey) {
               event.preventDefault();
               handleSendBtnClick();
             }
           }
-        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
+        }), /*#__PURE__*/_jsxs(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
+          children: [/*#__PURE__*/_jsx(IconButton, {
             disabled: loading,
             onClick: () => startRecording(),
             children: /*#__PURE__*/_jsx(ChatMicIcon, {})

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -201,6 +201,29 @@ function PopoverAIInput({
   useEffect(() => {
     selectedEleRef.current = selectedElement;
   }, [selectedElement]);
+  const framePayload = (type, option) => {
+    let payload = {
+      mode: option.mode || 0,
+      query: option?.inputValue || inputValue
+    };
+    if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
+      payload.textOptionInput = type;
+    }
+    const selectedText = getSelectedText(editor);
+    const textData = generatedText || selectedText;
+    if (option.mode) {
+      payload.textData = textData;
+    } else if (selectedText && Number(payload.mode) === 0) {
+      payload.query = `${selectedText} \n ${payload.query}`;
+    }
+    const tryAgain = type === "try_again";
+    if (tryAgain) {
+      // resetting previous payload
+      const prevPayload = selectedOption?.payload || {};
+      payload = prevPayload;
+    }
+    return payload;
+  };
   const onSend = async (type, option) => {
     try {
       if (type === "close") {
@@ -232,28 +255,12 @@ function PopoverAIInput({
         onClickOutside();
         return;
       }
-      if (type === "speech_to_text") {
-        setGeneratedText(option.text);
-        return;
-      }
-      if (type === "try_again") {
-        // resetting the previous option and try again
-        option = selectedOption;
-        type = selectedOption.value;
-      } else {
-        setSelectedOption(option);
-      }
       setLoading(true);
-      const payload = {
-        mode: option.mode || 0,
-        query: option?.inputValue || inputValue
-      };
-      if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
-        payload.textOptionInput = type;
-      }
-      if (option.mode) {
-        payload.textData = generatedText || window.getSelection().toString();
-      }
+      const payload = framePayload(type, option);
+      setSelectedOption({
+        ...option,
+        payload
+      });
       const result = await services("infinityAI", payload);
       setLoading(false);
       setInputValue("");
@@ -264,15 +271,19 @@ function PopoverAIInput({
         onClickOutside();
         return;
       }
-      if (!option.replace) {
-        if (type === "continue_writing") {
-          setGeneratedText(generatedText + text);
-        } else {
-          setGeneratedText(text);
-        }
-        return;
+
+      // if (!option.replace) {
+      if (type === "continue_writing") {
+        setGeneratedText(generatedText + text);
+      } else {
+        setGeneratedText(text);
       }
-      insertText(editor, text);
+
+      //   return;
+      // }
+
+      // ** we are not using this insertText right now, AI returned response will not insert into the editor immediately, so option.replace will be false always
+      // insertText(editor, text);
 
       // scrollToAIInput();
     } catch (err) {

package/dist/Editor/Elements/AI/Styles.js

@@ -1,6 +1,5 @@
 const Styles = theme => ({
   aiContainer: {
-    background: "#FCFAFF",
     background: theme?.palette?.editor?.aiInputBackground,
     border: "1px solid #8360FD",
     borderRadius: "6px",
@@ -103,6 +102,7 @@ const Styles = theme => ({
   customSelectWrapper: {
     width: "fit-content",
     marginTop: "4px",
+    position: "absolute",
     "@media only screen and (max-width: 600px)": {
       marginBottom: "4px"
     }

package/dist/Editor/Elements/Button/EditorButton.js

@@ -10,10 +10,14 @@ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../.
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
   const theme = useTheme();
+  const {
+    theme: appTheme
+  } = useEditorContext();
   const {
     attributes,
     element,
@@ -140,8 +144,8 @@ const EditorButton = props => {
           sx: {
             display: "inline-flex",
             color: "rgba(0, 0, 0, 0.54)",
-            borderRadius: '50% !important',
-            border: 'none !important'
+            borderRadius: "50% !important",
+            border: "none !important"
           },
           ...btnProps,
           children: /*#__PURE__*/_jsx(Icon, {
@@ -212,7 +216,7 @@ const EditorButton = props => {
           },
           "& svg": {
             "& path": {
-              stroke: theme.palette.text.primary
+              stroke: appTheme.palette.text.primary
             }
           },
           "& button": {
@@ -277,7 +281,7 @@ const EditorButton = props => {
             right: "-42px",
             stroke: "#fff",
             "& path": {
-              fill: openMoreOptions ? theme.palette.text.blueText : ""
+              fill: openMoreOptions ? appTheme.palette.text.blueText : ""
             }
           },
           onClick: handleMoreBtn,

package/dist/Editor/Elements/Embed/Embed.css

@@ -1,5 +1,5 @@
 .embed {
-  /* width: fit-content; */
+  width: fit-content;
   position: relative;
   margin: 0px;
 }

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, memo } from "react";
+import React, { useEffect, useState } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
@@ -94,7 +94,8 @@ const ImageContent = props => {
     onTouchEnd: onTouchEnd // for mobile
     ,
     "data-path": path.join(","),
-    draggable: false
+    draggable: false,
+    contentEditable: false
   });
 };
 const Image = props => {
@@ -222,7 +223,7 @@ const Image = props => {
   const getWidth = () => {
     if (resizing) {
       return {
-        width: `${size.widthInPercent}%`,
+        width: `${size.width}px`,
         height: objectFit ? `${size.height}px` : "auto"
       };
     } else {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -53,8 +53,7 @@ const VideoContent = props => {
       ...videoSX
     },
     src: embedURL,
-    title: alt,
-    allowFullScreen: true
+    title: alt
   });
 };
 const VideoPlaceholder = props => {
@@ -180,7 +179,7 @@ const Video = ({
   const getWidth = () => {
     if (resizing) {
       return {
-        width: size.widthInPercent ? `${size.widthInPercent}%` : "100%",
+        width: size.width ? `${size.width}px` : "100%",
         height: url ? `${size.height || 370}px` : "auto"
       };
     } else {
@@ -221,6 +220,7 @@ const Video = ({
       alignContent: vertical
     },
     ...element.attr,
+    contentEditable: false,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,

package/dist/Editor/Elements/Form/Form.js

@@ -401,7 +401,6 @@ const Form = props => {
               component: "button",
               onClick: onSubmitClick,
               disabled: loading,
-              contentEditable: false,
               sx: {
                 background: buttonProps?.bgColor || "rgb(30, 75, 122)",
                 borderWidth: "1px",

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -71,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsxs(RadioGroup, {
+          children: /*#__PURE__*/_jsx(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,16 +84,7 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "after",
-              label: "After",
-              onChange: () => {
-                setSchedule("after");
-              },
-              control: /*#__PURE__*/_jsx(Radio, {
-                size: "small"
-              })
-            })]
+            })
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -206,6 +206,31 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
+      case "addSignature":
+        Transforms.insertNodes(editor, [{
+          type: "freegridItem",
+          childType: "signature",
+          children: [{
+            type: "signature",
+            children: [{
+              text: ""
+            }],
+            data: {
+              name: "",
+              email: "",
+              date: ""
+            }
+          }],
+          gridArea: "3 / 1 / 4 / 2",
+          left: 50,
+          marginTop: 0,
+          top: 0,
+          width: 150,
+          height: 130
+        }], {
+          at: [...insertAt]
+        });
+        break;
       case "addImage":
         Transforms.insertNodes(editor, [{
           type: "freegridItem",

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -220,8 +220,10 @@ const FreeGridItem = props => {
     settingsProps: {
       settings: "freegridItem",
       onChange: onChangeSettings,
-      customProps
+      customProps,
+      onlyPopup: true // for signature popup in DnD
     },
+
     style: {
       "--left": `${left || 0}px`,
       "--marginTop": `${marginTop || 0}px`,

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -39,6 +39,10 @@ const FREE_GRID_ELEMENTS = [{
   actionType: "addAppHeader",
   label: "App Header",
   icon: "appHeader"
+}, {
+  actionType: "addSignature",
+  label: "Signature",
+  icon: "signature"
 }];
 const AddElement = props => {
   const {

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -9,6 +9,8 @@ const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
 const embedScriptOptions = ["embedScript", "saveAsTemplate", "close"];
 const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
 const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
+const signatureOptions = ["signatureSettings", "saveAsTemplate", "close"];
+const signOptions = ["removeSign", "saveAsTemplate", "close"];
 const itemOptions = {
   default: commonOptions,
   text: textOptions,
@@ -20,6 +22,8 @@ const itemOptions = {
   section: sectionOptions,
   table: tableOptions,
   embedScript: embedScriptOptions,
-  video: videoOptions
+  video: videoOptions,
+  signature: signatureOptions,
+  sign: signOptions
 };
 export default itemOptions;

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -160,6 +160,43 @@ const useFreeGridStyles = ({
             }
           }
         },
+        "& .fgi_type_signature": {
+          height: "100%",
+          "& .signature-container": {
+            height: "100%",
+            "& .signature-btn-container": {
+              height: "100%",
+              "& button": {
+                width: "100%",
+                height: "100%"
+              }
+            }
+          }
+        },
+        "& .fgi_type_sign": {
+          width: "100%",
+          height: "100%",
+          "& .signature-signed-wrapper": {
+            width: "100%",
+            height: "100%",
+            "& .signature-signed-span": {
+              width: "100%",
+              height: "100%",
+              "& .signed-btn": {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+                "& img": {
+                  width: "100% !important",
+                  maxWidth: "none !important",
+                  height: "70% !important",
+                  flexGrow: 1
+                }
+              }
+            }
+          }
+        },
         "& .fgi_type_box": {
           display: "grid",
           width: "100%",

package/dist/Editor/Elements/Mentions/Mentions.js

@@ -14,10 +14,9 @@ const Mentions = ({
     verticalAlign: "baseline",
     display: "inline-block",
     borderRadius: "4px",
-    backgroundColor: "#2563EB",
+    backgroundColor: "#eee",
     fontSize: "0.9em",
-    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none",
-    color: "#FFF"
+    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none"
   };
   // See if our empty text child has any styling marks applied and apply those
   if (element.children[0].bold) {

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

@@ -24,7 +24,8 @@ const SignaturePopup = props => {
     onSave,
     onClear,
     customProps,
-    className
+    className,
+    onlyPopup
   } = props;
   const {
     readOnly,
@@ -52,6 +53,9 @@ const SignaturePopup = props => {
   };
   const handleClose = () => {
     setOpen(false);
+    if (props.handleClose) {
+      props.handleClose();
+    }
   };
   const handleSave = async () => {
     await customProps?.services("workFlowAction", {
@@ -125,7 +129,7 @@ const SignaturePopup = props => {
     isEmpty = signedData?.signature === "" && signedData?.signedText === "" || signedData?.signedBy === "" || signedData?.signedByEmail === "";
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [onlyPopup ? null : /*#__PURE__*/_jsx("div", {
       className: `signature-btn-container`,
       children: /*#__PURE__*/_jsx(Button, {
         contentEditable: false,
@@ -134,7 +138,7 @@ const SignaturePopup = props => {
       })
     }), /*#__PURE__*/_jsx(Dialog, {
       className: `${className} dialogComp`,
-      open: open,
+      open: onlyPopup || open,
       onClose: handleClose,
       fullWidth: true,
       PaperProps: {

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

@@ -47,7 +47,7 @@ const Signed = props => {
         src: signature,
         alt: "signature",
         style: {
-          width: "200px",
+          maxWidth: "200px",
           height: "auto",
           marginBottom: "4px"
         }

package/dist/Editor/Elements/SimpleText/index.js

@@ -6,6 +6,7 @@ import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const SimpleText = props => {
@@ -47,9 +48,9 @@ const SimpleText = props => {
     sx: classes.root,
     key: `para_${path.join("|")}`
   }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
+    contentEditable: false,
     className: "placeholder-simple-text",
-    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs("span", {
-      className: "placeholder-simple-text-default",
+    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
       children: ["Type ", /*#__PURE__*/_jsx("span", {
         style: {
           backgroundColor: '#F2F6FA',