@flozy/editor 3.9.9 → 4.0.1

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

@@ -3,8 +3,9 @@ const usePopupStyle = theme => ({
     boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
     zIndex: 1300,
     marginBottom: "12px !important",
-    borderRadius: "6px",
-    maxWidth: "96%",
+    border: "1px solid #E0E0E0",
+    borderRadius: "10px",
+    maxWidth: "100%",
     "&.fullscreen": {
       marginBottom: "0px !important",
       "& .papper-wrpr": {
@@ -18,7 +19,7 @@ const usePopupStyle = theme => ({
       backgroundColor: theme?.palette?.editor?.background
     },
     "&.textSettings": {
-      "@media only screen and (max-width: 600px)": {
+      '@media only screen and (max-width: 600px)': {
         margin: "4px !important",
         marginBottom: "54px !important"
       }
@@ -77,7 +78,7 @@ const usePopupStyle = theme => ({
         paddingTop: "4px"
       },
       "@media only screen and (max-width: 599px)": {
-        width: "330px"
+        width: '330px'
       }
     },
     "&.templates": {
@@ -88,7 +89,7 @@ const usePopupStyle = theme => ({
         maxHeight: "fit-content"
       },
       "@media only screen and (max-width: 599px)": {
-        width: "330px"
+        width: '330px'
       }
     },
     "& .headerContainer": {},
@@ -143,7 +144,7 @@ const usePopupStyle = theme => ({
       }
     },
     "@media only screen and (max-width: 599px)": {
-      width: "330px"
+      width: '330px'
     }
   },
   textFormatLabel: {
@@ -154,13 +155,13 @@ const usePopupStyle = theme => ({
     lineHeight: "25px",
     marginTop: "12px",
     marginBottom: "8px",
-    "& .searchContainer": {
+    '& .searchContainer': {
       position: "absolute",
       right: 0,
       zIndex: 3
     },
-    "& .MuiFormControl-root.MuiTextField-root input": {
-      padding: "8px 35px 6px 12px"
+    '& .MuiFormControl-root.MuiTextField-root input': {
+      padding: '8px 35px 6px 12px'
     }
   },
   textFormatField: {
@@ -204,8 +205,7 @@ const usePopupStyle = theme => ({
     fontSize: "14px",
     marginBottom: "5px",
     paddingLeft: "5px",
-    fontWeight: 500,
-    color: "#000000"
+    fontWeight: 500
   },
   templateCard: {
     borderRadius: "10px",
@@ -327,13 +327,8 @@ const usePopupStyle = theme => ({
     }
   },
   defaultBtn: {
-    color: "#2563EB !important",
-    textTransform: "none",
-    textDecoration: "underline",
-    "&.Mui-disabled": {
-      color: "#A0AEC0 !important",
-      textDecoration: "none"
-    }
+    color: "#0F172A",
+    textTransform: "none"
   },
   templateCardBtnGrp: {
     display: "none",
@@ -418,17 +413,15 @@ const usePopupStyle = theme => ({
   colorPopper: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
-      padding: "4px 14px",
-      "@media only screen and (max-width: 600px)": {
+      '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
     }
   },
   fullViewCardMedia: {
-    margin: "5px 0px",
     width: "100%",
     backgroundPosition: "left top",
-    backgroundSize: "100%, auto",
+    backgroundSize: "100% auto",
     zIndex: 1,
     position: "relative",
     "&.fullscreen": {
@@ -443,10 +436,9 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMedia: {
-    margin: "5px 0px",
     width: "100%",
-    height: "40px",
-    backgroundPosition: "center",
+    height: "48px",
+    backgroundPosition: "left top",
     backgroundSize: "contain",
     zIndex: 1,
     position: "relative",
@@ -455,25 +447,26 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
-    padding: '5px',
     position: "relative",
     margin: "8px",
     marginBottom: "0px",
-    '& .img-wrapper': {
-      "&:hover": {
-        padding: '0px 2px 0px 2px',
-        backgroundColor: '#E9F3FE',
-        border: '1px solid #2563EB40',
-        borderRadius: '5px',
-        height: "100%",
-        margin: "0px"
-        // "& .template-card-action": {
-        //   display: "flex",
-        // },
+    "&:hover": {
+      "& .template-card-action": {
+        display: "flex"
       }
+    },
+    "& .img-loader-wrapper": {
+      position: "absolute",
+      width: "12px",
+      height: "12px",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+      zIndex: 0
     }
   },
-
   paperOverrides: {
     "&.MuiPaper-root": {
       background: "transparent",
@@ -531,9 +524,9 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
-      maxHeight: "140px",
+      maxHeight: '140px',
       background: theme?.palette?.editor?.background,
-      "@media only screen and (max-width: 600px)": {
+      '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
     },

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

@@ -14,9 +14,6 @@ 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 { isTextCustomized, saveToTheme } from "../../helper/theme";
-import { useEditorTheme } from "../../hooks/useEditorTheme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -37,6 +34,7 @@ const TextFormat = props => {
   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 || {};
@@ -54,11 +52,6 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-  const {
-    theme,
-    updateTheme
-  } = useEditorTheme();
-  const customized = isTextCustomized(editor);
   const handlePageWidth = width => () => {
     updatePageSettings(editor, {
       ...(pageProps || {}),
@@ -108,49 +101,6 @@ const TextFormat = props => {
     container: true,
     sx: classes.textFormatWrapper,
     children: [/*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        justifyContent: "space-between",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
-            sx: classes.typoLabel,
-            children: "Theme Style"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: theme?.id ? /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            onClick: () => {
-              const {
-                field,
-                theme
-              } = saveToTheme(editor) || {};
-              updateTheme(theme, {
-                action: "ELEMENT_PROPS_CHANGE",
-                fieldName: field
-              });
-            },
-            disabled: !customized,
-            children: "Save to theme"
-          }) : null
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatField,
-        children: /*#__PURE__*/_jsx(SelectTypography, {
-          editor: editor,
-          classes: classes,
-          closeMainPopup: () => {}
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       children: [/*#__PURE__*/_jsxs(Grid, {
@@ -369,7 +319,12 @@ const TextFormat = props => {
         xs: 12,
         className: "typo-icons",
         sx: classes.evenSpace,
-        children: [fontStyle?.map((m, i) => {
+        children: [typo?.map((m, i) => {
+          return /*#__PURE__*/_jsx(BlockButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), fontStyle?.map((m, i) => {
           return /*#__PURE__*/_jsx(MarkButton, {
             editor: editor,
             ...m

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
-import { useSlate } from "slate-react";
+import { useSlate, useFocused } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
@@ -23,6 +23,7 @@ const PopupTool = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();
+  const inFocus = useFocused();
   const {
     selection
   } = editor;
@@ -46,7 +47,7 @@ const PopupTool = props => {
     }
   }, [event, anchorEl]);
   useEffect(() => {
-    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
+    if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
@@ -100,14 +101,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: "6px",
-            border: "1px solid #8360FD"
+            borderRadius: "10px"
           },
           children: /*#__PURE__*/_jsx(MiniTextFormat, {
             editor: editor,

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -28,20 +28,16 @@ export const toolbarGroups = [[{
   type: "dropdown",
   options: [{
     text: "Normal",
-    value: "normal",
-    numVal: "400"
+    value: "normal"
   }, {
     text: "Bold",
-    value: "bold",
-    numVal: "700"
+    value: "bold"
   }, {
     text: "Bolder",
-    value: "bolder",
-    numVal: "700"
+    value: "bolder"
   }, {
     text: "Lighter",
-    value: "lighter",
-    numVal: "100"
+    value: "lighter"
   }],
   icon: FormatBoldIcon,
   width: "100px"
@@ -50,15 +46,13 @@ export const toolbarGroups = [[{
   format: "bold",
   type: "mark",
   title: "Bold",
-  basic: true,
-  themeEnabled: true
+  basic: true
 }, {
   id: 4,
   format: "italic",
   type: "mark",
   title: "Italic",
-  basic: true,
-  themeEnabled: true
+  basic: true
 }, {
   id: 5,
   format: "underline",
@@ -107,42 +101,6 @@ export const toolbarGroups = [[{
   type: "block",
   title: "H3",
   group: "typography"
-}, {
-  id: 39,
-  format: "headingFour",
-  type: "block",
-  title: "H4",
-  group: "typography"
-}, {
-  id: 40,
-  format: "headingFive",
-  type: "block",
-  title: "H5",
-  group: "typography"
-}, {
-  id: 41,
-  format: "headingSix",
-  type: "block",
-  title: "H6",
-  group: "typography"
-}, {
-  id: 42,
-  format: "paragraphOne",
-  type: "block",
-  title: "Paragraph 1",
-  group: "typography"
-}, {
-  id: 43,
-  format: "paragraphTwo",
-  type: "block",
-  title: "Paragraph 2",
-  group: "typography"
-}, {
-  id: 44,
-  format: "paragraphThree",
-  type: "block",
-  title: "Paragraph 3",
-  group: "typography"
 }, {
   id: 14,
   format: "doublequote",

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

@@ -435,156 +435,4 @@ 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/assets/svg/AddTemplateIcon.js

@@ -1,32 +1,29 @@
 import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const AddTemplateIcon = () => {
+const AddElementIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
     width: "17",
-    height: "18",
-    viewBox: "0 0 17 18",
+    height: "16",
+    viewBox: "0 0 17 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M9.21541 2.18999L13.3946 4.15499C14.5987 4.71749 14.5987 5.64749 13.3946 6.20999L9.21541 8.17499C8.74083 8.39999 7.96166 8.39999 7.48708 8.17499L3.30791 6.20999C2.10374 5.64749 2.10374 4.71749 3.30791 4.15499L7.48708 2.18999C7.96166 1.96499 8.74083 1.96499 9.21541 2.18999Z",
-      stroke: "#64748B",
-      strokeWidth: "1.5",
+      d: "M9.17334 1.94688L13.1067 3.69354C14.24 4.19354 14.24 5.02021 13.1067 5.52021L9.17334 7.26688C8.72667 7.46688 7.99334 7.46688 7.54667 7.26688L3.61334 5.52021C2.48 5.02021 2.48 4.19354 3.61334 3.69354L7.54667 1.94688C7.99334 1.74687 8.72667 1.74687 9.17334 1.94688Z",
+      strokeWidth: "1.2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M2.125 8.25C2.125 8.88 2.57125 9.6075 3.11667 9.8625L7.92625 12.1275C8.29458 12.3 8.7125 12.3 9.07375 12.1275L13.8833 9.8625C14.4287 9.6075 14.875 8.88 14.875 8.25",
-      stroke: "#64748B",
-      strokeWidth: "1.5",
+      d: "M2.5 7.3335C2.5 7.8935 2.92 8.54016 3.43333 8.76683L7.96 10.7802C8.30667 10.9335 8.7 10.9335 9.04 10.7802L13.5667 8.76683C14.08 8.54016 14.5 7.8935 14.5 7.3335",
+      strokeWidth: "1.2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M2.125 12C2.125 12.6975 2.51458 13.3275 3.11667 13.6125L7.92625 15.8775C8.29458 16.05 8.7125 16.05 9.07375 15.8775L13.8833 13.6125C14.4854 13.3275 14.875 12.6975 14.875 12",
-      stroke: "#64748B",
-      strokeWidth: "1.5",
+      d: "M2.5 10.6665C2.5 11.2865 2.86667 11.8465 3.43333 12.0998L7.96 14.1132C8.30667 14.2665 8.7 14.2665 9.04 14.1132L13.5667 12.0998C14.1333 11.8465 14.5 11.2865 14.5 10.6665",
+      strokeWidth: "1.2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     })]
   });
 };
-export default AddTemplateIcon;
+export default AddElementIcon;

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

@@ -4,25 +4,22 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const TextIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
     width: "15",
-    height: "16",
-    viewBox: "0 0 15 16",
+    height: "14",
+    viewBox: "0 0 15 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M1.66895 4.9813V3.8438C1.66895 3.12505 2.2502 2.55005 2.9627 2.55005H12.0377C12.7564 2.55005 13.3314 3.1313 13.3314 3.8438V4.9813",
-      stroke: "#64748B",
+      d: "M2.0575 4.18274V3.12107C2.0575 2.45024 2.59999 1.91357 3.265 1.91357H11.735C12.4058 1.91357 12.9425 2.45607 12.9425 3.12107V4.18274",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M7.5 13.4501V3.06885",
-      stroke: "#64748B",
+      d: "M7.5 12.0866V2.39746",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M5.0376 13.45H9.9626",
-      stroke: "#64748B",
+      d: "M5.20166 12.0864H9.79833",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"