@flozy/editor 4.9.1 → 4.9.3

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

@@ -3,7 +3,6 @@ import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
 import { useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
-import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
 import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
@@ -30,7 +29,6 @@ const PopupTool = props => {
   } = editor;
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
-  const table = new TableUtil(editor);
   const [size] = useWindowResize();
   const {
     selectedElement
@@ -61,12 +59,12 @@ const PopupTool = props => {
 
     if (userStoppedSelection && anchorEl && !open) {
       // for table cell selection
-      const isCellsSelected = table.isCellSelected(editor.selection);
-      if (!isCellsSelected) {
-        setOpen(true);
-        setPopupType("textFormat");
-        setIsTextSelected(true);
-      }
+      // const isCellsSelected = table.isCellSelected(editor.selection);
+      // if (!isCellsSelected) {
+      setOpen(true);
+      setPopupType("textFormat");
+      setIsTextSelected(true);
+      // }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");

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

@@ -8,30 +8,97 @@ const DocsIcon = props => {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M8.32593 1.07031V4.26079C8.32593 4.47233 8.41151 4.67521 8.56385 4.82479C8.71619 4.97437 8.92281 5.05841 9.13825 5.05841H12.3875",
-      stroke: "#778599",
+      d: "M8.07324 1V4.14286C8.07324 4.35124 8.15602 4.55109 8.30337 4.69844C8.45072 4.84579 8.65057 4.92857 8.85896 4.92857H12.0018",
+      stroke: "url(#paint0_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M10.7626 15.4275H2.63941C2.20853 15.4275 1.7953 15.2594 1.49062 14.9602C1.18594 14.6611 1.01477 14.2553 1.01477 13.8322V2.66555C1.01477 2.24247 1.18594 1.83671 1.49062 1.53755C1.7953 1.23838 2.20853 1.07031 2.63941 1.07031H8.32567L12.3873 5.05841V13.8322C12.3873 14.2553 12.2161 14.6611 11.9114 14.9602C11.6067 15.2594 11.1935 15.4275 10.7626 15.4275Z",
-      stroke: "#778599",
+      d: "M10.4286 15.1429H2.57143C2.15466 15.1429 1.75496 14.9773 1.46026 14.6826C1.16556 14.3879 1 13.9882 1 13.5714V2.57143C1 2.15466 1.16556 1.75496 1.46026 1.46026C1.75496 1.16556 2.15466 1 2.57143 1H8.07143L12 4.92857V13.5714C12 13.9882 11.8344 14.3879 11.5397 14.6826C11.245 14.9773 10.8453 15.1429 10.4286 15.1429Z",
+      stroke: "url(#paint1_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M4.26416 5.85547H5.07648",
-      stroke: "#778599",
+      d: "M4.14014 5.71289H4.92585",
+      stroke: "url(#paint2_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M4.26416 9.04688H9.13809",
-      stroke: "#778599",
+      d: "M4.14014 8.85742H8.85442",
+      stroke: "url(#paint3_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M4.26416 12.2383H9.13809",
-      stroke: "#778599",
+      d: "M4.14014 12H8.85442",
+      stroke: "url(#paint4_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint0_linear_6885_49189",
+        x1: "10.0375",
+        y1: "1",
+        x2: "10.0375",
+        y2: "4.92857",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint1_linear_6885_49189",
+        x1: "6.5",
+        y1: "1",
+        x2: "6.5",
+        y2: "15.1429",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint2_linear_6885_49189",
+        x1: "4.53299",
+        y1: "5.71289",
+        x2: "4.53299",
+        y2: "6.71289",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint3_linear_6885_49189",
+        x1: "6.49728",
+        y1: "8.85742",
+        x2: "6.49728",
+        y2: "9.85742",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint4_linear_6885_49189",
+        x1: "6.49728",
+        y1: "12",
+        x2: "6.49728",
+        y2: "13",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      })]
     })]
   });
 };

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

@@ -0,0 +1,220 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function PaintIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M6.42594 16.4984L2.75011 12.8226C1.52177 11.5943 1.52177 10.3751 2.75011 9.14676L8.87344 3.02344L15.6109 9.76097C15.9501 10.1001 15.9501 10.6501 15.6109 10.9893L10.0926 16.5076C8.88261 17.7176 7.65427 17.7176 6.42594 16.4984Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7.65405 1.78906L8.88239 3.01736",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M1.89746 10.9253L15.7575 10.3203",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M2.75 20.168H14.6667",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M17.2791 13.75C17.2791 13.75 15.5833 15.5925 15.5833 16.72C15.5833 17.655 16.3441 18.4158 17.2791 18.4158C18.2141 18.4158 18.9749 17.655 18.9749 16.72C18.9749 15.5925 17.2791 13.75 17.2791 13.75Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function DuplicateIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "19",
+    height: "19",
+    viewBox: "0 0 19 19",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M12.6666 10.2112V13.5362C12.6666 16.307 11.5583 17.4154 8.78742 17.4154H5.46242C2.69159 17.4154 1.58325 16.307 1.58325 13.5362V10.2112C1.58325 7.44036 2.69159 6.33203 5.46242 6.33203H8.78742C11.5583 6.33203 12.6666 7.44036 12.6666 10.2112Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M17.4166 5.4612V8.7862C17.4166 11.557 16.3083 12.6654 13.5374 12.6654H12.6666V10.2112C12.6666 7.44036 11.5583 6.33203 8.78742 6.33203H6.33325V5.4612C6.33325 2.69036 7.44158 1.58203 10.2124 1.58203H13.5374C16.3083 1.58203 17.4166 2.69036 17.4166 5.4612Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function AboveArrow() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M16.5642 8.77344L11 3.20927L5.43588 8.77344",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M11 18.793L11 3.36547",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function BelowArrow() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M16.5642 13.2266L11 18.7907L5.43588 13.2266",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M11 3.20703L11 18.6345",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function RightArrow() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M13.2275 16.5625L18.7917 10.9983L13.2275 5.43417",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M3.20825 11H18.6358",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function LeftArrow() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M8.77246 16.5625L3.20829 10.9983L8.77246 5.43417",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M18.7917 11L3.36425 11",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function SettingsIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M1.66675 10.7339V9.26718C1.66675 8.40052 2.37508 7.68385 3.25008 7.68385C4.75841 7.68385 5.37508 6.61718 4.61675 5.30885C4.18341 4.55885 4.44175 3.58385 5.20008 3.15052L6.64175 2.32552C7.30008 1.93385 8.15008 2.16718 8.54175 2.82552L8.63341 2.98385C9.38341 4.29218 10.6167 4.29218 11.3751 2.98385L11.4667 2.82552C11.8584 2.16718 12.7084 1.93385 13.3667 2.32552L14.8084 3.15052C15.5667 3.58385 15.8251 4.55885 15.3917 5.30885C14.6334 6.61718 15.2501 7.68385 16.7584 7.68385C17.6251 7.68385 18.3417 8.39218 18.3417 9.26718V10.7339C18.3417 11.6005 17.6334 12.3172 16.7584 12.3172C15.2501 12.3172 14.6334 13.3838 15.3917 14.6922C15.8251 15.4505 15.5667 16.4172 14.8084 16.8505L13.3667 17.6755C12.7084 18.0672 11.8584 17.8339 11.4667 17.1755L11.3751 17.0172C10.6251 15.7089 9.39175 15.7089 8.63341 17.0172L8.54175 17.1755C8.15008 17.8339 7.30008 18.0672 6.64175 17.6755L5.20008 16.8505C4.44175 16.4172 4.18341 15.4422 4.61675 14.6922C5.37508 13.3838 4.75841 12.3172 3.25008 12.3172C2.37508 12.3172 1.66675 11.6005 1.66675 10.7339Z",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function MoreIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "18",
+    height: "4",
+    viewBox: "0 0 18 4",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9.99846 2.00034C9.99846 1.44825 9.55081 1.00069 8.99862 1.00069C8.44642 1.00069 7.99878 1.44825 7.99878 2.00034C7.99878 2.55244 8.44642 3 8.99862 3C9.55081 3 9.99846 2.55244 9.99846 2.00034Z",
+      fill: "#0F172A",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M16.9972 2.00034C16.9972 1.44825 16.5496 1.00069 15.9974 1.00069C15.4452 1.00069 14.9976 1.44825 14.9976 2.00034C14.9976 2.55244 15.4452 3 15.9974 3C16.5496 3 16.9972 2.55244 16.9972 2.00034Z",
+      fill: "#0F172A",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M2.99968 2.00034C2.99968 1.44825 2.55203 1.00069 1.99984 1.00069C1.44764 1.00069 1 1.44825 1 2.00034C1 2.55244 1.44764 3 1.99984 3C2.55203 3 2.99968 2.55244 2.99968 2.00034Z",
+      fill: "#0F172A",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}

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

@@ -9,12 +9,12 @@ const UserIcon = props => {
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M6 6C7.38071 6 8.5 4.88071 8.5 3.5C8.5 2.11929 7.38071 1 6 1C4.61929 1 3.5 2.11929 3.5 3.5C3.5 4.88071 4.61929 6 6 6Z",
-      stroke: "#84818A",
+      stroke: "#64748B",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M10.295 11C10.295 9.065 8.36995 7.5 5.99995 7.5C3.62995 7.5 1.70496 9.065 1.70496 11",
-      stroke: "#84818A",
+      stroke: "#64748B",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     })]

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -5,6 +5,7 @@ import { StyleContent } from "../../../StyleBuilder";
 import { formStyle } from "../../../StyleBuilder/formStyle";
 import { ReactEditor } from "slate-react";
 import { ExpandMoreOutlined } from "@mui/icons-material";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormSettings = props => {
@@ -20,6 +21,9 @@ const FormSettings = props => {
   const {
     hideTools
   } = customProps || {};
+  const {
+    theme
+  } = useEditorContext();
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -58,6 +62,17 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
+            "& .MuiAccordionSummary-root": {
+              flexDirection: "row-reverse",
+              "& .MuiSvgIcon-root": {
+                color: theme?.palette?.primary?.main
+              },
+              "& .Mui-expanded": {
+                "& .MuiSvgIcon-root": {
+                  color: theme?.palette?.text?.blueText
+                }
+              }
+            },
             padding: "0px",
             "&.Mui-expanded": {
               margin: "0"
@@ -85,7 +100,7 @@ const FormSettings = props => {
                 padding: "0px"
               },
               children: /*#__PURE__*/_jsx(Typography, {
-                variant: "h3",
+                variant: "body1",
                 className: "settingsHeader",
                 color: "primary",
                 style: {
@@ -99,41 +114,15 @@ const FormSettings = props => {
                 padding: "5px"
               },
               children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
-                return /*#__PURE__*/_jsx(ThemeProvider, {
-                  theme: muiTheme,
-                  children: /*#__PURE__*/_jsxs(Accordion, {
-                    defaultExpanded: true,
-                    children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                      expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-                      sx: {
-                        padding: "0px"
-                      },
-                      children: /*#__PURE__*/_jsx(Typography, {
-                        variant: "h3",
-                        className: "settingsHeader",
-                        color: "primary",
-                        style: {
-                          fontSize: "14px !important",
-                          fontWeight: "400"
-                        },
-                        children: field?.tab
-                      })
-                    }), /*#__PURE__*/_jsx(AccordionDetails, {
-                      sx: {
-                        padding: "0px"
-                      },
-                      children: /*#__PURE__*/_jsx(StyleContent, {
-                        renderTabs: [field],
-                        value: field.value,
-                        element: element,
-                        onChange: onChange,
-                        customElement: element?.children?.[0] || null,
-                        customProps: customProps,
-                        handleClose: handleClose
-                      }, `tab_${field.value}_${index}`)
-                    })]
-                  }, `accordion_${index}`)
-                }, index);
+                return /*#__PURE__*/_jsx(StyleContent, {
+                  renderTabs: [field],
+                  value: field.value,
+                  element: element,
+                  onChange: onChange,
+                  customElement: element?.children?.[0] || null,
+                  customProps: customProps,
+                  handleClose: handleClose
+                }, `tab_${field.value}_${index}`);
               })
             })]
           }, `accordion_${i}`)
@@ -146,10 +135,10 @@ const FormSettings = props => {
             children: [/*#__PURE__*/_jsx(AccordionSummary, {
               expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
               sx: {
-                padding: "0px"
+                padding: "5px"
               },
               children: /*#__PURE__*/_jsx(Typography, {
-                variant: "h3",
+                variant: "body1",
                 className: "settingsHeader",
                 color: "primary",
                 style: {

package/dist/Editor/common/StyleBuilder/embedVideoStyle.js

@@ -23,7 +23,7 @@ const embedVideoStyle = [{
       value: "9 / 16"
     }, {
       text: "Custom",
-      value: ""
+      value: "custom"
     }],
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

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

@@ -5,27 +5,10 @@ import CloseIcon from "@mui/icons-material/Close";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { ThemeProvider } from "@mui/material/styles";
-import { ExpandMoreOutlined, Height } from "@mui/icons-material";
+import { ExpandMoreOutlined, ExpandMoreSharp } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const muiTheme = createTheme({
-  components: {
-    MuiAccordion: {
-      styleOverrides: {
-        root: {
-          padding: "0px",
-          "&.Mui-expanded": {
-            margin: "0"
-          }
-        }
-      },
-      defaultProps: {
-        elevation: 0
-      }
-    }
-  }
-});
 export const StyleContent = props => {
   const {
     value,
@@ -95,6 +78,34 @@ const StyleBuilder = props => {
   const {
     hideTools
   } = customProps || {};
+  const muiTheme = createTheme({
+    components: {
+      MuiAccordion: {
+        styleOverrides: {
+          root: {
+            "& .MuiAccordionSummary-root": {
+              flexDirection: "row-reverse",
+              "& .MuiSvgIcon-root": {
+                color: theme?.palette?.primary?.main
+              },
+              "& .Mui-expanded": {
+                "& .MuiSvgIcon-root": {
+                  color: theme?.palette?.text?.blueText
+                }
+              }
+            },
+            padding: "0px",
+            "&.Mui-expanded": {
+              margin: "0"
+            }
+          }
+        },
+        defaultProps: {
+          elevation: 0
+        }
+      }
+    }
+  });
   useEffect(() => {
     if (customProps?.onDrawerOpen) {
       customProps?.onDrawerOpen(true);
@@ -171,17 +182,17 @@ const StyleBuilder = props => {
               children: /*#__PURE__*/_jsxs(Accordion, {
                 defaultExpanded: true,
                 children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreSharp, {}),
                   sx: {
                     padding: "0px"
                   },
                   children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "h3",
+                    variant: "body1",
                     className: "settingsHeader",
                     color: "primary",
                     style: {
                       fontSize: "14px !important",
-                      fontWeight: "400"
+                      fontWeight: "400 !important"
                     },
                     children: m?.tab
                   })
@@ -190,40 +201,14 @@ const StyleBuilder = props => {
                     padding: "5px"
                   },
                   children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
-                    return /*#__PURE__*/_jsx(ThemeProvider, {
-                      theme: muiTheme,
-                      children: /*#__PURE__*/_jsxs(Accordion, {
-                        defaultExpanded: true,
-                        children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                          expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-                          sx: {
-                            padding: "0px"
-                          },
-                          children: /*#__PURE__*/_jsx(Typography, {
-                            variant: "h3",
-                            className: "settingsHeader",
-                            color: "primary",
-                            style: {
-                              fontSize: "14px !important",
-                              fontWeight: "400"
-                            },
-                            children: field?.tab
-                          })
-                        }), /*#__PURE__*/_jsx(AccordionDetails, {
-                          sx: {
-                            padding: "0px"
-                          },
-                          children: /*#__PURE__*/_jsx(StyleContent, {
-                            renderTabs: [field],
-                            value: field.value,
-                            element: elementProps,
-                            onChange: onElementPropsChange,
-                            customProps: customProps,
-                            handleClose: handleClose
-                          }, `tab_${field.value}_${index}`)
-                        })]
-                      }, `accordion_${index}`)
-                    }, index);
+                    return /*#__PURE__*/_jsx(StyleContent, {
+                      renderTabs: [field],
+                      value: field.value,
+                      element: elementProps,
+                      onChange: onElementPropsChange,
+                      customProps: customProps,
+                      handleClose: handleClose
+                    }, `tab_${field.value}_${index}`);
                   })
                 })]
               }, `accordion_${i}`)
@@ -239,7 +224,7 @@ const StyleBuilder = props => {
                     padding: "0px"
                   },
                   children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "h3",
+                    variant: "body1",
                     className: "settingsHeader",
                     color: "primary",
                     style: {
@@ -250,7 +235,7 @@ const StyleBuilder = props => {
                   })
                 }), /*#__PURE__*/_jsx(AccordionDetails, {
                   sx: {
-                    padding: "0px"
+                    padding: "5px"
                   },
                   children: /*#__PURE__*/_jsx(StyleContent, {
                     renderTabs: renderTabs,
@@ -269,6 +254,7 @@ const StyleBuilder = props => {
         sx: {
           p: 0,
           pt: 2,
+          pl: 1,
           justifyContent: "space-between"
         },
         children: [onDelete ? /*#__PURE__*/_jsx(Button, {