@flozy/editor 5.4.4 → 5.4.6

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

@@ -11,11 +11,10 @@ function CustomSelect({
   show,
   btnProps = {}
 }) {
-  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   if (show) {
     return /*#__PURE__*/_jsx(Box, {
       component: "div",
-      sx: !isMobile && classes.customSelectContainer,
+      sx: classes.customSelectContainer,
       className: "customSelectContainer",
       children: options?.map((groupOption, index) => {
         const {

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

@@ -62,7 +62,7 @@ const getNextLine = editor => {
     } = editor;
     const {
       focus
-    } = selection;
+    } = selection || {};
     if (focus?.path?.length > 0) {
       const {
         text = ""
@@ -123,10 +123,10 @@ const updateAnchorEl = (setAnchorEl, editor, openAI, selectedElement) => {
     } = editor || {};
     const isHavingSelection = selection && !Range.isCollapsed(selection) && getSelectedText(editor).trim();
     const caret = isHavingSelection ? getSlateDom(editor, editor.selection) : getNextLineDom(editor);
-    const caretPos = caret?.getBoundingClientRect();
+    const caretPos = caret?.getBoundingClientRect() || {};
     const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
     const sectionEle = selectedElement?.anchorEl || document.querySelector(".ed-section-inner");
-    const selectedSectionRect = sectionEle?.getBoundingClientRect();
+    const selectedSectionRect = sectionEle?.getBoundingClientRect() || {};
     const isAIInputReachTop = caretPos.height + caretPos.y <= editorContainer.y;
     const yValue = isAIInputReachTop ? "-500" : caretPos.y; // -500 is to hide the AI input if the toolbar reached the top
 

package/dist/Editor/Elements/DataView/Layouts/ColumnView.js

@@ -19,12 +19,23 @@ const ColumnView = props => {
   const DataType = DataTypes[property?.type] || DataTypes["text"];
   const anchorRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState(null);
+  const [popperRefresh, setPopperRefresh] = useState(new Date().getTime());
   const open = Boolean(anchorEl);
   const classes = useColumnStyles(theme);
+  const parentRef = useRef(null);
   useEffect(() => {
-    if (anchorRef?.current) {
-      setAnchorEl(anchorRef?.current);
-    }
+    if (!anchorRef?.current) return;
+    setAnchorEl(anchorRef?.current);
+    parentRef.current = anchorRef?.current.closest(".tv-d-wrapper");
+    const resizeObserver = new ResizeObserver(() => {
+      if (parentRef?.current) {
+        setPopperRefresh(new Date().getTime());
+      }
+    });
+    resizeObserver.observe(parentRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, [anchorRef?.current]);
   const handleSelect = id => e => {
     onSelect(id, e.target.checked);
@@ -61,7 +72,7 @@ const ColumnView = props => {
         checked: selected,
         checkedIcon: /*#__PURE__*/_jsx(CheckBoxTwoToneIcon, {})
       })
-    }) : null]
+    }, popperRefresh) : null]
   });
 };
 export default ColumnView;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -34,7 +34,7 @@ export default function Select(props) {
   const {
     value: pValue,
     onChange,
-    options,
+    options: selectOptions,
     multiple = false,
     limitTags = 2,
     placeholder = "",
@@ -42,6 +42,7 @@ export default function Select(props) {
     optionAvatar = false
   } = props;
   const value = Array.isArray(pValue) ? pValue : [];
+  const options = selectOptions?.length ? selectOptions.filter(s => s.value) : [];
   return /*#__PURE__*/_jsx(Autocomplete, {
     disabled: disabled,
     className: "tv-ac-field",

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js

@@ -2,6 +2,7 @@ import React from "react";
 import { MenuItem, Select, useTheme } from "@mui/material";
 import { useEditorContext } from "../../../../../hooks/useMouseMove";
 import useCompStyles from "./styles";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SimpleSelect = props => {
   const theme = useTheme();
@@ -15,11 +16,11 @@ const SimpleSelect = props => {
     handleChange,
     disabled = false
   } = props;
-  console.log(classes);
   return /*#__PURE__*/_jsx(Select, {
     disabled: disabled,
     value: value,
     onChange: handleChange,
+    IconComponent: KeyboardArrowDownRoundedIcon,
     fullWidth: true,
     size: "small",
     MenuProps: {

package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
 import { useDataView } from "../../../Providers/DataViewProvider";
-import DeleteIcon from "@mui/icons-material/Delete";
 import ChooseSort from "./ChooseSort";
 import ChooseField from "./ChooseField";
 import ColumnsList from "../../Options/ColumnsList";
+import Icon from "../../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SortOptions = props => {
@@ -37,16 +37,19 @@ const SortOptions = props => {
   return sort?.length > 0 ? /*#__PURE__*/_jsxs(List, {
     className: "tv-opt-list",
     sx: {
-      p: 0
+      padding: '0px !important'
     },
     children: [sort?.map((m, i) => {
       return /*#__PURE__*/_jsx(ListItem, {
         sx: {
-          justifyContent: "space-between"
+          justifyContent: "space-between",
+          paddingLeft: 0,
+          paddingRight: 0
         },
         children: /*#__PURE__*/_jsxs(Box, {
           sx: {
-            display: "flex"
+            display: "flex",
+            padding: 0
           },
           children: [/*#__PURE__*/_jsx(ChooseField, {
             sort: m,
@@ -61,7 +64,16 @@ const SortOptions = props => {
     }), /*#__PURE__*/_jsxs(ListItemButton, {
       onClick: handleDelete,
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        sx: {
+          minWidth: '25px !important',
+          '& svg': {
+            background: 'transparent !important',
+            padding: '0 !important'
+          }
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: 'trashIcon'
+        })
       }), /*#__PURE__*/_jsx(ListItemText, {
         children: "Delete Sort"
       })]

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

@@ -5,7 +5,8 @@ const useFilterSortStyles = (theme, appTheme) => ({
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
-      borderRadius: "12px",
+      borderRadius: "20px",
+      fontFamily: 'Inter !important',
       [theme?.breakpoints?.between("xs", "md")]: {
         borderRadius: "16px 16px 0px 0px",
         maxHeight: "50%"
@@ -51,18 +52,32 @@ const useFilterSortStyles = (theme, appTheme) => ({
               background: appTheme?.palette?.editor?.tv_ico_bg
             },
             color: `${appTheme?.palette?.editor?.tv_text} !important`,
-            "& svg": {
-              width: "16px"
+            // "& svg": {
+            //   width: "16px",
+            // },
+            '& svg': {
+              width: '14px',
+              height: '14px',
+              '& path': {
+                stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+              }
             }
           },
           "& .MuiTypography-root": {
-            fontSize: "14px"
+            fontSize: "14px",
+            fontFamily: 'Inter'
           },
           "&:hover": {
             background: appTheme?.palette?.editor?.tv_hover_bg,
             color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
             "& .MuiListItemIcon-root": {
-              color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+              color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+              "& svg": {
+                color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+                '& path': {
+                  stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+                }
+              }
             }
           }
         }
@@ -70,7 +85,7 @@ const useFilterSortStyles = (theme, appTheme) => ({
       "& .tv-cf": {
         "& .MuiInputBase-root": {
           color: appTheme?.palette?.editor?.tv_text_primary,
-          background: appTheme?.palette?.editor?.tv_input_bg,
+          // background: appTheme?.palette?.editor?.tv_input_bg,
           borderRadius: "8px",
           "& svg": {
             color: appTheme?.palette?.editor?.tv_text_primary
@@ -80,25 +95,37 @@ const useFilterSortStyles = (theme, appTheme) => ({
     }
   },
   contentWrapper: {
-    padding: "0px",
+    padding: '13px 16px 16px 20px',
     "& .tv-opt-list": {
-      minWidth: "250px"
+      minWidth: "230px",
+      '& .MuiListItemIcon-root': {
+        '& svg': {
+          background: appTheme?.palette?.editor?.tv_ico_bg,
+          padding: '6px',
+          borderRadius: '4px',
+          '& path': {
+            stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      }
     },
     "& .opt-wrpr": {
-      padding: "8px 8px 8px 8px"
+      padding: "8px 0px 0px 0px"
     },
     "& .fe-dv-ap-title": {
       display: "flex",
       fontWeight: "bold",
-      padding: "8px 8px 8px 8px",
       justifyContent: "space-between",
+      fontFamily: 'Inter',
       fontSize: "14px",
       alignItems: "center",
       borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       marginBottom: "0px",
+      padding: "0px 0px 8px 0px",
       "& span": {
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        fontFamily: 'Inter'
       }
     }
   }

package/dist/Editor/Elements/DataView/Layouts/FilterView.js

@@ -3,10 +3,9 @@ import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import FilterSort from "./FilterSort";
 import DeleteIcon from "@mui/icons-material/Delete";
-import SearchIcon from "@mui/icons-material/Search";
-import SwapVertIcon from "@mui/icons-material/SwapVert";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+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 FilterView = props => {
@@ -32,6 +31,9 @@ const FilterView = props => {
   const [toggle, setToggle] = useState(false);
   const open = Boolean(anchorEl);
   const openMore = Boolean(anchorMoreEl);
+  const {
+    theme
+  } = useEditorContext();
   const handleSortClick = e => {
     setAnchorEl(e?.currentTarget);
     setMode({
@@ -99,13 +101,27 @@ const FilterView = props => {
       }) : title || "Untitled"
     }), /*#__PURE__*/_jsxs(Box, {
       className: "tv-fi-wrpr",
+      sx: {
+        alignItems: 'center'
+      },
       children: [/*#__PURE__*/_jsxs(Box, {
         className: `tv-sb mr ${toggle ? "open" : ""}`,
+        sx: {
+          minHeight: '32px'
+        },
         children: [/*#__PURE__*/_jsx(IconButton, {
           type: "button",
+          sx: {
+            '& svg': {
+              width: '14px',
+              height: '14px'
+            }
+          },
           "aria-label": "search",
           onClick: toggleSearch,
-          children: /*#__PURE__*/_jsx(SearchIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "SearchIcon"
+          })
         }), /*#__PURE__*/_jsx(InputBase, {
           sx: {
             paddingBottom: "0px"
@@ -119,9 +135,16 @@ const FilterView = props => {
           onChange: onSearch
         })]
       }), /*#__PURE__*/_jsx(IconButton, {
-        className: `mr ${sort?.length > 0 ? "active" : ""}`,
+        className: ` ${sort?.length > 0 ? "active" : ""}`,
         onClick: handleSortClick,
-        children: /*#__PURE__*/_jsx(SwapVertIcon, {})
+        sx: {
+          '& svg': {
+            strokeWidth: 1.2
+          }
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: 'sortBy'
+        })
       }), /*#__PURE__*/_jsx(FilterSort, {
         open: open,
         anchorEl: anchorEl,
@@ -129,12 +152,19 @@ const FilterView = props => {
         onClose: onClose
       }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
         className: "mr",
+        sx: {
+          '& svg': {
+            fill: theme?.palette?.editor?.tv_stroke
+          }
+        },
         onClick: handleMoreClick,
         children: /*#__PURE__*/_jsx(MoreHorizIcon, {})
       }) : null, selectedRows?.length > 0 && !readOnly ? /*#__PURE__*/_jsx(IconButton, {
         className: "mr",
         onClick: handleDeleteRow,
-        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: 'trashIcon'
+        })
       }) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
         sx: classes.basicMenu,
         className: "tv-basic-menu",
@@ -154,18 +184,28 @@ const FilterView = props => {
         },
         children: [/*#__PURE__*/_jsxs(MenuItem, {
           onClick: onMenuClick("Duplicate"),
-          children: [" ", /*#__PURE__*/_jsx(ContentCopyIcon, {
+          children: [" ", /*#__PURE__*/_jsx(Box, {
             sx: {
-              mr: 1
-            }
-          }), " Duplicate"]
+              marginRight: '5px',
+              display: ' flex',
+              alignItems: 'center'
+            },
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'duplicateIcon'
+            })
+          }), "Duplicate"]
         }), /*#__PURE__*/_jsxs(MenuItem, {
           onClick: onMenuClick("Delete"),
-          children: [" ", /*#__PURE__*/_jsx(DeleteIcon, {
+          children: [" ", /*#__PURE__*/_jsx(Box, {
             sx: {
-              mr: 1
-            }
-          }), " Delete"]
+              marginRight: '5px',
+              display: ' flex',
+              alignItems: 'center'
+            },
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'trashIcon'
+            })
+          }), "Delete"]
         })]
       }) : null]
     })]

package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import { Box, List, ListItemButton, ListItemText, ListItemIcon, TextField, Chip } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import { colors } from "../../../Color Picker/defaultColors";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLORS = colors?.filter(f => !f.includes("linear"));
@@ -66,14 +65,13 @@ const AddOptions = props => {
       children: /*#__PURE__*/_jsxs(ListItemButton, {
         onClick: onAddBox,
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(AddIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'plusIcon'
+          })
         }), /*#__PURE__*/_jsx(ListItemText, {
           primary: "Add Options"
         })]
       })
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "fe-dv-ap-desc",
-      children: "Choose an option or create one"
     }), addBox ? /*#__PURE__*/_jsx(Box, {
       children: /*#__PURE__*/_jsx(TextField, {
         className: "mt",
@@ -100,7 +98,9 @@ const AddOptions = props => {
             sx: {
               justifyContent: "flex-end"
             },
-            children: /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'rightArrow'
+            })
           })]
         }, i);
       })

package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js

@@ -5,6 +5,7 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import AddIcon from "@mui/icons-material/Add";
 import { TYPE_LABELS, PROPERTY_TYPES } from "./Constants";
 import { useDataView } from "../../Providers/DataViewProvider";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -56,13 +57,15 @@ const AllProperties = props => {
         className: "fe-dv-opt-list",
         children: shownProperties?.map((m, i) => {
           const {
-            Icon
+            Icon: iconType
           } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
           return /*#__PURE__*/_jsxs(ListItemButton, {
             onClick: onEditProperty(m),
             children: [/*#__PURE__*/_jsx(ListItemIcon, {
               className: "needBg",
-              children: /*#__PURE__*/_jsx(Icon, {})
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: iconType
+              })
             }), /*#__PURE__*/_jsx(ListItemText, {
               children: m?.label
             }), /*#__PURE__*/_jsx(ListItemIcon, {

package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Box, IconButton } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import PropertyList from "./PropertyList";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChangeProperty = props => {
@@ -34,7 +34,9 @@ const ChangeProperty = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
-          children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'leftArrow'
+          })
         }), "Change Property"]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg br1",

package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { List, ListItemButton, ListItemIcon, ListItemText, Box } from "@mui/material";
 import { PROPERTY_TYPES } from "./Constants";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ColumnsList = props => {
@@ -17,13 +18,15 @@ const ColumnsList = props => {
       className: "tv-opt-list",
       children: properties?.map((m, i) => {
         const {
-          Icon
+          Icon: iconType
         } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
         return /*#__PURE__*/_jsxs(ListItemButton, {
           className: selected?.type === m?.type ? "active" : "",
           onClick: onSelect(m),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Icon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: iconType
+            })
           }), /*#__PURE__*/_jsx(ListItemText, {
             primary: m?.label
           })]

package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js

@@ -1,12 +1,3 @@
-import NotesIcon from "@mui/icons-material/Notes";
-import TagIcon from "@mui/icons-material/Tag";
-import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
-import ChecklistIcon from "@mui/icons-material/Checklist";
-import InsertInvitationIcon from "@mui/icons-material/InsertInvitation";
-import PersonIcon from "@mui/icons-material/Person";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 // import FilterListIcon from "@mui/icons-material/FilterList";
 
 export const TYPE_LABELS = {
@@ -18,6 +9,15 @@ export const TYPE_LABELS = {
   person: "Person",
   check: "Checkbox"
 };
+export const TYPE_ICONS = {
+  text: 'text',
+  number: 'hashtagIcon',
+  select: 'selectRounded',
+  "multi-select": 'check-list-item',
+  date: 'calenderNewIcon',
+  person: 'userIcon',
+  check: 'tickOutline'
+};
 export const PROPERTY_DEFAULTS = {
   text: {
     label: TYPE_LABELS?.text,
@@ -51,43 +51,43 @@ export const PROPERTY_DEFAULTS = {
 export const PROPERTY_TYPES = [{
   type: "text",
   label: TYPE_LABELS.text,
-  Icon: NotesIcon
+  Icon: 'text'
 }, {
   type: "number",
   label: TYPE_LABELS.number,
-  Icon: TagIcon
+  Icon: 'hashtagIcon'
 }, {
   type: "select",
   label: TYPE_LABELS.select,
-  Icon: ArrowDropDownCircleIcon
+  Icon: 'selectRounded'
 }, {
   type: "multi-select",
   label: TYPE_LABELS["multi-select"],
-  Icon: ChecklistIcon
+  Icon: 'check-list-item'
 }, {
   type: "date",
   label: TYPE_LABELS.date,
-  Icon: InsertInvitationIcon
-}, {
-  type: "check",
-  label: TYPE_LABELS.check,
-  Icon: CheckCircleOutlineIcon
+  Icon: 'calenderNewIcon'
 }, {
   type: "person",
   label: TYPE_LABELS.person,
-  Icon: PersonIcon
+  Icon: 'userIcon'
+}, {
+  type: "check",
+  label: TYPE_LABELS.check,
+  Icon: 'tickOutline'
 }];
 export const FILTER_TYPES = [{
   type: "sort",
   operator: "asc",
   label: "Sort Ascending",
   value: "",
-  Icon: ArrowUpwardIcon
+  Icon: 'arrowUp'
 }, {
   type: "sort",
   operator: "desc",
   label: "Sort Descending",
-  Icon: ArrowDownwardIcon
+  Icon: 'arrowDown'
 }
 // {
 //   type: "filter",

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, IconButton, TextField, List, ListItemButton, ListItemIcon, ListItemText, FormControlLabel } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import DeleteIcon from "@mui/icons-material/Delete";
 import ColorButtons from "../../../Color Picker/ColorButtons";
 import ColorPickerStyles from "../../../Color Picker/Styles";
 import { DEFAULT_OPTION_COLORS } from "./Constants";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditOption = props => {
@@ -104,7 +103,9 @@ const EditOption = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
-          children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'leftArrow'
+          })
         }), "Edit Option"]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg",
@@ -146,7 +147,9 @@ const EditOption = props => {
       children: /*#__PURE__*/_jsxs(ListItemButton, {
         onClick: onDeleteOption,
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'trashIcon'
+          })
         }), /*#__PURE__*/_jsx(ListItemText, {
           children: "Delete Option"
         })]