@flozy/editor 9.1.4 → 9.1.6

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

@@ -11,7 +11,7 @@ const useDataViewStyles = (theme, appTheme) => ({
     },
     "& table th": {
       cursor: "pointer",
-      minWidth: "200px"
+      width: "200px"
     },
     "& table, th, td": {
       border: "1px solid black",
@@ -48,7 +48,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         "& .tv-ck-box": {
           "& svg": {
             color: appTheme?.palette?.editor?.tv_border,
-            "& rect": {
+            '& rect': {
               fill: appTheme?.palette?.editor?.tv_chk_box_fill,
               stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
             }
@@ -56,9 +56,9 @@ const useDataViewStyles = (theme, appTheme) => ({
           "&.Mui-checked": {
             "& svg": {
               color: "rgba(37, 99, 235, 1)",
-              "& rect": {
+              '& rect': {
                 fill: appTheme?.palette?.editor?.activeColor,
-                stroke: "none"
+                stroke: 'none'
               }
             }
           }
@@ -94,7 +94,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         boxShadow: "0px 4px 18px 0px #0000000D",
         borderRadius: "8px",
-        minWidth: "148px"
+        minWidth: '148px'
       },
       "& input": {
         paddingBottom: "0px",
@@ -140,12 +140,12 @@ const useDataViewStyles = (theme, appTheme) => ({
       width: "150px",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       borderRadius: "8px",
-      fontFamily: "Inter !important",
+      fontFamily: 'Inter !important',
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
       "& .MuiButtonBase-root": {
         fontSize: "14px",
-        padding: "6px 8px",
+        padding: '6px 8px',
         "& svg": {
           width: "16px",
           height: "16px",
@@ -157,7 +157,7 @@ const useDataViewStyles = (theme, appTheme) => ({
           color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
           "& svg": {
             color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
-            "& path": {
+            '& path': {
               stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
             }
           }

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

@@ -5,7 +5,7 @@ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
-import { LinkIcon } from "../../common/iconslist";
+import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import Icon from "../../common/Icon";
@@ -32,7 +32,7 @@ const ToolBar = ({
       top: "-4px",
       left: topM ? "35px" : "0px",
       margin: "0px",
-      gap: "3px"
+      gap: '3px'
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",

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

@@ -180,6 +180,20 @@ const FreeGrid = props => {
               linkType: "webAddress"
             },
             iconPosition: "start",
+            bgColor: "#2563EB",
+            textColor: "#FFF",
+            borderRadius: {
+              topLeft: 30,
+              topRight: 30,
+              bottomLeft: 30,
+              bottomRight: 30
+            },
+            bannerSpacing: {
+              left: 12,
+              top: 12,
+              right: 12,
+              bottom: 12
+            },
             textAlign: "center",
             label: "Get Started"
           }],

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

@@ -59,8 +59,7 @@ const FreeGridBox = props => {
     delete updateData.children;
     updateData = formatBreakpointValues(element.type, breakpoint, updateData);
     Transforms.setNodes(editor, {
-      ...updateData,
-      [`${breakpoint}_updatedOn`]: new Date().getTime()
+      ...updateData
     }, {
       at: path
     });

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

@@ -59,8 +59,7 @@ const FreeGridItem = props => {
     delete updateData.children;
     updateData = formatBreakpointValues(element.type, breakpoint, updateData);
     Transforms.setNodes(editor, {
-      ...updateData,
-      [`${breakpoint}_updatedOn`]: new Date().getTime()
+      ...updateData
     }, {
       at: path
     });

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

@@ -338,9 +338,6 @@ const useFreeGridStyles = ({
           fontSize: "14px",
           borderRadius: "7px"
         }
-      },
-      "& .remove-resize-styles": {
-        transform: "none !important"
       }
     }
   },

package/dist/Editor/Elements/Grid/GridItem.js

@@ -50,7 +50,8 @@ const GridItemToolbar = props => {
     open: true,
     placement: "top-end",
     sx: classes.popTools,
-    className: "gi-tool-pp hide-popper-on-overlap",
+    className: "gi-tool-pp",
+    disablePortal: true,
     contentEditable: false,
     children: /*#__PURE__*/_jsxs(Box, {
       className: "ico-grp-ss",
@@ -287,7 +288,7 @@ const GridItem = props => {
       ...getBRProps,
       display: "flex",
       flexDirection: flexDirection || "column",
-      background: bgColor,
+      background: bgColor || "transparent",
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
       borderStyle: borderStyle || "solid",

package/dist/Editor/Elements/Link/Link.js

@@ -1,7 +1,7 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { Node, Transforms } from "slate";
-import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Popper, Tooltip } from "@mui/material";
+import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
@@ -11,62 +11,6 @@ import { getLinkType, handleLinkType } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Toolbar = props => {
-  const {
-    urlPath,
-    linkType,
-    showInNewTab,
-    selected,
-    linkRef,
-    onEditLink,
-    editor
-  } = props;
-  const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
-  const navType = getLinkType(linkType, urlPath);
-  const hideOpenLink = navType === "page" || !navType;
-  return selected ? /*#__PURE__*/_jsx(Popper, {
-    anchorEl: linkRef?.current,
-    open: true,
-    placement: "top-start",
-    className: "hide-popper-on-overlap",
-    contentEditable: false,
-    style: {
-      zIndex: 1000
-    },
-    children: /*#__PURE__*/_jsxs(Box, {
-      className: "element-toolbar hr",
-      style: {
-        width: "150px",
-        display: "flex",
-        position: "unset"
-      },
-      component: "div",
-      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)"
-          },
-          ...btnProps,
-          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Edit",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onEditLink,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Remove",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => removeLink(editor),
-          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
-        })
-      })]
-    })
-  }) : null;
-};
 const linkStyles = () => ({
   linkBtn: {
     border: "none",
@@ -96,6 +40,7 @@ const Link = props => {
   } = customProps;
   const editor = useSlateStatic();
   const selected = useSelected();
+  const focused = useFocused();
   const [showInput, setShowInput] = useState(false);
   const [linkData, setLinkData] = useState({
     name: "",
@@ -108,7 +53,6 @@ const Link = props => {
   const showInNewTab = element?.showInNewTab || element?.target;
   const linkType = element?.linkType;
   const classes = linkStyles();
-  const linkRef = useRef(null);
   const updateLink = data => {
     Transforms.setNodes(editor, data, {
       at: path
@@ -133,25 +77,54 @@ const Link = props => {
   const handleClose = () => {
     setShowInput(false);
   };
+  const Toolbar = () => {
+    const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
+    const navType = getLinkType(linkType, urlPath);
+    const hideOpenLink = navType === "page" || !navType;
+    return selected && focused ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
+      contentEditable: false,
+      style: {
+        width: "150px",
+        top: "100%",
+        left: "0px",
+        display: "flex"
+      },
+      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
+        title: "Open",
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "inline-flex",
+            color: "rgba(0, 0, 0, 0.54)"
+          },
+          ...btnProps,
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Edit",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEditLink,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Remove",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => removeLink(editor),
+          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+        })
+      })]
+    }) : null;
+  };
   const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
-    ref: linkRef,
     children: [/*#__PURE__*/_jsx(Box, {
       ...attributes,
       ...element.attr,
       sx: classes.linkBtn,
       ...buttonProps,
       children: children
-    }), /*#__PURE__*/_jsx(Toolbar, {
-      urlPath: urlPath,
-      linkType: linkType,
-      showInNewTab: showInNewTab,
-      selected: selected,
-      linkRef: linkRef,
-      onEditLink: onEditLink,
-      editor: editor
-    }), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
+    }), /*#__PURE__*/_jsx(Toolbar, {}), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: handleClose,
       onSave: ({
         linkType,

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

@@ -5,6 +5,7 @@ import { Box } from "@mui/material";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
+// import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: "inline-flex",
-      alignItems: "center",
+      display: 'inline-flex',
+      alignItems: 'center',
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

package/dist/Editor/Elements/Table/Table.js

@@ -12,11 +12,9 @@ import useTable, { TableProvider, getDefaultTableSelection } from "../../hooks/u
 import AddRowCol from "./AddRowCol";
 import TableTool from "./TableTool";
 import { MoreIcon, SettingsIcon } from "../../assets/svg/TableIcons";
-import { DeleteIcon } from "../../assets/svg/AIIcons";
 import { getSelectedCls } from "../../utils/helper";
 import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const hideRowDragBtns = (hide, dragRowBtnCls) => {
   const rowDragBtns = document.querySelectorAll(`.${dragRowBtnCls}`);
@@ -32,16 +30,14 @@ const ToolTableComponent = props => {
   const {
     updateTableSelection
   } = useTable();
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx(TableTool, {
-      theme: editorTheme,
-      handleToolAction: (type, option) => {
-        handleAction(type, option);
-        if (type === "duplicate") {
-          updateTableSelection(getDefaultTableSelection());
-        }
+  return /*#__PURE__*/_jsx(TableTool, {
+    theme: editorTheme,
+    handleToolAction: (type, option) => {
+      handleAction(type, option);
+      if (type === "duplicate") {
+        updateTableSelection(getDefaultTableSelection());
       }
-    })
+    }
   });
 };
 const MoreTableSettings = props => {
@@ -93,44 +89,34 @@ const ToolBar = props => {
     handleExpand,
     handleAction,
     exandTools,
-    openSetttings,
-    hideTools
+    openSetttings
   } = props;
   const {
     getSelectedCells
   } = useTable();
   const viewTool = selected && !showTool && getSelectedCells()?.length <= 1;
-  return viewTool ? /*#__PURE__*/_jsx(Box, {
+  return viewTool ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     contentEditable: false,
     className: `tableToolBar ${exandTools ? "active" : ""}`,
     sx: classes.tableToolBar,
-    children: !hideTools.includes("settings") ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
-        arrow: true,
-        onClick: () => handleAction("settings"),
-        children: /*#__PURE__*/_jsx(IconButton, {
-          className: getSelectedCls("toolbtn toggle", openSetttings),
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Show Tools",
-        arrow: true,
-        onClick: handleExpand,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          className: getSelectedCls("toolbtn toggle", exandTools),
-          children: /*#__PURE__*/_jsx(MoreIcon, {})
-        })
-      })]
-    }) : /*#__PURE__*/_jsx(Tooltip, {
-      title: "Delete",
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Settings",
       arrow: true,
-      onClick: () => handleAction("delete"),
+      onClick: () => handleAction("settings"),
       children: /*#__PURE__*/_jsx(IconButton, {
-        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        className: getSelectedCls("toolbtn toggle", openSetttings),
+        children: /*#__PURE__*/_jsx(SettingsIcon, {})
       })
-    })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Show Tools",
+      arrow: true,
+      onClick: handleExpand,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: getSelectedCls("toolbtn toggle", exandTools),
+        children: /*#__PURE__*/_jsx(MoreIcon, {})
+      })
+    })]
   }) : null;
 };
 const Table = props => {
@@ -147,8 +133,7 @@ const Table = props => {
   const classes = TableStyles(editorTheme);
   const {
     readOnly,
-    isMobile,
-    hideTools = []
+    isMobile
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const [exandTools, setExpandTools] = useState(null);
@@ -319,12 +304,12 @@ const Table = props => {
           ...attributes,
           children: children
         })
-      }), !hideTools.includes("add_column") && /*#__PURE__*/_jsx(AddRowCol, {
+      }), /*#__PURE__*/_jsx(AddRowCol, {
         ...commonAddBtnProps,
         addType: "col",
         onAdd: addCol
       })]
-    }), !hideTools.includes("add_column") && /*#__PURE__*/_jsx(AddRowCol, {
+    }), /*#__PURE__*/_jsx(AddRowCol, {
       ...commonAddBtnProps,
       addType: "row",
       onAdd: addRow
@@ -335,8 +320,7 @@ const Table = props => {
       handleExpand: handleExpand,
       handleAction: handleAction,
       exandTools: exandTools,
-      openSetttings: openSetttings,
-      hideTools: hideTools
+      openSetttings: openSetttings
     }), /*#__PURE__*/_jsx(MoreTableSettings, {
       exandTools: exandTools,
       handleAction: handleAction,

package/dist/Editor/Elements/Table/TableCell.js

@@ -48,8 +48,7 @@ const TableCell = props => {
     customProps
   } = props;
   const {
-    readOnly,
-    hideTools = []
+    readOnly
   } = customProps;
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const {
@@ -107,8 +106,8 @@ const TableCell = props => {
   const isFirstRow = row === 0;
   const isFirstColumn = column === 0;
   const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
-  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag");
-  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag");
+  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly;
+  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly;
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
   const tableDOM = table.getDOMNode(path, true);
@@ -156,7 +155,7 @@ const TableCell = props => {
   };
   useEffect(() => {
     const currentPath = path?.toString();
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       if (tableResizing === currentPath) {
         setTableResizing(null);
 
@@ -172,6 +171,7 @@ const TableCell = props => {
     if (resizing) {
       setTableResizing(currentPath);
     }
+    return () => clearTimeout(timeoutId);
   }, [resizing]);
   const onMouseEnter = path => {
     setHoverPath(path);

package/dist/Editor/Elements/Title/title.js

@@ -1,24 +1,18 @@
-import React from "react";
-import { Text } from "slate";
+import React, { useEffect, useState } from "react";
+import { Editor } from "slate";
+import { useSlate } from "slate-react";
+import { getNodeText } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
-const isEmptyTextNode = node => {
-  if (Text.isText(node)) {
-    return !node.text.trim();
-  }
-  return false;
-};
 const Title = props => {
   const {
-    element,
     attributes,
     children,
+    element,
     customProps
   } = props;
-  const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
+  useDetectExitFromTitle(element, customProps?.getTitleSaveData);
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
-    placeholder: "Title",
-    className: `content-editable ${isEmpty}`,
     style: {
       fontWeight: "bold",
       fontSize: "20px"
@@ -26,4 +20,28 @@ const Title = props => {
     children: children
   });
 };
-export default Title;
+export default Title;
+const useDetectExitFromTitle = (titleNode, onSaveTitle) => {
+  const editor = useSlate();
+  const [wasInsideTitle, setWasInsideTitle] = useState(false);
+  useEffect(() => {
+    if (!editor.selection) return;
+
+    // Get the current node where the cursor is
+    const [nodeEntry] = Editor.nodes(editor, {
+      at: editor.selection,
+      match: n => n.type === "title"
+    });
+    if (nodeEntry) {
+      setWasInsideTitle(true); // User was inside the title
+    } else if (wasInsideTitle) {
+      // User exited the title node
+      const text = getNodeText(titleNode) || "";
+      if (text?.trim() && text !== "Untitled" && onSaveTitle) {
+        onSaveTitle(text);
+      }
+      setWasInsideTitle(false);
+    }
+  }, [editor.selection]);
+  return null;
+};

package/dist/Editor/Elements/Variables/Style.js

@@ -1,4 +1,4 @@
-const VariableStyles = theme => ({
+const VariableStyles = () => ({
   variablesItem: {
     color: "#2563EB",
     background: "#EEEEEE"
@@ -37,34 +37,8 @@ const VariableStyles = theme => ({
     "& .MuiMenuItem-root": {
       color: "#64748B"
     },
-    "& .MuiPaper-root": {
-      borderRadius: '8px',
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      marginTop: '5px',
-      "@media only screen and (max-width: 599px)": {
-        padding: '10px 0px'
-      }
-    },
-    "& .MuiList-root": {
-      padding: '0px'
-    },
-    "& .MuiButtonBase-root": {
-      margin: '6px',
-      borderRadius: '8px',
-      padding: '6px 14px',
-      fontSize: '14px',
-      fontWeight: '400',
-      color: theme?.palette?.editor?.deletePopUpButtonTextColor,
-      "&:hover": {
-        background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
-      },
-      "@media only screen and (max-width: 599px)": {
-        minHeight: '30px',
-        margin: '0px 6px'
-      }
-    },
     "& .Mui-selected": {
-      backgroundColor: 'unset !important'
+      backgroundColor: "rgba(0, 0, 0, 0.04) !important"
     }
   }
 });

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,15 +3,11 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
-import { useEditorContext } from "../../hooks/useMouseMove";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
-  const {
-    theme
-  } = useEditorContext();
-  const classes = VariableStyles(theme);
+  const classes = VariableStyles();
   const editor = useSlateStatic();
   const {
     options
@@ -28,14 +24,13 @@ const VariableButton = props => {
     value: "",
     sx: classes.variableBtn,
     onChange: updateVariable,
-    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
     MenuProps: {
       sx: classes.variableMenuItem,
       PaperProps: {
         style: {
           maxHeight: 300,
-          overflowY: "auto",
-          transformOrigin: 'top left'
+          overflowY: "auto"
         },
         sx: {
           "&::-webkit-scrollbar-track": {
@@ -45,14 +40,6 @@ const VariableButton = props => {
             borderRadius: "16px"
           }
         }
-      },
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'right'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'right'
       }
     },
     children: [/*#__PURE__*/_jsx(MenuItem, {