@flozy/editor 5.5.9 → 5.6.0

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

@@ -2,21 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SettingsIcon = props => {
   return /*#__PURE__*/_jsxs("svg", {
-    width: "17",
+    width: "18",
     height: "18",
-    viewBox: "0 0 17 18",
+    viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M8.5 11.125C9.6736 11.125 10.625 10.1736 10.625 9C10.625 7.82639 9.6736 6.875 8.5 6.875C7.32639 6.875 6.375 7.82639 6.375 9C6.375 10.1736 7.32639 11.125 8.5 11.125Z",
+      d: "M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z",
       stroke: "#64748B",
       strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M1.4165 9.62343V8.37676C1.4165 7.6401 2.01859 7.03093 2.76234 7.03093C4.04442 7.03093 4.56859 6.12426 3.924 5.01218C3.55567 4.37468 3.77525 3.54593 4.41984 3.1776L5.64525 2.47635C6.20484 2.14343 6.92734 2.34176 7.26025 2.90135L7.33817 3.03593C7.97567 4.14801 9.024 4.14801 9.66859 3.03593L9.7465 2.90135C10.0794 2.34176 10.8019 2.14343 11.3615 2.47635L12.5869 3.1776C13.2315 3.54593 13.4511 4.37468 13.0828 5.01218C12.4382 6.12426 12.9623 7.03093 14.2444 7.03093C14.9811 7.03093 15.5903 7.63301 15.5903 8.37676V9.62343C15.5903 10.3601 14.9882 10.9693 14.2444 10.9693C12.9623 10.9693 12.4382 11.8759 13.0828 12.988C13.4511 13.6326 13.2315 14.4543 12.5869 14.8226L11.3615 15.5238C10.8019 15.8568 10.0794 15.6584 9.7465 15.0988L9.66859 14.9643C9.03109 13.8522 7.98275 13.8522 7.33817 14.9643L7.26025 15.0988C6.92734 15.6584 6.20484 15.8568 5.64525 15.5238L4.41984 14.8226C3.77525 14.4543 3.55567 13.6255 3.924 12.988C4.56859 11.8759 4.04442 10.9693 2.76234 10.9693C2.01859 10.9693 1.4165 10.3601 1.4165 9.62343Z",
+      d: "M1.5 9.6591V8.3391C1.5 7.5591 2.1375 6.9141 2.925 6.9141C4.2825 6.9141 4.8375 5.9541 4.155 4.7766C3.765 4.1016 3.9975 3.2241 4.68 2.8341L5.9775 2.0916C6.57 1.7391 7.335 1.9491 7.6875 2.5416L7.77 2.6841C8.445 3.8616 9.555 3.8616 10.2375 2.6841L10.32 2.5416C10.6725 1.9491 11.4375 1.7391 12.03 2.0916L13.3275 2.8341C14.01 3.2241 14.2425 4.1016 13.8525 4.7766C13.17 5.9541 13.725 6.9141 15.0825 6.9141C15.8625 6.9141 16.5075 7.5516 16.5075 8.3391V9.6591C16.5075 10.4391 15.87 11.0841 15.0825 11.0841C13.725 11.0841 13.17 12.0441 13.8525 13.2216C14.2425 13.9041 14.01 14.7741 13.3275 15.1641L12.03 15.9066C11.4375 16.2591 10.6725 16.0491 10.32 15.4566L10.2375 15.3141C9.5625 14.1366 8.4525 14.1366 7.77 15.3141L7.6875 15.4566C7.335 16.0491 6.57 16.2591 5.9775 15.9066L4.68 15.1641C3.9975 14.7741 3.765 13.8966 4.155 13.2216C4.8375 12.0441 4.2825 11.0841 2.925 11.0841C2.1375 11.0841 1.5 10.4391 1.5 9.6591Z",
       stroke: "#64748B",
       strokeWidth: "1.5",
       strokeMiterlimit: "10",

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SortByIcon = () => {
+  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: "M6.96781 4.47998L4.48779 2L2.00781 4.47998",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.48828 14V2",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9.03516 11.52L11.5152 14L13.9952 11.52",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M11.5156 2V14",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default SortByIcon;

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

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

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TickOutlined = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M7.00008 12.8327C10.2084 12.8327 12.8334 10.2077 12.8334 6.99935C12.8334 3.79102 10.2084 1.16602 7.00008 1.16602C3.79175 1.16602 1.16675 3.79102 1.16675 6.99935C1.16675 10.2077 3.79175 12.8327 7.00008 12.8327Z",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.52075 7.00044L6.17159 8.65128L9.47909 5.34961",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default TickOutlined;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TrashIcon = () => {
+  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: "M2 3.98617C4.22 3.76617 6.45333 3.65283 8.68 3.65283C10 3.65283 11.32 3.7195 12.64 3.85283L14 3.98617",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M10.332 3.3135L10.1854 2.44016C10.0787 1.80683 9.9987 1.3335 8.87203 1.3335H7.12536C5.9987 1.3335 5.91203 1.8335 5.81203 2.44683L5.66537 3.3135",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M3.43307 6.09375L3.86641 12.8071C3.93974 13.8537 3.99974 14.6671 5.85974 14.6671H10.1397C11.9997 14.6671 12.0597 13.8537 12.1331 12.8071L12.5664 6.09375",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9.11328 11H6.89328",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9.66797 8.3335H6.33464",
+      stroke: "#64748B",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default TrashIcon;

package/dist/Editor/common/ColorPickerButton.js

@@ -2,9 +2,61 @@ import React, { useMemo, useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
+import SwipeableDrawerComponent from "./SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const ColorPickerToolComponent = ({
+  value,
+  defaultColors = [],
+  onSave = () => {},
+  recentColors = [],
+  hideGradient,
+  handleClose
+}) => {
+  const [color, setColor] = useState(value);
+  const handleSave = () => {
+    onSave(color);
+    handleClose();
+  };
+  const handleColorChange = color => {
+    setColor(color);
+  };
+  const initialColors = useMemo(() => {
+    let colors = [...recentColors, ...defaultColors];
+    if (hideGradient) {
+      colors = colors.filter(c => c && !c.includes("gradient"));
+    }
+    return colors;
+  }, [recentColors, defaultColors, hideGradient]);
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+        gradient: hideGradient ? false : true,
+        value: color,
+        onChange: handleColorChange,
+        defaultColors: initialColors
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "end",
+        margin: "8px"
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClose,
+        className: "secondaryBtn",
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleSave,
+        className: "primaryBtn",
+        children: "Save"
+      })]
+    })]
+  });
+};
 const ColorPickerButton = props => {
   const {
     value,
@@ -15,39 +67,46 @@ const ColorPickerButton = props => {
     hideGradient
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
-  const [color, setColor] = useState(value);
   const open = Boolean(anchorEl);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const handleColorPicker = e => {
     setAnchorEl(e.currentTarget);
   };
-  const handleSave = () => {
-    onSave(color);
-    handleClose();
-  };
   const handleClose = () => {
     setAnchorEl(null);
   };
-  const handleColorChange = color => {
-    setColor(color);
-  };
-  const initialColors = useMemo(() => {
-    let colors = [...recentColors, ...defaultColors];
-    if (hideGradient) {
-      colors = colors.filter(c => c && !c.includes("gradient"));
-    }
-    return colors;
-  }, [recentColors, defaultColors, hideGradient]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
         height: "22px",
         minWidth: "22px",
-        borderRadius: "26px",
-        border: "2px solid #E7E7E7"
+        borderRadius: "26px"
       },
-      onClick: handleColorPicker
-    }), /*#__PURE__*/_jsx(Popover, {
+      onClick: handleColorPicker,
+      className: "colorPickerButton",
+      sx: {
+        ...classes.colorPickerBtnBorder
+      }
+    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+      open: open,
+      onClose: handleClose,
+      swipeableDrawer: false,
+      children: /*#__PURE__*/_jsx(Grid, {
+        container: true,
+        padding: 0,
+        className: "ed-cp-wrpr",
+        sx: classes.colorPickerPopup,
+        children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {
+          value: value,
+          defaultColors: defaultColors,
+          onSave: onSave,
+          recentColors: recentColors,
+          hideGradient: hideGradient,
+          handleClose: handleClose
+        })
+      })
+    }) : /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,
       anchorOrigin: {
@@ -64,32 +123,13 @@ const ColorPickerButton = props => {
         container: true,
         padding: 0,
         className: "ed-cp-wrpr",
-        children: /*#__PURE__*/_jsxs(Grid, {
-          item: true,
-          xs: 12,
-          children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: hideGradient ? false : true,
-              value: color,
-              onChange: handleColorChange,
-              defaultColors: initialColors
-            })
-          }), /*#__PURE__*/_jsxs("div", {
-            style: {
-              display: "flex",
-              justifyContent: "end",
-              margin: "8px"
-            },
-            children: [/*#__PURE__*/_jsx(Button, {
-              onClick: handleClose,
-              className: "secondaryBtn",
-              children: "Cancel"
-            }), /*#__PURE__*/_jsx(Button, {
-              onClick: handleSave,
-              className: "primaryBtn",
-              children: "Save"
-            })]
-          })]
+        children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {
+          value: value,
+          defaultColors: defaultColors,
+          onSave: onSave,
+          recentColors: recentColors,
+          hideGradient: hideGradient,
+          handleClose: handleClose
         })
       })
     })]

package/dist/Editor/common/DnD/Draggable.js

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { Box } from "@mui/material";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { SectionDragIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Draggable = props => {
   const {
@@ -35,7 +36,7 @@ const Draggable = props => {
     contentEditable: false,
     style: dragStyle,
     sx: classes.dragHandle,
-    children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
+    children: /*#__PURE__*/_jsx(SectionDragIcon, {})
   });
 };
 export default Draggable;

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -58,7 +58,7 @@ const FontLoader = props => {
     if (!readOnly) {
       otherProps?.services("listGoogleFont", []).then(data => {
         families = [...families, ...(data?.data || [])];
-        const filteredfamilies = families?.length > 0 && families?.filter(font => !font?.includes("Material"));
+        const filteredfamilies = families?.filter(font => !font?.includes("Material"));
         setFontFamilies({
           id: 1,
           format: "fontFamily",
@@ -89,7 +89,7 @@ const FontLoader = props => {
       families = correctFontArray(families.join(", "));
       families = families?.map(font => font?.replace(/\"/g, ""));
       families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
-      families = families?.length > 0 && families?.filter(font => googleFontList?.includes(font));
+      families = families.filter(font => googleFontList.includes(font));
       loadFontsInBatches(families);
     }
   }, []);