@flozy/editor 1.2.0 → 1.2.2

package/dist/Editor/common/EditorIcons.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DrawSignature = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "26",
+  height: "19",
+  viewBox: "0 0 26 19",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M21.3748 1.49609L12.1426 10.7274C11.6087 11.2606 11.6087 12.126 12.1426 12.6598L12.6527 13.17C13.1859 13.7031 14.052 13.7031 14.5851 13.17L23.8183 3.93768L21.3748 1.49609Z",
+    fill: "#A2B0B9"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M11.7399 13.0617C11.4885 12.8102 11.3279 12.5025 11.2544 12.1797L11.2125 12.2944C11.1271 12.5293 10.9854 12.9153 10.8993 13.1501L10.3267 14.7154C10.3236 14.7233 10.3227 14.7313 10.3203 14.7367L11.0133 14.0446C11.0837 13.9751 11.1975 13.9751 11.268 14.0446C11.3385 14.1158 11.3385 14.2298 11.268 14.2994L10.5759 14.9931C10.5837 14.99 10.5901 14.9883 10.5981 14.9852L12.1634 14.4133C12.3983 14.327 12.7836 14.1863 13.0192 14.1002L13.1339 14.0583C12.8103 13.984 12.5026 13.8234 12.2511 13.5734L11.7399 13.0617Z",
+    fill: "#A2B0B9"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M24.9119 0.911237L24.4018 0.401078C23.8679 -0.133693 23.0025 -0.133693 22.4694 0.401078L21.7852 1.08533L24.2277 3.52785L24.9119 2.8436C25.4451 2.30976 25.4451 1.44433 24.9119 0.911237Z",
+    fill: "#A2B0B9"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M23.8386 4.55868L19.678 8.71929C19.511 8.88625 19.511 9.15663 19.678 9.3236C19.8449 9.49056 20.1153 9.49056 20.2823 9.3236L24.4419 5.16299C24.6089 4.99603 24.6089 4.72565 24.4419 4.55868C24.2752 4.3919 24.0046 4.3919 23.8386 4.55868Z",
+    fill: "#A2B0B9"
+  }), /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M12.3531 15.8358H9.24616C8.12385 15.8358 7.46165 16.0692 7.02266 16.2235C6.5125 16.4046 6.4706 16.4181 5.99284 15.9839C5.84645 15.8493 5.7088 15.669 5.56332 15.4768C5.20573 15.007 4.75821 14.4169 3.98619 14.4635C2.88281 14.5253 2.78539 15.6729 2.72768 16.3587C2.71822 16.4742 2.70711 16.6031 2.69218 16.7296C2.61698 16.4948 2.54433 16.2384 2.48898 16.0423C2.39886 15.7211 2.30545 15.3905 2.20494 15.1121C1.9961 14.5371 1.63139 14.4588 1.41311 14.4635C1.19717 14.4683 0.622914 14.4801 0.0266173 16.3713C-0.0682457 16.671 0.0985384 16.9907 0.398416 17.0863C0.699748 17.1805 1.01928 17.0135 1.11432 16.7138C1.17604 16.5177 1.25196 16.3136 1.32862 16.1301C1.3492 16.2029 1.3705 16.2772 1.39107 16.3508C1.68458 17.3933 1.91638 18.215 2.54596 18.3655C2.59421 18.3766 2.65429 18.3853 2.72384 18.3853C2.9041 18.3853 3.14462 18.3219 3.37803 18.0658C3.7633 17.6443 3.81701 17.0121 3.86363 16.456C3.88584 16.1902 3.92772 15.6942 4.0488 15.6018C4.21339 15.5954 4.39128 15.8193 4.65549 16.1673C4.81772 16.3809 5.00198 16.6228 5.22503 16.8253C6.14103 17.6597 6.65833 17.5609 7.40173 17.2983C7.80994 17.1543 8.31848 16.9757 9.24543 16.9757H12.3523C12.6672 16.9757 12.9226 16.7193 12.9226 16.4054C12.9233 16.0914 12.6688 15.8359 12.353 15.8359L12.3531 15.8358Z",
+    fill: "#A2B0B9"
+  })]
+});
+export const TypeSignature = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "22",
+  height: "21",
+  viewBox: "0 0 22 21",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    d: "M20.6332 10.8976H13.0855V10.1307C13.0855 10.0886 13.0811 10.0476 13.0728 10.008H13.0736C13.0726 10.0021 13.0687 9.99736 13.0674 9.99145C13.0567 9.9473 13.0404 9.9056 13.0203 9.86571C12.9221 9.65741 12.7112 9.51065 12.4594 9.51065H11.3456V9.48406C11.3456 9.04891 11.7123 8.69365 12.1615 8.69365H16.9192C17.7488 8.69365 18.4225 8.03654 18.4225 7.23285C18.4225 6.42917 17.7488 5.77205 16.9192 5.77205H4.06291C3.39377 5.77205 2.84834 5.24366 2.84834 4.59541C2.84834 3.94276 3.39377 3.41436 4.06291 3.41436H17.5286C18.5781 3.41436 19.4306 2.58853 19.4306 1.57174V0H18.7432V1.57174C18.7432 2.21999 18.1978 2.74838 17.5286 2.74838H4.06291C3.01339 2.74838 2.16089 3.57867 2.16089 4.59541C2.16089 5.61216 3.01334 6.43803 4.06291 6.43803H16.9192C17.3683 6.43803 17.7351 6.79326 17.7351 7.23285C17.7351 7.668 17.3684 8.02767 16.9192 8.02767H12.1615C11.3319 8.02767 10.6582 8.68033 10.6582 9.48402V9.51061H9.86996C9.62477 9.51061 9.41974 9.64932 9.31945 9.84877C9.27336 9.9333 9.24473 10.0282 9.24473 10.1304V10.8974L1.36692 10.8975C0.612058 10.8975 0 11.4904 0 12.2218V19.6758C0 20.4071 0.612015 21 1.36692 21L20.6331 20.9998C21.3879 20.9998 22 20.4069 22 19.6756V12.2216C22 11.4905 21.388 10.8975 20.6331 10.8975L20.6332 10.8976ZM15.62 12.4314C15.62 12.2068 15.808 12.0248 16.0398 12.0248H17.2884C17.5202 12.0248 17.7081 12.2068 17.7081 12.4314V13.641C17.7081 13.8656 17.5202 14.0476 17.2884 14.0476H16.0398C15.808 14.0476 15.62 13.8656 15.62 13.641V12.4314ZM11.6247 14.0477H10.3761C10.1443 14.0477 9.95641 13.8656 9.95641 13.641V12.4314C9.95641 12.2069 10.1443 12.0248 10.3761 12.0248H11.6247C11.8566 12.0248 12.0445 12.2069 12.0445 12.4314V13.641C12.0445 13.8656 11.8566 14.0477 11.6247 14.0477ZM12.0445 15.2478V16.4574C12.0445 16.682 11.8566 16.864 11.6247 16.864H10.3761C10.1443 16.864 9.95641 16.682 9.95641 16.4574V15.2478C9.95641 15.0232 10.1443 14.8412 10.3761 14.8412H11.6247C11.8566 14.841 12.0445 15.0232 12.0445 15.2478ZM7.12457 12.4314C7.12457 12.2068 7.31249 12.0248 7.54429 12.0248H8.79291C9.02471 12.0248 9.21263 12.2068 9.21263 12.4314V13.641C9.21263 13.8656 9.02471 14.0476 8.79291 14.0476H7.54429C7.31249 14.0476 7.12457 13.8656 7.12457 13.641V12.4314ZM7.12457 15.2478C7.12457 15.0232 7.31249 14.8412 7.54429 14.8412H8.79291C9.02471 14.8412 9.21263 15.0232 9.21263 15.2478V16.4574C9.21263 16.682 9.02471 16.864 8.79291 16.864H7.54429C7.31249 16.864 7.12457 16.682 7.12457 16.4574V15.2478ZM3.54896 19.2736C3.54896 19.4982 3.36104 19.6802 3.12924 19.6802H1.88062C1.64882 19.6802 1.4609 19.4982 1.4609 19.2736V18.064C1.4609 17.8394 1.64882 17.6574 1.88062 17.6574H3.12924C3.36104 17.6574 3.54896 17.8394 3.54896 18.064V19.2736ZM3.54896 16.4574C3.54896 16.682 3.36104 16.864 3.12924 16.864H1.88062C1.64882 16.864 1.4609 16.682 1.4609 16.4574V15.2478C1.4609 15.0232 1.64882 14.8412 1.88062 14.8412H3.12924C3.36104 14.8412 3.54896 15.0232 3.54896 15.2478V16.4574ZM3.54896 13.641C3.54896 13.8656 3.36104 14.0476 3.12924 14.0476H1.88062C1.64882 14.0476 1.4609 13.8656 1.4609 13.641V12.4314C1.4609 12.2068 1.64882 12.0248 1.88062 12.0248H3.12924C3.36104 12.0248 3.54896 12.2068 3.54896 12.4314V13.641ZM6.38069 19.2738C6.38069 19.4983 6.19278 19.6804 5.96098 19.6804H4.71235C4.48055 19.6804 4.29264 19.4983 4.29264 19.2738V18.0642C4.29264 17.8396 4.48055 17.6576 4.71235 17.6576H5.96098C6.19278 17.6576 6.38069 17.8396 6.38069 18.0642V19.2738ZM6.38069 16.4576C6.38069 16.6821 6.19278 16.8642 5.96098 16.8642H4.71235C4.48055 16.8642 4.29264 16.6821 4.29264 16.4576V15.248C4.29264 15.0234 4.48055 14.8413 4.71235 14.8413H5.96098C6.19278 14.8413 6.38069 15.0234 6.38069 15.248V16.4576ZM6.38069 13.6412C6.38069 13.8658 6.19278 14.0478 5.96098 14.0478H4.71235C4.48055 14.0478 4.29264 13.8658 4.29264 13.6412V12.4316C4.29264 12.207 4.48055 12.025 4.71235 12.025H5.96098C6.19278 12.025 6.38069 12.207 6.38069 12.4316V13.6412ZM14.8762 19.274C14.8762 19.4985 14.6883 19.6806 14.4565 19.6806H7.54426C7.31246 19.6806 7.12455 19.4985 7.12455 19.274V18.0643C7.12455 17.8398 7.31246 17.6577 7.54426 17.6577H14.4565C14.6883 17.6577 14.8762 17.8398 14.8762 18.0643V19.274ZM14.8762 16.4577C14.8762 16.6823 14.6883 16.8644 14.4565 16.8644H13.2079C12.9761 16.8644 12.7881 16.6823 12.7881 16.4577V15.2481C12.7881 15.0236 12.9761 14.8415 13.2079 14.8415H14.4565C14.6883 14.8415 14.8762 15.0236 14.8762 15.2481V16.4577ZM14.8762 13.6414C14.8762 13.8659 14.6883 14.048 14.4565 14.048H13.2079C12.9761 14.048 12.7881 13.8659 12.7881 13.6414V12.4317C12.7881 12.2072 12.9761 12.0251 13.2079 12.0251H14.4565C14.6883 12.0251 14.8762 12.2072 14.8762 12.4317V13.6414ZM17.7081 19.2741C17.7081 19.4987 17.5202 19.6807 17.2884 19.6807H16.0398C15.808 19.6807 15.6201 19.4987 15.6201 19.2741V18.0645C15.6201 17.8399 15.808 17.6579 16.0398 17.6579H17.2884C17.5202 17.6579 17.7081 17.8399 17.7081 18.0645V19.2741ZM20.5398 19.2741C20.5398 19.4987 20.3519 19.6807 20.1201 19.6807H18.8715C18.6397 19.6807 18.4518 19.4987 18.4518 19.2741V18.0645C18.4518 17.8399 18.6397 17.6579 18.8715 17.6579H20.1201C20.3519 17.6579 20.5398 17.8399 20.5398 18.0645V19.2741ZM20.5398 16.4579C20.5398 16.6825 20.3519 16.8645 20.1201 16.8645H16.0398C15.808 16.8645 15.6201 16.6825 15.6201 16.4579V15.2483C15.6201 15.0237 15.808 14.8417 16.0398 14.8417H20.1201C20.3519 14.8417 20.5398 15.0237 20.5398 15.2483V16.4579ZM20.5398 13.6415C20.5398 13.8661 20.3519 14.0481 20.1201 14.0481H18.8715C18.6397 14.0481 18.4518 13.8661 18.4518 13.6415V12.4319C18.4518 12.2074 18.6397 12.0253 18.8715 12.0253H20.1201C20.3519 12.0253 20.5398 12.2074 20.5398 12.4319V13.6415Z",
+    fill: "#A2B0B9"
+  })
+});
+export const UploadSignature = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "12",
+  viewBox: "0 0 20 12",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    className: "fillPath",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.11105 6.94403V12H3.90249C1.74708 12 0 10.3115 0 8.22877C0 6.2095 1.64226 4.56091 3.70654 4.46225C3.89348 1.96767 6.04701 0 8.67605 0C10.7426 0 12.5153 1.21592 13.2701 2.94791C13.5384 2.87841 13.8204 2.84119 14.1116 2.84119C15.9012 2.84119 17.3519 4.24319 17.3519 5.97277C17.3519 6.01559 17.351 6.05819 17.3494 6.10079C18.8463 6.29676 20 7.53667 20 9.03682C20 10.6734 18.6273 12 16.9338 12H10.8892V6.94403L12.4098 8.24737C12.7768 8.56172 13.3385 8.52988 13.6647 8.17607C13.9907 7.82226 13.9577 7.28055 13.5908 6.966L10.5909 4.39451L10.0003 3.88847L9.40974 4.39451L6.40986 6.966C6.04295 7.28057 6.00994 7.82227 6.33592 8.17607C6.66214 8.52988 7.2239 8.56172 7.5908 8.24737L9.11105 6.94403Z",
+    fill: "#A2B0B9"
+  })
+});
+export const PencilIcon = props => /*#__PURE__*/_jsx("svg", {
+  className: "PencilIcon",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "100%",
+  height: "100%",
+  viewBox: "0 0 18 18",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M17.8545 3.57573L14.4282 0.145962C14.2338 -0.048654 13.9423 -0.048654 13.7478 0.145962L1.69533 12.1865C1.50092 12.3811 1.37939 12.6242 1.35515 12.8918L0.018643 17.3675C-0.0300035 17.5378 0.0186428 17.7323 0.140174 17.8539C0.261537 17.9513 0.383069 18 0.504596 18C0.553242 18 0.601719 18 0.650365 17.9757L5.12145 16.6621C5.38875 16.6379 5.63182 16.5162 5.82604 16.3216L17.8542 4.28109C17.9514 4.18386 18 4.06221 18 3.94055C18.0002 3.8189 17.9515 3.67298 17.8544 3.57576L17.8545 3.57573ZM1.98697 14.1811L3.80942 16.0054L1.23373 16.7837L1.98697 14.1811ZM5.14593 15.6162C5.07305 15.6892 5.0244 15.6892 4.97575 15.6892C4.92711 15.6892 4.87863 15.6892 4.80557 15.6162L2.39989 13.2081C2.35125 13.1594 2.32701 13.0864 2.32701 13.0377V13.0134C2.32701 12.9647 2.35125 12.9162 2.39989 12.8675L11.5851 3.67294L14.3309 6.42163L5.14593 15.6162ZM15.0115 5.74055L12.2656 2.99186L14.0638 1.19182L16.8097 3.94051L15.0115 5.74055Z",
+    fill: "#94A3B8"
+  })
+});
+export const CloudUpload = props => /*#__PURE__*/_jsx("svg", {
+  className: "SignatureUpload",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "38",
+  height: "32",
+  viewBox: "0 0 38 32",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M29.8163 9.58251L29.8806 9.91219L30.2101 9.97734C34.3518 10.7964 37.5 14.4866 37.5 18.9474C37.5 24.0138 33.4469 28.1316 28.5 28.1316H23.9565V28.1315L23.9493 28.1316C23.8527 28.133 23.7566 28.1148 23.6665 28.0779C23.5763 28.041 23.4936 27.9859 23.4234 27.9153C23.3532 27.8448 23.2969 27.7601 23.2583 27.6661C23.2197 27.5721 23.1997 27.4709 23.1997 27.3684C23.1997 27.2659 23.2197 27.1647 23.2583 27.0707C23.2969 26.9767 23.3532 26.8921 23.4234 26.8215C23.4936 26.751 23.5763 26.6959 23.6665 26.6589C23.7566 26.622 23.8527 26.6038 23.9493 26.6052V26.6053H23.9565H28.5C32.6778 26.6053 36.0217 23.1825 36.0217 18.9474C36.0217 14.9479 33.0358 11.6747 29.1933 11.3181C29.0288 11.3014 28.8731 11.2281 28.7524 11.1079C28.6315 10.9874 28.553 10.8271 28.532 10.6527C28.2917 8.54527 27.3763 6.49581 25.7849 4.87354L25.428 5.22368L25.7849 4.87354C23.908 2.9603 21.4566 2.02632 19 2.02632C16.5427 2.02632 14.1061 2.95891 12.228 4.87355C10.0597 7.08383 9.14397 10.0853 9.48097 12.9531L9.48133 12.956C9.49474 13.0646 9.48534 13.1749 9.45388 13.2793C9.42242 13.3836 9.36977 13.4793 9.29996 13.5602C9.23016 13.6411 9.1449 13.7053 9.05021 13.7491C8.95574 13.7928 8.85366 13.8154 8.75058 13.8158H8.26087C4.75072 13.8158 1.97826 16.6559 1.97826 20.2105C1.97826 23.7651 4.75072 26.6053 8.26087 26.6053H14.0435V26.6053L14.0507 26.6052C14.1473 26.6038 14.2434 26.622 14.3335 26.6589C14.4237 26.6959 14.5064 26.751 14.5766 26.8215C14.6468 26.8921 14.7031 26.9767 14.7417 27.0707C14.7803 27.1647 14.8003 27.2659 14.8003 27.3684C14.8003 27.4709 14.7803 27.5721 14.7417 27.6661C14.7031 27.7601 14.6468 27.8448 14.5766 27.9153C14.5064 27.9859 14.4237 28.041 14.3335 28.0779C14.2434 28.1148 14.1473 28.133 14.0507 28.1316L14.0507 28.1316H14.0435H8.26087C3.99094 28.1316 0.5 24.5869 0.5 20.2105C0.5 16.0852 3.61641 12.7343 7.55871 12.3663L8.01514 12.3236L8.01222 11.8652C7.99355 8.93435 9.01416 6.01183 11.1864 3.79752L11.1864 3.7975C13.3418 1.60027 16.1735 0.5 19 0.5C21.8271 0.5 24.6696 1.59883 26.8265 3.79751L27.1834 3.44737L26.8265 3.79752C28.4274 5.42941 29.4021 7.45776 29.8163 9.58251ZM19.498 15.0104L19.4991 15.0115L24.0388 19.2184C24.0393 19.2189 24.0399 19.2194 24.0404 19.2199C24.3569 19.521 24.3533 20.0152 24.088 20.3106C23.838 20.5888 23.3218 20.6127 23.0442 20.3568C23.0441 20.3566 23.0439 20.3565 23.0438 20.3564L20.5794 18.0678L19.7391 17.2875V18.4342V30.7368C19.7391 31.1674 19.3993 31.5 19 31.5C18.6007 31.5 18.2609 31.1674 18.2609 30.7368V18.4342V17.2875L17.4206 18.0678L14.9562 20.3564C14.9561 20.3565 14.956 20.3566 14.9558 20.3568C14.6953 20.5969 14.1897 20.5869 13.8934 20.291C13.6373 20.0351 13.6548 19.5086 13.9591 19.2204C13.9595 19.22 13.96 19.2196 13.9604 19.2191L18.5009 15.0115L18.5022 15.0102C18.609 14.9106 18.6645 14.875 18.7115 14.8552C18.7568 14.8362 18.833 14.8158 19 14.8158C19.1494 14.8158 19.2369 14.8398 19.2955 14.8655C19.3563 14.8922 19.4156 14.9336 19.498 15.0104Z",
+    fill: "#2563EB",
+    stroke: "#2563EB"
+  })
+});

package/dist/Editor/common/Icon.js

@@ -1,69 +1,89 @@
 import React from "react";
-import { MdFormatBold, MdFormatItalic, MdStrikethroughS, MdFormatUnderlined, MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdInsertLink, MdVideoLibrary, MdImage, MdAdd, MdArrowForward } from "react-icons/md";
+import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward } from "react-icons/md";
 import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { AiFillEdit, AiOutlineTable, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
+import { BoldIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconList = {
-  bold: /*#__PURE__*/_jsx(MdFormatBold, {
+  // bold: <MdFormatBold size={20} />,
+  bold: /*#__PURE__*/_jsx(BoldIcon, {
     size: 20
   }),
-  italic: /*#__PURE__*/_jsx(MdFormatItalic, {
+  // italic: <MdFormatItalic size={20} />,
+  italic: /*#__PURE__*/_jsx(ItalicIcon, {
     size: 20
   }),
-  strikethrough: /*#__PURE__*/_jsx(MdStrikethroughS, {
+  // strikethrough: <MdStrikethroughS size={20} />,
+  strikethrough: /*#__PURE__*/_jsx(StrikethroughIcon, {
     size: 20
   }),
-  underline: /*#__PURE__*/_jsx(MdFormatUnderlined, {
+  // underline: <MdFormatUnderlined size={20} />,
+  underline: /*#__PURE__*/_jsx(UnderLineIcon, {
     size: 20
   }),
   headingOne: /*#__PURE__*/_jsx(BsTypeH1, {
-    size: 20
+    size: 18,
+    fill: "#64748B"
   }),
   headingTwo: /*#__PURE__*/_jsx(BsTypeH2, {
-    size: 20
+    size: 18,
+    fill: "#64748B"
   }),
   headingThree: /*#__PURE__*/_jsx(BsTypeH3, {
-    size: 20
+    size: 18,
+    fill: "#64748B"
   }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
-    size: 20
+    size: 20,
+    fill: "#64748B"
   }),
   superscript: /*#__PURE__*/_jsx(FaSuperscript, {
-    size: 15
+    size: 15,
+    fill: "#64748B"
   }),
   subscript: /*#__PURE__*/_jsx(FaSubscript, {
-    size: 15
+    size: 15,
+    fill: "#64748B"
   }),
   alignLeft: /*#__PURE__*/_jsx(MdFormatAlignLeft, {
-    size: 20
+    size: 18,
+    fill: "#64748B"
   }),
   alignCenter: /*#__PURE__*/_jsx(MdFormatAlignCenter, {
-    size: 20
+    size: 18,
+    fill: "#64748B"
   }),
   alignRight: /*#__PURE__*/_jsx(MdFormatAlignRight, {
-    size: 20
+    size: 18,
+    fill: "#64748B"
   }),
   orderedList: /*#__PURE__*/_jsx(MdFormatListNumbered, {
-    size: 20
+    size: 18,
+    fill: "#64748B"
   }),
   unorderedList: /*#__PURE__*/_jsx(MdFormatListBulleted, {
-    size: 20
+    size: 18,
+    fill: "#64748B"
   }),
-  link: /*#__PURE__*/_jsx(MdInsertLink, {
+  // link: <MdInsertLink size={20} />,
+  link: /*#__PURE__*/_jsx(LinkIcon, {
     size: 20
   }),
-  image: /*#__PURE__*/_jsx(MdImage, {
+  // image: <MdImage size={20} />,
+  image: /*#__PURE__*/_jsx(ImageIcon, {
     size: 20
   }),
-  video: /*#__PURE__*/_jsx(MdVideoLibrary, {
+  // video: <MdVideoLibrary size={20} />,
+  video: /*#__PURE__*/_jsx(VideoIcon, {
     size: 20
   }),
   add: /*#__PURE__*/_jsx(MdAdd, {
     size: 20
   }),
-  table: /*#__PURE__*/_jsx(AiOutlineTable, {
+  // table: <AiOutlineTable size={20} />,
+  table: /*#__PURE__*/_jsx(TableIcon, {
     size: 20
   }),
   insertRowBelow: /*#__PURE__*/_jsx(AiOutlineInsertRowBelow, {

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -1,5 +1,7 @@
 import React from "react";
 import { Grid } from "@mui/material";
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
@@ -42,23 +44,24 @@ const BannerSpacing = props => {
     children: /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
-      style: {
-        display: "flex"
+      sx: {
+        pb: 2,
+        display: "flex",
+        justifyContent: 'center'
       },
-      justifyContent: "center",
       children: /*#__PURE__*/_jsxs("div", {
         style: {
           width: "100px",
           height: "100px",
-          border: "1px solid blue",
-          backgroundColor: "antiquewhite",
+          border: "1px solid #495efc",
+          backgroundColor: "transparent",
           position: "relative",
           display: "flex",
           padding: `${value?.top}px ${value?.right}px ${value?.bottom}px ${value?.left}px`
         },
         children: [/*#__PURE__*/_jsx("div", {
           style: {
-            border: "1px solid blue",
+            border: "1px solid #495efc",
             width: "100%"
           }
         }), /*#__PURE__*/_jsx("input", {
@@ -67,12 +70,16 @@ const BannerSpacing = props => {
           value: value?.left,
           style: {
             position: "absolute",
-            left: "-28px",
+            left: "-60px",
             top: 0,
             bottom: 0,
-            width: "16px",
+            width: "35px",
             height: "16px",
-            margin: "auto"
+            margin: "auto",
+            textAlign: 'center',
+            border: '1px solid #cccccc',
+            fontSize: '12px',
+            borderRadius: '4px'
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -83,10 +90,14 @@ const BannerSpacing = props => {
             position: "absolute",
             right: 0,
             left: 0,
-            top: "-28px",
-            width: "16px",
+            top: "-36px",
+            width: "35px",
             height: "16px",
-            margin: "auto"
+            margin: "auto",
+            textAlign: 'center',
+            border: '1px solid #cccccc',
+            fontSize: '12px',
+            borderRadius: '4px'
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -95,12 +106,16 @@ const BannerSpacing = props => {
           value: value?.right,
           style: {
             position: "absolute",
-            right: "-28px",
+            right: "-60px",
             top: 0,
             bottom: 0,
-            width: "16px",
+            width: "35px",
             height: "16px",
-            margin: "auto"
+            margin: "auto",
+            textAlign: 'center',
+            border: '1px solid #cccccc',
+            fontSize: '12px',
+            borderRadius: '4px'
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -111,10 +126,14 @@ const BannerSpacing = props => {
             position: "absolute",
             right: 0,
             left: 0,
-            bottom: "-28px",
-            width: "16px",
+            bottom: "-36px",
+            width: "35px",
             height: "16px",
-            margin: "auto"
+            margin: "auto",
+            textAlign: 'center',
+            border: '1px solid #cccccc',
+            fontSize: '12px',
+            borderRadius: '4px'
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("button", {
@@ -127,7 +146,7 @@ const BannerSpacing = props => {
             background: "none"
           },
           onClick: onLockSpacing,
-          children: lockSpacing ? "Un-Lock" : "Lock"
+          children: lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
       })
     })

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -1,5 +1,7 @@
 import React from "react";
 import { Grid } from "@mui/material";
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -66,9 +68,13 @@ const BorderRadius = props => {
             position: "absolute",
             left: "-25px",
             top: "-28px",
-            width: "16px",
+            width: "20px",
             height: "16px",
-            margin: "auto"
+            margin: "auto",
+            border: '1px solid #cccccc',
+            fontSize: '12px',
+            borderRadius: '4px',
+            textAlign: 'center'
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -79,8 +85,12 @@ const BorderRadius = props => {
             position: "absolute",
             top: "-28px",
             right: "-25px",
-            width: "16px",
-            height: "16px"
+            width: "20px",
+            height: "16px",
+            border: '1px solid #cccccc',
+            fontSize: '12px',
+            borderRadius: '4px',
+            textAlign: 'center'
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -91,8 +101,12 @@ const BorderRadius = props => {
             position: "absolute",
             left: "-25px",
             bottom: "-28px",
-            width: "16px",
-            height: "16px"
+            width: "20px",
+            height: "16px",
+            border: '1px solid #cccccc',
+            fontSize: '12px',
+            borderRadius: '4px',
+            textAlign: 'center'
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -103,8 +117,12 @@ const BorderRadius = props => {
             position: "absolute",
             bottom: "-28px",
             right: "-25px",
-            width: "16px",
-            height: "16px"
+            width: "20px",
+            height: "16px",
+            border: '1px solid #cccccc',
+            fontSize: '12px',
+            borderRadius: '4px',
+            textAlign: 'center'
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("button", {
@@ -117,7 +135,7 @@ const BorderRadius = props => {
             background: "none"
           },
           onClick: onLockRadius,
-          children: lockRadius ? "Un-Lock" : "Lock"
+          children: lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
       })
     })

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, TextField, InputAdornment } from "@mui/material";
+import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,40 +29,58 @@ const Color = props => {
     container: true,
     children: [needPreview && /*#__PURE__*/_jsxs(Grid, {
       container: true,
-      padding: 3,
+      sx: {
+        pt: 1,
+        pb: 2
+      },
       children: [/*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
-        style: {
-          padding: "8px",
-          color: textColor,
-          background: bgColor,
-          border: `1px solid ${borderColor}`
-        },
-        children: "Text Content"
-      }), /*#__PURE__*/_jsx("span", {
-        style: {
-          color: "#CCC"
+        children: /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          style: {
+            padding: "8px",
+            color: textColor,
+            background: bgColor,
+            border: `1px solid ${borderColor}`
+          },
+          children: "Button Preview"
+        })
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "textSecondary",
+        sx: {
+          fontSize: "13px"
         },
-        children: "*Select Checkbox for no color"
+        children: "*Enter or Select color"
       })]
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
       style: {
-        margin: "12px",
+        marginBottom: "12px",
         display: "flex",
         alignItems: "cente",
         justifyContent: "space-between"
       },
-      children: /*#__PURE__*/_jsx(Grid, {
+      children: /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
-        children: /*#__PURE__*/_jsx(TextField, {
+        className: "btnColorPicker",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "textSecondary",
+          sx: {
+            fontSize: "14px",
+            marginBottom: '5px'
+          },
+          children: label
+        }), /*#__PURE__*/_jsx(TextField, {
           fullWidth: true,
-          value: value,
-          label: label,
-          placeholder: label,
+          value: value
+          // label={label}
+          ,
+          placeholder: `${label} color code`,
           InputLabelProps: {
             shrink: true
           },
@@ -75,7 +93,7 @@ const Color = props => {
               })
             })
           }
-        })
+        })]
       })
     })]
   });

package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel } from "@mui/material";
+import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MenusArray = props => {
@@ -56,7 +56,14 @@ const MenusArray = props => {
       children: /*#__PURE__*/_jsxs(FormControl, {
         children: [/*#__PURE__*/_jsx(FormLabel, {
           id: "demo-radio-buttons-group-label",
-          children: "Menu Variant"
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "textSecondary",
+            sx: {
+              fontSize: '14px'
+            },
+            children: "Menu Variant"
+          })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
           "aria-labelledby": "demo-radio-buttons-group-label",
@@ -87,7 +94,10 @@ const MenusArray = props => {
           value: m.text,
           onChange: handleChange(i),
           size: "small",
-          fullWidth: true
+          fullWidth: true,
+          sx: {
+            mb: 2
+          }
         }), /*#__PURE__*/_jsx(TextField, {
           name: "url",
           type: "text",
@@ -98,6 +108,7 @@ const MenusArray = props => {
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onDelete(i),
           color: "error",
+          className: "deleteBtn",
           children: "Delete"
         })]
       }, `add-m-${i}`);

package/dist/Editor/common/StyleBuilder/fieldTypes/text.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, TextField } from "@mui/material";
+import { Grid, TextField, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Text = props => {
@@ -23,10 +23,14 @@ const Text = props => {
       item: true,
       xs: 12,
       style: {
-        fontWeight: "bold",
-        marginBottom: "8px"
+        marginBottom: "5px"
       },
-      children: /*#__PURE__*/_jsx("label", {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "textSecondary",
+        sx: {
+          fontSize: '14px'
+        },
         children: data?.label
       })
     }), /*#__PURE__*/_jsx(Grid, {