@flozy/editor 1.4.9 → 1.5.2

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

@@ -1,5 +1,10 @@
-import React, { useState } from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Tabs, Tab, Grid, IconButton, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import {
+// Dialog,
+DialogTitle, DialogContent, DialogActions, Button,
+// Tabs,
+// Tab,
+Grid, IconButton, Typography, Drawer } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
 import commonStyle from "../../commonStyle";
@@ -44,27 +49,31 @@ const StyleContent = props => {
     })
   }, value);
 };
-const StyleTabs = props => {
-  const {
-    value,
-    handleChange,
-    renderTabs
-  } = props;
-  return /*#__PURE__*/_jsx(Tabs, {
-    value: value,
-    onChange: handleChange,
-    variant: "scrollable",
-    scrollButtons: "auto",
-    "aria-label": "scrollable auto tabs example",
-    className: "editorTabs",
-    children: renderTabs.map((m, i) => {
-      return /*#__PURE__*/_jsx(Tab, {
-        value: m.value,
-        label: m.tab
-      }, `editor-stt-tab-${m.value}`);
-    })
-  });
-};
+
+// const StyleTabs = (props) => {
+//   const { value, handleChange, renderTabs } = props;
+//   return (
+//     <Tabs
+//       value={value}
+//       onChange={handleChange}
+//       variant="scrollable"
+//       scrollButtons="auto"
+//       aria-label="scrollable auto tabs example"
+//       className="editorTabs"
+//     >
+//       {renderTabs.map((m, i) => {
+//         return (
+//           <Tab
+//             key={`editor-stt-tab-${m.value}`}
+//             value={m.value}
+//             label={m.tab}
+//           />
+//         );
+//       })}
+//     </Tabs>
+//   );
+// };
+
 const StyleBuilder = props => {
   const {
     title,
@@ -77,16 +86,29 @@ const StyleBuilder = props => {
     // className,
   } = props;
   const [elementProps, setElementProps] = useState(element);
-  const [tab, setTab] = useState(renderTabs[0]?.value);
+  // const [tab, setTab] = useState(renderTabs[0]?.value);
+  const [tab] = useState(renderTabs[0]?.value);
   const tabVal = renderTabs?.find(f => f.value === tab);
   const {
     needActions = true
   } = tabVal || {
     needActions: true
   };
-  const handleChange = (e, newValue) => {
-    setTab(newValue);
-  };
+  useEffect(() => {
+    if (customProps?.onDrawerOpen) {
+      customProps?.onDrawerOpen(true);
+    }
+    return () => {
+      if (customProps?.onDrawerOpen) {
+        customProps?.onDrawerOpen(false);
+      }
+    };
+  }, []);
+
+  // const handleChange = (e, newValue) => {
+  //   setTab(newValue);
+  // };
+
   const onElementPropsChange = data => {
     setElementProps({
       ...elementProps,
@@ -99,21 +121,25 @@ const StyleBuilder = props => {
   const handleClose = () => {
     onClose();
   };
-  return /*#__PURE__*/_jsx(Dialog, {
+  return /*#__PURE__*/_jsx(Drawer, {
     open: true,
     fullWidth: true,
-    className: ` dialogComp`,
+    className: ` dialogComp tools-drawer`,
+    anchor: "right",
+    hideBackdrop: true,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       sx: {
-        p: 3
+        p: 2,
+        width: "350px"
       },
       children: [/*#__PURE__*/_jsx(DialogTitle, {
         sx: {
           p: 0,
           pb: 2
         },
+        className: "optionePopupHeader",
         children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
           justifyContent: "space-between",
@@ -133,22 +159,22 @@ const StyleBuilder = props => {
             })
           })]
         })
-      }), /*#__PURE__*/_jsxs(DialogContent, {
+      }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
-          p: 0
+          p: 0,
+          maxHeight: `${window.innerHeight - 150}px`
+          // padding: "16px",
         },
-        children: [/*#__PURE__*/_jsx(StyleTabs, {
-          renderTabs: renderTabs,
-          value: tab,
-          handleChange: handleChange
-        }), /*#__PURE__*/_jsx(StyleContent, {
-          renderTabs: renderTabs,
-          value: tab,
-          element: elementProps,
-          onChange: onElementPropsChange,
-          customProps: customProps,
-          handleClose: handleClose
-        })]
+        children: renderTabs.map((m, i) => {
+          return /*#__PURE__*/_jsx(StyleContent, {
+            renderTabs: renderTabs,
+            value: m.value,
+            element: elementProps,
+            onChange: onElementPropsChange,
+            customProps: customProps,
+            handleClose: handleClose
+          }, `tab_${m.value}_$${i}`);
+        })
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
         sx: {
           p: 0,

package/dist/Editor/common/Uploader.js

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import { Grid, Button } from "@mui/material";
+import { Grid, Button, Typography } from "@mui/material";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
+import { UploadBtnIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Uploader = props => {
@@ -45,11 +46,59 @@ const Uploader = props => {
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: {
-      pt: 3
+      pt: 1
     },
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
+      children: uploading ? "Uploading..." : ""
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      sx: {
+        fontSize: "14px",
+        fontWeight: "500",
+        marginBottom: "5px"
+      },
+      children: "Upload Image"
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginTop: "12px",
+        width: "100%",
+        backgroundImage: base64 ? `url(${base64})` : "none",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        height: "200px",
+        position: "relative",
+        backgroundColor: "rgba(0,0,0,0.5)",
+        borderRadius: "10px"
+      },
+      children: /*#__PURE__*/_jsx(Grid, {
+        className: "uploadImageSection",
+        children: base64 ? /*#__PURE__*/_jsx(Grid, {
+          className: "removeImageText",
+          onClick: onRemoveBG,
+          children: "REMOVE"
+        }) : /*#__PURE__*/_jsxs(Grid, {
+          className: "uploadImageText",
+          onClick: handleChange,
+          children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+            style: {
+              paddingLeft: "8px"
+            },
+            children: "UPLOAD"
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: {
+        paddingTop: "20px"
+      },
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
         justifyContent: "space-between",
@@ -76,18 +125,6 @@ const Uploader = props => {
           children: "Clear"
         }) : ""]
       })
-    }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        marginTop: "12px",
-        width: "100%",
-        backgroundImage: base64 ? `url(${base64})` : "none",
-        backgroundSize: "contain",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        height: "100px"
-      }
     })]
   });
 };

package/dist/Editor/common/iconslist.js

@@ -880,4 +880,413 @@ export const PageSettings = props => /*#__PURE__*/_jsxs("svg", {
     d: "M9.22082 9.41013H9.3411C9.40267 9.41013 9.45738 9.45007 9.4772 9.50961C9.50102 9.58075 9.52981 9.65038 9.56274 9.7164C9.59069 9.77248 9.58022 9.83939 9.53673 9.88296L9.45187 9.96782C9.36581 10.054 9.36589 10.1942 9.45195 10.2801L9.71978 10.548C9.80586 10.6339 9.94588 10.6339 10.0321 10.5478L10.1168 10.4631C10.1602 10.4197 10.2273 10.4094 10.2834 10.4372C10.3497 10.4702 10.4192 10.499 10.4904 10.5228C10.5498 10.5427 10.5898 10.5974 10.5898 10.6589V10.7792C10.5898 10.901 10.6889 11 10.8107 11H11.1894C11.3111 11 11.4102 10.901 11.4102 10.7792V10.6589C11.4102 10.5974 11.4501 10.5427 11.5096 10.5228C11.5806 10.4991 11.6503 10.4703 11.7165 10.4372C11.7727 10.4094 11.8397 10.4197 11.8832 10.4631L11.9679 10.5478C12.0541 10.634 12.1942 10.6339 12.2801 10.548L12.5481 10.2801C12.5898 10.2384 12.6128 10.1831 12.6128 10.124C12.6128 10.065 12.5898 10.0096 12.5481 9.96782L12.4632 9.88296C12.4197 9.83939 12.4093 9.77248 12.4373 9.71625C12.4706 9.64933 12.4993 9.57984 12.5227 9.50961C12.5425 9.45007 12.5973 9.41013 12.6589 9.41013H12.7792C12.901 9.41013 13 9.31111 13 9.18931V8.81069C13 8.68891 12.9011 8.58987 12.7795 8.58987H12.6588C12.5973 8.58987 12.5425 8.54993 12.5227 8.49039C12.4992 8.42001 12.4704 8.35038 12.4371 8.28345C12.4092 8.22722 12.4196 8.16031 12.4631 8.11674L12.5481 8.03174C12.5898 7.98999 12.6128 7.93467 12.6128 7.87558C12.6128 7.8165 12.5898 7.76117 12.5481 7.71942L12.2801 7.45173C12.1939 7.36537 12.0538 7.36552 11.9679 7.45173L11.883 7.53674C11.8393 7.58045 11.7724 7.59085 11.7163 7.56267C11.6498 7.52951 11.5803 7.50086 11.5096 7.47721C11.4501 7.45746 11.4102 7.40275 11.4102 7.34111V7.22082C11.4102 7.09904 11.3111 7 11.1894 7H10.8107C10.6889 7 10.5898 7.09904 10.5898 7.22082V7.34111C10.5898 7.40275 10.5499 7.45746 10.4904 7.47721C10.4195 7.50086 10.35 7.52965 10.2836 7.56267C10.2276 7.591 10.1607 7.58045 10.117 7.53674L10.0321 7.45173C9.94603 7.36582 9.80586 7.36582 9.71978 7.45173L9.45195 7.71942C9.4102 7.76103 9.38721 7.8165 9.38721 7.87558C9.38721 7.93452 9.4102 7.98999 9.45187 8.03174L9.53689 8.11674C9.58037 8.16031 9.59084 8.22722 9.56281 8.28345C9.5295 8.35037 9.5007 8.42001 9.4772 8.49039C9.45738 8.54993 9.40267 8.58987 9.3411 8.58987H9.22082C9.09903 8.58987 9 8.68891 9 8.81069V9.18931C9 9.31111 9.09903 9.41013 9.22082 9.41013ZM11 8.18517C11.4493 8.18517 11.8148 8.55068 11.8148 9C11.8148 9.44932 11.4493 9.81483 11 9.81483C10.5506 9.81483 10.1851 9.44932 10.1851 9C10.1851 8.55068 10.5506 8.18517 11 8.18517Z",
     fill: "#64748B"
   })]
+});
+export const TextLeftAlign = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M12.47 11.0557H3C2.59 11.0557 2.25 10.7157 2.25 10.3057C2.25 9.89566 2.59 9.55566 3 9.55566H12.47C12.88 9.55566 13.22 9.89566 13.22 10.3057C13.22 10.7157 12.89 11.0557 12.47 11.0557Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M12.47 21.0557H3C2.59 21.0557 2.25 20.7157 2.25 20.3057C2.25 19.8957 2.59 19.5557 3 19.5557H12.47C12.88 19.5557 13.22 19.8957 13.22 20.3057C13.22 20.7157 12.89 21.0557 12.47 21.0557Z",
+    fill: "#292D32"
+  })]
+});
+export const TextCenterAlign = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M16.7417 11.0557H7.26172C6.85172 11.0557 6.51172 10.7157 6.51172 10.3057C6.51172 9.89566 6.85172 9.55566 7.26172 9.55566H16.7317C17.1417 9.55566 17.4817 9.89566 17.4817 10.3057C17.4817 10.7157 17.1517 11.0557 16.7417 11.0557Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M16.7417 21.0557H7.26172C6.85172 21.0557 6.51172 20.7157 6.51172 20.3057C6.51172 19.8957 6.85172 19.5557 7.26172 19.5557H16.7317C17.1417 19.5557 17.4817 19.8957 17.4817 20.3057C17.4817 20.7157 17.1517 21.0557 16.7417 21.0557Z",
+    fill: "#292D32"
+  })]
+});
+export const TextRightAlign = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21.0013 11.0557H11.5312C11.1213 11.0557 10.7812 10.7157 10.7812 10.3057C10.7812 9.89566 11.1213 9.55566 11.5312 9.55566H21.0013C21.4113 9.55566 21.7513 9.89566 21.7513 10.3057C21.7513 10.7157 21.4113 11.0557 21.0013 11.0557Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
+    fill: "#292D32"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21.0013 21.0557H11.5312C11.1213 21.0557 10.7812 20.7157 10.7812 20.3057C10.7812 19.8957 11.1213 19.5557 11.5312 19.5557H21.0013C21.4113 19.5557 21.7513 19.8957 21.7513 20.3057C21.7513 20.7157 21.4113 21.0557 21.0013 21.0557Z",
+    fill: "#292D32"
+  })]
+});
+export const JustifyStartIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M5.10156 20.0557H16.9016C18.4016 20.0557 19.0016 19.4157 19.0016 17.8257V16.7857C19.0016 15.1957 18.4016 14.5557 16.9016 14.5557H5.10156",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M5.10156 6.05566H11.9016C13.4016 6.05566 14.0016 6.69566 14.0016 8.28566V9.32566C14.0016 10.9157 13.4016 11.5557 11.9016 11.5557H5.10156",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M5 2.7959V22.7959",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  })]
+});
+export const JustifyCenterIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M17.4 20.0557H6.6C5.1 20.0557 4.5 19.4157 4.5 17.8257V16.7857C4.5 15.1957 5.1 14.5557 6.6 14.5557H17.4C18.9 14.5557 19.5 15.1957 19.5 16.7857V17.8257C19.5 19.4157 18.9 20.0557 17.4 20.0557Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M15.4 11.5557H8.6C7.1 11.5557 6.5 10.9157 6.5 9.32566V8.28566C6.5 6.69566 7.1 6.05566 8.6 6.05566H15.4C16.9 6.05566 17.5 6.69566 17.5 8.28566V9.32566C17.5 10.9157 16.9 11.5557 15.4 11.5557Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 22.8053V20.4053",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 13.8057V11.8057",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 2.80566V5.49566",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  })]
+});
+export const JustifyEndIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M18.9 20.0557H7.1C5.6 20.0557 5 19.4157 5 17.8257V16.7857C5 15.1957 5.6 14.5557 7.1 14.5557H18.9",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M18.9 6.05566H12.1C10.6 6.05566 10 6.69566 10 8.28566V9.32566C10 10.9157 10.6 11.5557 12.1 11.5557H18.9",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19 2.7959V22.7959",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  })]
+});
+export const AlignStartIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M4.75 5.90527L4.75 17.7053C4.75 19.2053 5.39 19.8053 6.98 19.8053H8.02C9.61 19.8053 10.25 19.2053 10.25 17.7053L10.25 5.90527",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M18.75 5.90527V12.7053C18.75 14.2053 18.11 14.8053 16.52 14.8053H15.48C13.89 14.8053 13.25 14.2053 13.25 12.7053V5.90527",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M22.0117 5.80566L2.01172 5.80566",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  })]
+});
+export const AlignCenterIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M4.75 18.2057L4.75 7.40566C4.75 5.90566 5.39 5.30566 6.98 5.30566L8.02 5.30566C9.61 5.30566 10.25 5.90566 10.25 7.40566L10.25 18.2057C10.25 19.7057 9.61 20.3057 8.02 20.3057H6.98C5.39 20.3057 4.75 19.7057 4.75 18.2057Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M13.25 16.2057L13.25 9.40566C13.25 7.90566 13.89 7.30566 15.48 7.30566L16.52 7.30566C18.11 7.30566 18.75 7.90566 18.75 9.40566V16.2057C18.75 17.7057 18.11 18.3057 16.52 18.3057H15.48C13.89 18.3057 13.25 17.7057 13.25 16.2057Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M1.99844 12.8057H4.39844",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M11 12.8057H13",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M22 12.8057H19.31",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  })]
+});
+export const AlignEndIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "25",
+  viewBox: "0 0 24 25",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M4.75 19.7057V7.90566C4.75 6.40566 5.39 5.80566 6.98 5.80566H8.02C9.61 5.80566 10.25 6.40566 10.25 7.90566V19.7057",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M18.75 19.7057V12.9057C18.75 11.4057 18.11 10.8057 16.52 10.8057H15.48C13.89 10.8057 13.25 11.4057 13.25 12.9057V19.7057",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M22.0117 19.8057H2.01172",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "fillStroke"
+  })]
+});
+export const UploadBtnIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "21",
+  height: "16",
+  viewBox: "0 0 21 16",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("rect", {
+    x: "0.5",
+    y: "0.5",
+    width: "20",
+    height: "14.3462",
+    rx: "7.17308",
+    stroke: "white"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M4.37891 10.0834V8.7508C4.37891 8.57819 4.52511 8.44676 4.64216 8.31992L7.85316 4.84024C7.98427 4.68731 8.22463 4.68731 8.37758 4.81839L10.8467 7.24338C10.9997 7.37446 11.2182 7.37446 11.3711 7.24338L12.3326 6.28212C12.4855 6.12919 12.704 6.15104 12.857 6.28212L15.3261 8.86003C15.3916 8.92557 15.4354 9.01296 15.4354 9.12219V10.0834C15.4354 10.2801 15.2605 10.4548 15.0639 10.4548H4.75037C4.53186 10.4548 4.37891 10.3019 4.37891 10.0834Z",
+    fill: "white"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12.9911 4.68886C13.5341 4.68886 13.9744 4.24871 13.9744 3.70576C13.9744 3.16281 13.5341 2.72266 12.9911 2.72266C12.448 2.72266 12.0078 3.16281 12.0078 3.70576C12.0078 4.24871 12.448 4.68886 12.9911 4.68886Z",
+    fill: "white"
+  })]
+});
+export const TextPlusIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "7",
+  height: "4",
+  viewBox: "0 0 7 4",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M1.08203 3.43359L3.51526 1.00036L5.94849 3.43359",
+    stroke: "#64748B",
+    strokeLinecap: "round"
+  })
+});
+export const TextMinusIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "7",
+  height: "4",
+  viewBox: "0 0 7 4",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M1 0.805664L3.43323 3.2389L5.86646 0.805664",
+    stroke: "#64748B",
+    strokeLinecap: "round"
+  })
+});
+export const DirectionRowIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M16.5832 11.25H3.4165C2.1665 11.25 1.6665 11.7833 1.6665 13.1083V16.475C1.6665 17.8 2.1665 18.3333 3.4165 18.3333H16.5832C17.8332 18.3333 18.3332 17.8 18.3332 16.475V13.1083C18.3332 11.7833 17.8332 11.25 16.5832 11.25Z",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M16.5832 1.66699H3.4165C2.1665 1.66699 1.6665 2.20033 1.6665 3.52533V6.89199C1.6665 8.21699 2.1665 8.75033 3.4165 8.75033H16.5832C17.8332 8.75033 18.3332 8.21699 18.3332 6.89199V3.52533C18.3332 2.20033 17.8332 1.66699 16.5832 1.66699Z",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const DirectionColumIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M8.74984 16.5837V3.41699C8.74984 2.16699 8.2165 1.66699 6.8915 1.66699H3.52484C2.19984 1.66699 1.6665 2.16699 1.6665 3.41699V16.5837C1.6665 17.8337 2.19984 18.3337 3.52484 18.3337H6.8915C8.2165 18.3337 8.74984 17.8337 8.74984 16.5837Z",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M18.3333 16.5837V3.41699C18.3333 2.16699 17.8 1.66699 16.475 1.66699H13.1083C11.7833 1.66699 11.25 2.16699 11.25 3.41699V16.5837C11.25 17.8337 11.7833 18.3337 13.1083 18.3337H16.475C17.8 18.3337 18.3333 17.8337 18.3333 16.5837Z",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const DirectionReverseIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "22",
+  height: "22",
+  viewBox: "0 0 22 22",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M8.25016 20.1663H13.7502C18.3335 20.1663 20.1668 18.333 20.1668 13.7497V8.24967C20.1668 3.66634 18.3335 1.83301 13.7502 1.83301H8.25016C3.66683 1.83301 1.8335 3.66634 1.8335 8.24967V13.7497C1.8335 18.333 3.66683 20.1663 8.25016 20.1663Z",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M15.7207 12.668L12.9341 15.4546",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M6.2793 12.668H15.721",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M6.2793 9.33159L9.06596 6.54492",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M15.721 9.33203H6.2793",
+    stroke: "#64748B",
+    className: "fillStroke",
+    strokeWidth: "1.5",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
 });