@fileverse-dev/fortune-react 1.0.2-mod-40 → 1.0.2-mod-41

package/dist/index.js

@@ -184,7 +184,7 @@ function _regenerator() {
             i = p[t],
             d = G.p,
             l = i[2];
-          r > 3 ? (o = l === n) && (c = i[4] || 3, u = i[5] === e ? i[3] : i[5], i[4] = 3, i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
         }
         if (o || r > 1) return a;
         throw y = !0, n;
@@ -813,49 +813,43 @@ var FormulaSearch = function FormulaSearch(props) {
         justifyContent: "space-between"
       }
     }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-formula-search-func"
+      className: "luckysheet-formula-search-func text-body-sm"
     }, v.n), /*#__PURE__*/React__default['default'].createElement("div", {
       style: {
         display: "flex",
+        justifyContent: "end",
+        width: "68px",
+        height: "20px",
+        alignItems: "center",
         gap: "4px"
       }
     }, v.LOGO && (/*#__PURE__*/React__default['default'].createElement("img", {
       src: v.LOGO,
       alt: "Service Logo",
-      width: 32,
-      height: 32
+      style: {
+        width: "20px"
+      }
     })), v.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
       style: {
         borderRadius: "4px",
-        width: "20px",
-        height: "20px",
-        backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#F9A92B")
-      }
+        backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#e8ebec"),
+        width: "16px",
+        height: "16px"
+      },
+      className: "flex justify-center"
     }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
       name: "Key",
       style: {
-        color: "white"
+        color: localStorage.getItem(v.API_KEY) ? "white" : "#77818A",
+        width: "12px",
+        height: "12px"
       }
     }))))), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-formula-search-detail"
+      className: "luckysheet-formula-search-detail mt-1 text-helper-text-sm"
     }, v.d));
   }));
 };
 
-function lightenHexColor(hex) {
-  var amount = 100;
-  if (hex.startsWith("#")) {
-    hex = hex.slice(1);
-  }
-  var r = parseInt(hex.slice(0, 2), 16);
-  var g = parseInt(hex.slice(2, 4), 16);
-  var b = parseInt(hex.slice(4, 6), 16);
-  r = Math.min(255, r + amount);
-  g = Math.min(255, g + amount);
-  b = Math.min(255, b + amount);
-  var newHex = "#".concat((1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase());
-  return newHex;
-}
 var FormulaHint = function FormulaHint(props) {
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context;
@@ -870,13 +864,34 @@ var FormulaHint = function FormulaHint(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     showAPInput = _useState4[0],
     setShowAPInput = _useState4[1];
+  var _useState5 = React.useState(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isKeyAdded = _useState6[0],
+    setApiKeyAdded = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showFunctionBody = _useState8[0],
+    setShouldShowFunctionBody = _useState8[1];
+  React.useEffect(function () {
+    if (fn) {
+      setApiKeyAdded(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
+      setAPI_KEY(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY) || "");
+      setShowAPInput(!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
+    }
+  }, [fn]);
+  var apiKeyPlaceholder = {
+    ETHERSCAN_API_KEY: "Etherscan API key"
+  };
   if (!fn) return null;
   return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
     id: "luckysheet-formula-help-c",
     className: "luckysheet-formula-help-c",
     style: {
-      border: "1px solid ".concat(fn.BRAND_COLOR),
-      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+      borderWidth: "1px",
+      borderColor: (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) ? fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR : "#F8F9FA",
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      width: "340px",
+      padding: "0px"
     }
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-close",
@@ -891,17 +906,25 @@ var FormulaHint = function FormulaHint(props) {
     className: "fa fa-angle-up",
     "aria-hidden": "true"
   })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-title formula-title",
+    onClick: function onClick() {
+      setShouldShowFunctionBody(!showFunctionBody);
+    },
+    className: "flex cursor-pointer items-center justify-between",
     style: {
-      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      padding: "10px",
+      borderRadius: "10px"
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-title-formula"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: " flex-grow  color-text-default"
+  }, /*#__PURE__*/React__default['default'].createElement("code", {
+    style: {
+      fontWeight: 500
+    },
     className: "luckysheet-arguments-help-function-name"
-  }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, fn.n), /*#__PURE__*/React__default['default'].createElement("code", {
     className: "luckysheet-arguments-paren"
-  }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, "("), /*#__PURE__*/React__default['default'].createElement("code", {
     className: "luckysheet-arguments-parameter-holder"
   }, fn.p.map(function (param, i) {
     var name = param.name;
@@ -911,43 +934,55 @@ var FormulaHint = function FormulaHint(props) {
     if (param.require === "o") {
       name = "[".concat(name, "]");
     }
-    return /*#__PURE__*/React__default['default'].createElement("span", {
+    return /*#__PURE__*/React__default['default'].createElement("code", {
       className: "luckysheet-arguments-help-parameter",
       dir: "auto",
       key: name
     }, name, i !== fn.p.length - 1 && ", ");
-  })), /*#__PURE__*/React__default['default'].createElement("span", {
+  })), /*#__PURE__*/React__default['default'].createElement("code", {
     className: "luckysheet-arguments-paren"
   }, ")")), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       display: "flex",
+      justifyContent: "end",
+      width: "68px",
+      height: "20px",
+      alignItems: "center",
       gap: "4px"
     }
   }, fn.LOGO && (/*#__PURE__*/React__default['default'].createElement("img", {
     src: fn.LOGO,
     alt: "Service Logo",
-    width: 32,
-    height: 32
+    style: {
+      width: "20px"
+    }
   })), fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       borderRadius: "4px",
-      width: "20px",
-      height: "20px",
-      backgroundColor: "".concat(localStorage.getItem(fn.API_KEY) ? "#177E23" : "#F9A92B")
-    }
+      backgroundColor: "".concat(isKeyAdded ? "#177E23" : "#e8ebec"),
+      width: "16px",
+      height: "16px"
+    },
+    className: "flex justify-center"
   }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
     name: "Key",
     style: {
-      color: "white"
+      color: isKeyAdded ? "white" : "#77818A",
+      width: "12px",
+      height: "12px"
     }
-  }))))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+    name: showFunctionBody ? "ChevronUp" : "ChevronDown",
+    width: 16,
+    height: 16
+  })))), showFunctionBody && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-content",
     style: {
-      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA")
     }
   }, fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
     style: {
-      borderLeft: "4px solid ".concat(API_KEY ? "#177E23" : "#fb923c"),
+      borderLeft: "4px solid ".concat(isKeyAdded ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
       padding: "16px",
       margin: "4px 4px 0px 4px",
@@ -964,38 +999,40 @@ var FormulaHint = function FormulaHint(props) {
     }
   }, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
-      fontSize: "14px",
-      fontWeight: "600",
-      color: "#1f2937",
       margin: "0 0 8px 0"
-    }
-  }, "API key is required"), /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
-    name: "ChevronDown",
+    },
+    className: "text-heading-xsm color-text-default"
+  }, isKeyAdded ? "API key provided" : "API key is required"), /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+    name: showAPInput ? "ChevronUp" : "ChevronDown",
     width: 24,
     height: 24
   })), showAPInput && (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("p", {
     style: {
-      color: "#6b7280",
       margin: "0 0 16px 0"
-    }
-  }, "This function is require API key. Please paste it below and\n                  press 'Ok'."), /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      display: "flex",
-      gap: "12px"
-    }
+    },
+    className: "text-body-sm color-text-default"
+  }, "This function requires an API key. Please paste it below and\n                  press 'Ok'."), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "w-full"
   }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
     value: API_KEY,
     id: "function-api-key",
     type: "text",
-    placeholder: "API key",
+    placeholder: apiKeyPlaceholder[fn.API_KEY],
     onChange: function onChange(e) {
       setAPI_KEY(e.target.value);
+      setApiKeyAdded(false);
     }
-  }), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex justify-end mt-2"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
     onClick: function onClick() {
       localStorage.setItem(fn.API_KEY, API_KEY);
-    }
-  }, "Ok")))))), /*#__PURE__*/React__default['default'].createElement("div", {
+      setApiKeyAdded(true);
+      setShowAPInput(false);
+    },
+    disabled: !API_KEY,
+    className: "min-w-[80px]"
+  }, "Ok"))))))), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       backgroundColor: "white",
       padding: "6px",
@@ -1003,13 +1040,20 @@ var FormulaHint = function FormulaHint(props) {
       borderRadius: "4px"
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-content-example"
+    className: ""
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-section-title example-title"
-  }, formulaMore.helpExample), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-formula"
+    style: {
+      lineHeight: "16px",
+      fontSize: "12px"
+    },
+    className: "text-body-sm-bold mb-1 color-text-secondary"
+  }, formulaMore.helpExample), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("code", {
+    style: {
+      overflowWrap: "break-word"
+    },
+    className: "example-value-code"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "luckysheet-arguments-help-function-name example-value"
+    className: "luckysheet-arguments-help-function-name"
   }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "luckysheet-arguments-paren"
   }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
@@ -1022,26 +1066,32 @@ var FormulaHint = function FormulaHint(props) {
     }, param.example, i !== fn.p.length - 1 && ", ");
   })), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "luckysheet-arguments-paren"
-  }, ")"))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, ")")))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-content-detail",
     style: {
-      paddingBottom: "6px"
+      paddingBottom: "16px"
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-section"
+    className: ""
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-section-title luckysheet-arguments-help-parameter-name example-title"
+    style: {
+      lineHeight: "16px",
+      fontSize: "12px",
+      padding: "0px"
+    },
+    className: "text-body-sm-bold mb-1 mt-2 color-text-secondary"
   }, "About"), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "luckysheet-arguments-help-parameter-content example-value"
+    className: "luckysheet-arguments-help-parameter-content text-helper-text-sm"
   }, fn.d))), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      paddingTop: "16px"
+    },
     className: "luckysheet-formula-help-content-param"
   }, fn.p.map(function (param) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-arguments-help-section",
+      className: "",
       key: param.name
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-arguments-help-section-title example-title"
-    }, param.name, param.repeat === "y" && (/*#__PURE__*/React__default['default'].createElement("span", {
+    }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("code", null, param.name, param.repeat === "y" && (/*#__PURE__*/React__default['default'].createElement("span", {
       className: "luckysheet-arguments-help-argument-info example-value",
       style: {
         marginTop: "2px"
@@ -1051,15 +1101,23 @@ var FormulaHint = function FormulaHint(props) {
       style: {
         marginTop: "2px"
       }
-    }, "-[", formulaMore.allowOptionText, "]"))), /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "luckysheet-arguments-help-parameter-content example-value",
+    }, "-[", formulaMore.allowOptionText, "]")))), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "luckysheet-arguments-help-parameter-content text-helper-text-sm",
       style: {
         marginTop: "2px"
       }
     }, param.detail));
-  })))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-foot"
-  }));
+  }))))), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      padding: "8px",
+      borderBottomLeftRadius: "10px",
+      borderBottomRightRadius: "10px"
+    },
+    className: "w-full"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "color-text-link text-helper-text-sm"
+  }, "Learn More")));
 };
 
 function usePrevious(value) {
@@ -1205,6 +1263,48 @@ var InputBox = function InputBox() {
       e.stopPropagation();
     }
   }, [getActiveFormula, setContext]);
+  var selectActiveFormulaOnClick = React.useCallback(function (e) {
+    var activeFormula = getActiveFormula();
+    var formulaNameDiv = activeFormula === null || activeFormula === void 0 ? void 0 : activeFormula.querySelector(".luckysheet-formula-search-func");
+    if (formulaNameDiv) {
+      var formulaName = formulaNameDiv.textContent;
+      var textEditor = document.getElementById("luckysheet-rich-text-editor");
+      if (textEditor) {
+        var _getrangeseleciton2;
+        var searchTxt = ((_getrangeseleciton2 = fortuneCore.getrangeseleciton()) === null || _getrangeseleciton2 === void 0 ? void 0 : _getrangeseleciton2.textContent) || "";
+        var deleteCount = searchTxt.length;
+        textEditor.focus();
+        var selection = window.getSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0) return;
+        var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
+        if (deleteCount !== 0 && range) {
+          var startOffset = Math.max(range.startOffset - deleteCount, 0);
+          var endOffset = range.startOffset;
+          range.setStart(range.startContainer, startOffset);
+          range.setEnd(range.startContainer, endOffset);
+          range.deleteContents();
+        }
+        var functionStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>");
+        var lParStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>";
+        var functionNode = new DOMParser().parseFromString(functionStr, "text/html").body.childNodes[0];
+        var lParNode = new DOMParser().parseFromString(lParStr, "text/html").body.childNodes[0];
+        if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
+          range === null || range === void 0 ? void 0 : range.setStart(range.startContainer.parentNode, 1);
+        }
+        range === null || range === void 0 ? void 0 : range.insertNode(lParNode);
+        range === null || range === void 0 ? void 0 : range.insertNode(functionNode);
+        range === null || range === void 0 ? void 0 : range.collapse();
+        selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+        if (range) selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+        setContext(function (draftCtx) {
+          draftCtx.functionCandidates = [];
+          draftCtx.functionHint = formulaName;
+        });
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [getActiveFormula, setContext]);
   var onKeyDown = React.useCallback(function (e) {
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
     preText.current = inputRef.current.innerText;
@@ -1324,6 +1424,18 @@ var InputBox = function InputBox() {
   })), document.activeElement === inputRef.current && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(FormulaSearch, {
     style: {
       top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
+    },
+    onMouseOver: function onMouseOver(e) {
+      if (document.getElementById("luckysheet-formula-search-c")) {
+        var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
+        if (!hoveredItem) return;
+        clearSearchItemActiveClass();
+        hoveredItem.classList.add("luckysheet-formula-search-item-active");
+      }
+      e.preventDefault();
+    },
+    onClick: function onClick(e) {
+      selectActiveFormulaOnClick(e);
     }
   }), /*#__PURE__*/React__default['default'].createElement(FormulaHint, {
     style: {
@@ -2459,8 +2571,18 @@ function useDialog() {
   };
 }
 
+var datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
+var injectDatepickerStyles = function injectDatepickerStyles() {
+  if (typeof document !== "undefined") {
+    var styleSheet = document.createElement("style");
+    styleSheet.textContent = datepickerStyles;
+    document.head.appendChild(styleSheet);
+  }
+};
+
+injectDatepickerStyles();
 var DataVerification = function DataVerification() {
-  var _context$dataVerifica, _context$dataVerifica2, _context$dataVerifica3, _context$dataVerifica4, _context$dataVerifica5, _context$dataVerifica6, _context$dataVerifica7, _context$dataVerifica8, _context$dataVerifica9, _context$dataVerifica0, _context$dataVerifica1, _context$dataVerifica10, _context$dataVerifica11, _context$dataVerifica12, _context$dataVerifica13, _context$dataVerifica14, _context$dataVerifica15, _context$dataVerifica16, _context$dataVerifica17, _context$dataVerifica18, _context$dataVerifica19, _context$dataVerifica20, _context$dataVerifica21, _context$dataVerifica22, _context$dataVerifica23;
+  var _context$dataVerifica, _context$dataVerifica2, _context$dataVerifica3, _context$dataVerifica4, _context$dataVerifica5, _context$dataVerifica6, _context$dataVerifica7, _context$dataVerifica8, _context$dataVerifica9, _context$dataVerifica0, _context$dataVerifica1, _context$dataVerifica10, _context$dataVerifica11;
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext;
@@ -2469,15 +2591,11 @@ var DataVerification = function DataVerification() {
     hideDialog = _useDialog.hideDialog;
   var _locale = fortuneCore.locale(context),
     dataVerification = _locale.dataVerification,
-    toolbar = _locale.toolbar,
     button = _locale.button,
     generalDialog = _locale.generalDialog;
-  var _useState = React.useState(["between", "notBetween", "equal", "notEqualTo", "moreThanThe", "lessThan", "greaterOrEqualTo", "lessThanOrEqualTo"]),
+  var _useState = React.useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"]),
     _useState2 = _slicedToArray(_useState, 1),
-    numberCondition = _useState2[0];
-  var _useState3 = React.useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"]),
-    _useState4 = _slicedToArray(_useState3, 1),
-    dateCondition = _useState4[0];
+    dateCondition = _useState2[0];
   var dataSelectRange = React.useCallback(function (type, value) {
     hideDialog();
     setContext(function (ctx) {
@@ -2612,48 +2730,36 @@ var DataVerification = function DataVerification() {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "fortune-data-verification"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "title"
-  }, toolbar.dataVerification), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "box"
+    className: "flex flex-col gap-4"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "box-item",
-    style: {
-      borderTop: "1px solid #E1E4E8"
-    }
+    className: "flex flex-col"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "box-item-title"
-  }, dataVerification.cellRange), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "data-verification-range"
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    className: "formulaInputFocus",
-    spellCheck: "false",
+    className: "text-heading-xsm mb-2"
+  }, dataVerification.cellRange), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
+    rightIcon: /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+      name: "Grid2x2",
+      size: "sm"
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
     value: (_context$dataVerifica = context.dataVerification.dataRegulation) === null || _context$dataVerifica === void 0 ? void 0 : _context$dataVerifica.rangeTxt,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.rangeTxt = value;
       });
-    }
-  }), /*#__PURE__*/React__default['default'].createElement("i", {
-    className: "icon",
-    "aria-hidden": "true",
+    },
     onClick: function onClick() {
       hideDialog();
       dataSelectRange("rangeTxt", context.dataVerification.dataRegulation.value1);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-    name: "tab",
-    width: 18
-  })))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "box-item"
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex flex-col"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "box-item-title"
-  }, dataVerification.verificationCondition), /*#__PURE__*/React__default['default'].createElement("select", {
-    className: "data-verification-type-select",
+    className: "text-heading-xsm mb-2"
+  }, dataVerification.verificationCondition), /*#__PURE__*/React__default['default'].createElement(ui.Select, {
     value: context.dataVerification.dataRegulation.type,
-    onChange: function onChange(e) {
-      var value = e.target.value;
+    onValueChange: function onValueChange(value) {
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type = value;
         if (value === "dropdown" || value === "checkbox") {
@@ -2669,18 +2775,14 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value2 = "";
       });
     }
-  }, ["dropdown", "checkbox", "number", "number_integer", "number_decimal", "text_content", "text_length", "date", "validity"].map(function (v) {
-    return /*#__PURE__*/React__default['default'].createElement("option", {
+  }, /*#__PURE__*/React__default['default'].createElement(ui.SelectTrigger, null, /*#__PURE__*/React__default['default'].createElement(ui.SelectValue, null)), /*#__PURE__*/React__default['default'].createElement(ui.SelectContent, null, ["dropdown", "checkbox", "date"].map(function (v) {
+    return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
       value: v,
       key: v
     }, dataVerification[v]);
-  })), ((_context$dataVerifica2 = context.dataVerification) === null || _context$dataVerifica2 === void 0 ? void 0 : (_context$dataVerifica3 = _context$dataVerifica2.dataRegulation) === null || _context$dataVerifica3 === void 0 ? void 0 : _context$dataVerifica3.type) === "dropdown" && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "data-verification-range"
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    className: "formulaInputFocus",
-    spellCheck: "false",
+  }))), ((_context$dataVerifica2 = context.dataVerification) === null || _context$dataVerifica2 === void 0 ? void 0 : (_context$dataVerifica3 = _context$dataVerifica2.dataRegulation) === null || _context$dataVerifica3 === void 0 ? void 0 : _context$dataVerifica3.type) === "dropdown" && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
     value: context.dataVerification.dataRegulation.value1,
     placeholder: dataVerification.placeholder1,
     onChange: function onChange(e) {
@@ -2689,39 +2791,28 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React__default['default'].createElement("i", {
-    className: "icon",
-    "aria-hidden": "true",
-    onClick: function onClick() {
-      return dataSelectRange("dropDown", context.dataVerification.dataRegulation.value1);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-    name: "tab",
-    width: 18
-  }))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "check"
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "checkbox",
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "mt-4 flex items-center"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
+    className: "border-2",
     checked: context.dataVerification.dataRegulation.type2 === "true",
-    id: "mul",
-    onChange: function onChange(e) {
+    onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type2 = "".concat(checked);
       });
     }
-  }), /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: "mul"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "ml-2"
   }, dataVerification.allowMultiSelect)))), ((_context$dataVerifica4 = context.dataVerification) === null || _context$dataVerifica4 === void 0 ? void 0 : (_context$dataVerifica5 = _context$dataVerifica4.dataRegulation) === null || _context$dataVerifica5 === void 0 ? void 0 : _context$dataVerifica5.type) === "checkbox" && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "show-box-item"
+    className: "mt-4 space-y-2"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "check-box"
-  }, /*#__PURE__*/React__default['default'].createElement("span", null, dataVerification.selected, " \u2014\u2014 "), /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "text",
-    className: "data-verification-value1",
-    placeholder: dataVerification.placeholder2,
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "data-verification-checkbox-label"
+  }, dataVerification.selected), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
     value: (_context$dataVerifica6 = context.dataVerification) === null || _context$dataVerifica6 === void 0 ? void 0 : (_context$dataVerifica7 = _context$dataVerifica6.dataRegulation) === null || _context$dataVerifica7 === void 0 ? void 0 : _context$dataVerifica7.value1,
+    placeholder: dataVerification.placeholder2,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
@@ -2729,129 +2820,41 @@ var DataVerification = function DataVerification() {
       });
     }
   })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "check-box"
-  }, /*#__PURE__*/React__default['default'].createElement("span", null, dataVerification.notSelected, " \u2014\u2014 "), /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "text",
-    className: "data-verification-value2",
-    placeholder: dataVerification.placeholder2,
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "data-verification-checkbox-label"
+  }, dataVerification.notSelected), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
     value: (_context$dataVerifica8 = context.dataVerification) === null || _context$dataVerifica8 === void 0 ? void 0 : (_context$dataVerifica9 = _context$dataVerifica8.dataRegulation) === null || _context$dataVerifica9 === void 0 ? void 0 : _context$dataVerifica9.value2,
+    placeholder: dataVerification.placeholder2,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.value2 = value;
       });
     }
-  })))), (((_context$dataVerifica0 = context.dataVerification) === null || _context$dataVerifica0 === void 0 ? void 0 : (_context$dataVerifica1 = _context$dataVerifica0.dataRegulation) === null || _context$dataVerifica1 === void 0 ? void 0 : _context$dataVerifica1.type) === "number" || ((_context$dataVerifica10 = context.dataVerification) === null || _context$dataVerifica10 === void 0 ? void 0 : (_context$dataVerifica11 = _context$dataVerifica10.dataRegulation) === null || _context$dataVerifica11 === void 0 ? void 0 : _context$dataVerifica11.type) === "number_integer" || ((_context$dataVerifica12 = context.dataVerification) === null || _context$dataVerifica12 === void 0 ? void 0 : (_context$dataVerifica13 = _context$dataVerifica12.dataRegulation) === null || _context$dataVerifica13 === void 0 ? void 0 : _context$dataVerifica13.type) === "number_decimal" || ((_context$dataVerifica14 = context.dataVerification) === null || _context$dataVerifica14 === void 0 ? void 0 : (_context$dataVerifica15 = _context$dataVerifica14.dataRegulation) === null || _context$dataVerifica15 === void 0 ? void 0 : _context$dataVerifica15.type) === "text_length") && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React__default['default'].createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, numberCondition.map(function (v) {
-    return /*#__PURE__*/React__default['default'].createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  })), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "number",
-    placeholder: "1",
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, "-"), /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "number",
-    placeholder: "100",
-    value: context.dataVerification.dataRegulation.value2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value2 = value;
-      });
-    }
-  }))) : (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "number",
-    style: {
-      width: "100%"
-    },
-    placeholder: dataVerification.placeholder3,
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  }))))), ((_context$dataVerifica16 = context.dataVerification) === null || _context$dataVerifica16 === void 0 ? void 0 : (_context$dataVerifica17 = _context$dataVerifica16.dataRegulation) === null || _context$dataVerifica17 === void 0 ? void 0 : _context$dataVerifica17.type) === "text_content" && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React__default['default'].createElement("select", {
-    className: "data-verification-type-select",
+  })))), ((_context$dataVerifica0 = context.dataVerification) === null || _context$dataVerifica0 === void 0 ? void 0 : (_context$dataVerifica1 = _context$dataVerifica0.dataRegulation) === null || _context$dataVerifica1 === void 0 ? void 0 : _context$dataVerifica1.type) === "date" && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Select, {
     value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, ["include", "exclude", "equal"].map(function (v) {
-    return /*#__PURE__*/React__default['default'].createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "text",
-    style: {
-      width: "100%"
-    },
-    placeholder: dataVerification.placeholder4,
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  })))), ((_context$dataVerifica18 = context.dataVerification) === null || _context$dataVerifica18 === void 0 ? void 0 : (_context$dataVerifica19 = _context$dataVerifica18.dataRegulation) === null || _context$dataVerifica19 === void 0 ? void 0 : _context$dataVerifica19.type) === "date" && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React__default['default'].createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
+    onValueChange: function onValueChange(value) {
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type2 = value;
         ctx.dataVerification.dataRegulation.value1 = "";
         ctx.dataVerification.dataRegulation.value2 = "";
       });
     }
-  }, dateCondition.map(function (v) {
-    return /*#__PURE__*/React__default['default'].createElement("option", {
+  }, /*#__PURE__*/React__default['default'].createElement(ui.SelectTrigger, null, /*#__PURE__*/React__default['default'].createElement(ui.SelectValue, null)), /*#__PURE__*/React__default['default'].createElement(ui.SelectContent, null, dateCondition.map(function (v) {
+    return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
       value: v,
       key: v
     }, dataVerification[v]);
-  })), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-box"
+  }))), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "mt-4 flex gap-2 items-center"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "datepicker-toggle"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "date",
-    placeholder: "1",
+    className: "datepicker-input",
     value: context.dataVerification.dataRegulation.value1,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2859,9 +2862,13 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, "-"), /*#__PURE__*/React__default['default'].createElement("input", {
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "datepicker-toggle-button"
+  })), /*#__PURE__*/React__default['default'].createElement("span", null, "-"), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "datepicker-toggle"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "date",
-    placeholder: "100",
+    className: "datepicker-input",
     value: context.dataVerification.dataRegulation.value2,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2869,13 +2876,15 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value2 = value;
       });
     }
-  }))) : (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-box"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "datepicker-toggle-button"
+  })))) : (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "datepicker-toggle"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "date",
-    style: {
-      width: "100%"
-    },
+    className: "datepicker-input",
     placeholder: dataVerification.placeholder3,
     value: context.dataVerification.dataRegulation.value1,
     onChange: function onChange(e) {
@@ -2884,57 +2893,35 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }))))), ((_context$dataVerifica20 = context.dataVerification) === null || _context$dataVerifica20 === void 0 ? void 0 : (_context$dataVerifica21 = _context$dataVerifica20.dataRegulation) === null || _context$dataVerifica21 === void 0 ? void 0 : _context$dataVerifica21.type) === "validity" && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React__default['default'].createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, ["identificationNumber", "phoneNumber"].map(function (v) {
-    return /*#__PURE__*/React__default['default'].createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  }))))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "box-item"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "datepicker-toggle-button"
+  }))))))), /*#__PURE__*/React__default['default'].createElement(ui.Divider, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex flex-col gap-2"
   }, ["prohibitInput", "hintShow"].map(function (v) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "check",
-      key: "div".concat(v)
-    }, /*#__PURE__*/React__default['default'].createElement("input", {
-      type: "checkbox",
-      id: v,
-      key: "input".concat(v),
+      key: v,
+      className: "flex items-center"
+    }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
+      className: "border-2",
       checked: context.dataVerification.dataRegulation[v],
-      onChange: function onChange() {
+      onCheckedChange: function onCheckedChange(e) {
+        var checked = e.target.checked;
         setContext(function (ctx) {
           var _ctx$dataVerification5;
           var dataRegulation = (_ctx$dataVerification5 = ctx.dataVerification) === null || _ctx$dataVerification5 === void 0 ? void 0 : _ctx$dataVerification5.dataRegulation;
           if (v === "prohibitInput") {
-            dataRegulation.prohibitInput = !dataRegulation.prohibitInput;
+            dataRegulation.prohibitInput = checked;
           } else if (v === "hintShow") {
-            dataRegulation.hintShow = !dataRegulation.hintShow;
+            dataRegulation.hintShow = checked;
           }
         });
-      }
-    }), /*#__PURE__*/React__default['default'].createElement("label", {
-      htmlFor: v,
-      key: "label".concat(v)
-    }, dataVerification[v]));
-  }), ((_context$dataVerifica22 = context.dataVerification) === null || _context$dataVerifica22 === void 0 ? void 0 : (_context$dataVerifica23 = _context$dataVerifica22.dataRegulation) === null || _context$dataVerifica23 === void 0 ? void 0 : _context$dataVerifica23.hintShow) && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "text",
-    style: {
-      width: "100%"
-    },
+      }
+    }), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "ml-2"
+    }, dataVerification[v]));
+  }), ((_context$dataVerifica10 = context.dataVerification) === null || _context$dataVerifica10 === void 0 ? void 0 : (_context$dataVerifica11 = _context$dataVerifica10.dataRegulation) === null || _context$dataVerifica11 === void 0 ? void 0 : _context$dataVerifica11.hintShow) && (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
     placeholder: dataVerification.placeholder5,
     value: context.dataVerification.dataRegulation.hintValue,
     onChange: function onChange(e) {
@@ -2943,25 +2930,37 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.hintValue = value;
       });
     }
-  }))))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-primary",
+  }))))), /*#__PURE__*/React__default['default'].createElement(ui.Divider, {
+    className: "w-full border-t-[1px] my-4"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex gap-2 justify-between items-center"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
-      btn("confirm");
+      btn("close");
+    }
+  }, button.cancel), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
     },
-    tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-close",
     onClick: function onClick() {
       btn("delete");
+    }
+  }, dataVerification.deleteVerification), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
     },
-    tabIndex: 0
-  }, dataVerification.deleteVerification), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-close",
     onClick: function onClick() {
-      btn("close");
-    },
-    tabIndex: 0
-  }, button.cancel));
+      btn("confirm");
+    }
+  }, button.confirm))));
 };
 
 function getDisplayedRangeTxt(context) {
@@ -2973,12 +2972,7 @@ function getDisplayedRangeTxt(context) {
   return (_context$rangeDialog$ = (_context$rangeDialog = context.rangeDialog) === null || _context$rangeDialog === void 0 ? void 0 : _context$rangeDialog.rangeTxt) !== null && _context$rangeDialog$ !== void 0 ? _context$rangeDialog$ : "";
 }
 
-var datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
-if (typeof document !== "undefined") {
-  var styleSheet = document.createElement("style");
-  styleSheet.textContent = datepickerStyles;
-  document.head.appendChild(styleSheet);
-}
+injectDatepickerStyles();
 var ConditionRules = function ConditionRules(_ref) {
   var type = _ref.type;
   var _useContext = React.useContext(WorkbookContext),
@@ -3299,7 +3293,8 @@ var RangeDialog = function RangeDialog() {
     showDialog = _useDialog.showDialog;
   var _locale = fortuneCore.locale(context),
     dataVerification = _locale.dataVerification,
-    button = _locale.button;
+    button = _locale.button,
+    toolbar = _locale.toolbar;
   var _useState = React.useState(getDisplayedRangeTxt(context)),
     _useState2 = _slicedToArray(_useState, 2),
     rangeTxt2 = _useState2[0],
@@ -3324,7 +3319,7 @@ var RangeDialog = function RangeDialog() {
       }), undefined, fortuneCore.locale(context).conditionformat["conditionformat_".concat(rulesType)]);
       return;
     }
-    showDialog(/*#__PURE__*/React__default['default'].createElement(DataVerification, null));
+    showDialog(/*#__PURE__*/React__default['default'].createElement(DataVerification, null), undefined, toolbar.dataVerification);
   }, [setContext, showDialog, context]);
   React.useEffect(function () {
     setRangeTxt2(getDisplayedRangeTxt(context));
@@ -3513,7 +3508,7 @@ var DropDownList = function DropDownList() {
             arr.splice(index, 1);
           }
           setSelected(arr);
-          fortuneCore.setDropcownValue(ctx, v, arr);
+          fortuneCore.setDropdownValue(ctx, v, arr);
         });
       },
       tabIndex: 0
@@ -3528,6 +3523,118 @@ var DropDownList = function DropDownList() {
   }));
 };
 
+var IframeBoxs = function IframeBoxs() {
+  var _context$insertedIfra;
+  var _useContext = React.useContext(WorkbookContext),
+    context = _useContext.context,
+    setContext = _useContext.setContext,
+    refs = _useContext.refs;
+  var containerRef = React.useRef(null);
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (!containerRef.current) return;
+      var iframeBoxes = containerRef.current.querySelectorAll(".luckysheet-modal-dialog-iframe");
+      var clickedInsideSomeIframe = Array.from(iframeBoxes).some(function (el) {
+        return el.contains(e.target);
+      });
+      if (!clickedInsideSomeIframe && context.activeIframe !== undefined) {
+        setContext(function (ctx) {
+          ctx.activeIframe = undefined;
+        });
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [context.activeIframe, setContext]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "fortune-iframe-boxes",
+    ref: containerRef
+  }, (_context$insertedIfra = context.insertedIframes) === null || _context$insertedIfra === void 0 ? void 0 : _context$insertedIfra.map(function (frame) {
+    var isActive = frame.id === context.activeIframe;
+    var style = {
+      width: frame.width * context.zoomRatio,
+      height: frame.height * context.zoomRatio,
+      left: frame.left * context.zoomRatio,
+      top: frame.top * context.zoomRatio,
+      position: "absolute",
+      padding: 0,
+      zIndex: isActive ? 300 : 200
+    };
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: frame.id,
+      id: isActive ? "fortune-modal-dialog-activeIframe" : frame.id,
+      className: "luckysheet-modal-dialog luckysheet-modal-dialog-iframe",
+      style: style,
+      onClick: function onClick(e) {
+        if (!isActive) {
+          setContext(function (ctx) {
+            ctx.activeIframe = frame.id;
+          });
+        }
+        e.stopPropagation();
+      },
+      onMouseDown: function onMouseDown(e) {
+        if (isActive) {
+          fortuneCore.onIframeMoveStart(context, refs.globalCache, e.nativeEvent);
+        }
+        e.stopPropagation();
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "luckysheet-modal-dialog-content",
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("iframe", {
+      title: "iframe-".concat(frame.id),
+      src: frame.src,
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "none",
+        pointerEvents: "none"
+      }
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "luckysheet-modal-dialog-border"
+    }), isActive && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "luckysheet-modal-dialog-resize"
+    }, ["lt", "mt", "lm", "rm", "rt", "lb", "mb", "rb"].map(function (dir) {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        key: dir,
+        className: "luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-".concat(dir),
+        "data-type": dir,
+        style: {
+          zIndex: 300,
+          position: "absolute"
+        },
+        onMouseDown: function onMouseDown(e) {
+          fortuneCore.onIframeResizeStart(context, refs.globalCache, e.nativeEvent, dir);
+          e.stopPropagation();
+        }
+      });
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "luckysheet-modal-dialog-controll"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "luckysheet-modal-controll-btn luckysheet-modal-controll-del",
+      role: "button",
+      tabIndex: 0,
+      title: "Delete",
+      onClick: function onClick() {
+        setContext(function (ctx) {
+          var _ctx$insertedIframes;
+          ctx.insertedIframes = ctx === null || ctx === void 0 ? void 0 : (_ctx$insertedIframes = ctx.insertedIframes) === null || _ctx$insertedIframes === void 0 ? void 0 : _ctx$insertedIframes.filter(function (f) {
+            return f.id !== frame.id;
+          });
+          ctx.activeIframe = undefined;
+        });
+      }
+    }, "DELETE")))));
+  }));
+};
+
 var SheetOverlay = function SheetOverlay() {
   var _refs$cellArea$curren, _refs$cellArea$curren2, _context$luckysheet_s, _context$luckysheet_s2, _context$luckysheet_s3, _context$luckysheet_s4, _context$luckysheet_s5, _context$luckysheet_s6, _context$presences$le, _context$presences, _context$linkCard, _context$rangeDialog;
   var _useContext = React.useContext(WorkbookContext),
@@ -3970,7 +4077,7 @@ var SheetOverlay = function SheetOverlay() {
     id: "luckysheet-multipleRange-show"
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     id: "luckysheet-dynamicArray-hightShow"
-  }), /*#__PURE__*/React__default['default'].createElement(ImgBoxs, null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement(ImgBoxs, null), /*#__PURE__*/React__default['default'].createElement(IframeBoxs, null), /*#__PURE__*/React__default['default'].createElement("div", {
     id: "luckysheet-dataVerification-dropdown-btn",
     onClick: function onClick() {
       setContext(function (ctx) {
@@ -3983,8 +4090,9 @@ var SheetOverlay = function SheetOverlay() {
       display: "none"
     }
   }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-    name: "combo-arrow",
-    width: 16
+    name: "caret-down-fill",
+    width: 16,
+    height: 16
   })), context.dataVerificationDropDownList && /*#__PURE__*/React__default['default'].createElement(DropDownList, null), /*#__PURE__*/React__default['default'].createElement("div", {
     id: "luckysheet-dataVerification-showHintBox",
     className: "luckysheet-mousedown-cancel",
@@ -4303,6 +4411,9 @@ var Combo = function Combo(_ref) {
     setPopupPosition = _useState4[1];
   var popupRef = React.useRef(null);
   var buttonRef = React.useRef(null);
+  var isLucideIcon = React.useMemo(function () {
+    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip"].includes(iconId);
+  }, [iconId]);
   useOutsideClick(popupRef, function () {
     setOpen(false);
   });
@@ -4330,7 +4441,7 @@ var Combo = function Combo(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, !isLucideIcon ? (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
       if (_onClick) {
@@ -4349,7 +4460,13 @@ var Combo = function Combo(_ref) {
     name: iconId
   })) : (/*#__PURE__*/React__default['default'].createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : ""))), showArrow && (/*#__PURE__*/React__default['default'].createElement("div", {
+  }, text !== undefined ? text : "")))) : (/*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
+    icon: getIcon(iconId),
+    variant: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  })), showArrow && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-toolbar-combo-arrow",
     onClick: function onClick() {
       return setOpen(!open);
@@ -5254,6 +5371,121 @@ var FormatSearch = function FormatSearch(_ref) {
   }, button.cancel)));
 };
 
+var DuneChartsInputModal = function DuneChartsInputModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    icon = _ref.icon,
+    _ref$submitText = _ref.submitText,
+    submitText = _ref$submitText === void 0 ? "Submit" : _ref$submitText,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Enter a value..." : _ref$placeholder;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    url = _useState2[0],
+    setUrl = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showError = _useState4[0],
+    setShowError = _useState4[1];
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isOpen && inputRef.current) {
+      var timer = setTimeout(function () {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }, 100);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [isOpen]);
+  if (!isOpen) return null;
+  var handleSubmit = function handleSubmit() {
+    var trimmed = url.trim();
+    if (trimmed && fortuneCore.sanitizeDuneUrl(trimmed)) {
+      onSubmit(trimmed);
+      setUrl("");
+      setShowError(false);
+      onClose();
+    } else {
+      setShowError(true);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      handleSubmit();
+    }
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "custom-overlay",
+    onClick: onClose
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "input-modal",
+    style: {
+      transformOrigin: "top center"
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-header"
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    name: icon
+  }), /*#__PURE__*/React__default['default'].createElement("input", {
+    ref: inputRef,
+    className: "modal-input",
+    type: "text",
+    placeholder: placeholder,
+    value: url,
+    onChange: function onChange(e) {
+      setUrl(e.target.value);
+      setShowError(false);
+    },
+    onKeyDown: handleKeyDown
+  })), showError && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-error-message"
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    style: {
+      width: "14px",
+      height: "14px"
+    },
+    name: "circle-alert"
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, "Please make sure the URL is a valid Dune chart link"))), url.length > 0 && !showError && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-footer"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    onClick: handleSubmit,
+    className: "modal-button"
+  }, submitText)))));
+};
+
+var getIcon = function getIcon(title) {
+  switch (title) {
+    case "align-left":
+      return "AlignLeft";
+    case "align-center":
+      return "AlignCenter";
+    case "align-right":
+      return "AlignRight";
+    case "align-top":
+      return "ArrowUpFromLine";
+    case "align-middle":
+      return "AlignVerticalMiddle";
+    case "align-bottom":
+      return "ArrowDownFromLine";
+    case "text-overflow":
+      return "TextOverflow";
+    case "text-wrap":
+      return "WrapText";
+    case "text-clip":
+      return "TextClip";
+    default:
+      return "";
+  }
+};
 var Toolbar = function Toolbar(_ref) {
   var _context$luckysheet_s, _flowdata$row, _settings$customToolb;
   var setMoreItems = _ref.setMoreItems,
@@ -5275,6 +5507,10 @@ var Toolbar = function Toolbar(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     itemLocations = _useState4[0],
     setItemLocations = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showDuneModal = _useState6[0],
+    setShowDuneModal = _useState6[1];
   var _useDialog = useDialog(),
     showDialog = _useDialog.showDialog,
     hideDialog = _useDialog.hideDialog;
@@ -5305,14 +5541,12 @@ var Toolbar = function Toolbar(_ref) {
   var sheetWidth = context.luckysheetTableContentHW[0];
   var currency = settings.currency;
   var defaultFormat = defaultFmt(currency);
-  var _useState5 = React.useState("#000000"),
-    _useState6 = _slicedToArray(_useState5, 2),
-    customColor = _useState6[0],
-    setcustomColor = _useState6[1];
-  var _useState7 = React.useState("1"),
-    _useState8 = _slicedToArray(_useState7, 2),
-    customStyle = _useState8[0],
-    setcustomStyle = _useState8[1];
+  var _useState7 = React.useState("#000000"),
+    _useState8 = _slicedToArray(_useState7, 1),
+    customColor = _useState8[0];
+  var _useState9 = React.useState("1"),
+    _useState0 = _slicedToArray(_useState9, 1),
+    customStyle = _useState0[0];
   var showSubMenu = React.useCallback(function (e, className) {
     var target = e.target;
     var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
@@ -5592,27 +5826,38 @@ var Toolbar = function Toolbar(_ref) {
         tooltip: toolbar.horizontalAlign,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React__default['default'].createElement(Select, null, items.map(function (_ref3) {
-          var text = _ref3.text,
-            title = _ref3.title;
-          return /*#__PURE__*/React__default['default'].createElement(Option, {
+        return /*#__PURE__*/React__default['default'].createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, items.map(function (_ref3) {
+          var _$find2;
+          var title = _ref3.title;
+          return /*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
             key: title,
+            isActive: ((_$find2 = ___default['default'].find(items, function (item) {
+              return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
+            })) === null || _$find2 === void 0 ? void 0 : _$find2.title) === title,
+            icon: getIcon(title),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 fortuneCore.handleHorizontalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-            name: title
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
     if (name === "vertical-align") {
-      var _$find2;
+      var _$find3;
       var _items = [{
         title: "align-top",
         text: align.top,
@@ -5627,29 +5872,40 @@ var Toolbar = function Toolbar(_ref) {
         value: 2
       }];
       return /*#__PURE__*/React__default['default'].createElement(Combo, {
-        iconId: ((_$find2 = ___default['default'].find(_items, function (item) {
+        iconId: ((_$find3 = ___default['default'].find(_items, function (item) {
           return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
-        })) === null || _$find2 === void 0 ? void 0 : _$find2.title) || "align-top",
+        })) === null || _$find3 === void 0 ? void 0 : _$find3.title) || "align-top",
         key: name,
         tooltip: toolbar.verticalAlign,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React__default['default'].createElement(Select, null, _items.map(function (_ref4) {
-          var text = _ref4.text,
-            title = _ref4.title;
-          return /*#__PURE__*/React__default['default'].createElement(Option, {
+        return /*#__PURE__*/React__default['default'].createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, _items.map(function (_ref4) {
+          var _$find4;
+          var title = _ref4.title;
+          return /*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
             key: title,
+            isActive: ((_$find4 = ___default['default'].find(_items, function (item) {
+              return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
+            })) === null || _$find4 === void 0 ? void 0 : _$find4.title) === title,
+            icon: getIcon(title),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 fortuneCore.handleVerticalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-            name: title
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
@@ -5724,7 +5980,7 @@ var Toolbar = function Toolbar(_ref) {
         key: name,
         onClick: function onClick() {
           if (context.allowEdit === false) return;
-          showDialog(/*#__PURE__*/React__default['default'].createElement(DataVerification, null));
+          showDialog(/*#__PURE__*/React__default['default'].createElement(DataVerification, null), undefined, toolbar.dataVerification);
         }
       });
     }
@@ -6198,12 +6454,23 @@ var Toolbar = function Toolbar(_ref) {
         tooltip: toolbar.textWrap,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React__default['default'].createElement(Select, null, _items6.map(function (_ref1) {
-          var text = _ref1.text,
-            iconId = _ref1.iconId,
+        return /*#__PURE__*/React__default['default'].createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, _items6.map(function (_ref1) {
+          var iconId = _ref1.iconId,
             value = _ref1.value;
-          return /*#__PURE__*/React__default['default'].createElement(Option, {
+          return /*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
             key: value,
+            isActive: _curr.value === value,
+            icon: getIcon(iconId),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 var d = fortuneCore.getFlowdata(ctx);
@@ -6211,12 +6478,9 @@ var Toolbar = function Toolbar(_ref) {
                 fortuneCore.updateFormat(ctx, refs.cellInput.current, d, "tb", value);
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-            name: iconId
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
@@ -6367,7 +6631,7 @@ var Toolbar = function Toolbar(_ref) {
         });
       }
     });
-  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDialog, hideDialog, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
+  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDuneModal, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: containerRef,
     className: "fortune-toolbar",
@@ -6422,7 +6686,29 @@ var Toolbar = function Toolbar(_ref) {
       icon: n.icon,
       iconName: n.iconName
     }, n.children);
-  }));
+  }), /*#__PURE__*/React__default['default'].createElement(Button, {
+    iconId: "dune-logo",
+    tooltip: "Insert Dune Chart",
+    key: "dune-charts",
+    onClick: function onClick() {
+      if (context.allowEdit === false) return;
+      setShowDuneModal(true);
+    }
+  }), showDuneModal && (/*#__PURE__*/React__default['default'].createElement(DuneChartsInputModal, {
+    isOpen: showDuneModal,
+    onSubmit: function onSubmit(url) {
+      setContext(function (draftCtx) {
+        fortuneCore.insertDuneChart(draftCtx, url);
+      });
+      setShowDuneModal(false);
+    },
+    onClose: function onClose() {
+      return setShowDuneModal(false);
+    },
+    icon: "dune-logo",
+    placeholder: "Add Dune chart link to embed",
+    submitText: "Embed Dune chart"
+  })));
 };
 
 var LocationBox = function LocationBox() {
@@ -9553,6 +9839,74 @@ var SVGDefines = function SVGDefines(_ref) {
     "clip-rule": "evenodd",
     d: "M12.75 2.25C13.1642 2.25 13.5 2.58579 13.5 3V15C13.5 15.4142 13.1642 15.75 12.75 15.75C12.3358 15.75 12 15.4142 12 15V3C12 2.58579 12.3358 2.25 12.75 2.25Z",
     fill: "#363B3F"
+  })), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "dune-logo",
+    viewBox: "0 0 18 16",
+    fill: "none"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    width: "18",
+    height: "16",
+    viewBox: "0 0 18 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    "clip-path": "url(#clip0_80_246690)"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M7.99485 15.9875C12.4102 15.9875 15.9896 12.4085 15.9896 7.99373C15.9896 3.57891 12.4102 0 7.99485 0C3.57941 0 0 3.57891 0 7.99373C0 12.4085 3.57941 15.9875 7.99485 15.9875Z",
+    fill: "#F4603E"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M1.39258 12.5028C1.39258 12.5028 6.67562 10.7723 15.9868 7.73633C15.9868 7.73633 16.4968 12.7082 11.3424 15.3015C11.3424 15.3015 8.80068 16.5197 6.01215 15.7383C6.01215 15.7383 3.23545 15.2142 1.39258 12.5028Z",
+    fill: "#1E1870"
+  })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("clipPath", {
+    id: "clip0_80_246690"
+  }, /*#__PURE__*/React__default['default'].createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))))), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "circle-alert",
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    "clip-path": "url(#clip0_138_127604)"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M6.99967 4.0835C7.32184 4.0835 7.58301 4.34466 7.58301 4.66683V7.00016C7.58301 7.32233 7.32184 7.5835 6.99967 7.5835C6.67751 7.5835 6.41634 7.32233 6.41634 7.00016V4.66683C6.41634 4.34466 6.67751 4.0835 6.99967 4.0835Z",
+    fill: "#FB3449"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M6.99967 8.75016C6.67751 8.75016 6.41634 9.01133 6.41634 9.3335C6.41634 9.65566 6.67751 9.91683 6.99967 9.91683H7.00551C7.32767 9.91683 7.58884 9.65566 7.58884 9.3335C7.58884 9.01133 7.32767 8.75016 7.00551 8.75016H6.99967Z",
+    fill: "#FB3449"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M0.583008 7.00016C0.583008 3.45634 3.45585 0.583496 6.99967 0.583496C10.5435 0.583496 13.4163 3.45634 13.4163 7.00016C13.4163 10.544 10.5435 13.4168 6.99967 13.4168C3.45585 13.4168 0.583008 10.544 0.583008 7.00016ZM6.99967 1.75016C4.10018 1.75016 1.74967 4.10067 1.74967 7.00016C1.74967 9.89966 4.10018 12.2502 6.99967 12.2502C9.89917 12.2502 12.2497 9.89966 12.2497 7.00016C12.2497 4.10067 9.89917 1.75016 6.99967 1.75016Z",
+    fill: "#FB3449"
+  })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("clipPath", {
+    id: "clip0_138_127604"
+  }, /*#__PURE__*/React__default['default'].createElement("rect", {
+    width: "14",
+    height: "14",
+    fill: "white"
+  }))))), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "caret-down-fill",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, /*#__PURE__*/React__default['default'].createElement("rect", {
+    width: "14",
+    height: "14",
+    rx: "4",
+    fill: "black",
+    "fill-opacity": "0.1"
+  }), /*#__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"
   }))));
 };
 
@@ -10192,6 +10546,9 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
     },
     getLocaleContext: function getLocaleContext() {
       return fortuneCore.locale(context);
+    },
+    getWorkbookContect: function getWorkbookContect() {
+      return context;
     }
   };
 }
@@ -10915,6 +11272,48 @@ var SheetList = function SheetList() {
   }));
 };
 
+var DunePreview = function DunePreview(_ref) {
+  var url = _ref.url,
+    position = _ref.position,
+    onKeepAsLink = _ref.onKeepAsLink,
+    onEmbed = _ref.onEmbed;
+  var embedUrl = fortuneCore.sanitizeDuneUrl(url);
+  if (!embedUrl) return null;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dune-preview",
+    style: {
+      left: position.left,
+      top: position.top
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dune-preview-header"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "fortune-dune-preview-title"
+  }, "Detected Dune chart link")), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dune-preview-content"
+  }, /*#__PURE__*/React__default['default'].createElement("iframe", {
+    src: embedUrl,
+    title: "Dune Chart Preview",
+    style: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("p", null, "Do you want to insert Dune chart?"), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dune-preview-footer"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "ghost",
+    onClick: onKeepAsLink,
+    className: "!w-fit px-0"
+  }, "Keep as Link"), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    onClick: onEmbed,
+    className: "!w-fit px-0"
+  }, "Embed")));
+};
+
 var _excluded = ["onChange", "onOp", "data"];
 produce.enablePatches();
 var triggerGroupValuesRefresh = function triggerGroupValuesRefresh(ctx) {
@@ -11447,7 +11846,25 @@ var Workbook = /*#__PURE__*/React__default['default'].forwardRef(function (_ref,
     style: {
       width: "60px"
     }
-  }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.min, ": ", calInfo.min)))))));
+  }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.min, ": ", calInfo.min)))), context.showDunePreview && (/*#__PURE__*/React__default['default'].createElement(DunePreview, {
+    url: context.showDunePreview.url,
+    position: context.showDunePreview.position,
+    onKeepAsLink: function onKeepAsLink() {
+      setContextWithProduce(function (draftCtx) {
+        draftCtx.showDunePreview = undefined;
+      }, {
+        noHistory: true
+      });
+    },
+    onEmbed: function onEmbed() {
+      setContextWithProduce(function (draftCtx) {
+        fortuneCore.insertDuneChart(draftCtx, context.showDunePreview.url);
+        draftCtx.showDunePreview = undefined;
+      }, {
+        noHistory: true
+      });
+    }
+  })))));
 });
 
 exports.Workbook = Workbook;