@fileverse-dev/fortune-react 1.0.2-mod-48-patch-1 → 1.0.2-mod-50

package/dist/index.js

@@ -4671,32 +4671,47 @@ 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) {
-          var _splitSymbols$current;
-          return fortuneCore.getRegStr(regStr, (_splitSymbols$current = splitSymbols.current) === null || _splitSymbols$current === void 0 ? void 0 : _splitSymbols$current.childNodes);
+        setSplitOperate(function (regStr) {
+          var _splitSymbols$current, _splitSymbols$current2;
+          console.log(fortuneCore.getRegStr(regStr, (_splitSymbols$current = splitSymbols.current) === null || _splitSymbols$current === void 0 ? void 0 : _splitSymbols$current.childNodes));
+          return fortuneCore.getRegStr(regStr, (_splitSymbols$current2 = splitSymbols.current) === null || _splitSymbols$current2 === void 0 ? void 0 : _splitSymbols$current2.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",
@@ -4704,68 +4719,56 @@ var SplitColumn = function SplitColumn() {
     onClick: function onClick() {
       setOtherFlag(!otherFlag);
       setSplitOperate(function (regStr) {
-        var _splitSymbols$current2;
-        return fortuneCore.getRegStr(regStr, (_splitSymbols$current2 = splitSymbols.current) === null || _splitSymbols$current2 === void 0 ? void 0 : _splitSymbols$current2.childNodes);
+        var _splitSymbols$current3;
+        return fortuneCore.getRegStr(regStr, (_splitSymbols$current3 = splitSymbols.current) === null || _splitSymbols$current3 === void 0 ? void 0 : _splitSymbols$current3.childNodes);
       });
     },
     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",
     onBlur: function onBlur() {
       if (otherFlag) {
         setSplitOperate(function (regStr) {
-          var _splitSymbols$current3;
-          return fortuneCore.getRegStr(regStr, (_splitSymbols$current3 = splitSymbols.current) === null || _splitSymbols$current3 === void 0 ? void 0 : _splitSymbols$current3.childNodes);
+          var _splitSymbols$current4;
+          return fortuneCore.getRegStr(regStr, (_splitSymbols$current4 = splitSymbols.current) === null || _splitSymbols$current4 === void 0 ? void 0 : _splitSymbols$current4.childNodes);
         });
       }
     }
   })), /*#__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",
     type: "checkbox",
     onClick: function onClick() {
       setSplitOperate(function (regStr) {
-        var _splitSymbols$current4;
-        return fortuneCore.getRegStr(regStr, (_splitSymbols$current4 = splitSymbols.current) === null || _splitSymbols$current4 === void 0 ? void 0 : _splitSymbols$current4.childNodes);
+        var _splitSymbols$current5;
+        return fortuneCore.getRegStr(regStr, (_splitSymbols$current5 = splitSymbols.current) === null || _splitSymbols$current5 === void 0 ? void 0 : _splitSymbols$current5.childNodes);
       });
     },
     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() {
@@ -7539,7 +7542,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 +7552,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 +7880,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 +7931,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 +7998,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 +8314,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 +8337,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 +9507,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",

package/dist/index.umd.css

@@ -2620,7 +2620,8 @@ input[type="number"].condition-rules-project-input {
   /* position: absolute;
     padding: 30px 42px;
     z-index: 1002; */
-  min-width: 500px;
+  /* min-width: 500px; */
+  width: 464px;
 }
 #fortune-split-column label {
   -webkit-user-select: none;
@@ -2631,12 +2632,48 @@ input[type="number"].condition-rules-project-input {
   font-size: 16px;
 }
 #fortune-split-column .splitDelimiters {
-  margin-top: 10px;
+  margin-top: 20px;
+}
+
+
+
+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);
+}
+.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 +2691,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;