@flozy/editor 5.4.4 → 5.4.6

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

@@ -1,15 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
-import { TYPE_LABELS } from "./Constants";
+import { TYPE_ICONS, TYPE_LABELS } from "./Constants";
 import AddOptions from "./AddOptions";
 import FilterProperty from "./FilterProperty";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditProperty = props => {
@@ -125,6 +121,11 @@ const EditProperty = props => {
       children: [/*#__PURE__*/_jsx(FormControlLabel, {
         label: "Field Name",
         labelPlacement: "top",
+        sx: {
+          '& .MuiFormControl-root': {
+            marginBottom: '4px'
+          }
+        },
         control: /*#__PURE__*/_jsx(TextField, {
           size: "small",
           value: edit?.label,
@@ -132,50 +133,77 @@ const EditProperty = props => {
           fullWidth: true,
           placeholder: "Field Name"
         })
-      }), /*#__PURE__*/_jsx(AddOptions, {
-        edit: edit,
-        onUpdate: onUpdate,
-        onEvent: onEvent
-      }), /*#__PURE__*/_jsx(FilterProperty, {
-        edit: edit,
-        onUpdate: onUpdate,
-        onEvent: onEvent
       }), /*#__PURE__*/_jsx(List, {
-        className: "fe-dv-opt-list st sb",
+        className: "fe-dv-opt-list st",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onChangeProperty,
           children: [/*#__PURE__*/_jsx(ListItemText, {
             children: "Type"
           }), /*#__PURE__*/_jsxs(ListItemIcon, {
             sx: {
-              alignItems: "center"
+              display: 'flex',
+              alignItems: "center",
+              gap: 1
             },
-            children: [/*#__PURE__*/_jsx("span", {
+            children: [/*#__PURE__*/_jsx(Box, {
+              sx: {
+                background: "#64748B1F",
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '2px',
+                '& svg': {
+                  width: '16px',
+                  height: '16px'
+                }
+              },
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: `${TYPE_ICONS[edit?.type]}`
+              })
+            }), /*#__PURE__*/_jsx("span", {
               className: "label-tp",
               children: TYPE_LABELS[edit?.type]
-            }), /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})]
+            }), /*#__PURE__*/_jsx(Icon, {
+              icon: 'rightArrow'
+            })]
           })]
         })
+      }), /*#__PURE__*/_jsx(AddOptions, {
+        edit: edit,
+        onUpdate: onUpdate,
+        onEvent: onEvent
+      }), /*#__PURE__*/_jsx(FilterProperty, {
+        edit: edit,
+        onUpdate: onUpdate,
+        onEvent: onEvent
       }), /*#__PURE__*/_jsxs(List, {
         className: "fe-dv-opt-list",
         children: [/*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAction("Visibilty"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: edit?.visible ? /*#__PURE__*/_jsx(VisibilityOffIcon, {}) : /*#__PURE__*/_jsx(VisibilityIcon, {})
+            children: edit?.visible ? /*#__PURE__*/_jsx(Icon, {
+              icon: 'eyeSlash'
+            }) : /*#__PURE__*/_jsx(Icon, {
+              icon: 'eyeIcon'
+            })
           }), /*#__PURE__*/_jsxs(ListItemText, {
             children: [edit?.visible ? "Hide" : "Show", " in View"]
           })]
         }), /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAction("Duplicate"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'duplicateIcon'
+            })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Duplicate Property"
           })]
         }), /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAction("Delete"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'trashIcon'
+            })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Delete Property"
           })]

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

@@ -2,6 +2,7 @@ import React from "react";
 import { List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
 import { FILTER_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";
 const FilterProperty = props => {
@@ -22,13 +23,14 @@ const FilterProperty = props => {
   return /*#__PURE__*/_jsx(List, {
     className: "fe-dv-opt-list mt",
     children: FILTER_TYPES?.map(({
-      Icon,
       ...m
     }, i) => {
       return /*#__PURE__*/_jsxs(ListItemButton, {
         onClick: handleChangeOption(m),
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Icon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: m?.Icon
+          })
         }), /*#__PURE__*/_jsx(ListItemText, {
           primary: m.label
         })]

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { List, ListItemButton, ListItemIcon, ListItemText } 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 PropertyList = props => {
@@ -10,7 +11,6 @@ const PropertyList = props => {
   } = props;
   return /*#__PURE__*/_jsx(List, {
     children: PROPERTY_TYPES?.map(({
-      Icon,
       ...rest
     }, i) => {
       return /*#__PURE__*/_jsxs(ListItemButton, {
@@ -18,7 +18,9 @@ const PropertyList = props => {
         onClick: onSelect(rest),
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
           className: "needBg",
-          children: /*#__PURE__*/_jsx(Icon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: rest?.Icon
+          })
         }), /*#__PURE__*/_jsx(ListItemText, {
           primary: rest?.label
         })]

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

@@ -3,8 +3,9 @@ const useOptionsStyles = (theme, appTheme) => ({
     "& .MuiPaper-root": {
       boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
-      borderRadius: "12px",
+      borderRadius: "20px",
       background: appTheme?.palette?.editor?.tv_pop_bg,
+      fontFamily: 'Inter !important',
       color: appTheme?.palette?.editor?.tv_text_primary,
       [theme?.breakpoints?.between("xs", "md")]: {
         borderRadius: "16px 16px 0px 0px",
@@ -23,27 +24,38 @@ const useOptionsStyles = (theme, appTheme) => ({
         },
         "& svg": {
           width: "16px",
-          height: "16px"
+          height: "16px",
+          '& path': {
+            stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+          }
         }
       },
       "& .MuiInputBase-root": {
         color: appTheme?.palette?.editor?.tv_text_primary,
         fontSize: "14px",
-        background: appTheme?.palette?.editor?.tv_input_bg,
-        borderRadius: "8px"
+        // background: appTheme?.palette?.editor?.tv_input_bg,
+        background: 'transparent',
+        borderRadius: "8px",
+        boxShadow: '0px 4px 18px 0px #0000000D'
+      },
+      '& .MuiInputBase-input': {
+        padding: '0px 12px',
+        height: '34px'
       },
       "& .MuiOutlinedInput-notchedOutline": {
         borderRadius: "8px",
-        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        background: 'transparent'
       },
       "& .MuiList-root": {
         padding: "4px 2px",
+        fontFamily: 'Inter',
         "& .MuiListItemButton-root": {
           color: appTheme?.palette?.editor?.tv_text_primary,
           padding: "2px 4px",
           borderRadius: "8px",
           "& .MuiListItemIcon-root": {
-            minWidth: "38px",
+            minWidth: "26px",
             "&.needBg": {
               minWidth: "20px",
               width: "20px",
@@ -56,17 +68,27 @@ const useOptionsStyles = (theme, appTheme) => ({
             },
             color: `${appTheme?.palette?.editor?.tv_text} !important`,
             "& svg": {
-              width: "16px"
+              width: "16px",
+              '& 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`
+                }
+              }
             }
           }
         }
@@ -79,7 +101,8 @@ const useOptionsStyles = (theme, appTheme) => ({
       "& .sb": {
         borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         marginBottom: "8px",
-        paddingBottom: "8px"
+        // paddingBottom: "8px",
+        paddingBottom: "0px"
       },
       "& .mt": {
         marginTop: "8px"
@@ -119,10 +142,10 @@ const useOptionsStyles = (theme, appTheme) => ({
         fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
         fontSize: "14px"
       },
-      "& .MuiInputBase-input": {
-        height: "32px",
-        padding: "4px 8px"
-      },
+      // "& .MuiInputBase-input": {
+      //   height: "32px",
+      //   padding: "4px 8px",
+      // },
       "& .more-btn-cbs": {
         color: appTheme?.palette?.editor?.tv_text_primary
       }
@@ -133,7 +156,8 @@ const useOptionsStyles = (theme, appTheme) => ({
     width: "253px",
     "& .fe-dv-ap-title": {
       display: "flex",
-      fontWeight: "bold",
+      fontWeight: "600",
+      fontFamily: 'Inter',
       padding: "0px 0px 12px 0px",
       justifyContent: "space-between",
       fontSize: "14px",
@@ -142,7 +166,8 @@ const useOptionsStyles = (theme, appTheme) => ({
       marginBottom: "8px",
       "& span": {
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        fontFamily: 'Inter'
       }
     },
     "& .fe-dv-ap-desc": {
@@ -163,6 +188,11 @@ const useOptionsStyles = (theme, appTheme) => ({
         color: "red",
         marginLeft: "2px",
         marginTop: "4px"
+      },
+      '& svg': {
+        '& path': {
+          stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+        }
       }
     },
     "& .fe-tv-opt-sub-title": {
@@ -171,6 +201,11 @@ const useOptionsStyles = (theme, appTheme) => ({
       justifyContent: "space-between",
       marginBottom: "8px"
     },
+    "& .more-btn-cbs": {
+      color: `${appTheme?.palette?.editor?.closeButtonSvgStroke}`,
+      border: `1.5px solid ${appTheme?.palette?.editor?.closeButtonSvgStroke}`,
+      paddingTop: "10px"
+    },
     [theme?.breakpoints?.between("xs", "md")]: {
       width: "100%"
     }

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

@@ -19,6 +19,9 @@ const useTableStyles = (theme, appTheme) => ({
       "& svg": {
         "& .fillStroke": {
           stroke: appTheme?.palette?.editor?.tv_stroke
+        },
+        '& path': {
+          stroke: appTheme?.palette?.editor?.tv_text
         }
       }
     },
@@ -26,7 +29,8 @@ const useTableStyles = (theme, appTheme) => ({
       height: "40px",
       "& input": {
         color: appTheme?.palette?.editor?.tv_text_primary,
-        background: "transparent"
+        background: "transparent",
+        fontSize: '14px'
       }
     },
     "& th, tr, td": {
@@ -35,15 +39,30 @@ const useTableStyles = (theme, appTheme) => ({
     "& .tv-act-btn": {
       color: appTheme?.palette?.editor?.tv_text,
       textTransform: "none",
+      '& .MuiButton-startIcon': {
+        background: appTheme?.palette?.editor?.tv_ico_bg,
+        borderRadius: '4px',
+        padding: '2px',
+        "& svg": {
+          width: '16px',
+          height: '16px'
+        }
+      },
       "&.ico": {
         "& svg": {
-          color: appTheme?.palette?.editor?.tv_text
+          color: appTheme?.palette?.editor?.tv_text,
+          '& path': {
+            stroke: appTheme?.palette?.editor?.tv_text
+          }
         }
       },
       "&:hover": {
         color: "rgba(37, 99, 235, 1)",
         "& svg": {
-          color: "rgba(37, 99, 235, 1)"
+          color: "rgba(37, 99, 235, 1)",
+          '& path': {
+            stroke: "rgba(37, 99, 235, 1)"
+          }
         }
       }
     },

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

@@ -2,13 +2,13 @@ import React, { useState } from "react";
 import { Box, Button, useTheme } from "@mui/material";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import { useDataView } from "../Providers/DataViewProvider";
 import PropertySettings from "./Options";
 import { PROPERTY_TYPES } from "./Options/Constants";
 import useTableStyles from "./TableStyles";
 import { GridSettingsIcon, GridAddSectionIcon } from "../../../common/iconslist";
 import { useEditorContext } from "../../../hooks/useMouseMove";
+import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -165,7 +165,7 @@ const TableView = props => {
           children: /*#__PURE__*/_jsxs("tr", {
             children: [shownProperties?.map((m, i) => {
               const {
-                Icon
+                Icon: iconType
               } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
               const isSort = sortBy?.key === m.key ? sortBy?.operator : null;
               return /*#__PURE__*/_jsx("th", {
@@ -174,7 +174,9 @@ const TableView = props => {
                 },
                 children: /*#__PURE__*/_jsx(Button, {
                   className: "tv-act-btn la",
-                  startIcon: /*#__PURE__*/_jsx(Icon, {}),
+                  startIcon: /*#__PURE__*/_jsx(Icon, {
+                    icon: iconType
+                  }),
                   endIcon: /*#__PURE__*/_jsx(SortIcon, {
                     sortBy: isSort
                   }),
@@ -210,9 +212,21 @@ const TableView = props => {
       onClick: onAddRow,
       sx: {
         textTransform: "none",
-        justifyContent: "start"
+        justifyContent: "start",
+        color: appTheme?.palette?.editor?.activeColor,
+        '& svg': {
+          width: '18px',
+          height: '18px',
+          strokeWidth: 1.2,
+          '& path': {
+            stroke: appTheme?.palette?.editor?.activeColor
+          }
+        },
+        fontFamily: 'inter'
       },
-      startIcon: /*#__PURE__*/_jsx(AddCircleOutlineIcon, {}),
+      startIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: 'addRounded'
+      }),
       children: "Add new row"
     }) : null, open && !readOnly ? /*#__PURE__*/_jsx(PropertySettings, {
       open: open,

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

@@ -52,6 +52,11 @@ const ViewData = props => {
     component: "tbody",
     ...attributes,
     contentEditable: false,
+    sx: {
+      "& .MuiInputBase-root": {
+        background: "transparent !important"
+      }
+    },
     children: [rows?.map((row, i) => {
       return /*#__PURE__*/_jsx(Box, {
         component: "tr",

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

@@ -85,7 +85,8 @@ const useDataViewStyles = (theme, appTheme) => ({
         width: "fit-content",
         border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         boxShadow: "0px 4px 18px 0px #0000000D",
-        borderRadius: "8px"
+        borderRadius: "8px",
+        minWidth: '148px'
       },
       "& input": {
         paddingBottom: "0px",
@@ -110,7 +111,8 @@ const useDataViewStyles = (theme, appTheme) => ({
       "& .MuiInputBase-input": {
         paddingBottom: "0px",
         fontWeight: "bold",
-        fontSize: "16px"
+        fontSize: "16px",
+        color: appTheme?.palette?.editor?.textFormatTextColor
       },
       [theme?.breakpoints?.between("xs", "md")]: {
         width: "100%",
@@ -130,10 +132,12 @@ const useDataViewStyles = (theme, appTheme) => ({
       width: "150px",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       borderRadius: "8px",
+      fontFamily: 'Inter !important',
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
       "& .MuiButtonBase-root": {
         fontSize: "14px",
+        padding: '6px 8px',
         "& svg": {
           width: "16px",
           height: "16px",
@@ -144,7 +148,10 @@ const useDataViewStyles = (theme, appTheme) => ({
           borderRadius: "8px",
           color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
           "& svg": {
-            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+            '& path': {
+              stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+            }
           }
         }
       }

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

@@ -85,6 +85,13 @@ const TableStyles = theme => {
       "&:hover": {
         background: "#2563EB"
       }
+    },
+    mobileToolDrawer: {
+      "& .customSelectContainer": {
+        border: "none !important",
+        padding: "0px !important",
+        boxShadow: "none !important"
+      }
     }
   };
 };

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

@@ -47,7 +47,8 @@ const MoreTableSettings = props => {
     exandTools,
     handleAction,
     editorTheme,
-    setExpandTools
+    setExpandTools,
+    classes
   } = props;
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   return isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
@@ -56,9 +57,12 @@ const MoreTableSettings = props => {
       setExpandTools(false);
     },
     swipeableDrawer: false,
-    children: /*#__PURE__*/_jsx(ToolTableComponent, {
-      handleAction: handleAction,
-      editorTheme: editorTheme
+    children: /*#__PURE__*/_jsx(Box, {
+      sx: classes.mobileToolDrawer,
+      children: /*#__PURE__*/_jsx(ToolTableComponent, {
+        handleAction: handleAction,
+        editorTheme: editorTheme
+      })
     })
   }) : /*#__PURE__*/_jsx(Popper, {
     open: Boolean(exandTools),
@@ -321,7 +325,8 @@ const Table = props => {
       exandTools: exandTools,
       handleAction: handleAction,
       editorTheme: editorTheme,
-      setExpandTools: setExpandTools
+      setExpandTools: setExpandTools,
+      classes: classes
     }), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
       element: tableProps?.styleProps || {},
       onSave: onSave,

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -139,14 +139,17 @@ const MiniToolbar = props => {
         icon: Icon
       }) => {
         const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
+        const isFocussed = editor?.selection?.anchor?.path;
+        const disableAddElement = type === "addElement" && !isFocussed;
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
           disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""} ${type === "undo" ? canUndo ? "activeUndo" : "disabledUndo" : type === "redo" ? canRedo ? "activeRedo" : "disabledRedo" : ""}`,
+            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""} ${type === "undo" ? canUndo ? "activeUndo" : "disabledUndo" : type === "redo" ? canRedo ? "activeRedo" : "disabledRedo" : ""} ${disableAddElement ? "disableAddElement" : ""}
+                `,
             onClick: handleClick(type),
-            disabled: isDisabled,
+            disabled: isDisabled || disableAddElement,
             children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
               from: "miniToolBar",
               icoBtnType: "mini",

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -79,6 +79,11 @@ const miniToolbarStyles = theme => ({
               stroke: theme?.palette?.editor?.svgStrokeDisabled
             }
           }
+        },
+        "&.disableAddElement": {
+          "& svg": {
+            stroke: theme?.palette?.editor?.svgStrokeDisabled
+          }
         }
       }
     }

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowDownIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M3.95354 9.61984L8.00021 13.6665L12.0469 9.61984",
+      stroke: "#64748B",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M8 2.33322V13.5532",
+      stroke: "#64748B",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default ArrowDownIcon;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowUpIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M12.0465 6.38016L7.99979 2.3335L3.95312 6.38016",
+      stroke: "#64748B",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M8 13.6668V2.44678",
+      stroke: "#64748B",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default ArrowUpIcon;