@nutui/nutui-react 2.0.0-alpha.11 → 2.0.0-alpha.13

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.0-alpha.11 Wed May 24 2023 16:40:03 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.13 Wed May 31 2023 14:48:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -725,7 +725,7 @@ Check the top-level render call using <` + t + ">.");
     process.env.NODE_ENV === "production" ? h.exports = ur() : h.exports = sr();
   })(ir);
   const lr = D.Fragment, cr = D.jsx, vr = D.jsxs;
-  const a$w = {
+  const a$x = {
     className: "",
     style: void 0,
     name: "ArrowDown2",
@@ -734,7 +734,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: () => {
     }
   }, y$9 = (h) => {
-    const { className: r, style: d, name: e, color: p, width: m, height: w, onClick: n } = { ...a$w, ...h }, f = (t) => {
+    const { className: r, style: d, name: e, color: p, width: m, height: w, onClick: n } = { ...a$x, ...h }, f = (t) => {
       n && n(t);
     }, c = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", g = () => {
       const t = "nut-icon";
@@ -771,8 +771,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  y$9.defaultProps = a$w;
-  const a$v = {
+  y$9.defaultProps = a$x;
+  const a$w = {
     className: "",
     style: void 0,
     name: "ArrowUp2",
@@ -780,8 +780,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$g = (h) => {
-    const { className: o, style: p, name: e, color: d, width: m, height: f, onClick: n } = { ...a$v, ...h }, g = (t) => {
+  }, x$h = (h) => {
+    const { className: o, style: p, name: e, color: d, width: m, height: f, onClick: n } = { ...a$w, ...h }, g = (t) => {
       n && n(t);
     }, i = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", w = () => {
       const t = "nut-icon";
@@ -818,8 +818,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$g.defaultProps = a$v;
-  const a$u = {
+  x$h.defaultProps = a$w;
+  const a$v = {
     className: "",
     style: void 0,
     name: "CheckChecked",
@@ -828,7 +828,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: () => {
     }
   }, y$8 = (h) => {
-    const { className: r, style: d, name: e, color: p, width: m, height: f, onClick: o } = { ...a$u, ...h }, C = (t) => {
+    const { className: r, style: d, name: e, color: p, width: m, height: f, onClick: o } = { ...a$v, ...h }, C = (t) => {
       o && o(t);
     }, i = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", k2 = () => {
       const t = "nut-icon";
@@ -876,8 +876,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  y$8.defaultProps = a$u;
-  const a$t = {
+  y$8.defaultProps = a$v;
+  const a$u = {
     className: "",
     style: void 0,
     name: "CheckDisabled",
@@ -885,8 +885,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$f = (h) => {
-    const { className: i, style: d, name: e, color: m, width: p, height: f, onClick: o } = { ...a$t, ...h }, g = (t) => {
+  }, x$g = (h) => {
+    const { className: i, style: d, name: e, color: m, width: p, height: f, onClick: o } = { ...a$u, ...h }, g = (t) => {
       o && o(t);
     }, r = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", C = () => {
       const t = "nut-icon";
@@ -923,8 +923,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$f.defaultProps = a$t;
-  const a$s = {
+  x$g.defaultProps = a$u;
+  const a$t = {
     className: "",
     style: void 0,
     name: "CheckNormal",
@@ -933,7 +933,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: () => {
     }
   }, N = (h) => {
-    const { className: o, style: m, name: e, color: d, width: p, height: C, onClick: r } = { ...a$s, ...h }, f = (t) => {
+    const { className: o, style: m, name: e, color: d, width: p, height: C, onClick: r } = { ...a$t, ...h }, f = (t) => {
       r && r(t);
     }, n = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", g = () => {
       const t = "nut-icon";
@@ -970,8 +970,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  N.defaultProps = a$s;
-  const a$r = {
+  N.defaultProps = a$t;
+  const a$s = {
     className: "",
     style: void 0,
     name: "Check",
@@ -979,8 +979,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$e = (h) => {
-    const { className: o, style: d, name: e, color: p, width: m, height: f, onClick: r } = { ...a$r, ...h }, g = (t) => {
+  }, x$f = (h) => {
+    const { className: o, style: d, name: e, color: p, width: m, height: f, onClick: r } = { ...a$s, ...h }, g = (t) => {
       r && r(t);
     }, n = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", C = () => {
       const t = "nut-icon";
@@ -1017,8 +1017,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$e.defaultProps = a$r;
-  const a$q = {
+  x$f.defaultProps = a$s;
+  const a$r = {
     className: "",
     style: void 0,
     name: "Checked",
@@ -1026,8 +1026,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$d = (h) => {
-    const { className: o, style: d, name: e, color: m, width: p, height: C, onClick: r } = { ...a$q, ...h }, f = (t) => {
+  }, x$e = (h) => {
+    const { className: o, style: d, name: e, color: m, width: p, height: C, onClick: r } = { ...a$r, ...h }, f = (t) => {
       r && r(t);
     }, n = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", g = () => {
       const t = "nut-icon";
@@ -1064,8 +1064,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$d.defaultProps = a$q;
-  const a$p = {
+  x$e.defaultProps = a$r;
+  const a$q = {
     className: "",
     style: void 0,
     name: "Checklist",
@@ -1073,8 +1073,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$c = (h) => {
-    const { className: i, style: d, name: e, color: p, width: m, height: f, onClick: o } = { ...a$p, ...h }, g = (t) => {
+  }, x$d = (h) => {
+    const { className: i, style: d, name: e, color: p, width: m, height: f, onClick: o } = { ...a$q, ...h }, g = (t) => {
       o && o(t);
     }, r = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", k2 = () => {
       const t = "nut-icon";
@@ -1111,8 +1111,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$c.defaultProps = a$p;
-  const a$o = {
+  x$d.defaultProps = a$q;
+  const a$p = {
     className: "",
     style: void 0,
     name: "CircleClose",
@@ -1120,8 +1120,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$b = (h) => {
-    const { className: l2, style: m, name: e, color: d, width: p, height: C, onClick: o } = { ...a$o, ...h }, f = (t) => {
+  }, x$c = (h) => {
+    const { className: l2, style: m, name: e, color: d, width: p, height: C, onClick: o } = { ...a$p, ...h }, f = (t) => {
       o && o(t);
     }, r = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", g = () => {
       const t = "nut-icon";
@@ -1158,8 +1158,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$b.defaultProps = a$o;
-  const a$n = {
+  x$c.defaultProps = a$p;
+  const a$o = {
     className: "",
     style: void 0,
     name: "Close",
@@ -1167,8 +1167,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$a = (h) => {
-    const { className: o, style: d, name: e, color: m, width: p, height: f, onClick: r } = { ...a$n, ...h }, g = (t) => {
+  }, x$b = (h) => {
+    const { className: o, style: d, name: e, color: m, width: p, height: f, onClick: r } = { ...a$o, ...h }, g = (t) => {
       r && r(t);
     }, n = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", C = () => {
       const t = "nut-icon";
@@ -1205,8 +1205,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$a.defaultProps = a$n;
-  const a$m = {
+  x$b.defaultProps = a$o;
+  const a$n = {
     className: "",
     style: void 0,
     name: "Del",
@@ -1215,7 +1215,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: () => {
     }
   }, y$7 = (h) => {
-    const { className: o, style: d, name: e, color: m, width: p, height: f, onClick: r } = { ...a$m, ...h }, g = (t) => {
+    const { className: o, style: d, name: e, color: m, width: p, height: f, onClick: r } = { ...a$n, ...h }, g = (t) => {
       r && r(t);
     }, n = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", u = () => {
       const t = "nut-icon";
@@ -1252,8 +1252,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  y$7.defaultProps = a$m;
-  const a$l = {
+  y$7.defaultProps = a$n;
+  const a$m = {
     className: "",
     style: void 0,
     name: "DownArrow",
@@ -1261,8 +1261,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$9 = (h) => {
-    const { className: r, style: d, name: e, color: p, width: m, height: w, onClick: n } = { ...a$l, ...h }, f = (t) => {
+  }, x$a = (h) => {
+    const { className: r, style: d, name: e, color: p, width: m, height: w, onClick: n } = { ...a$m, ...h }, f = (t) => {
       n && n(t);
     }, c = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", g = () => {
       const t = "nut-icon";
@@ -1299,8 +1299,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$9.defaultProps = a$l;
-  const a$k = {
+  x$a.defaultProps = a$m;
+  const a$l = {
     className: "",
     style: void 0,
     name: "Failure",
@@ -1308,8 +1308,8 @@ Check the top-level render call using <` + t + ">.");
     height: "",
     onClick: () => {
     }
-  }, x$8 = (h) => {
-    const { className: r, style: d, name: e, color: m, width: p, height: f, onClick: l2 } = { ...a$k, ...h }, u = (t) => {
+  }, x$9 = (h) => {
+    const { className: r, style: d, name: e, color: m, width: p, height: f, onClick: l2 } = { ...a$l, ...h }, u = (t) => {
       l2 && l2(t);
     }, i = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", g = () => {
       const t = "nut-icon";
@@ -1346,8 +1346,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  x$8.defaultProps = a$k;
-  const a$j = {
+  x$9.defaultProps = a$l;
+  const a$k = {
     className: "",
     style: void 0,
     name: "ImageError",
@@ -1356,7 +1356,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: () => {
     }
   }, k$5 = (h) => {
-    const { className: s, style: d, name: e, color: m, width: p, height: f, onClick: o } = { ...a$j, ...h }, g = (t) => {
+    const { className: s, style: d, name: e, color: m, width: p, height: f, onClick: o } = { ...a$k, ...h }, g = (t) => {
       o && o(t);
     }, c = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", u = () => {
       const t = "nut-icon";
@@ -1404,8 +1404,8 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  k$5.defaultProps = a$j;
-  const a$i = {
+  k$5.defaultProps = a$k;
+  const a$j = {
     className: "",
     style: void 0,
     name: "Image",
@@ -1414,7 +1414,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: () => {
     }
   }, k$4 = (h) => {
-    const { className: l2, style: d, name: c, color: m, width: p, height: f, onClick: r } = { ...a$i, ...h }, g = (t) => {
+    const { className: l2, style: d, name: c, color: m, width: p, height: f, onClick: r } = { ...a$j, ...h }, g = (t) => {
       r && r(t);
     }, o = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", u = () => {
       const t = "nut-icon";
@@ -1462,7 +1462,54 @@ Check the top-level render call using <` + t + ">.");
       }
     ) });
   };
-  k$4.defaultProps = a$i;
+  k$4.defaultProps = a$j;
+  const a$i = {
+    className: "",
+    style: void 0,
+    name: "Issue",
+    width: "",
+    height: "",
+    onClick: () => {
+    }
+  }, x$8 = (h) => {
+    const { className: o, style: m, name: s, color: d, width: p, height: f, onClick: r } = { ...a$i, ...h }, u = (t) => {
+      r && r(t);
+    }, n = (t) => t === "" ? "" : isNaN(Number(t)) ? String(t) : t + "px", g = () => {
+      const t = "nut-icon";
+      return classNames({
+        [`${o}`]: o,
+        [t]: true,
+        [t + "-" + s]: s
+      });
+    }, e = {}, i = n(p || ""), l2 = n(f || "");
+    i && (e.width = i), l2 && (e.height = l2);
+    const C = () => ({
+      ...m,
+      ...e
+    });
+    return /* @__PURE__ */ cr(lr, { children: /* @__PURE__ */ cr(
+      "svg",
+      {
+        className: g(),
+        style: C(),
+        onClick: u,
+        xmlns: "http://www.w3.org/2000/svg",
+        color: d,
+        viewBox: "0 0 1024 1024",
+        "aria-labelledby": s,
+        role: "presentation",
+        children: /* @__PURE__ */ cr(
+          "path",
+          {
+            d: "M512 1024C229.831 1024 0 794.169 0 512S229.831 0 512 0s512 229.831 512 512-229.831 512-512 512zm0-955.733C266.24 68.267 68.267 266.24 68.267 512S266.24 955.733 512 955.733 955.733 757.76 955.733 512 757.76 68.267 512 68.267zm31.858 377.742c18.204 0 34.133 15.929 34.133 34.133 0 2.276 0 15.93-2.275 18.205l-34.134 195.697h29.582c18.205 0 34.134 15.93 34.134 34.134s-15.93 34.133-34.134 34.133h-91.022c-18.204 0-34.133-15.929-34.133-34.133v-20.48L480.142 512H450.56c-18.204 0-34.133-15.929-34.133-34.133s15.929-34.134 34.133-34.134h93.298zm-34.134-207.076c38.685 0 68.267 29.583 68.267 68.267s-29.582 68.267-68.267 68.267-68.266-29.583-68.266-68.267 29.582-68.267 68.266-68.267z",
+            fill: "currentColor",
+            fillOpacity: "0.9"
+          }
+        )
+      }
+    ) });
+  };
+  x$8.defaultProps = a$i;
   const a$h = {
     className: "",
     style: void 0,
@@ -2457,7 +2504,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: (event) => {
     }
   };
-  const classPrefix$i = "nut-cell";
+  const classPrefix$k = "nut-cell";
   const Cell = (props) => {
     const {
       children,
@@ -2488,19 +2535,19 @@ Check the top-level render call using <` + t + ">.");
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$i, className),
+        className: classNames(classPrefix$k, className),
         onClick: (event) => handleClick2(event),
         style: baseStyle,
         ...rest
       },
-      children || /* @__PURE__ */ React.createElement(React.Fragment, null, title || description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$i}__left` }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$i}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$i}__description` }, description) : null) : null, extra ? /* @__PURE__ */ React.createElement(
+      children || /* @__PURE__ */ React.createElement(React.Fragment, null, title || description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$k}__left` }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$k}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$k}__description` }, description) : null) : null, extra ? /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: `${classPrefix$i}__extra`,
+          className: `${classPrefix$k}__extra`,
           style: styles
         },
         extra
-      ) : null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$i}__divider` }))
+      ) : null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$k}__divider` }))
     );
   };
   Cell.defaultProps = defaultProps$1r;
@@ -2511,16 +2558,16 @@ Check the top-level render call using <` + t + ">.");
     description: "",
     divider: true
   };
-  const classPrefix$h = "nut-cell-group";
+  const classPrefix$j = "nut-cell-group";
   const CellGroup = (props) => {
     const { children, className, style, title, description, divider, ...rest } = {
       ...defaultProps$1q,
       ...props
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$h, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$h}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$h}__description` }, description) : null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$j, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}__description` }, description) : null, /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${classPrefix$h}__wrap ${divider ? `${classPrefix$h}__wrap--divider` : ""}`
+        className: `${classPrefix$j}__wrap ${divider ? `${classPrefix$j}__wrap--divider` : ""}`
       },
       children
     ));
@@ -2997,7 +3044,7 @@ Check the top-level render call using <` + t + ">.");
     loading: true,
     lazy: false
   };
-  const classPrefix$g = "nut-image";
+  const classPrefix$i = "nut-image";
   const Image$1 = (props) => {
     const {
       className,
@@ -3108,7 +3155,7 @@ Check the top-level render call using <` + t + ">.");
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$g, className),
+        className: classNames(classPrefix$i, className),
         style: containerStyle,
         onClick: (e) => {
           imageClick(e);
@@ -3274,21 +3321,21 @@ Check the top-level render call using <` + t + ">.");
     contentPosition: "center",
     direction: "horizontal"
   };
-  const classPrefix$f = `nut-divider`;
+  const classPrefix$h = `nut-divider`;
   const Divider = (props) => {
     const { children, contentPosition, style, className, direction, ...rest } = {
       ...defaultProps$1m,
       ...props
     };
     const classes = direction === "horizontal" ? classNames({
-      [`${classPrefix$f}`]: true,
-      [`${classPrefix$f}__center`]: children,
-      [`${classPrefix$f}__left`]: contentPosition === "left",
-      [`${classPrefix$f}__right`]: contentPosition === "right",
-      [`${classPrefix$f}__hairline`]: true
+      [`${classPrefix$h}`]: true,
+      [`${classPrefix$h}__center`]: children,
+      [`${classPrefix$h}__left`]: contentPosition === "left",
+      [`${classPrefix$h}__right`]: contentPosition === "right",
+      [`${classPrefix$h}__hairline`]: true
     }) : classNames({
-      [`${classPrefix$f}`]: true,
-      [`${classPrefix$f}__vertical`]: direction === "vertical"
+      [`${classPrefix$h}`]: true,
+      [`${classPrefix$h}__vertical`]: direction === "vertical"
     });
     return /* @__PURE__ */ React.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
   };
@@ -3446,7 +3493,7 @@ Check the top-level render call using <` + t + ">.");
   };
   Layout.defaultProps = defaultProps$1j;
   Layout.displayName = "NutLayout";
-  const classPrefix$e = "nut-row";
+  const classPrefix$g = "nut-row";
   const defaultProps$1i = {
     ...ComponentDefaults,
     type: "",
@@ -3481,7 +3528,7 @@ Check the top-level render call using <` + t + ">.");
     ${getClass("justify", justify)}
     ${getClass("align", align)}
     ${getClass("flex", wrap)}
-    ${classPrefix$e}
+    ${classPrefix$g}
    `;
     };
     const parentRow = {
@@ -3580,7 +3627,7 @@ Check the top-level render call using <` + t + ">.");
     threshold: 0,
     zIndex: 2e3
   };
-  const classPrefix$d = "nut-sticky";
+  const classPrefix$f = "nut-sticky";
   const Sticky = (props) => {
     const {
       position,
@@ -3702,7 +3749,7 @@ Check the top-level render call using <` + t + ">.");
       {
         ref: rootRef,
         style: { ...style, ...rootStyle },
-        className: classNames(classPrefix$d, className),
+        className: classNames(classPrefix$f, className),
         ...rest
       },
       /* @__PURE__ */ React.createElement("div", { className: "nut-sticky--box", ref: stickyRef, style: stickyStyle }, children)
@@ -7112,7 +7159,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ctrl.ref = ref;
     }
   }
-  const config$1 = {
+  const config$2 = {
     default: {
       tension: 170,
       friction: 26
@@ -7138,7 +7185,7 @@ Please add \`${key}Action\` when creating your handler.`);
       friction: 120
     }
   };
-  const defaults = _extends$2({}, config$1.default, {
+  const defaults = _extends$2({}, config$2.default, {
     mass: 1,
     damping: 1,
     easing: easings.linear,
@@ -10322,7 +10369,7 @@ Please add \`${key}Action\` when creating your handler.`);
       element.setAttribute("class", replaceClassName(element.className && element.className.baseVal || "", className));
     }
   }
-  const config = {
+  const config$1 = {
     disabled: false
   };
   var timeoutsShape = process.env.NODE_ENV !== "production" ? propTypesExports.oneOfType([propTypesExports.number, propTypesExports.shape({
@@ -10456,7 +10503,7 @@ Please add \`${key}Action\` when creating your handler.`);
       var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing], maybeNode = _ref2[0], maybeAppearing = _ref2[1];
       var timeouts2 = this.getTimeouts();
       var enterTimeout = appearing ? timeouts2.appear : timeouts2.enter;
-      if (!mounting && !enter || config.disabled) {
+      if (!mounting && !enter || config$1.disabled) {
         this.safeSetState({
           status: ENTERED
         }, function() {
@@ -10483,7 +10530,7 @@ Please add \`${key}Action\` when creating your handler.`);
       var exit = this.props.exit;
       var timeouts2 = this.getTimeouts();
       var maybeNode = this.props.nodeRef ? void 0 : ReactDOM.findDOMNode(this);
-      if (!exit || config.disabled) {
+      if (!exit || config$1.disabled) {
         this.safeSetState({
           status: EXITED
         }, function() {
@@ -11164,7 +11211,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const renderIcon = () => {
       if (closeable) {
-        return /* @__PURE__ */ React.createElement("div", { className: closeClasses, onClick: onHandleClickCloseIcon }, React.isValidElement(closeIcon) ? closeIcon : /* @__PURE__ */ React.createElement(x$a, { width: 12, height: 12 }));
+        return /* @__PURE__ */ React.createElement("div", { className: closeClasses, onClick: onHandleClickCloseIcon }, React.isValidElement(closeIcon) ? closeIcon : /* @__PURE__ */ React.createElement(x$b, { width: 12, height: 12 }));
       }
       return null;
     };
@@ -11554,7 +11601,7 @@ Please add \`${key}Action\` when creating your handler.`);
     duration: 300,
     autoHeight: false
   };
-  const classPrefix$c = "nut-tabs";
+  const classPrefix$e = "nut-tabs";
   const Tabs = (props) => {
     const {
       activeColor,
@@ -11648,14 +11695,14 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }, [children]);
     const classes = classNames(
-      classPrefix$c,
-      `${classPrefix$c}--${direction}`,
+      classPrefix$e,
+      `${classPrefix$e}--${direction}`,
       className
     );
-    const classesTitle = classNames(`${classPrefix$c}__titles`, {
-      [`${classPrefix$c}__titles--${activeType}`]: activeType,
-      [`${classPrefix$c}__titles--scrollable`]: true,
-      [`${classPrefix$c}__titles--${align}`]: align
+    const classesTitle = classNames(`${classPrefix$e}__titles`, {
+      [`${classPrefix$e}__titles--${activeType}`]: activeType,
+      [`${classPrefix$e}__titles--scrollable`]: true,
+      [`${classPrefix$e}__titles--${align}`]: align
     });
     const tabsActiveStyle = {
       color: activeType === "smile" ? activeColor : "",
@@ -11685,7 +11732,7 @@ Please add \`${key}Action\` when creating your handler.`);
           onClick: () => {
             tabChange(item);
           },
-          className: classNames(`${classPrefix$c}__titles-item`, {
+          className: classNames(`${classPrefix$e}__titles-item`, {
             [`nut-tabs__titles-item--active`]: !item.disabled && String(item.value) === String(value),
             [`nut-tabs__titles-item--disabled`]: item.disabled,
             [`nut-tabs__titles-item--${align}`]: align
@@ -11696,14 +11743,14 @@ Please add \`${key}Action\` when creating your handler.`);
         activeType === "line" && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `${classPrefix$c}__titles-item__line`,
+            className: `${classPrefix$e}__titles-item__line`,
             style: tabsActiveStyle
           }
         ),
         activeType === "smile" && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `${classPrefix$c}__titles-item__smile`,
+            className: `${classPrefix$e}__titles-item__smile`,
             style: tabsActiveStyle
           },
           /* @__PURE__ */ React.createElement(x$7, { color: activeColor, width: 40, height: 20 })
@@ -11715,13 +11762,13 @@ Please add \`${key}Action\` when creating your handler.`);
               {
                 ellipsis: true
               },
-              `${classPrefix$c}__titles-item__text`
+              `${classPrefix$e}__titles-item__text`
             )
           },
           item.title
         )
       );
-    })), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$c}__content__wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$c}__content`, style: contentStyle }, React.Children.map(children, (child, idx) => {
+    })), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$e}__content__wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$e}__content`, style: contentStyle }, React.Children.map(children, (child, idx) => {
       if (!React.isValidElement(child)) {
         return null;
       }
@@ -12174,7 +12221,7 @@ Please add \`${key}Action\` when creating your handler.`);
             }
           },
           selectedRegion && selectedRegion[tabName[tabIndex]].id === item.id && /* @__PURE__ */ React.createElement(
-            x$e,
+            x$f,
             {
               className: b("region-item--icon"),
               color: "var(--nutui-brand-color)",
@@ -12334,7 +12381,7 @@ Please add \`${key}Action\` when creating your handler.`);
       onSwitch && onSwitch({ type: privateType });
     };
     const headerRender = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: b("header") }, /* @__PURE__ */ React.createElement("div", { className: "arrow-back", onClick: onSwitchModule }, privateType === "custom" && (React.isValidElement(backBtnIcon) ? backBtnIcon : /* @__PURE__ */ React.createElement(y$6, { color: "#cccccc" }))), /* @__PURE__ */ React.createElement("div", { className: b("header__title") }, privateType === "custom" ? customAddressTitle || locale.address.selectRegion : existAddressTitle || locale.address.deliveryTo), /* @__PURE__ */ React.createElement("div", { onClick: () => handClose() }, React.isValidElement(closeBtnIcon) ? closeBtnIcon : /* @__PURE__ */ React.createElement(x$b, { width: 18, height: 18, color: "#ccc" })));
+      return /* @__PURE__ */ React.createElement("div", { className: b("header") }, /* @__PURE__ */ React.createElement("div", { className: "arrow-back", onClick: onSwitchModule }, privateType === "custom" && (React.isValidElement(backBtnIcon) ? backBtnIcon : /* @__PURE__ */ React.createElement(y$6, { color: "#cccccc" }))), /* @__PURE__ */ React.createElement("div", { className: b("header__title") }, privateType === "custom" ? customAddressTitle || locale.address.selectRegion : existAddressTitle || locale.address.deliveryTo), /* @__PURE__ */ React.createElement("div", { onClick: () => handClose() }, React.isValidElement(closeBtnIcon) ? closeBtnIcon : /* @__PURE__ */ React.createElement(x$c, { width: 18, height: 18, color: "#ccc" })));
     };
     React.useEffect(() => {
       setShowPopup(modelValue);
@@ -12386,7 +12433,7 @@ Please add \`${key}Action\` when creating your handler.`);
           {
             type: privateType,
             existAddress,
-            selectedIcon: React.isValidElement(selectedIcon) ? selectedIcon : /* @__PURE__ */ React.createElement(x$e, { color: "#FA2C19" }),
+            selectedIcon: React.isValidElement(selectedIcon) ? selectedIcon : /* @__PURE__ */ React.createElement(x$f, { color: "#FA2C19" }),
             defaultIcon: React.isValidElement(defaultIcon) ? defaultIcon : /* @__PURE__ */ React.createElement(x$5, null),
             isShowCustomAddress,
             customAndExistTitle: customAndExistTitle || locale.address.chooseAnotherAddress,
@@ -13317,7 +13364,7 @@ Please add \`${key}Action\` when creating your handler.`);
           return activeIcon;
         }
         return /* @__PURE__ */ React.createElement(
-          x$c,
+          x$d,
           {
             className: `${checked ? `${classPrefix2}__icon-check` : ""}`
           }
@@ -13794,7 +13841,7 @@ Please add \`${key}Action\` when creating your handler.`);
     },
     options: []
   };
-  const classPrefix$b = "nut-checkboxgroup";
+  const classPrefix$d = "nut-checkboxgroup";
   const CheckboxGroup = React.forwardRef(
     (props, ref) => {
       const { children } = { ...defaultProps$Z, ...props };
@@ -13876,7 +13923,7 @@ Please add \`${key}Action\` when creating your handler.`);
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(classPrefix$b, className, {
+            className: classNames(classPrefix$d, className, {
               [`nut-checkboxgroup--${props.direction}`]: props.direction
             }),
             ...rest
@@ -13898,7 +13945,7 @@ Please add \`${key}Action\` when creating your handler.`);
     onChange: (value) => {
     }
   };
-  const classPrefix$a = "nut-checkbox";
+  const classPrefix$c = "nut-checkbox";
   const Checkbox = (props) => {
     const { children } = {
       ...defaultProps$Y,
@@ -13954,28 +14001,28 @@ Please add \`${key}Action\` when creating your handler.`);
         return React.isValidElement(icon) ? icon : /* @__PURE__ */ React.createElement(N, { className: color() });
       }
       if (innerIndeterminate) {
-        return React.isValidElement(indeterminateIcon) ? indeterminateIcon : /* @__PURE__ */ React.createElement(x$f, { className: color() });
+        return React.isValidElement(indeterminateIcon) ? indeterminateIcon : /* @__PURE__ */ React.createElement(x$g, { className: color() });
       }
-      return React.isValidElement(activeIcon) ? activeIcon : /* @__PURE__ */ React.createElement(x$d, { className: color() });
+      return React.isValidElement(activeIcon) ? activeIcon : /* @__PURE__ */ React.createElement(x$e, { className: color() });
     };
     const color = () => {
       if (innerDisabled) {
-        return `${classPrefix$a}__icon--disable`;
+        return `${classPrefix$c}__icon--disable`;
       }
       if (innerChecked) {
         if (innerIndeterminate) {
-          return `${classPrefix$a}__icon--indeterminate`;
+          return `${classPrefix$c}__icon--indeterminate`;
         }
-        return `${classPrefix$a}__icon`;
+        return `${classPrefix$c}__icon`;
       }
-      return `${classPrefix$a}__icon--unchecked`;
+      return `${classPrefix$c}__icon--unchecked`;
     };
     const renderLabel = () => {
       return /* @__PURE__ */ React.createElement(
         "span",
         {
-          className: classNames(`${classPrefix$a}__label `, {
-            [`${classPrefix$a}__label--disabled`]: innerDisabled
+          className: classNames(`${classPrefix$c}__label `, {
+            [`${classPrefix$c}__label--disabled`]: innerDisabled
           })
         },
         children || label
@@ -13994,8 +14041,8 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$a, className, {
-          [`${classPrefix$a}--reverse`]: labelPosition === "left"
+        className: classNames(classPrefix$c, className, {
+          [`${classPrefix$c}--reverse`]: labelPosition === "left"
         }),
         ...rest,
         onClick: handleClick2
@@ -14556,7 +14603,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const { locale } = useConfig();
-    const [show, setShow] = React.useState(false);
+    const [show2, setShow] = React.useState(false);
     const [currentDate, setCurrentDate] = React.useState(modelValue);
     const [defaultValue, setDefaultValue] = React.useState([]);
     const [options2, setListData] = React.useState([]);
@@ -14817,7 +14864,7 @@ Please add \`${key}Action\` when creating your handler.`);
         Picker$1,
         {
           title,
-          visible: show,
+          visible: show2,
           options: options2,
           onClose: onCloseDatePicker,
           defaultValue,
@@ -16419,7 +16466,7 @@ Please add \`${key}Action\` when creating your handler.`);
     digits: 0,
     async: false
   };
-  const classPrefix$9 = `nut-inputnumber`;
+  const classPrefix$b = `nut-inputnumber`;
   const InputNumber = (props) => {
     const {
       children,
@@ -16462,8 +16509,8 @@ Please add \`${key}Action\` when creating your handler.`);
     }, []);
     const classes = classNames(
       {
-        [`${classPrefix$9}`]: true,
-        [`${classPrefix$9}--disabled`]: disabled
+        [`${classPrefix$b}`]: true,
+        [`${classPrefix$b}--disabled`]: disabled
       },
       className
     );
@@ -16754,7 +16801,7 @@ Please add \`${key}Action\` when creating your handler.`);
                 })
               },
               /* @__PURE__ */ React.createElement("div", { className: "nut-menu__title-text" }, finallyTitle()),
-              icon || (direction === "up" ? /* @__PURE__ */ React.createElement(x$g, { className: "nut-menu__title-icon" }) : /* @__PURE__ */ React.createElement(y$9, { className: "nut-menu__title-icon" }))
+              icon || (direction === "up" ? /* @__PURE__ */ React.createElement(x$h, { className: "nut-menu__title-icon" }) : /* @__PURE__ */ React.createElement(y$9, { className: "nut-menu__title-icon" }))
             )
           );
         }
@@ -16809,18 +16856,18 @@ Please add \`${key}Action\` when creating your handler.`);
       closeOnClickAway,
       children,
       activeColor,
-      show,
+      show: show2,
       parent,
       index
     } = {
       ...defaultProps$Q,
       ...props
     };
-    const [_showPopup, setShowPopup] = React.useState(show);
+    const [_showPopup, setShowPopup] = React.useState(show2);
     const [_value, setValue] = React.useState(value);
     React.useEffect(() => {
-      setShowPopup(show);
-    }, [show]);
+      setShowPopup(show2);
+    }, [show2]);
     React.useEffect(() => {
       getParentOffset();
     }, [_showPopup]);
@@ -16937,7 +16984,7 @@ Please add \`${key}Action\` when creating your handler.`);
               }
             },
             item.value === _value ? /* @__PURE__ */ React.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
-              x$e,
+              x$f,
               {
                 color: activeColor,
                 className: getIconCName(item.value, value)
@@ -17121,7 +17168,7 @@ Please add \`${key}Action\` when creating your handler.`);
     direction: "vertical",
     options: []
   };
-  const classPrefix$8 = "nut-radiogroup";
+  const classPrefix$a = "nut-radiogroup";
   const RadioGroup = React.forwardRef(
     (props, ref) => {
       const {
@@ -17177,8 +17224,8 @@ Please add \`${key}Action\` when creating your handler.`);
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(classPrefix$8, className, {
-              [`${classPrefix$8}--${props.direction}`]: props.direction
+            className: classNames(classPrefix$a, className, {
+              [`${classPrefix$a}--${props.direction}`]: props.direction
             }),
             ...rest
           },
@@ -17725,15 +17772,15 @@ Please add \`${key}Action\` when creating your handler.`);
     disabled: false,
     maxLength: 9999,
     clearable: true,
-    clearSize: "12px",
-    align: "left",
-    readonly: true,
+    readOnly: false,
     autoFocus: false,
-    label: "",
-    leftinIcon: /* @__PURE__ */ React.createElement(x$2, { width: "12", height: "12" })
+    left: "",
+    right: "",
+    rightIn: "",
+    leftIn: /* @__PURE__ */ React.createElement(x$2, { width: "12", height: "12" })
   };
   const SearchBar = (props) => {
-    const searchbarBem = cn("searchbar");
+    const classPrefix2 = "nut-searchbar";
     const { locale } = useConfig();
     const searchRef = React.useRef(null);
     const [value, setValue] = React.useState(() => props.value);
@@ -17744,32 +17791,22 @@ Please add \`${key}Action\` when creating your handler.`);
       disabled,
       maxLength,
       clearable,
-      clearSize,
-      align,
       readOnly,
       autoFocus,
-      label,
-      actionText,
-      leftinIcon,
-      rightinIcon,
-      leftoutIcon,
-      rightoutIcon,
+      right,
+      left,
+      leftIn,
+      rightIn,
       onChange,
       onFocus,
       onBlur,
       onClear,
-      onCancel,
       onSearch,
-      onClickInput,
-      onClickLeftinIcon,
-      onClickLeftoutIcon,
-      onClickRightinIcon,
-      onClickRightoutIcon
+      onClickInput
     } = {
       ...defaultProps$K,
       ...props
     };
-    const alignClass = `${align}`;
     const forceFocus = () => {
       const searchSelf = searchRef.current;
       searchSelf && searchSelf.focus();
@@ -17799,7 +17836,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return /* @__PURE__ */ React.createElement(
         "input",
         {
-          className: `${searchbarBem("input")}  ${searchbarBem(alignClass)} ${shape === "round" ? searchbarBem("round") : ""} ${clearable ? searchbarBem("input-clear") : ""}`,
+          className: `${classPrefix2}__input ${shape === "round" ? `${classPrefix2}__round` : ""} ${clearable ? `${classPrefix2}__input-clear` : ""}`,
           ref: searchRef,
           style: { ...props.style },
           value: value || "",
@@ -17818,76 +17855,34 @@ Please add \`${key}Action\` when creating your handler.`);
     const clickInput = (e) => {
       onClickInput && onClickInput(e);
     };
-    const renderLeftinIcon = () => {
-      if (!leftinIcon)
+    const renderLeftIn = () => {
+      if (!leftIn)
         return null;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${searchbarBem("leftin-icon")} ${searchbarBem("icon")}`,
-          onClick: (e) => clickLeftIcon("in-left", e)
-        },
-        leftinIcon
-      );
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__leftin ${classPrefix2}__icon` }, leftIn);
     };
-    const renderLeftoutIcon = () => {
-      if (!leftoutIcon)
+    const renderLeft = () => {
+      if (!left)
         return null;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${searchbarBem("leftout-icon")}`,
-          onClick: (e) => clickLeftIcon("out-left", e)
-        },
-        leftoutIcon
-      );
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__left` }, left);
     };
-    const clickLeftIcon = (flag, event) => {
-      if (flag === "in-left") {
-        onClickLeftinIcon && onClickLeftinIcon(value, event);
-      } else {
-        onClickLeftoutIcon && onClickLeftoutIcon(value, event);
-      }
-    };
-    const renderRightinIcon = () => {
-      if (!rightinIcon)
+    const renderRightIn = () => {
+      if (!rightIn)
         return null;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${searchbarBem("rightin-icon")} ${searchbarBem("icon")}`,
-          onClick: (e) => clickRightIcon("in-right", e)
-        },
-        rightinIcon
-      );
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__rightin ${classPrefix2}__icon` }, rightIn);
     };
-    const renderRightoutIcon = () => {
-      if (!rightoutIcon)
+    const renderRight = () => {
+      if (!right)
         return null;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${searchbarBem("rightout-icon")}`,
-          onClick: (e) => clickRightIcon("out-right", e)
-        },
-        rightoutIcon
-      );
-    };
-    const clickRightIcon = (flag, event) => {
-      if (flag === "in-left") {
-        onClickRightinIcon && onClickRightinIcon(value, event);
-      } else {
-        onClickRightoutIcon && onClickRightoutIcon(value, event);
-      }
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__right` }, right);
     };
     const handleClear = () => {
       return /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: `${searchbarBem("clear")} ${rightinIcon ? "pos-right" : ""}`,
+          className: `${classPrefix2}__clear ${rightIn ? "pos-right" : ""}`,
           onClick: (e) => clearaVal(e)
         },
-        /* @__PURE__ */ React.createElement(x$b, { width: clearSize, height: clearSize, color: "#555" })
+        /* @__PURE__ */ React.createElement(x$c, { color: "#555", width: 12, height: 12 })
       );
     };
     const clearaVal = (event) => {
@@ -17898,12 +17893,6 @@ Please add \`${key}Action\` when creating your handler.`);
       onClear && onClear(event);
       forceFocus();
     };
-    const renderRightLabel = () => {
-      if (actionText) {
-        return /* @__PURE__ */ React.createElement("div", { className: searchbarBem("action-text"), onClick: search }, actionText);
-      }
-      return null;
-    };
     const onKeypress = (e) => {
       if (e.key === "Enter") {
         const event = e.nativeEvent;
@@ -17913,68 +17902,28 @@ Please add \`${key}Action\` when creating your handler.`);
         onSearch && onSearch(value);
       }
     };
-    const search = () => {
-      onSearch && onSearch(value);
-    };
-    const renderLabel = () => {
-      if (label) {
-        return /* @__PURE__ */ React.createElement("div", { className: searchbarBem("label") }, label);
-      }
-      return null;
-    };
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${searchbarBem()} ${disabled ? searchbarBem("disabled") : ""}  ${className || ""}`,
-        style: { ...props.style, background: props.background }
+        className: `${classPrefix2} ${disabled ? `${classPrefix2}__disabled` : ""}  ${className || ""}`,
+        style: { ...props.style }
       },
-      renderLeftoutIcon(),
-      renderLabel(),
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${searchbarBem("content")}`,
-          style: { background: props.inputBackground }
-        },
-        renderLeftinIcon(),
-        renderField(),
-        renderRightinIcon(),
-        clearable && value && handleClear()
-      ),
-      renderRightoutIcon(),
-      renderRightLabel()
+      renderLeft(),
+      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__content` }, renderLeftIn(), renderField(), renderRightIn(), clearable && value && handleClear()),
+      renderRight()
     );
   };
   SearchBar.defaultProps = defaultProps$K;
   SearchBar.displayName = "NutSearchBar";
   const defaultProps$J = {
     ...ComponentDefaults,
-    title: "",
-    description: "",
-    tips: "",
-    tipsIcon: null,
-    iconSize: 11,
+    value: "",
     visible: false,
-    modelValue: "",
-    errorMsg: "",
-    noButton: true,
-    closeOnClickOverlay: true,
+    plain: false,
+    hideFooter: true,
     length: 6,
     // 1~6
-    className: "",
-    autoFocus: false,
-    onChange: (value) => {
-    },
-    onOk: (value) => {
-    },
-    onCancel: () => {
-    },
-    onClose: () => {
-    },
-    onTips: () => {
-    },
-    onComplete: (value) => {
-    }
+    autoFocus: false
   };
   const ShortPassword = (props) => {
     const { locale } = useConfig();
@@ -17982,86 +17931,54 @@ Please add \`${key}Action\` when creating your handler.`);
       title,
       description,
       tips,
-      tipsIcon,
-      iconSize,
       visible,
-      modelValue,
-      errorMsg: errorMsg2,
-      noButton,
-      closeOnClickOverlay,
+      value,
+      error,
+      hideFooter,
       length,
+      plain,
       style,
       className,
+      closeable,
+      autoFocus,
+      onFocus,
       onChange,
-      onOk,
+      onConfirm,
       onTips,
       onCancel,
       onClose,
       onComplete,
-      autoFocus,
-      ...reset
-    } = props;
-    const b = cn("shortpassword");
-    const textInput = React.useRef(null);
-    const range2 = (val) => {
-      return Math.min(Math.max(4, val), 6);
+      onClickOverlay,
+      onClickCloseIcon,
+      ...rest
+    } = {
+      ...defaultProps$J,
+      ...props
     };
-    const [innerVisible, setInnerVisible] = React.useState(visible);
-    const [comLen, setComLen] = React.useState(range2(Number(length)));
-    const [inputValue, setInputValue] = React.useState("");
+    const classPrefix2 = "nut-shortpassword";
+    const comLen = React.useMemo(() => {
+      return Math.min(Math.max(4, length || 4), 6);
+    }, [length]);
+    const format2 = (val) => {
+      return val.slice(0, comLen);
+    };
+    const [inputValue, setInputValue] = usePropsValue({ value, onChange });
     React.useEffect(() => {
-      setInnerVisible(visible);
+      if (visible && autoFocus) {
+        onFocus && onFocus();
+      }
     }, [visible]);
     React.useEffect(() => {
-      if (typeof modelValue !== "undefined") {
-        setInputValue(modelValue);
+      const val = format2(value);
+      if (val.length >= comLen) {
+        onComplete && onComplete(val);
       }
-    }, [modelValue]);
-    const changeValue = (e) => {
-      let inputValue2 = e.target.value;
-      if (String(inputValue2).length > comLen) {
-        inputValue2 = inputValue2.slice(0, comLen);
-      }
-      setInputValue(inputValue2);
-      if (String(inputValue2).length === comLen) {
-        onComplete && onComplete(inputValue2);
-      }
-      onChange && onChange(inputValue2);
-    };
-    const systemStyle = () => {
-      const u = navigator.userAgent;
-      const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
-      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-      let style2 = {};
-      if (isIOS) {
-        style2 = {
-          paddingRight: "1200px"
-        };
-      }
-      if (isAndroid) {
-        style2 = {
-          opacity: 0,
-          zIndex: 10
-        };
-      }
-      return style2;
-    };
-    const focus = () => {
-      if (textInput.current) {
-        textInput.current.focus();
-      }
-    };
+      setInputValue(format2(value));
+    }, [value]);
     const sure = () => {
-      onOk && onOk(inputValue);
-    };
-    const renderIcon = (size = "11px") => {
-      return React.isValidElement(tipsIcon) ? React.cloneElement(tipsIcon, {
-        ...tipsIcon.props,
-        width: size,
-        height: size
-      }) : /* @__PURE__ */ React.createElement(x, { width: size, height: size });
+      onConfirm && onConfirm(inputValue);
     };
-    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(
       Popup,
       {
         style: {
@@ -18069,28 +17986,28 @@ Please add \`${key}Action\` when creating your handler.`);
           borderRadius: "12px",
           textAlign: "center"
         },
-        visible: innerVisible,
+        visible,
         closeable: true,
-        "close-on-click-overlay": closeOnClickOverlay,
         onClickOverlay: onClose,
-        onClickCloseIcon: onClose
+        onClickCloseIcon: onClose,
+        ...rest
       },
-      /* @__PURE__ */ React.createElement("div", { className: `${b()} ${className}`, style: { ...style }, ...reset }, /* @__PURE__ */ React.createElement("div", { className: b("title") }, title || locale.shortpassword.title), /* @__PURE__ */ React.createElement("div", { className: b("subtitle") }, description || locale.shortpassword.description), /* @__PURE__ */ React.createElement("div", { className: b("input") }, /* @__PURE__ */ React.createElement(
-        "input",
+      /* @__PURE__ */ React.createElement("div", { className: classNames(className, classPrefix2), style }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__title` }, title || locale.shortpassword.title), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__description` }, description || locale.shortpassword.description), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__input`, onClick: onFocus }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__input-site` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
+        return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__input-fake__li`, key: index }, inputValue.length > index && /* @__PURE__ */ React.createElement(React.Fragment, null, plain ? inputValue[index] : /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix2}__input-fake__li__icon`
+          }
+        )));
+      }))), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__message` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__message__error` }, error), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__message__forget`, onClick: onTips }, tips || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(x, { width: 11, height: 11, style: { marginRight: "3px" } }), locale.shortpassword.tips))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__footer` }, /* @__PURE__ */ React.createElement(
+        "div",
         {
-          ref: textInput,
-          className: b("input-real"),
-          type: "number",
-          style: systemStyle(),
-          maxLength: 6,
-          value: inputValue,
-          autoFocus,
-          onChange: (e) => changeValue(e)
-        }
-      ), /* @__PURE__ */ React.createElement("div", { className: b("input-site") }), /* @__PURE__ */ React.createElement("div", { className: b("input-fake"), onClick: () => focus() }, [...new Array(comLen).keys()].map((item, index) => {
-        return /* @__PURE__ */ React.createElement("div", { className: b("input-fake__li"), key: index }, String(inputValue).length > index ? /* @__PURE__ */ React.createElement("div", { className: b("input-fake__li__icon") }) : null);
-      }))), /* @__PURE__ */ React.createElement("div", { className: b("message") }, /* @__PURE__ */ React.createElement("div", { className: b("message__error") }, errorMsg2), tips || locale.shortpassword.tips ? /* @__PURE__ */ React.createElement("div", { className: b("message__forget") }, renderIcon(iconSize), /* @__PURE__ */ React.createElement("div", { className: b("message__forget-tips"), onClick: onTips }, tips || locale.shortpassword.tips)) : null), !noButton ? /* @__PURE__ */ React.createElement("div", { className: b("footer") }, /* @__PURE__ */ React.createElement("div", { className: b("footer__cancel"), onClick: onCancel }, locale.cancel), /* @__PURE__ */ React.createElement("div", { className: b("footer__sure"), onClick: () => sure() }, locale.confirm)) : null)
-    ));
+          className: `${classPrefix2}__footer__cancel`,
+          onClick: onCancel
+        },
+        locale.cancel
+      ), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__footer__sure`, onClick: sure }, locale.confirm)))
+    );
   };
   ShortPassword.defaultProps = defaultProps$J;
   ShortPassword.displayName = "NutShortPassword";
@@ -18921,13 +18838,13 @@ Please add \`${key}Action\` when creating your handler.`);
           key: item.uid
         },
         previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, deletable && /* @__PURE__ */ React.createElement(
-          x$8,
+          x$9,
           {
             color: "rgba(0,0,0,0.6)",
             className: "close",
             onClick: () => onDeleteItem(item, index)
           }
-        ), item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ React.createElement(x$8, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React.createElement(
+        ), item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ React.createElement(x$9, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React.createElement(
           k$3,
           {
             className: "nut-icon-loading",
@@ -19021,50 +18938,40 @@ Please add \`${key}Action\` when creating your handler.`);
   Uploader.defaultProps = defaultProps$E;
   Uploader.displayName = "NutUploader";
   const defaultProps$D = {
-    cancelText: "",
-    optionTag: "name",
-    optionSubTag: "subname",
-    chooseTagValue: "",
+    ...ComponentDefaults,
+    visible: false,
     title: "",
-    color: "#ee0a24",
     description: "",
-    menuItems: [],
+    options: [],
+    optionKey: { name: "name", description: "description" },
+    cancelText: "",
     onCancel: () => {
     },
-    onChoose: () => {
-    },
-    visible: false,
-    className: "",
-    style: {}
+    onSelect: () => {
+    }
   };
   const ActionSheet = (props) => {
     const {
       children,
       cancelText,
-      optionTag,
-      optionSubTag,
-      chooseTagValue,
+      optionKey,
       title,
-      color,
       description,
-      menuItems,
+      options: options2,
       onCancel,
-      onChoose,
+      onSelect,
       visible,
       className,
       style,
       ...rest
     } = { ...defaultProps$D, ...props };
-    const b = cn("actionsheet");
-    const isHighlight = (item) => {
-      return props.chooseTagValue && props.chooseTagValue === item[props.optionTag || "name"] ? props.color : "$dark1";
-    };
+    const classPrefix2 = "nut-actionsheet";
     const cancelActionSheet = () => {
       onCancel && onCancel();
     };
     const chooseItem = (item, index) => {
       if (!item.disable) {
-        onChoose && onChoose(item, index);
+        onSelect && onSelect(item, index);
       }
     };
     return /* @__PURE__ */ React.createElement(
@@ -19077,19 +18984,25 @@ Please add \`${key}Action\` when creating your handler.`);
           onCancel && onCancel();
         }
       },
-      /* @__PURE__ */ React.createElement("div", { className: `${b()} ${className}`, style, ...rest }, title && /* @__PURE__ */ React.createElement("div", { className: b("title") }, title), description && /* @__PURE__ */ React.createElement("div", { className: `${b("item")} description` }, description), menuItems.length ? /* @__PURE__ */ React.createElement("div", { className: b("menu") }, menuItems.map((item, index) => {
+      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, style, ...rest }, title && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__title` }, title), description && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__description` }, description), options2.length ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__list` }, options2.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `${b("item")} ${item.disable ? b("item-disabled") : ""}`,
-            style: { color: isHighlight(item) },
+            className: `${classPrefix2}__item ${item.disable ? "disabled" : ""} ${item.danger ? "danger" : ""}`,
             key: index,
             onClick: () => chooseItem(item, index)
           },
-          item[optionTag],
-          /* @__PURE__ */ React.createElement("div", { className: "subdesc" }, item[optionSubTag])
+          item[optionKey.name],
+          /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__item-description` }, item[optionKey.description])
         );
-      })) : children, cancelText && /* @__PURE__ */ React.createElement("div", { className: b("cancel"), onClick: () => cancelActionSheet() }, cancelText))
+      })) : children, cancelText && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix2}__cancel`,
+          onClick: () => cancelActionSheet()
+        },
+        cancelText
+      ))
     );
   };
   ActionSheet.defaultProps = defaultProps$D;
@@ -19515,7 +19428,7 @@ Please add \`${key}Action\` when creating your handler.`);
     imageSize: "",
     status: "empty"
   };
-  const classPrefix$7 = `nut-empty`;
+  const classPrefix$9 = `nut-empty`;
   const Empty = (props) => {
     const { locale } = useConfig();
     const {
@@ -19550,7 +19463,7 @@ Please add \`${key}Action\` when creating your handler.`);
         };
       });
     }, [imageSize]);
-    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$7} ${className}`, ...rest }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$7}__image`, style: imgStyle }, imageNode), typeof description === "string" ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$7}__description` }, description || locale.noData) : description, children));
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$9} ${className}`, ...rest }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$9}__image`, style: imgStyle }, imageNode), typeof description === "string" ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$9}__description` }, description || locale.noData) : description, children));
   };
   Empty.defaultProps = defaultProps$A;
   Empty.displayName = "NutEmpty";
@@ -20070,7 +19983,7 @@ Please add \`${key}Action\` when creating your handler.`);
       },
       children,
       content
-    )), closeable || rightIcon ? /* @__PURE__ */ React.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React.createElement(x$a, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
+    )), closeable || rightIcon ? /* @__PURE__ */ React.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React.createElement(x$b, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "nut-noticebar-vertical",
@@ -20117,13 +20030,13 @@ Please add \`${key}Action\` when creating your handler.`);
             handleClickIcon(e);
           }
         },
-        rightIcon || (closeable ? /* @__PURE__ */ React.createElement(x$a, { width: 12, height: 12 }) : null)
+        rightIcon || (closeable ? /* @__PURE__ */ React.createElement(x$b, { width: 12, height: 12 }) : null)
       )
     ) : null);
   };
   NoticeBar.defaultProps = defaultProps$y;
   NoticeBar.displayName = "NutNoticeBar";
-  const classPrefix$6 = "nut-notify";
+  const classPrefix$8 = "nut-notify";
   let Notification$1 = (_a = class extends React__namespace.PureComponent {
     constructor(props) {
       super(props);
@@ -20172,17 +20085,17 @@ Please add \`${key}Action\` when creating your handler.`);
     }
     render() {
       const { style, message, type: type2, className, position } = this.props;
-      const { show } = this.state;
+      const { show: show2 } = this.state;
       const classes = classNames({
-        [`${classPrefix$6}--popup-top`]: position === "top",
-        [`${classPrefix$6}--popup-bottom`]: position === "bottom",
-        [`${classPrefix$6}`]: true,
-        [`${classPrefix$6}--${type2}`]: true
+        [`${classPrefix$8}--popup-top`]: position === "top",
+        [`${classPrefix$8}--popup-bottom`]: position === "bottom",
+        [`${classPrefix$8}`]: true,
+        [`${classPrefix$8}--${type2}`]: true
       });
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         CSSTransition$1,
         {
-          in: show,
+          in: show2,
           timeout: 300,
           classNames: "fade",
           unmountOnExit: true,
@@ -20657,7 +20570,7 @@ Please add \`${key}Action\` when creating your handler.`);
     src: "",
     alt: ""
   };
-  const classPrefix$5 = `nut-avatar`;
+  const classPrefix$7 = `nut-avatar`;
   const Avatar = (props) => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     const {
@@ -20689,7 +20602,7 @@ Please add \`${key}Action\` when creating your handler.`);
       [`nut-avatar-${((_a2 = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _a2.size) || size || "normal"}`]: true,
       [`nut-avatar-${((_b = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _b.shape) || shape}`]: true
     });
-    const cls = classNames(classPrefix$5, classes, className);
+    const cls = classNames(classPrefix$7, classes, className);
     const styles = {
       width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
       height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
@@ -21005,6 +20918,7 @@ Please add \`${key}Action\` when creating your handler.`);
   });
   Swipe.defaultProps = defaultProps$t;
   Swipe.displayName = "NutSwipe";
+  const classPrefix$6 = "nut-toast";
   class Notification extends React__namespace.PureComponent {
     constructor(props) {
       super(props);
@@ -21034,11 +20948,33 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }
     clickCover() {
-      const { closeOnClickOverlay } = this.props;
-      if (closeOnClickOverlay) {
+      const { closeOnOverlayClick } = this.props;
+      if (closeOnOverlayClick) {
         this.close();
       }
     }
+    renderIcon() {
+      const { icon } = this.props;
+      if (typeof icon === "string") {
+        let iconNode = null;
+        switch (icon) {
+          case "success":
+            iconNode = /* @__PURE__ */ React__namespace.createElement(x$f, null);
+            break;
+          case "loading":
+            iconNode = /* @__PURE__ */ React__namespace.createElement(k$3, { className: "nut-icon-loading" });
+            break;
+          case "fail":
+            iconNode = /* @__PURE__ */ React__namespace.createElement(x$9, null);
+            break;
+          case "warn":
+            iconNode = /* @__PURE__ */ React__namespace.createElement(x$8, null);
+            break;
+        }
+        return /* @__PURE__ */ React__namespace.createElement("p", { className: `${classPrefix$6}__icon-wrapper` }, iconNode);
+      }
+      return icon;
+    }
     componentDidMount() {
       this.startCloseTimer();
     }
@@ -21048,56 +20984,43 @@ Please add \`${key}Action\` when creating your handler.`);
     render() {
       const {
         id,
-        style,
         icon,
         title,
-        msg,
-        bottom,
-        center,
-        bgColor,
-        coverColor,
-        textAlignCenter,
+        content,
+        position,
         size,
-        customClass,
-        cover,
-        type: type2
+        closeOnOverlayClick,
+        style,
+        className,
+        contentClassName,
+        contentStyle
       } = this.props;
-      const toastBem = cn("toast");
       const classes = classNames({
-        "nut-toast-center": center,
         "nut-toast-has-icon": icon,
-        "nut-toast-cover": cover,
-        "nut-toast-loading": type2 === "loading",
-        [`${customClass}`]: true,
         [`nut-toast-${size}`]: true
       });
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-        "div",
+        Overlay,
         {
-          className: `${toastBem()} ${classes}`,
-          id: `toast-${id}`,
-          style: {
-            bottom: center ? "auto" : `${bottom}`,
-            backgroundColor: cover ? coverColor : "",
-            ...style
-          },
+          visible: true,
+          style,
+          className: `${classPrefix$6}__overlay-default ${className}`,
           onClick: () => {
+            console.log("onclick");
             this.clickCover();
-          }
+          },
+          closeOnOverlayClick
         },
-        /* @__PURE__ */ React__namespace.createElement(
+        /* @__PURE__ */ React__namespace.createElement("div", { className: `${classPrefix$6} ${classes}`, id: `toast-${id}` }, /* @__PURE__ */ React__namespace.createElement(
           "div",
           {
-            className: toastBem("inner"),
-            style: {
-              textAlign: textAlignCenter ? "center" : "left",
-              backgroundColor: bgColor
-            }
+            className: `${classPrefix$6}__inner ${classPrefix$6}-${position} ${contentClassName}`,
+            style: contentStyle
           },
-          icon ? /* @__PURE__ */ React__namespace.createElement("p", { className: toastBem("icon-wrapper") }, icon) : null,
-          title ? /* @__PURE__ */ React__namespace.createElement("div", { className: "nut-toast-title" }, title) : null,
-          /* @__PURE__ */ React__namespace.createElement("span", { className: toastBem("text") }, msg)
-        )
+          this.renderIcon(),
+          title ? /* @__PURE__ */ React__namespace.createElement("div", { className: `${classPrefix$6}-title` }, title) : null,
+          /* @__PURE__ */ React__namespace.createElement("span", { className: `${classPrefix$6}-text` }, content)
+        ))
       ));
     }
   }
@@ -21126,36 +21049,20 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   let messageInstance = null;
   const options = {
-    msg: "",
+    ...ComponentDefaults,
     id: "",
-    style: {},
-    duration: 1.5,
+    duration: 2,
     // 时长,duration为0则一直展示
-    center: true,
-    // toast是否居中展示
-    type: "text",
+    position: "center",
     title: "",
-    customClass: "",
-    // 自定义样式名
-    bottom: "30px",
-    // center为false时生效，距离底部位置
     size: "base",
     // 设置字体大小，默认base,可选large\small\base
     icon: null,
-    iconSize: "20",
-    textAlignCenter: true,
-    // 文字是否居中显示,true为居中，false为left
-    loadingRotate: true,
-    // 未实现
-    bgColor: "rgba(0, 0, 0, .8)",
     onClose: () => {
     },
-    cover: false,
-    // 是否展示透明遮罩层
-    coverColor: "rgba(0, 0, 0, 0)",
-    // 遮罩颜色设定
-    closeOnClickOverlay: false
+    closeOnOverlayClick: false,
     // 是否点击遮罩可关闭
+    contentClassName: ""
   };
   function getInstance(props, callback) {
     if (messageInstance) {
@@ -21171,6 +21078,7 @@ Please add \`${key}Action\` when creating your handler.`);
       if (messageInstance) {
         messageInstance.destroy();
         messageInstance = null;
+        opts.onClose && opts.onClose();
       }
     }
     const opts2 = { ...options, ...opts, onClose: close };
@@ -21183,32 +21091,31 @@ Please add \`${key}Action\` when creating your handler.`);
       console.warn("[NutUI Toast]: msg cannot be null");
     }
   };
+  function show(option) {
+    if (typeof option === "string") {
+      errorMsg(option);
+      return notice({ content: option });
+    }
+    errorMsg(option.content);
+    return notice({
+      ...option
+    });
+  }
+  function config(config2) {
+    if (config2.duration !== void 0) {
+      options.duration = config2.duration;
+    }
+    if (config2.position !== void 0) {
+      options.position = config2.position;
+    }
+    if (config2.closeOnOverlayClick !== void 0) {
+      options.closeOnOverlayClick = config2.closeOnOverlayClick;
+    }
+  }
   const Toast = {
-    text(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, type: "text", ...option });
-    },
-    success(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, icon: "success", type: "success", ...option });
-    },
-    fail(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, icon: "failure", type: "fail", ...option });
-    },
-    loading(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, icon: /* @__PURE__ */ React__namespace.createElement(k$3, null), type: "loading", ...option });
-    },
-    warn(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, icon: "tips", type: "warn", ...option });
-    },
-    customIcon(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, ...option });
-    },
-    hide() {
+    show,
+    config,
+    clear() {
       if (messageInstance) {
         messageInstance.destroy();
         messageInstance = null;
@@ -21223,7 +21130,7 @@ Please add \`${key}Action\` when creating your handler.`);
     onClick: (event) => {
     }
   };
-  const classPrefix$4 = `nut-animate`;
+  const classPrefix$5 = `nut-animate`;
   const Animate = (props) => {
     const { className, type: type2, action, loop: loop2, onClick, children, ...rest } = {
       ...defaultProps$s,
@@ -21232,7 +21139,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const [clicked, setClicked] = React.useState(false);
     const classes = classNames({
       "nut-ani-container": true,
-      [`${classPrefix$4}-${type2}`]: action === "initial" || clicked ? type2 : false,
+      [`${classPrefix$5}-${type2}`]: action === "initial" || clicked ? type2 : false,
       loop: loop2
     });
     const cls = classNames(classes, className);
@@ -21250,37 +21157,38 @@ Please add \`${key}Action\` when creating your handler.`);
   Animate.defaultProps = defaultProps$s;
   Animate.displayName = "NutAnimate";
   const defaultProps$r = {
-    maxLen: 0,
-    endNumber: "",
-    delaySpeed: 300,
-    easeSpeed: 1,
-    thousands: false,
-    className: ""
+    ...ComponentDefaults,
+    length: 0,
+    value: "",
+    delay: 300,
+    duration: 1,
+    thousands: false
   };
   const CountUp = (props) => {
     const {
-      maxLen,
-      endNumber,
-      delaySpeed,
-      easeSpeed,
+      length,
+      value,
+      delay,
+      duration,
       className,
       thousands,
+      style,
       ...reset
     } = {
       ...defaultProps$r,
       ...props
     };
-    const b = cn("countup");
+    const classPrefix2 = "nut-countup";
     const countupRef = React.useRef(null);
     const timerRef = React.useRef(0);
     const numbers = Array.from({ length: 10 }, (v, i) => i);
     const getShowNumber = () => {
-      const splitArr = endNumber.split(".");
-      const intNumber = maxLen && splitArr[0].length < maxLen ? (Array(maxLen).join("0") + splitArr[0]).slice(-maxLen) : splitArr[0];
+      const splitArr = value.split(".");
+      const intNumber = length && splitArr[0].length < length ? (Array(length).join("0") + splitArr[0]).slice(-length) : splitArr[0];
       const currNumber = `${thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,") : intNumber}${splitArr[1] ? "." : ""}${splitArr[1] || ""}`;
       return currNumber.split("");
     };
-    const numerArr = React.useMemo(getShowNumber, [endNumber, maxLen, thousands]);
+    const numerArr = React.useMemo(getShowNumber, [value, length, thousands]);
     const setNumberTransform = () => {
       if (countupRef.current) {
         const numberItems = countupRef.current.querySelectorAll(
@@ -21301,28 +21209,33 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const numberEaseStyle = {
-      transition: `transform ${easeSpeed}s ease-in-out`
+      transition: `transform ${duration}s ease-in-out`
     };
     React.useEffect(() => {
       timerRef.current = window.setTimeout(() => {
         setNumberTransform();
-      }, delaySpeed);
+      }, delay);
       return () => {
         window.clearTimeout(timerRef.current);
       };
     }, [numerArr]);
-    return /* @__PURE__ */ React.createElement("div", { className: `${b()} ${className}`, ref: countupRef }, /* @__PURE__ */ React.createElement("ul", { className: b("list") }, numerArr.map((item, idx) => {
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, ref: countupRef }, /* @__PURE__ */ React.createElement("ul", { className: `${classPrefix2}__list` }, numerArr.map((item, idx) => {
       return /* @__PURE__ */ React.createElement(
         "li",
         {
-          className: `${b("listitem", {
-            number: !Number.isNaN(Number(item))
-          })}`,
+          className: `${classPrefix2}__listitem ${!Number.isNaN(Number(item)) ? `${classPrefix2}__listitem--number` : ""}`,
           key: idx
         },
-        !Number.isNaN(Number(item)) ? /* @__PURE__ */ React.createElement("span", { className: b("number"), style: numberEaseStyle }, [...numbers, ...numbers].map((number2, subidx) => {
-          return /* @__PURE__ */ React.createElement("span", { key: subidx }, number2);
-        })) : /* @__PURE__ */ React.createElement("span", { className: b("separator") }, item)
+        !Number.isNaN(Number(item)) ? /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: `${classPrefix2}__number`,
+            style: numberEaseStyle
+          },
+          [...numbers, ...numbers].map((number2, subidx) => {
+            return /* @__PURE__ */ React.createElement("span", { key: subidx }, number2);
+          })
+        ) : /* @__PURE__ */ React.createElement("span", { className: `${classPrefix2}__separator` }, item)
       );
     })));
   };
@@ -21602,12 +21515,12 @@ Please add \`${key}Action\` when creating your handler.`);
     gap: "-8",
     level: "left"
   };
-  const classPrefix$3 = `nut-avatar-group`;
+  const classPrefix$4 = `nut-avatar-group`;
   const AvatarGroup = (props) => {
     const propAvatarGroup = { ...defaultProps$o, ...props };
     const { className, style, children } = propAvatarGroup;
     const avatarGroupRef = React.useRef(null);
-    const cls = classNames(classPrefix$3, className);
+    const cls = classNames(classPrefix$4, className);
     const parentAvatar = {
       propAvatarGroup,
       avatarGroupRef
@@ -21625,7 +21538,7 @@ Please add \`${key}Action\` when creating your handler.`);
     background: "#e5e9f2",
     clockwise: true
   };
-  const classPrefix$2 = `nut-circleprogress`;
+  const classPrefix$3 = `nut-circleprogress`;
   const CircleProgress = (props) => {
     var _a2;
     const {
@@ -21644,7 +21557,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...defaultProps$n,
       ...props
     };
-    const classes = classNames(className, classPrefix$2);
+    const classes = classNames(className, classPrefix$3);
     const refRandomId = Math.random().toString(36).slice(-8);
     const styles = {
       height: `${Number(radius) * 2}px`,
@@ -21893,13 +21806,16 @@ Please add \`${key}Action\` when creating your handler.`);
   Collapse.displayName = "NutCollapse";
   Collapse.Item = CollapseItem;
   const defaultProps$k = {
+    ...ComponentDefaults,
     paused: false,
     startTime: Date.now(),
     endTime: Date.now(),
+    remainingTime: 0,
     millisecond: false,
     format: "HH:mm:ss",
     autoStart: true,
-    time: 0
+    time: 0,
+    destroy: false
   };
   const InternalCountDown = (props, ref) => {
     useConfig();
@@ -21907,10 +21823,12 @@ Please add \`${key}Action\` when creating your handler.`);
       paused,
       startTime,
       endTime,
+      remainingTime,
       millisecond,
       format: format2,
       autoStart,
       time,
+      destroy,
       className,
       style,
       onEnd,
@@ -21920,7 +21838,7 @@ Please add \`${key}Action\` when creating your handler.`);
       children,
       ...rest
     } = { ...defaultProps$k, ...props };
-    const b = cn("countdown");
+    const classPrefix2 = "nut-countdown";
     const [restTimeStamp, setRestTime] = React.useState(0);
     const stateRef = React.useRef({
       pauseTime: 0,
@@ -21945,8 +21863,12 @@ Please add \`${key}Action\` when creating your handler.`);
       return new Date(t).getTime();
     };
     const initTime = () => {
-      stateRef.current.handleEndTime = endTime;
-      stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
+      if (remainingTime) {
+        stateRef.current.handleEndTime = Date.now() + Number(remainingTime);
+      } else {
+        stateRef.current.handleEndTime = endTime;
+        stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
+      }
       if (!stateRef.current.counting)
         stateRef.current.counting = true;
       tick();
@@ -22088,7 +22010,7 @@ Please add \`${key}Action\` when creating your handler.`);
       if (stateRef.current.isIninted) {
         initTime();
       }
-    }, [endTime, startTime]);
+    }, [endTime, startTime, remainingTime]);
     React.useEffect(() => {
       if (autoStart) {
         initTime();
@@ -22102,20 +22024,28 @@ Please add \`${key}Action\` when creating your handler.`);
       return componentWillUnmount;
     }, []);
     const componentWillUnmount = () => {
-      clearInterval(stateRef.current.timer);
+      destroy && cancelAnimationFrame(stateRef.current.timer);
     };
     const renderTime = (() => {
       return formatRemainTime(stateRef.current.restTime);
     })();
-    return /* @__PURE__ */ React.createElement("div", { className: `${b()} ${className || ""}`, style: { ...style }, ...rest }, children || /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: b("block"),
-        dangerouslySetInnerHTML: {
-          __html: `${renderTime}`
+        className: `${classPrefix2} ${className}`,
+        style: { ...style },
+        ...rest
+      },
+      children || /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix2}__block`,
+          dangerouslySetInnerHTML: {
+            __html: `${renderTime}`
+          }
         }
-      }
-    ));
+      )
+    );
   };
   const CountDown = React.forwardRef(InternalCountDown);
   CountDown.defaultProps = defaultProps$k;
@@ -22130,7 +22060,7 @@ Please add \`${key}Action\` when creating your handler.`);
     symbol: "...",
     lineHeight: "20"
   };
-  const classPrefix$1 = `nut-ellipsis`;
+  const classPrefix$2 = `nut-ellipsis`;
   const Ellipsis = (props) => {
     var _a2, _b;
     const {
@@ -22153,7 +22083,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const [expanded, setExpanded] = React.useState(false);
     const ellipsis = React.useRef();
     const root2 = React.useRef(null);
-    const classes = classNames(classPrefix$1, className);
+    const classes = classNames(classPrefix$2, className);
     React.useLayoutEffect(() => {
       if (content) {
         createContainer();
@@ -22297,6 +22227,7 @@ Please add \`${key}Action\` when creating your handler.`);
   Ellipsis.defaultProps = defaultProps$j;
   Ellipsis.displayName = "NutEllipsis";
   const defaultProps$i = {
+    ...ComponentDefaults,
     source: {
       type: {},
       src: ""
@@ -22311,15 +22242,13 @@ Please add \`${key}Action\` when creating your handler.`);
       loop: false
     }
   };
+  const classPrefix$1 = `nut-video`;
   const Video = (props) => {
     const {
       children,
       source,
       options: options2,
       className,
-      play,
-      pause,
-      playend,
       onPlay,
       onPause,
       onPlayEnd,
@@ -22329,8 +22258,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const rootRef = React.useRef(null);
-    const b = cn("video");
-    const classes = classNames(className, b(""));
+    const classes = classNames(className, classPrefix$1);
     React.useEffect(() => {
       init();
     }, []);
@@ -22350,16 +22278,13 @@ Please add \`${key}Action\` when creating your handler.`);
         }
         videoRef.addEventListener("play", () => {
           onPlay && onPlay(videoRef);
-          play && play(videoRef);
         });
         videoRef.addEventListener("pause", () => {
           onPause && onPause(videoRef);
-          pause && pause(videoRef);
         });
         videoRef.addEventListener("ended", () => {
           videoRef.currentTime = 0;
           onPlayEnd && onPlayEnd(videoRef);
-          playend && playend(videoRef);
         });
       }
     };
@@ -23124,18 +23049,18 @@ Please add \`${key}Action\` when creating your handler.`);
     return tempIndex;
   };
   const getEndIndex = ({
-    sourceData,
+    list,
     startIndex,
     visibleCount,
-    itemEqualSize = true,
+    itemEqual = true,
     positions,
     offSetSize,
     overscan,
     sizeKey = "width"
   }) => {
-    const dataLength = sourceData.length;
+    const dataLength = list.length;
     let tempIndex = null;
-    if (itemEqualSize) {
+    if (itemEqual) {
       const endIndex = startIndex + visibleCount;
       tempIndex = dataLength > 0 ? Math.min(dataLength, endIndex) : endIndex;
     } else {
@@ -23184,26 +23109,35 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     });
   };
-  const defaultProps$d = {};
+  const defaultProps$d = {
+    ...ComponentDefaults,
+    list: [],
+    itemHeight: 66,
+    itemEqual: true,
+    direction: "vertical",
+    overscan: 2
+  };
   const VirtualList = (props) => {
     const {
-      sourceData = [],
+      list,
       ItemRender,
-      itemEqualSize = true,
-      itemSize = 200,
-      horizontal = false,
-      overscan = 2,
+      itemEqual,
+      itemHeight,
+      direction,
+      overscan,
       key,
-      handleScroll,
       onScroll,
       className,
-      containerSize,
+      containerHeight,
       ...rest
-    } = props;
+    } = {
+      ...defaultProps$d,
+      ...props
+    };
+    const horizontal = direction === "horizontal";
     const sizeKey = horizontal ? "width" : "height";
     const scrollKey = horizontal ? "scrollLeft" : "scrollTop";
     const offsetKey = horizontal ? "left" : "top";
-    useConfig();
     const scrollRef = React.useRef(null);
     const itemsRef = React.useRef(null);
     const firstItemRef = React.useRef(null);
@@ -23220,7 +23154,7 @@ Please add \`${key}Action\` when creating your handler.`);
     ]);
     const [listTotalSize, setListTotalSize] = React.useState(99999999);
     const [visibleCount, setVisibleCount] = React.useState(0);
-    const [offSetSize, setOffSetSize] = React.useState(containerSize || 0);
+    const [offSetSize, setOffSetSize] = React.useState(containerHeight || 0);
     const [options2, setOptions] = React.useState({
       startOffset: 0,
       // 可视区域距离顶部的偏移量
@@ -23231,30 +23165,30 @@ Please add \`${key}Action\` when creating your handler.`);
       // 可视区域结束索引
     });
     React.useEffect(() => {
-      const pos = initPositinoCache(itemSize, sourceData.length);
+      const pos = initPositinoCache(itemHeight, list.length);
       setPositions(pos);
       const totalSize = getListTotalSize(pos, horizontal);
       setListTotalSize(totalSize);
-    }, [sourceData, itemSize, horizontal]);
+    }, [list, itemHeight, horizontal]);
     const getElement = React.useCallback(() => {
       var _a2;
       return ((_a2 = scrollRef.current) == null ? void 0 : _a2.parentElement) || document.body;
     }, []);
     React.useEffect(() => {
-      if (containerSize)
+      if (containerHeight)
         return;
       const size = horizontal ? getElement().offsetWidth : getElement().offsetHeight;
       setOffSetSize(size);
-    }, [getElement, horizontal, containerSize]);
+    }, [getElement, horizontal, containerHeight]);
     React.useEffect(() => {
       if (offSetSize === 0)
         return;
-      const count = Math.ceil(offSetSize / itemSize) + overscan;
+      const count = Math.ceil(offSetSize / itemHeight) + overscan;
       setVisibleCount(count);
       setOptions((options22) => {
         return { ...options22, endIndex: count };
       });
-    }, [getElement, horizontal, itemSize, overscan, offSetSize]);
+    }, [getElement, horizontal, itemHeight, overscan, offSetSize]);
     const updateTotalSize = React.useCallback(() => {
       if (!itemsRef.current)
         return;
@@ -23270,14 +23204,14 @@ Please add \`${key}Action\` when creating your handler.`);
         const scrollSize = getElement()[scrollKey];
         const startIndex = binarySearch(positions, scrollSize, horizontal);
         const overStart = startIndex - overscan > -1 ? startIndex - overscan : 0;
-        if (!itemEqualSize) {
+        if (!itemEqual) {
           updateTotalSize();
         }
         const endIndex = getEndIndex({
-          sourceData,
+          list,
           startIndex,
           visibleCount,
-          itemEqualSize,
+          itemEqual,
           positions,
           offSetSize,
           sizeKey,
@@ -23285,27 +23219,24 @@ Please add \`${key}Action\` when creating your handler.`);
         });
         const startOffset = positions[startIndex][offsetKey];
         setOptions({ startOffset, startIndex, overStart, endIndex });
-        if (endIndex > sourceData.length - 1) {
+        if (endIndex > list.length - 1) {
           if (onScroll) {
             onScroll();
-          } else if (handleScroll) {
-            handleScroll();
           }
         }
       });
     }, [
       positions,
       getElement,
-      sourceData,
+      list,
       visibleCount,
-      itemEqualSize,
+      itemEqual,
       updateTotalSize,
       offsetKey,
       sizeKey,
       scrollKey,
       horizontal,
       overscan,
-      handleScroll,
       offSetSize
     ]);
     React.useEffect(() => {
@@ -23321,7 +23252,7 @@ Please add \`${key}Action\` when creating your handler.`);
         className: className ? `${className} nut-virtualList-box` : "nut-virtualList-box",
         ...rest,
         style: {
-          [sizeKey]: containerSize ? `${offSetSize}px` : ""
+          [sizeKey]: containerHeight ? `${offSetSize}px` : ""
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -23343,7 +23274,7 @@ Please add \`${key}Action\` when creating your handler.`);
               transform: horizontal ? `translate3d(${options2.startOffset}px,0,0)` : `translate3d(0,${options2.startOffset}px,0)`
             }
           },
-          sourceData.slice(options2.overStart, options2.endIndex).map((data, index) => {
+          list.slice(options2.overStart, options2.endIndex).map((data, index) => {
             const { startIndex, overStart } = options2;
             const dataIndex = overStart + index;
             const styleVal = dataIndex < startIndex ? "none" : "block";
@@ -23740,7 +23671,7 @@ Please add \`${key}Action\` when creating your handler.`);
           },
           item.title,
           " ",
-          item.sorter && (sorterIcon || /* @__PURE__ */ React.createElement(x$9, { width: "12px", height: "12px" }))
+          item.sorter && (sorterIcon || /* @__PURE__ */ React.createElement(x$a, { width: "12px", height: "12px" }))
         );
       });
     };
@@ -23886,7 +23817,7 @@ Please add \`${key}Action\` when creating your handler.`);
         },
         closeIcon
       ) : /* @__PURE__ */ React.createElement(
-        x$a,
+        x$b,
         {
           width: 12,
           height: 12,
@@ -24242,43 +24173,42 @@ Please add \`${key}Action\` when creating your handler.`);
   TimeSelect.defaultProps = defaultProps$2;
   TimeSelect.displayName = "NutTimeSelect";
   const defaultProps$1 = {
-    rate: 0,
+    ...ComponentDefaults,
+    value: 0,
     digits: 2,
-    showSign: false,
-    showZero: false,
+    symbol: false,
+    zero: false,
     arrowLeft: false,
-    syncTextColor: true,
-    textColor: "#333",
+    syncColor: true,
+    color: "#333",
     riseColor: "#fa2c19",
     dropColor: "#64b578",
-    upIcon: null,
-    downIcon: null,
-    className: ""
+    riseIcon: null,
+    downIcon: null
   };
   const TrendArrow = (props) => {
     const {
-      rate,
+      value,
       digits,
-      showSign,
-      showZero,
+      symbol,
+      zero,
       arrowLeft,
-      syncTextColor,
-      textColor,
+      syncColor,
+      color,
       riseColor,
       dropColor,
-      upIcon,
+      riseIcon,
       downIcon,
       className,
+      style,
       children,
       ...rest
     } = { ...defaultProps$1, ...props };
-    const b = cn("trendarrow");
-    const handleClick2 = () => {
-    };
-    const rateTrend = React.useRef(rate > 0);
+    const classPrefix2 = "nut-trendarrow";
+    const rateTrend = React.useRef(value > 0);
     const myFixed = (num, digit = 2) => {
       if (Object.is(parseFloat(num), NaN)) {
-        return console.log(`传入的值：${num}不是一个数字`);
+        return console.warn(`传入的值：${num}不是一个数字`);
       }
       num = parseFloat(num);
       const numPow = Math.pow(10, digit);
@@ -24286,20 +24216,20 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const calcStyle = (() => {
       const arrowColor = rateTrend.current ? riseColor : dropColor;
-      const textEquArrowColor = syncTextColor ? arrowColor : textColor;
-      const style = {
-        color: rate === 0 ? textColor : textEquArrowColor
+      const textEquArrowColor = syncColor ? arrowColor : color;
+      const style2 = {
+        color: value === 0 ? color : textEquArrowColor
       };
-      return style;
+      return style2;
     })();
     const calcRate = (() => {
-      rateTrend.current = rate > 0;
-      const absRate = Math.abs(rate);
-      if (!showZero && rate === 0) {
+      rateTrend.current = value > 0;
+      const absRate = Math.abs(value);
+      if (!zero && value === 0) {
         return "--";
       }
       const resultRate = `${// eslint-disable-next-line no-nested-ternary
-      showSign && rate !== 0 ? rateTrend.current ? "+" : "-" : ""}${myFixed(Number(absRate), digits)}%`;
+      symbol && value !== 0 ? rateTrend.current ? "+" : "-" : ""}${myFixed(Number(absRate), digits)}%`;
       return resultRate;
     })();
     const calcIconProps = (() => {
@@ -24310,13 +24240,21 @@ Please add \`${key}Action\` when creating your handler.`);
     })();
     const renderContent = (arrowLeft2) => {
       const classNameSuffix = !arrowLeft2 ? "icon-after" : "icon-before";
-      return /* @__PURE__ */ React.createElement("span", { className: `${b(classNameSuffix)} ${b("rate")}`, style: calcStyle }, calcRate);
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: `${classPrefix2}__${classNameSuffix} ${classPrefix2}__value`,
+          style: calcStyle
+        },
+        calcRate
+      );
     };
-    return /* @__PURE__ */ React.createElement("div", { className: `${b()} ${className}`, ...rest, onClick: handleClick2 }, !arrowLeft && renderContent(!arrowLeft), children || /* @__PURE__ */ React.createElement(React.Fragment, null, Number(rate) !== 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, rateTrend ? /* @__PURE__ */ React.createElement(y, { color: calcIconProps.color }) : /* @__PURE__ */ React.createElement(y$1, { color: calcIconProps.color }))), arrowLeft && renderContent(!arrowLeft));
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, style, ...rest }, !arrowLeft && renderContent(!arrowLeft), Number(value) !== 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, rateTrend.current ? /* @__PURE__ */ React.createElement(React.Fragment, null, riseIcon || /* @__PURE__ */ React.createElement(y, { color: calcIconProps.color })) : /* @__PURE__ */ React.createElement(React.Fragment, null, downIcon || /* @__PURE__ */ React.createElement(y$1, { color: calcIconProps.color }))), arrowLeft && renderContent(!arrowLeft));
   };
   TrendArrow.defaultProps = defaultProps$1;
   TrendArrow.displayName = "NutTrendArrow";
   const defaultProps = {
+    ...ComponentDefaults,
     content: "",
     fullPage: true,
     zIndex: 2e3,
@@ -24328,9 +24266,8 @@ Please add \`${key}Action\` when creating your handler.`);
     imageWidth: 120,
     imageHeight: 64,
     rotate: -22,
-    fontColor: "rgba(0,0,0,.15)",
+    color: "rgba(0,0,0,.15)",
     fontStyle: "normal",
-    fontFamily: "PingFang SC",
     fontWeight: "normal",
     fontSize: 14
   };
@@ -24349,22 +24286,20 @@ Please add \`${key}Action\` when creating your handler.`);
       imageWidth,
       imageHeight,
       rotate,
-      fontColor,
+      color,
       fontStyle,
       fontFamily,
       fontWeight,
       fontSize,
-      style,
-      children
+      style
     } = {
       ...defaultProps,
       ...props
     };
     const [base64Url, setBase64Url] = React.useState("");
-    const b = cn("watermark");
-    const classes = classNames({
-      [`${b("")}`]: true,
-      [`${b("")}-full-page`]: fullPage
+    const classPrefix2 = "nut-watermark";
+    const classes = classNames(classPrefix2, {
+      [`${classPrefix2}-full-page`]: fullPage
     });
     const cls = classNames(classes, className);
     React.useEffect(() => {
@@ -24406,7 +24341,7 @@ Please add \`${key}Action\` when creating your handler.`);
           ctx2.rotate(Math.PI / 180 * Number(rotate));
           const markSize = Number(fontSize) * ratio;
           ctx2.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
-          ctx2.fillStyle = fontColor;
+          ctx2.fillStyle = color;
           ctx2.fillText(content, 0, 0);
           ctx2.restore();
           setBase64Url(canvas.toDataURL());