@fileverse-dev/fortune-react 1.0.2-mod-48-patch-3 → 1.0.2-mod-52

package/dist/index.js

@@ -4671,32 +4671,46 @@ var SplitColumn = function SplitColumn() {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "fortune-split-column"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "title"
-  }, splitText.splitTextTitle), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "splitDelimiters"
-  }, splitText.splitDelimiters), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "splitSymbols",
+    className: "splitDataPreview text-heading-xsm"
+  }, splitText.splitDataPreview), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "splitColumnData"
+  }, /*#__PURE__*/React__default['default'].createElement("table", null, /*#__PURE__*/React__default['default'].createElement("tbody", null, tableData.map(function (o, index) {
+    if (o.length >= 1) {
+      return /*#__PURE__*/React__default['default'].createElement("tr", {
+        key: index
+      }, o.map(function (o1) {
+        return /*#__PURE__*/React__default['default'].createElement("td", {
+          key: o + o1
+        }, o1);
+      }));
+    }
+    return /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", null));
+  })))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "splitDelimiters text-heading-xsm !mt-4"
+  }, "Separator"), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "splitSymbols flex gap-3 flex-wrap",
     ref: splitSymbols
   }, splitText.splitSymbols.map(function (o) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: o.value,
-      className: "splitSymbol"
+      className: "splitSymbol flex gap-2 items-center"
     }, /*#__PURE__*/React__default['default'].createElement("input", {
       id: o.value,
       name: o.value,
       type: "checkbox",
       onClick: function onClick() {
-        return setSplitOperate(function (regStr) {
+        setSplitOperate(function (regStr) {
           var _splitSymbols$current;
           return fortuneCore.getRegStr(regStr, (_splitSymbols$current = splitSymbols.current) === null || _splitSymbols$current === void 0 ? void 0 : _splitSymbols$current.childNodes);
         });
       },
       tabIndex: 0
     }), /*#__PURE__*/React__default['default'].createElement("label", {
-      htmlFor: o.value
+      htmlFor: o.value,
+      className: "text-body-sm"
     }, o.name));
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "splitSymbol"
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "splitSymbol flex gap-2 items-center pb-4 mb-4  border-b"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     id: "other",
     name: "other",
@@ -4711,7 +4725,7 @@ var SplitColumn = function SplitColumn() {
     tabIndex: 0
   }), /*#__PURE__*/React__default['default'].createElement("label", {
     htmlFor: "other"
-  }, splitText.splitOther), /*#__PURE__*/React__default['default'].createElement("input", {
+  }, "Custom"), /*#__PURE__*/React__default['default'].createElement("input", {
     id: "otherValue",
     name: "otherValue",
     type: "text",
@@ -4724,7 +4738,7 @@ var SplitColumn = function SplitColumn() {
       }
     }
   })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "splitSymbol splitSimple"
+    className: "splitSymbol flex gap-2 mb-4 items-center"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     id: "splitsimple",
     name: "splitsimple",
@@ -4738,34 +4752,22 @@ var SplitColumn = function SplitColumn() {
     tabIndex: 0
   }), /*#__PURE__*/React__default['default'].createElement("label", {
     htmlFor: "splitsimple"
-  }, splitText.splitContinueSymbol))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "splitDataPreview"
-  }, splitText.splitDataPreview), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "splitColumnData"
-  }, /*#__PURE__*/React__default['default'].createElement("table", null, /*#__PURE__*/React__default['default'].createElement("tbody", null, tableData.map(function (o, index) {
-    if (o.length >= 1) {
-      return /*#__PURE__*/React__default['default'].createElement("tr", {
-        key: index
-      }, o.map(function (o1) {
-        return /*#__PURE__*/React__default['default'].createElement("td", {
-          key: o + o1
-        }, o1);
-      }));
-    }
-    return /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", null));
-  })))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-primary",
+  }, splitText.splitContinueSymbol)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex justify-end gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    className: "",
+    variant: "secondary",
     onClick: function onClick() {
-      certainBtn();
+      hideDialog();
     },
     tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-close",
+  }, button.cancel), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    className: "",
     onClick: function onClick() {
-      hideDialog();
+      certainBtn();
     },
     tabIndex: 0
-  }, button.cancel));
+  }, "Split")));
 };
 
 var LocationCondition = function LocationCondition() {
@@ -5269,7 +5271,7 @@ var CustomButton = function CustomButton(_ref) {
   }, tooltip), children);
 };
 
-var palette = [["#000000", "#444444", "#666666", "#999999", "#cccccc", "#eeeeee", "#f3f3f3", "#ffffff"], ["#f00f00", "#f90f90", "#ff0ff0", "#0f00f0", "#0ff0ff", "#00f00f", "#90f90f", "#f0ff0f"], ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"], ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"], ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"], ["#c00c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"], ["#900900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"], ["#600600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]];
+var palette = [["#000000", "#444444", "#666666", "#999999", "#B7B7B7", "#cccccc", "#D9D9D9", "#EFEFEF", "#f3f3f3", "#ffffff"], ["#970007", "#FE0012", "#FE9728", "#FFFD40", "#27FD3C", "#21FFFF", "#4A89E4", "#0027F9", "#9726FA", "#FD23FA"], ["#E6B8B0", "#f4cccc", "#FCE5CF", "#FFF1CF", "#DAEAD4", "#D0E0E3", "#C9DBF7", "#CFE3F2", "#D9D3E8", "#EAD1DC"], ["#DC7D6D", "#E9999A", "#F9CAA0", "#FFE49F", "#B7D6AB", "#A3C4C9", "#A4C3F2", "#A0C6E6", "#B4A8D4", "#D5A7BC"], ["#CB402B", "#DF6668", "#F6B171", "#FFD871", "#95C382", "#77A6AF", "#6DA0E8", "#70AADA", "#8E7EC0", "#C17C9F"], ["#A51A0A", "#CB000C", "#E59043", "#F1C046", "#6CA756", "#46828D", "#3C7BD4", "#3E87C3", "#6651A4", "#A54E78"], ["#841F11", "#980007", "#B35E19", "#BF8F22", "#3A7527", "#15505B", "#0E5AC8", "#0B5592", "#0B5592", "#731C46"], ["#5B0E03", "#660003", "#783E0E", "#7F5F13", "#284E19", "#0D343D", "#1C4785", "#073961", "#1F154B", "#4C112F"]];
 var ColorPicker = function ColorPicker(_ref) {
   var onPick = _ref.onPick;
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5287,7 +5289,8 @@ var ColorPicker = function ColorPicker(_ref) {
         },
         tabIndex: 0,
         style: {
-          backgroundColor: c
+          backgroundColor: c,
+          border: c === "#ffffff" ? "1px solid #E8EBEC" : "none"
         }
       });
     }));
@@ -5297,16 +5300,6 @@ var ColorPicker = function ColorPicker(_ref) {
 var CustomColor = function CustomColor(_ref) {
   var onCustomPick = _ref.onCustomPick,
     onColorPick = _ref.onColorPick;
-  var _useContext = React.useContext(WorkbookContext),
-    context = _useContext.context;
-  var _locale = fortuneCore.locale(context),
-    toolbar = _locale.toolbar,
-    sheetconfig = _locale.sheetconfig,
-    button = _locale.button;
-  var _useState = React.useState("#000000"),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputColor = _useState2[0],
-    setInputColor = _useState2[1];
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "fortune-custom-color"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5315,21 +5308,11 @@ var CustomColor = function CustomColor(_ref) {
       return onCustomPick(undefined);
     },
     tabIndex: 0
-  }, sheetconfig.resetColor), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "custom-color"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, toolbar.customColor, ":"), /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "color",
-    value: inputColor,
-    onChange: function onChange(e) {
-      return setInputColor(e.target.value);
-    }
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-primary",
-    onClick: function onClick() {
-      onCustomPick(inputColor);
-    },
-    tabIndex: 0
-  }, button.confirm)), /*#__PURE__*/React__default['default'].createElement(ColorPicker, {
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/React__default['default'].createElement(ColorPicker, {
     onPick: function onPick(color) {
       onColorPick(color);
     }
@@ -7539,7 +7522,8 @@ var ContextMenu = function ContextMenu() {
     drag = _locale.drag,
     generalDialog = _locale.generalDialog,
     info = _locale.info,
-    toolbar = _locale.toolbar;
+    toolbar = _locale.toolbar,
+    splitText = _locale.splitText;
   var getMenuElement = React.useCallback(function (name, i) {
     var _context$luckysheet_s;
     var selection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
@@ -7548,6 +7532,39 @@ var ContextMenu = function ContextMenu() {
         key: "divider-".concat(i)
       });
     }
+    if (name === "split-text") {
+      return /*#__PURE__*/React__default['default'].createElement(Menu, {
+        key: "split-text",
+        onClick: function onClick() {
+          if (context.allowEdit === false) return;
+          if (___default['default'].isUndefined(context.luckysheet_select_save)) {
+            showDialog(splitText.tipNoSelect, "ok");
+          } else {
+            var currentColumn = context.luckysheet_select_save[context.luckysheet_select_save.length - 1].column;
+            if (context.luckysheet_select_save.length > 1) {
+              showDialog(splitText.tipNoMulti, "ok");
+            } else if (currentColumn[0] !== currentColumn[1]) {
+              showDialog(splitText.tipNoMultiColumn, "ok");
+            } else {
+              showDialog(/*#__PURE__*/React__default['default'].createElement(SplitColumn, null), undefined, "Split text to columns");
+            }
+          }
+          setContext(function (draftCtx) {
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "split-flv",
+        width: 16,
+        height: 16,
+        style: {
+          marginTop: "4px",
+          marginRight: "4px"
+        }
+      }), "Split text to columns"));
+    }
     if (name === "freeze-row") {
       var freezeState = fortuneCore.getFreezeState(context);
       var isFrozen = freezeState.isRowFrozen;
@@ -7843,7 +7860,7 @@ var ContextMenu = function ContextMenu() {
       });
     }
     if (name === "delete-column") {
-      return  (/*#__PURE__*/React__default['default'].createElement(Menu, {
+      return (selection === null || selection === void 0 ? void 0 : selection.column_select) && (/*#__PURE__*/React__default['default'].createElement(Menu, {
         key: "delete-col",
         onClick: function onClick() {
           if (!selection) return;
@@ -7894,8 +7911,60 @@ var ContextMenu = function ContextMenu() {
         }
       }), /*#__PURE__*/React__default['default'].createElement("div", null, rightclick.deleteSelected, rightclick.column))));
     }
+    if (name === "cell-delete-column") {
+      return !(selection === null || selection === void 0 ? void 0 : selection.row_select) && (/*#__PURE__*/React__default['default'].createElement(Menu, {
+        key: "cell-delete-col",
+        onClick: function onClick() {
+          if (!selection) return;
+          var _selection$column2 = _slicedToArray(selection.column, 2),
+            st_index = _selection$column2[0],
+            ed_index = _selection$column2[1];
+          var deleteRowColOp = {
+            type: "column",
+            start: st_index,
+            end: ed_index,
+            id: context.currentSheetId
+          };
+          setContext(function (draftCtx) {
+            var _draftCtx$luckysheet_4, _draftCtx$luckysheetf3, _draftCtx$luckysheetf4;
+            if (((_draftCtx$luckysheet_4 = draftCtx.luckysheet_select_save) === null || _draftCtx$luckysheet_4 === void 0 ? void 0 : _draftCtx$luckysheet_4.length) > 1) {
+              showAlert(rightclick.noMulti, "ok");
+              draftCtx.contextMenu = {};
+              draftCtx.dataVerificationDropDownList = false;
+              return;
+            }
+            var slen = ed_index - st_index + 1;
+            var index = fortuneCore.getSheetIndex(draftCtx, context.currentSheetId);
+            if (((_draftCtx$luckysheetf3 = draftCtx.luckysheetfile[index].data) === null || _draftCtx$luckysheetf3 === void 0 ? void 0 : (_draftCtx$luckysheetf4 = _draftCtx$luckysheetf3[0]) === null || _draftCtx$luckysheetf4 === void 0 ? void 0 : _draftCtx$luckysheetf4.length) <= slen) {
+              showAlert(rightclick.cannotDeleteAllColumn, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            try {
+              fortuneCore.deleteRowCol(draftCtx, deleteRowColOp);
+            } catch (e) {
+              if (e.message === "readOnly") {
+                showAlert(rightclick.cannotDeleteColumnReadOnly, "ok");
+              }
+            }
+            draftCtx.contextMenu = {};
+          }, {
+            deleteRowColOp: deleteRowColOp
+          });
+        }
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "delete-flv",
+        width: 18,
+        height: 18,
+        style: {
+          marginRight: "8px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("div", null, rightclick.deleteSelected, rightclick.column))));
+    }
     if (name === "delete-row") {
-      return  (/*#__PURE__*/React__default['default'].createElement(Menu, {
+      return (selection === null || selection === void 0 ? void 0 : selection.row_select) && (/*#__PURE__*/React__default['default'].createElement(Menu, {
         key: "delete-row",
         onClick: function onClick() {
           if (!selection) return;
@@ -7909,15 +7978,66 @@ var ContextMenu = function ContextMenu() {
             id: context.currentSheetId
           };
           setContext(function (draftCtx) {
-            var _draftCtx$luckysheet_4, _draftCtx$luckysheetf3;
-            if (((_draftCtx$luckysheet_4 = draftCtx.luckysheet_select_save) === null || _draftCtx$luckysheet_4 === void 0 ? void 0 : _draftCtx$luckysheet_4.length) > 1) {
+            var _draftCtx$luckysheet_5, _draftCtx$luckysheetf5;
+            if (((_draftCtx$luckysheet_5 = draftCtx.luckysheet_select_save) === null || _draftCtx$luckysheet_5 === void 0 ? void 0 : _draftCtx$luckysheet_5.length) > 1) {
+              showAlert(rightclick.noMulti, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            var slen = ed_index - st_index + 1;
+            var index = fortuneCore.getSheetIndex(draftCtx, context.currentSheetId);
+            if (((_draftCtx$luckysheetf5 = draftCtx.luckysheetfile[index].data) === null || _draftCtx$luckysheetf5 === void 0 ? void 0 : _draftCtx$luckysheetf5.length) <= slen) {
+              showAlert(rightclick.cannotDeleteAllRow, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            try {
+              fortuneCore.deleteRowCol(draftCtx, deleteRowColOp);
+            } catch (e) {
+              if (e.message === "readOnly") {
+                showAlert(rightclick.cannotDeleteRowReadOnly, "ok");
+              }
+            }
+            draftCtx.contextMenu = {};
+          }, {
+            deleteRowColOp: deleteRowColOp
+          });
+        }
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "delete-flv",
+        width: 18,
+        height: 18,
+        style: {
+          marginRight: "8px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("div", null, rightclick.deleteSelected, rightclick.row))));
+    }
+    if (name === "cell-delete-row") {
+      return !(selection === null || selection === void 0 ? void 0 : selection.column_select) && (/*#__PURE__*/React__default['default'].createElement(Menu, {
+        key: "cell-delete-row",
+        onClick: function onClick() {
+          if (!selection) return;
+          var _selection$row2 = _slicedToArray(selection.row, 2),
+            st_index = _selection$row2[0],
+            ed_index = _selection$row2[1];
+          var deleteRowColOp = {
+            type: "row",
+            start: st_index,
+            end: ed_index,
+            id: context.currentSheetId
+          };
+          setContext(function (draftCtx) {
+            var _draftCtx$luckysheet_6, _draftCtx$luckysheetf6;
+            if (((_draftCtx$luckysheet_6 = draftCtx.luckysheet_select_save) === null || _draftCtx$luckysheet_6 === void 0 ? void 0 : _draftCtx$luckysheet_6.length) > 1) {
               showAlert(rightclick.noMulti, "ok");
               draftCtx.contextMenu = {};
               return;
             }
             var slen = ed_index - st_index + 1;
             var index = fortuneCore.getSheetIndex(draftCtx, context.currentSheetId);
-            if (((_draftCtx$luckysheetf3 = draftCtx.luckysheetfile[index].data) === null || _draftCtx$luckysheetf3 === void 0 ? void 0 : _draftCtx$luckysheetf3.length) <= slen) {
+            if (((_draftCtx$luckysheetf6 = draftCtx.luckysheetfile[index].data) === null || _draftCtx$luckysheetf6 === void 0 ? void 0 : _draftCtx$luckysheetf6.length) <= slen) {
               showAlert(rightclick.cannotDeleteAllRow, "ok");
               draftCtx.contextMenu = {};
               return;
@@ -8174,7 +8294,7 @@ var ContextMenu = function ContextMenu() {
         height: 18,
         style: {
           marginTop: "4px",
-          marginRight: "4px"
+          marginRight: "8px"
         }
       }), /*#__PURE__*/React__default['default'].createElement("p", null, "Ascending sort")));
     }
@@ -8197,7 +8317,7 @@ var ContextMenu = function ContextMenu() {
         height: 18,
         style: {
           marginTop: "4px",
-          marginRight: "4px"
+          marginRight: "8px"
         }
       }), /*#__PURE__*/React__default['default'].createElement("p", null, "Descending sort")));
     }
@@ -9367,6 +9487,35 @@ var SVGDefines = function SVGDefines(_ref) {
   }), /*#__PURE__*/React__default['default'].createElement("path", {
     d: "M16.3169 13.9911C16.4164 13.8765 16.4754 13.7388 16.4938 13.5969C16.523 13.3723 16.4493 13.1423 16.2863 12.9756L16.2804 12.9697L14.0304 10.7197C13.7375 10.4268 13.2626 10.4268 12.9697 10.7197C12.6768 11.0126 12.6768 11.4874 12.9697 11.7803L13.9394 12.75L8.25002 12.75L8.24781 12.75L4.06068 12.75L5.03035 11.7803C5.32325 11.4874 5.32325 11.0126 5.03035 10.7197C4.73746 10.4268 4.26259 10.4268 3.96969 10.7197L1.72369 12.9657C1.7091 12.98 1.69508 12.995 1.68166 13.0106C1.58293 13.125 1.52444 13.2622 1.50621 13.4035C1.4998 13.453 1.49838 13.5028 1.50182 13.5521C1.51375 13.7245 1.58497 13.8935 1.71548 14.0261L1.71969 14.0303L3.96969 16.2803C4.26258 16.5732 4.73746 16.5732 5.03035 16.2803C5.32324 15.9874 5.32324 15.5126 5.03035 15.2197L4.06068 14.25L9.75002 14.25L9.75241 14.25L13.9394 14.25L12.9697 15.2197C12.6768 15.5126 12.6768 15.9874 12.9697 16.2803C13.2626 16.5732 13.7375 16.5732 14.0304 16.2803L16.2764 14.0342C16.2905 14.0204 16.3039 14.0061 16.3169 13.9911Z",
     fill: "#363B3F"
+  }))), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    fill: "none",
+    viewBox: "0 0 16 16",
+    id: "split-flv"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M6 10.5C6.41421 10.5 6.75 10.8358 6.75 11.25C6.75 11.6642 6.41421 12 6 12H3V15H6C6.41421 15 6.75 15.3358 6.75 15.75C6.75 16.1642 6.41421 16.5 6 16.5H3C2.22326 16.5 1.58475 15.9096 1.50806 15.1531L1.5 15V12C1.5 11.1716 2.17157 10.5 3 10.5H6Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M9 10.5C9.41421 10.5 9.75 10.8358 9.75 11.25V15.75C9.75 16.1642 9.41421 16.5 9 16.5C8.58579 16.5 8.25 16.1642 8.25 15.75V11.25C8.25 10.8358 8.58579 10.5 9 10.5Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M15 10.5C15.7767 10.5 16.4152 11.0904 16.4919 11.8469L16.5 12V15C16.5 15.8284 15.8284 16.5 15 16.5H12C11.5858 16.5 11.25 16.1642 11.25 15.75C11.25 15.3358 11.5858 15 12 15H15V12H12C11.5858 12 11.25 11.6642 11.25 11.25C11.25 10.8358 11.5858 10.5 12 10.5H15Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M4.5 7.5C4.91421 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 4.91421 9 4.5 9H2.25C1.83579 9 1.5 8.66421 1.5 8.25C1.5 7.83579 1.83579 7.5 2.25 7.5H4.5Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M12 1.5C12.5967 1.5 13.1689 1.73722 13.5908 2.15918C13.96 2.52833 14.1878 3.01237 14.239 3.52734L14.25 3.75V6.43945L15.2197 5.46973C15.5126 5.17687 15.9874 5.17687 16.2803 5.46973C16.5732 5.76261 16.5731 6.23738 16.2803 6.53027L14.0303 8.78027C13.7374 9.07317 13.2626 9.07317 12.9697 8.78027L10.7197 6.53027L10.6685 6.47314C10.4282 6.17857 10.4452 5.7443 10.7197 5.46973C10.9943 5.19517 11.4286 5.17823 11.7231 5.41846L11.7803 5.46973L12.75 6.43945V3.75L12.7463 3.67603C12.7293 3.50428 12.6534 3.34283 12.5303 3.21973C12.3896 3.07907 12.1989 3 12 3H11.25C10.8358 3 10.5 2.66421 10.5 2.25C10.5 1.83579 10.8358 1.5 11.25 1.5H12Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M8.25 4.5C8.66421 4.5 9 4.83579 9 5.25C9 5.66421 8.66421 6 8.25 6H2.25C1.83579 6 1.5 5.66421 1.5 5.25C1.5 4.83579 1.83579 4.5 2.25 4.5H8.25Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M8.25 1.5C8.66421 1.5 9 1.83579 9 2.25C9 2.66421 8.66421 3 8.25 3H2.25C1.83579 3 1.5 2.66421 1.5 2.25C1.5 1.83579 1.83579 1.5 2.25 1.5H8.25Z",
+    fill: "#363B3F"
   }))), /*#__PURE__*/React__default['default'].createElement("symbol", {
     viewBox: "0 0 1024 1024",
     version: "1.1",
@@ -10322,7 +10471,30 @@ var SVGDefines = function SVGDefines(_ref) {
   }), /*#__PURE__*/React__default['default'].createElement("path", {
     d: "M6.64775 8.97978L3.77152 6.10355C3.45654 5.78857 3.67962 5.25 4.12507 5.25H9.87753C10.323 5.25 10.5461 5.78857 10.2311 6.10355L7.35486 8.97978C7.15959 9.17504 6.84301 9.17504 6.64775 8.97978Z",
     fill: "#363B3F"
-  }))));
+  })), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "reset-color",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M0.862148 0.862148C1.10623 0.618071 1.49223 0.603009 1.75408 0.816575L1.80486 0.862148L12.551 11.6082C12.5999 11.6454 12.6425 11.6884 12.6786 11.7358L15.1382 14.1955L15.1838 14.2463C15.3972 14.5081 15.3822 14.8942 15.1382 15.1382C14.8942 15.3822 14.5081 15.3972 14.2463 15.1838L14.1955 15.1382L12.2625 13.2052C11.7308 13.9122 11.0289 14.4803 10.2157 14.8517C9.12793 15.3485 7.90444 15.4657 6.74236 15.1838C5.58035 14.9018 4.54658 14.237 3.80746 13.297C3.11451 12.4157 2.71809 11.3399 2.67139 10.2235L2.66684 10.0002C2.66684 8.42922 3.45419 6.99237 4.89079 5.8335L0.862148 1.80486L0.816576 1.75408C0.603009 1.49223 0.618071 1.10623 0.862148 0.862148ZM5.75082 6.85368C4.53724 7.82455 4.00017 8.91389 4.00017 10.0002L4.00342 10.1681C4.03852 11.0053 4.33604 11.8119 4.85564 12.4728C5.40996 13.1777 6.18536 13.676 7.05681 13.8875C7.92833 14.099 8.84587 14.0114 9.66163 13.6388C10.3296 13.3337 10.8972 12.8516 11.3068 12.2495L5.83741 6.78012C5.80821 6.80424 5.78036 6.83 5.75082 6.85368Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M13.1121 8.58741C13.2242 8.93794 13.0303 9.31366 12.6799 9.42595C12.3294 9.53789 11.9543 9.34458 11.842 8.99431L13.1121 8.58741Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M8.00147 1.3335C8.31859 1.33426 8.59155 1.55835 8.65382 1.86931C8.95517 3.3758 9.86768 4.83997 11.0835 5.81267L11.2677 5.96501C12.171 6.73236 12.8015 7.61685 13.1121 8.58741L12.4767 8.79053L11.842 8.99431C11.6214 8.30509 11.1562 7.61973 10.4045 6.98129L10.2508 6.85434C9.31898 6.10886 8.53727 5.12515 8.00017 4.03337C7.83296 4.35237 7.44178 4.48213 7.11671 4.32243C6.78643 4.15985 6.6502 3.76015 6.81267 3.42986C7.05681 2.9339 7.23662 2.40833 7.34717 1.86671L7.3615 1.80941C7.44507 1.52891 7.70415 1.33298 8.00147 1.3335Z",
+    fill: "#363B3F"
+  })))));
 };
 
 var ChangeColor = function ChangeColor(_ref) {

package/dist/index.umd.css

@@ -2346,8 +2346,7 @@ input[type="number"].condition-rules-project-input {
   display: none;
 }
 
-.fortune-toolbar-select,
-.fortune-toolbar-color-picker {
+.fortune-toolbar-select {
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   padding: 0.5rem;
   border: 1px solid hsl(var(--color-border-default));
@@ -2356,6 +2355,19 @@ input[type="number"].condition-rules-project-input {
   min-width: 240px;
 }
 
+.fortune-toolbar-color-picker {
+  z-index: 50;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  background: rgb(255, 255, 255);
+  transition: all 0.2s ease;
+  border-radius: 0px 0px 4px 4px;
+}
+
 .fortune-toolbar-select {
   overflow: auto;
   max-height: 75vh;
@@ -2398,9 +2410,19 @@ input[type="number"].condition-rules-project-input {
 }
 
 .fortune-toolbar-color-picker-item {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s ease-in;
   margin: 1px;
+}
+
+.fortune-toolbar-color-picker-item:hover {
+  transform: scale(1.05);
   cursor: pointer;
 }
 
@@ -2477,11 +2499,18 @@ input[type="number"].condition-rules-project-input {
 
 #fortune-custom-color {
   min-width: 164px;
-  background: rgb(240, 240, 240);
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  background: #fff;
+  border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   font-size: 12px;
+  padding: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  max-height: 400px;
+  width: -moz-fit-content;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 #fortune-custom-color .color-reset {
@@ -2489,16 +2518,21 @@ input[type="number"].condition-rules-project-input {
   color: #333;
   cursor: pointer;
   list-style: none;
-  padding: 10px;
   white-space: nowrap;
-  padding-left: 8px;
   vertical-align: middle;
-  padding-right: 24px;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 6px;
   background: white;
+  padding: 4px 8px;
+  height: 30px;
+  border-radius: 4px 4px 0px 0px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
 #fortune-custom-color .color-reset:hover {
@@ -2620,7 +2654,39 @@ input[type="number"].condition-rules-project-input {
   /* position: absolute;
     padding: 30px 42px;
     z-index: 1002; */
-  min-width: 500px;
+  /* min-width: 500px; */
+  width: 464px;
+
+  input[type="checkbox"] {
+    accent-color: black;
+    -moz-appearance: none;
+         appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid black;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+  }
+  
+  input[type="checkbox"]:checked {
+    background-color: black;
+    border-color: black;
+  }
+  
+  /* Smaller tick mark */
+  input[type="checkbox"]:checked::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 4px;
+    width: 4px;      /* Reduced from default */
+    height: 7px;     /* Reduced from default */
+    border: solid white;
+    border-width: 0 1px 1px 0;
+    transform: rotate(45deg);
+  }
 }
 #fortune-split-column label {
   -webkit-user-select: none;
@@ -2631,12 +2697,15 @@ input[type="number"].condition-rules-project-input {
   font-size: 16px;
 }
 #fortune-split-column .splitDelimiters {
-  margin-top: 10px;
+  margin-top: 20px;
+}
+.splitSymbols {
+  width: 464px
 }
 #fortune-split-column .splitSymbols {
   position: relative;
-  border: 1px solid #dfdfdf;
-  padding: 5px;
+  /* border: 1px solid #dfdfdf; */
+  padding: 5px 5px 5px 0;
   margin: 5px 0px;
 }
 #fortune-split-column .splitSymbol {
@@ -2654,10 +2723,13 @@ input[type="number"].condition-rules-project-input {
 }
 #fortune-split-column .splitDataPreview {
   font-size: 14px;
-  margin-top: 26px;
+  /* margin-top: 26px; */
+  margin-bottom: 12px;
 }
 #fortune-split-column .splitColumnData {
   border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  background-color: #F8F9FA;
   padding: 5px;
   margin: 5px 0px;
   height: 100px;