@nutui/nutui-react 2.0.24 → 2.1.0-beta.1

package/dist/nutui.react.umd.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.24 Fri Nov 10 2023 14:51:56 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.1.0 Fri Nov 17 2023 14:49:44 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -764,7 +764,7 @@ Check the top-level render call using <` + t2 + ">.");
     }
   ) });
   e$3.defaultProps = Pe;
-  const t$c = (a2) => /* @__PURE__ */ Oe(hr, { ...a2, name: a2.name || "ArrowUp2", viewBox: "0 0 2472 1024", children: /* @__PURE__ */ Oe(
+  const t$b = (a2) => /* @__PURE__ */ Oe(hr, { ...a2, name: a2.name || "ArrowUp2", viewBox: "0 0 2472 1024", children: /* @__PURE__ */ Oe(
     "path",
     {
       d: "M623.406 815.479A129.722 129.722 0 1 1 487.068 594.95C691.9 468.083 896.73 341.993 1101.691 215.125a194.583 194.583 0 0 1 204.442 0l614.494 379.567a129.722 129.722 0 1 1-136.338 220.657l-580.506-358.292-580.377 358.422",
@@ -772,7 +772,7 @@ Check the top-level render call using <` + t2 + ">.");
       fillOpacity: "0.9"
     }
   ) });
-  t$c.defaultProps = Pe;
+  t$b.defaultProps = Pe;
   const o$5 = (a2) => /* @__PURE__ */ pr(hr, { ...a2, name: a2.name || "CheckChecked", viewBox: "0 0 1032 1024", children: [
     /* @__PURE__ */ Oe(
       "path",
@@ -802,7 +802,7 @@ Check the top-level render call using <` + t2 + ">.");
     }
   ) });
   l$3.defaultProps = Pe;
-  const t$b = (a2) => /* @__PURE__ */ Oe(hr, { ...a2, name: a2.name || "CheckNormal", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
+  const t$a = (a2) => /* @__PURE__ */ Oe(hr, { ...a2, name: a2.name || "CheckNormal", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
     "path",
     {
       d: "M512 1024c-136.533 0-264.533-54.044-361.244-150.756C54.044 776.534 0 648.534 0 512c0-136.533 54.044-264.533 150.756-361.244C247.466 54.044 375.466 0 512 0c136.533 0 264.533 54.044 361.244 150.756C969.956 247.466 1024 375.466 1024 512s-54.044 264.533-150.756 361.244C776.534 969.956 648.534 1024 512 1024zm0-938.667c-113.778 0-221.867 45.511-301.511 125.156S85.333 398.222 85.333 512s45.511 221.867 125.156 301.511S398.222 938.667 512 938.667s221.867-45.511 301.511-125.156S938.667 625.778 938.667 512 893.156 290.133 813.51 210.489 625.778 85.333 512 85.333z",
@@ -810,7 +810,7 @@ Check the top-level render call using <` + t2 + ">.");
       fillOpacity: "0.9"
     }
   ) });
-  t$b.defaultProps = Pe;
+  t$a.defaultProps = Pe;
   const o$4 = (a2) => /* @__PURE__ */ Oe(hr, { ...a2, name: a2.name || "Check", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
     "path",
     {
@@ -829,7 +829,7 @@ Check the top-level render call using <` + t2 + ">.");
     }
   ) });
   o$3.defaultProps = Pe;
-  const r$5 = (t2) => /* @__PURE__ */ Oe(hr, { ...t2, name: t2.name || "Checklist", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
+  const r$4 = (t2) => /* @__PURE__ */ Oe(hr, { ...t2, name: t2.name || "Checklist", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
     "path",
     {
       d: "M159.289 500.622c62.578 0 125.155 17.067 221.867 102.4 8.533 5.69 19.91 5.69 25.6 0 48.355-54.044 238.933-261.689 455.11-329.955 0 0 28.445-5.69 42.667 19.91 8.534 17.067 19.911 34.134-5.689 54.045-22.755 17.067-264.533 179.2-440.888 440.89l-2.845 2.844c-11.378 8.533-68.267 51.2-119.467-14.223-56.888-71.11-85.333-139.377-196.266-196.266-2.845 0-2.845-2.845-5.69-5.69-11.377-11.377-54.044-73.955 25.6-73.955z",
@@ -837,17 +837,8 @@ Check the top-level render call using <` + t2 + ">.");
       fillOpacity: "0.9"
     }
   ) });
-  r$5.defaultProps = Pe;
-  const r$4 = (c6) => /* @__PURE__ */ Oe(hr, { ...c6, name: c6.name || "CircleClose", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
-    "path",
-    {
-      d: "M511.492 73.063a438.425 438.425 0 0 1 310.545 748.953 439.16 439.16 0 1 1-621.09-621.073A435.695 435.695 0 0 1 511.492 73.046m0-73.063C267.49.018 57.468 172.408 9.87 411.717-37.713 651.042 90.39 890.658 315.823 984.03c225.45 93.355 485.444 14.472 621.005-188.416 135.543-202.906 108.885-473.293-63.659-645.82A509.645 509.645 0 0 0 511.492.002zm-175.7 635.495 299.673-299.674c12.049-12.049 24.115-12.049 36.164 0l15.496 15.497c12.05 12.066 12.05 24.115 0 36.18L387.47 687.122c-12.066 12.05-24.115 12.05-36.181 0l-15.497-15.496c-12.049-12.066-12.049-24.115 0-36.182zm0-284.177 15.496-15.497c12.066-12.049 24.115-12.049 36.18 0l299.64 299.674c12.05 12.049 12.05 24.098 0 36.164l-15.496 15.496c-12.05 12.05-24.115 12.05-36.182 0L335.808 387.465c-12.049-12.05-12.049-24.098 0-36.164z",
-      fill: "currentColor",
-      fillOpacity: "0.9"
-    }
-  ) });
   r$4.defaultProps = Pe;
-  const t$a = (a2) => /* @__PURE__ */ Oe(hr, { ...a2, name: a2.name || "Close", viewBox: "0 0 1026 1024", children: /* @__PURE__ */ Oe(
+  const t$9 = (a2) => /* @__PURE__ */ Oe(hr, { ...a2, name: a2.name || "Close", viewBox: "0 0 1026 1024", children: /* @__PURE__ */ Oe(
     "path",
     {
       d: "M981.577 1024c-11.703 0-23.406-2.926-32.183-11.703L13.166 76.07c-14.629-17.555-14.629-46.812 0-64.366 17.554-14.629 46.811-14.629 64.365 0L1013.76 947.93c17.554 17.555 17.554 43.886 0 61.44-8.777 11.703-20.48 14.629-32.183 14.629zm-936.228 0c-11.703 0-23.406-2.926-32.183-11.703-17.555-17.554-17.555-43.886 0-61.44L949.394 14.63c17.555-17.555 43.886-17.555 61.44 0 17.555 17.554 17.555 43.885 0 61.44L74.606 1012.297C68.754 1021.074 57.05 1024 45.349 1024z",
@@ -855,8 +846,8 @@ Check the top-level render call using <` + t2 + ">.");
       fillOpacity: "0.9"
     }
   ) });
-  t$a.defaultProps = Pe;
-  const t$9 = (c6) => /* @__PURE__ */ Oe(hr, { ...c6, name: c6.name || "Del", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
+  t$9.defaultProps = Pe;
+  const t$8 = (c6) => /* @__PURE__ */ Oe(hr, { ...c6, name: c6.name || "Del", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
     "path",
     {
       d: "M668.444 1024H355.556c-142.223 0-256-113.778-256-256V170.667h824.888V768c0 142.222-113.777 256-256 256zM184.89 256v512c0 93.867 76.8 170.667 170.667 170.667h312.888c93.867 0 170.667-76.8 170.667-170.667V256H184.89zm753.778 0H85.333c-22.755 0-42.666-19.911-42.666-42.667s19.91-42.666 42.666-42.666h853.334c22.755 0 42.666 19.91 42.666 42.666S961.423 256 938.667 256zM625.777 85.333H398.223c-22.755 0-42.666-19.91-42.666-42.666S375.466 0 398.222 0h227.556c22.755 0 42.666 19.911 42.666 42.667s-19.91 42.666-42.666 42.666z",
@@ -864,7 +855,7 @@ Check the top-level render call using <` + t2 + ">.");
       fillOpacity: "0.9"
     }
   ) });
-  t$9.defaultProps = Pe;
+  t$8.defaultProps = Pe;
   const e$2 = (r2) => /* @__PURE__ */ Oe(hr, { ...r2, name: r2.name || "DownArrow", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
     "path",
     {
@@ -874,7 +865,7 @@ Check the top-level render call using <` + t2 + ">.");
     }
   ) });
   e$2.defaultProps = Pe;
-  const t$8 = (l2) => /* @__PURE__ */ Oe(hr, { ...l2, name: l2.name || "Failure", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
+  const t$7 = (l2) => /* @__PURE__ */ Oe(hr, { ...l2, name: l2.name || "Failure", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
     "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.267zm111.502 282.169c13.654-13.654 34.134-13.654 47.787 0 11.378 11.377 13.653 31.857 2.275 45.51l-2.275 2.276-111.502 111.502 111.502 111.503c13.653 13.653 13.653 34.133 0 47.786-13.653 13.654-34.133 13.654-47.787 0L512 557.511 400.498 669.013c-11.378 11.378-31.858 13.654-45.511 2.276l-2.276-2.276c-11.378-11.377-13.653-31.857-2.275-45.51l2.275-2.276 111.502-111.503-111.502-111.502c-13.653-13.653-13.653-34.133 0-47.786s34.133-13.654 47.787 0L512 461.938l111.502-111.502z",
@@ -882,7 +873,7 @@ Check the top-level render call using <` + t2 + ">.");
       fillOpacity: "0.9"
     }
   ) });
-  t$8.defaultProps = Pe;
+  t$7.defaultProps = Pe;
   const e$1 = (l2) => /* @__PURE__ */ pr(hr, { ...l2, name: l2.name || "ImageError", viewBox: "0 0 1024 1024", children: [
     /* @__PURE__ */ Oe(
       "path",
@@ -923,15 +914,6 @@ Check the top-level render call using <` + t2 + ">.");
     )
   ] });
   e.defaultProps = Pe;
-  const t$7 = (s) => /* @__PURE__ */ Oe(hr, { ...s, name: s.name || "Issue", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ Oe(
-    "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"
-    }
-  ) });
-  t$7.defaultProps = Pe;
   const t$6 = (a2) => /* @__PURE__ */ Oe(hr, { ...a2, name: a2.name || "JoySmile", viewBox: "0 0 3072 1024", children: /* @__PURE__ */ Oe(
     "path",
     {
@@ -1117,7 +1099,7 @@ Check the top-level render call using <` + t2 + ">.");
     className: "",
     style: {}
   };
-  const prefixCls$1 = "nut-button";
+  const prefixCls$2 = "nut-button";
   const defaultProps$1u = {
     ...ComponentDefaults,
     color: "",
@@ -1183,17 +1165,17 @@ Check the top-level render call using <` + t2 + ">.");
           ref,
           type: nativeType,
           className: classNames(
-            prefixCls$1,
-            className,
-            props.type ? `${prefixCls$1}--${type2}` : null,
-            props.fill ? `${prefixCls$1}--${fill}` : null,
+            prefixCls$2,
+            props.type ? `${prefixCls$2}--${type2}` : null,
+            props.fill ? `${prefixCls$2}--${fill}` : null,
             {
-              [`${prefixCls$1}--${size}`]: size,
-              [`${prefixCls$1}--${shape}`]: shape,
-              [`${prefixCls$1}--block`]: block,
-              [`${prefixCls$1}--disabled`]: disabled,
-              [`${prefixCls$1}--loading`]: loading
-            }
+              [`${prefixCls$2}--${size}`]: size,
+              [`${prefixCls$2}--${shape}`]: shape,
+              [`${prefixCls$2}--block`]: block,
+              [`${prefixCls$2}--disabled`]: disabled,
+              [`${prefixCls$2}--loading`]: loading
+            },
+            className
           ),
           style: { ...getStyle(), ...style },
           onClick: (e2) => handleClick2(e2)
@@ -1210,16 +1192,16 @@ Check the top-level render call using <` + t2 + ">.");
     description: "",
     divider: true
   };
-  const classPrefix$q = "nut-cell-group";
+  const classPrefix$r = "nut-cell-group";
   const CellGroup = (props) => {
     const { children, className, style, title, description, divider, ...rest } = {
       ...defaultProps$1t,
       ...props
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$q, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$q}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$q}__description` }, description) : null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$r, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$r}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$r}__description` }, description) : null, /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${classPrefix$q}__wrap ${divider ? `${classPrefix$q}__wrap--divider` : ""}`
+        className: `${classPrefix$r}__wrap ${divider ? `${classPrefix$r}__wrap--divider` : ""}`
       },
       /* @__PURE__ */ React.createElement(CellGroupContext.Provider, { value: { divider } }, children)
     ));
@@ -1236,7 +1218,7 @@ Check the top-level render call using <` + t2 + ">.");
     onClick: (event) => {
     }
   };
-  const classPrefix$p = "nut-cell";
+  const classPrefix$q = "nut-cell";
   const Cell = (props) => {
     const ctx2 = React.useContext(CellGroupContext);
     const {
@@ -1268,20 +1250,20 @@ Check the top-level render call using <` + t2 + ">.");
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$p, className),
+        className: classNames(classPrefix$q, className),
         onClick: (event) => handleClick2(event),
         style: baseStyle,
         ...rest
       },
-      children || /* @__PURE__ */ React.createElement(React.Fragment, null, title || description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$p}__left` }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$p}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$p}__description` }, description) : null) : null, extra ? /* @__PURE__ */ React.createElement(
+      children || /* @__PURE__ */ React.createElement(React.Fragment, null, title || description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$q}__left` }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$q}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$q}__description` }, description) : null) : null, extra ? /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: `${classPrefix$p}__extra`,
+          className: `${classPrefix$q}__extra`,
           style: styles
         },
         extra
       ) : null),
-      (ctx2 == null ? void 0 : ctx2.divider) ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$p}__divider` }) : null
+      (ctx2 == null ? void 0 : ctx2.divider) ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$q}__divider` }) : null
     );
   };
   Cell.defaultProps = defaultProps$1s;
@@ -2250,7 +2232,7 @@ Check the top-level render call using <` + t2 + ">.");
     },
     infiniteloading: {
       pullRefreshText: "松开刷新",
-      loadText: "加载中……",
+      loadText: "加载中",
       loadMoreText: "哎呀，这里是底部了啦"
     },
     pagination: {
@@ -2353,8 +2335,8 @@ Check the top-level render call using <` + t2 + ">.");
     },
     pullToRefresh: {
       pullingText: "下拉刷新",
-      canReleaseText: "松开刷新",
-      refreshingText: "加载中...",
+      canReleaseText: "松手刷新",
+      refreshingText: "刷新中",
       completeText: "刷新成功"
     },
     tour: {
@@ -2366,7 +2348,7 @@ Check the top-level render call using <` + t2 + ">.");
       errorCanvasTips: "当前环境不支持Canvas"
     }
   };
-  const classPrefix$o = "nut-configprovider";
+  const classPrefix$p = "nut-configprovider";
   const defaultConfigRef = {
     current: {
       locale: zhCN
@@ -2407,7 +2389,7 @@ Check the top-level render call using <` + t2 + ">.");
     return /* @__PURE__ */ React.createElement(ConfigContext.Provider, { value: mergedConfig }, /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$o, className),
+        className: classNames(classPrefix$p, className),
         style: {
           ...cssVarStyle,
           ...style
@@ -2431,7 +2413,7 @@ Check the top-level render call using <` + t2 + ">.");
     loading: true,
     lazy: false
   };
-  const classPrefix$n = "nut-image";
+  const classPrefix$o = "nut-image";
   const Image$1 = (props) => {
     const {
       className,
@@ -2556,7 +2538,7 @@ Check the top-level render call using <` + t2 + ">.");
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$n, className),
+        className: classNames(classPrefix$o, className),
         style: containerStyle,
         onClick: (e2) => {
           imageClick(e2);
@@ -4521,7 +4503,7 @@ Check the top-level render call using <` + t2 + ">.");
       }
     }, [visible]);
     useLockScroll(nodeRef, !!props.lockScroll && innerVisible);
-    const classes = classNames(className, classPrefix2);
+    const classes = classNames(classPrefix2, className);
     const styles = {
       ...style
     };
@@ -4610,21 +4592,21 @@ Check the top-level render call using <` + t2 + ">.");
     contentPosition: "center",
     direction: "horizontal"
   };
-  const classPrefix$m = `nut-divider`;
+  const classPrefix$n = `nut-divider`;
   const Divider = (props) => {
     const { children, contentPosition, style, className, direction, ...rest } = {
       ...defaultProps$1p,
       ...props
     };
     const classes = direction === "horizontal" ? classNames({
-      [`${classPrefix$m}`]: true,
-      [`${classPrefix$m}__center`]: children,
-      [`${classPrefix$m}__left`]: contentPosition === "left",
-      [`${classPrefix$m}__right`]: contentPosition === "right",
-      [`${classPrefix$m}__hairline`]: true
+      [`${classPrefix$n}`]: true,
+      [`${classPrefix$n}__center`]: children,
+      [`${classPrefix$n}__left`]: contentPosition === "left",
+      [`${classPrefix$n}__right`]: contentPosition === "right",
+      [`${classPrefix$n}__hairline`]: true
     }) : classNames({
-      [`${classPrefix$m}`]: true,
-      [`${classPrefix$m}__vertical`]: direction === "vertical"
+      [`${classPrefix$n}`]: true,
+      [`${classPrefix$n}__vertical`]: direction === "vertical"
     });
     return /* @__PURE__ */ React.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
   };
@@ -4746,9 +4728,13 @@ Check the top-level render call using <` + t2 + ">.");
     const childrenDom = React.Children.toArray(children);
     const classPrefix2 = "nut-grid";
     const rootClass = () => {
-      return classNames(className, classPrefix2, {
-        [`${classPrefix2}__border`]: !gap
-      });
+      return classNames(
+        classPrefix2,
+        {
+          [`${classPrefix2}__border`]: !gap
+        },
+        className
+      );
     };
     const rootStyle = () => {
       let styleSelf = {};
@@ -4782,7 +4768,7 @@ Check the top-level render call using <` + t2 + ">.");
   };
   Layout.defaultProps = defaultProps$1m;
   Layout.displayName = "NutLayout";
-  const classPrefix$l = "nut-row";
+  const classPrefix$m = "nut-row";
   const defaultProps$1l = {
     ...ComponentDefaults,
     type: "",
@@ -4817,7 +4803,7 @@ Check the top-level render call using <` + t2 + ">.");
     ${getClass("justify", justify)}
     ${getClass("align", align)}
     ${getClass("flex", wrap)}
-    ${classPrefix$l}
+    ${classPrefix$m}
    `;
     };
     const parentRow = {
@@ -4837,7 +4823,7 @@ Check the top-level render call using <` + t2 + ">.");
   };
   Row.defaultProps = defaultProps$1l;
   Row.displayName = "NutRow";
-  const prefixCls = "nut-space";
+  const prefixCls$1 = "nut-space";
   const defaultProps$1k = {
     direction: "horizontal"
   };
@@ -4847,15 +4833,15 @@ Check the top-level render call using <` + t2 + ">.");
       ...props
     };
     const cls = classNames(
-      className,
-      prefixCls,
-      wrap && `${prefixCls}-wrap`,
-      direction && `${prefixCls}-${direction}`,
-      align && `${prefixCls}-align-${align}`,
-      justify && `${prefixCls}-justify-${justify}`
+      prefixCls$1,
+      wrap && `${prefixCls$1}-wrap`,
+      direction && `${prefixCls$1}-${direction}`,
+      align && `${prefixCls$1}-align-${align}`,
+      justify && `${prefixCls$1}-justify-${justify}`,
+      className
     );
     return /* @__PURE__ */ React.createElement("div", { className: cls, style }, React.Children.map(children, (child) => {
-      return child !== null && child !== void 0 && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-item` }, child);
+      return child !== null && child !== void 0 && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls$1}-item` }, child);
     }));
   };
   Space.defaultProps = defaultProps$1k;
@@ -4918,7 +4904,7 @@ Check the top-level render call using <` + t2 + ">.");
     threshold: 0,
     zIndex: 900
   };
-  const classPrefix$k = "nut-sticky";
+  const classPrefix$l = "nut-sticky";
   const Sticky = (props) => {
     const {
       position,
@@ -5040,7 +5026,7 @@ Check the top-level render call using <` + t2 + ">.");
       {
         ref: rootRef,
         style: { ...style, ...rootStyle },
-        className: classNames(classPrefix$k, className),
+        className: classNames(classPrefix$l, className),
         ...rest
       },
       /* @__PURE__ */ React.createElement("div", { className: "nut-sticky--box", ref: stickyRef, style: stickyStyle }, children)
@@ -5048,6 +5034,18 @@ Check the top-level render call using <` + t2 + ">.");
   };
   Sticky.defaultProps = defaultProps$1j;
   Sticky.displayName = "NutSticky";
+  const classPrefix$k = "nut-safe-area";
+  const SafeArea = (props) => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(
+          classPrefix$k,
+          `${classPrefix$k}-position-${props.position}`
+        )
+      }
+    );
+  };
   const defaultProps$1i = {
     ...ComponentDefaults,
     target: "",
@@ -5153,9 +5151,13 @@ Check the top-level render call using <` + t2 + ">.");
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix2, className, {
-          show: backTop
-        }),
+        className: classNames(
+          classPrefix2,
+          {
+            show: backTop
+          },
+          className
+        ),
         style: styles,
         onClick: (e2) => {
           goTop(e2);
@@ -10519,12 +10521,12 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const classPrefix2 = "nut-fixednav";
     const classes = classNames(
+      classPrefix2,
       {
         active: visible
       },
       type2,
-      className,
-      classPrefix2
+      className
     );
     const handleClick2 = (item, event) => {
       onSelect(item, event);
@@ -10766,7 +10768,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(t$a, { width: 12, height: 12 }));
+        return /* @__PURE__ */ React.createElement("div", { className: closeClasses, onClick: onHandleClickCloseIcon }, React.isValidElement(closeIcon) ? closeIcon : /* @__PURE__ */ React.createElement(t$9, { width: 12, height: 12 }));
       }
       return null;
     };
@@ -10867,7 +10869,7 @@ Please add \`${key}Action\` when creating your handler.`);
         position,
         onClose
       },
-      /* @__PURE__ */ React.createElement("div", { className: classNames(className, classPrefix2), ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__content` }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__content` }, /* @__PURE__ */ React.createElement(
         "div",
         {
           className: `${classPrefix2}__list sidenavbar-show`,
@@ -11063,9 +11065,13 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const classPrefix2 = "nut-tabbar-item";
-    const tabbarItemClass = classNames(className, classPrefix2, {
-      [`${classPrefix2}-active`]: active
-    });
+    const tabbarItemClass = classNames(
+      classPrefix2,
+      {
+        [`${classPrefix2}-active`]: active
+      },
+      className
+    );
     const boxPrefix = `${classPrefix2}__icon-box`;
     const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
       [`${boxPrefix}-large`]: !icon
@@ -11128,9 +11134,13 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix2, className, {
-          [`${classPrefix2}__fixed`]: fixed
-        }),
+        className: classNames(
+          classPrefix2,
+          {
+            [`${classPrefix2}__fixed`]: fixed
+          },
+          className
+        ),
         style
       },
       /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__wrap` }, React.Children.map(children, (child, idx) => {
@@ -11165,10 +11175,10 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const classPrefix2 = "nut-tabpane";
     const classes = classNames(
+      classPrefix2,
       {
         active: !disabled && props.active
       },
-      classPrefix2,
       autoHeightClassName,
       className
     );
@@ -11781,7 +11791,7 @@ Please add \`${key}Action\` when creating your handler.`);
             return activeIcon;
           }
           return /* @__PURE__ */ React.createElement(
-            r$5,
+            r$4,
             {
               className: `${checked ? `${classPrefix2}__icon-check` : ""}`
             }
@@ -12871,8 +12881,8 @@ Please add \`${key}Action\` when creating your handler.`);
         [`${classPrefix2}-title`]: !popup,
         [`${classPrefix2}-nofooter`]: !!autoBackfill
       },
-      className,
-      classPrefix2
+      classPrefix2,
+      className
     );
     const headerClasses = classNames({
       [`${classPrefix2}-header`]: true,
@@ -13064,6 +13074,7 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, popup ? /* @__PURE__ */ React.createElement(
       Popup,
       {
+        className: "nut-calendar-popup",
         visible,
         position: "bottom",
         round: true,
@@ -13071,7 +13082,7 @@ Please add \`${key}Action\` when creating your handler.`);
         destroyOnClose: true,
         onOverlayClick: closePopup,
         onCloseIconClick: closePopup,
-        style: { height: "85vh" }
+        style: { height: "83%" }
       },
       renderItem()
     ) : renderItem());
@@ -13187,10 +13198,12 @@ Please add \`${key}Action\` when creating your handler.`);
     type: "single",
     firstDayOfWeek: 0
   };
+  const prefixCls = "nut-calendarcard";
   const CalendarCard = React.forwardRef((props, ref) => {
     const { locale } = useConfig();
     const {
       style,
+      className,
       type: type2,
       value,
       defaultValue,
@@ -13442,7 +13455,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const monthTitle = locale.calendaritem.monthTitle;
     const renderHeader = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-header" }, /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-header-left" }, /* @__PURE__ */ React.createElement("div", { className: "double-left", onClick: () => jump(-12) }, /* @__PURE__ */ React.createElement(DoubleLeft, null)), /* @__PURE__ */ React.createElement("div", { className: "left", onClick: () => jump(-1) }, /* @__PURE__ */ React.createElement(Left, null))), /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-header-title" }, monthTitle(month.year, month.month)), /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-header-right" }, /* @__PURE__ */ React.createElement("div", { className: "right", onClick: () => jump(1) }, /* @__PURE__ */ React.createElement(Right, null)), /* @__PURE__ */ React.createElement("div", { className: "double-right", onClick: () => jump(12) }, /* @__PURE__ */ React.createElement(DoubleRight, null))));
+      return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header-left` }, /* @__PURE__ */ React.createElement("div", { className: "double-left", onClick: () => jump(-12) }, /* @__PURE__ */ React.createElement(DoubleLeft, null)), /* @__PURE__ */ React.createElement("div", { className: "left", onClick: () => jump(-1) }, /* @__PURE__ */ React.createElement(Left, null))), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header-title` }, monthTitle(month.year, month.month)), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header-right` }, /* @__PURE__ */ React.createElement("div", { className: "right", onClick: () => jump(1) }, /* @__PURE__ */ React.createElement(Right, null)), /* @__PURE__ */ React.createElement("div", { className: "double-right", onClick: () => jump(12) }, /* @__PURE__ */ React.createElement(DoubleRight, null))));
     };
     const [weekHeader] = React.useState(() => {
       const weekdays = locale.calendaritem.weekdays.map((day, index) => {
@@ -13457,34 +13470,34 @@ Please add \`${key}Action\` when creating your handler.`);
       ];
     });
     const renderContent = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-content" }, /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-days" }, weekHeader.map((day) => {
+      return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-content` }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-days` }, weekHeader.map((day) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames("nut-calendarcard-day", "header", {
+            className: classNames(`${prefixCls}-day`, "header", {
               weekend: day.key === 0 || day.key === 6
             }),
             key: day.key
           },
           day.name
         );
-      })), /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-days" }, days.map((day) => /* @__PURE__ */ React.createElement(
+      })), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-days` }, days.map((day) => /* @__PURE__ */ React.createElement(
         "div",
         {
           className: classNames(
-            "nut-calendarcard-day",
+            `${prefixCls}-day`,
             day.type,
             getClasses(day)
           ),
           key: `${day.year}-${day.month}-${day.date}`,
           onClick: () => handleDayClick(day)
         },
-        /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-day-top" }, renderDayTop ? renderDayTop(day) : ""),
-        /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-day-inner" }, renderDay ? renderDay(day) : day.date),
-        /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-day-bottom" }, renderDayBottom ? renderDayBottom(day) : "")
+        /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-day-top` }, renderDayTop ? renderDayTop(day) : ""),
+        /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-day-inner` }, renderDay ? renderDay(day) : day.date),
+        /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-day-bottom` }, renderDayBottom ? renderDayBottom(day) : "")
       ))));
     };
-    return days.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard", style }, renderHeader(), renderContent()) : null;
+    return days.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: classNames(prefixCls, className), style }, renderHeader(), renderContent()) : null;
   });
   CalendarCard.defaultProps = defaultProps$10;
   CalendarCard.displayName = "NutCalendarCard";
@@ -13580,9 +13593,13 @@ Please add \`${key}Action\` when creating your handler.`);
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(classPrefix$i, className, {
-              [`nut-checkboxgroup--${props.direction}`]: props.direction
-            }),
+            className: classNames(
+              classPrefix$i,
+              {
+                [`nut-checkboxgroup--${props.direction}`]: props.direction
+              },
+              className
+            ),
             ...rest
           },
           (options2 == null ? void 0 : options2.length) ? renderOptions() : children
@@ -13655,7 +13672,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }
     const renderIcon = () => {
       if (!innerChecked) {
-        return React.isValidElement(icon) ? icon : /* @__PURE__ */ React.createElement(t$b, { className: color() });
+        return React.isValidElement(icon) ? icon : /* @__PURE__ */ React.createElement(t$a, { className: color() });
       }
       if (innerIndeterminate) {
         return React.isValidElement(indeterminateIcon) ? indeterminateIcon : /* @__PURE__ */ React.createElement(l$3, { className: color() });
@@ -13698,9 +13715,13 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$h, className, {
-          [`${classPrefix$h}--reverse`]: labelPosition === "left"
-        }),
+        className: classNames(
+          classPrefix$h,
+          {
+            [`${classPrefix$h}--reverse`]: labelPosition === "left"
+          },
+          className
+        ),
         ...rest,
         onClick: handleClick2
       },
@@ -14205,7 +14226,8 @@ Please add \`${key}Action\` when creating your handler.`);
             keyIndex: index
           }
         );
-      })))
+      }))),
+      /* @__PURE__ */ React.createElement(SafeArea, { position: "bottom" })
     ));
   };
   const Picker = React.forwardRef(InternalPicker);
@@ -15818,8 +15840,8 @@ Please add \`${key}Action\` when creating your handler.`);
         {
           className: classNames(
             classPrefix2,
-            className,
-            PositionInfo[labelPosition]
+            PositionInfo[labelPosition],
+            className
           ),
           style,
           onSubmit: (e2) => {
@@ -16638,10 +16660,13 @@ Please add \`${key}Action\` when creating your handler.`);
       /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: classNames(className, {
-            "nut-menu-item__wrap": direction === "down",
-            "nut-menu-item__wrap-up": direction !== "down"
-          }),
+          className: classNames(
+            {
+              "nut-menu-item__wrap": direction === "down",
+              "nut-menu-item__wrap-up": direction !== "down"
+            },
+            className
+          ),
           style: {
             ...style,
             ...isShow()
@@ -16802,10 +16827,14 @@ Please add \`${key}Action\` when creating your handler.`);
           return /* @__PURE__ */ React.createElement(
             "div",
             {
-              className: classNames("nut-menu__item ", className, {
-                active: showMenuItem[index],
-                disabled
-              }),
+              className: classNames(
+                "nut-menu__item ",
+                {
+                  active: showMenuItem[index],
+                  disabled
+                },
+                className
+              ),
               style: { color: showMenuItem[index] ? activeColor : "" },
               key: index,
               onClick: (e2) => {
@@ -16824,7 +16853,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(t$c, { className: "nut-menu__title-icon" }) : /* @__PURE__ */ React.createElement(e$3, { className: "nut-menu__title-icon" }))
+              icon || (direction === "up" ? /* @__PURE__ */ React.createElement(t$b, { className: "nut-menu__title-icon" }) : /* @__PURE__ */ React.createElement(e$3, { className: "nut-menu__title-icon" }))
             )
           );
         }
@@ -17071,9 +17100,13 @@ Please add \`${key}Action\` when creating your handler.`);
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(classPrefix$f, className, {
-              [`${classPrefix$f}--${props.direction}`]: props.direction
-            }),
+            className: classNames(
+              classPrefix$f,
+              {
+                [`${classPrefix$f}--${props.direction}`]: props.direction
+              },
+              className
+            ),
             ...rest
           },
           (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : children
@@ -17177,16 +17210,12 @@ Please add \`${key}Action\` when creating your handler.`);
       return React.isValidElement(icon2) ? React.cloneElement(icon2, {
         ...icon2.props,
         className: classNames(color())
-      }) : /* @__PURE__ */ React.createElement(t$b, { className: classNames(color()) });
+      }) : /* @__PURE__ */ React.createElement(t$a, { className: classNames(color()) });
     };
-    const reverse = labelPosition === "left";
     const renderRadioItem = () => {
       if (shape === "button") {
         return renderButton();
       }
-      if (reverse) {
-        return /* @__PURE__ */ React.createElement(React.Fragment, null, renderLabel(), renderIcon());
-      }
       return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
     };
     const handleClick2 = (e2) => {
@@ -17197,7 +17226,13 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${classPrefix2} ${className} ${reverse ? `${classPrefix2}--reverse` : ""}`,
+        className: classNames(
+          classPrefix2,
+          {
+            [`${classPrefix2}--reverse`]: labelPosition === "left"
+          },
+          className
+        ),
         style,
         onClick: handleClick2,
         ...rest
@@ -17270,9 +17305,13 @@ Please add \`${key}Action\` when creating your handler.`);
       [`${classPrefix2}-disabled`]: disabled,
       [`${classPrefix2}-vertical`]: vertical
     });
-    const containerClasses = classNames(`${classPrefix2}-container`, className, {
-      [`${classPrefix2}-container-vertical`]: vertical
-    });
+    const containerClasses = classNames(
+      `${classPrefix2}-container`,
+      {
+        [`${classPrefix2}-container-vertical`]: vertical
+      },
+      className
+    );
     const markClassName = React.useCallback(
       (mark) => {
         const classPrefix22 = "nut-range-mark";
@@ -17571,10 +17610,14 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix2, className, {
-          disabled,
-          readonly: readOnly
-        }),
+        className: classNames(
+          classPrefix2,
+          {
+            disabled,
+            readonly: readOnly
+          },
+          className
+        ),
         style
       },
       countArray.map((n) => {
@@ -17729,7 +17772,7 @@ Please add \`${key}Action\` when creating your handler.`);
           className: `${classPrefix2}__clear ${rightIn ? "pos-right" : ""}`,
           onClick: (e2) => clearaVal(e2)
         },
-        /* @__PURE__ */ React.createElement(r$4, { color: "#555", width: 12, height: 12 })
+        /* @__PURE__ */ React.createElement(t$7, { color: "#555", width: 12, height: 12 })
       );
     };
     const clearaVal = (event) => {
@@ -17848,7 +17891,7 @@ Please add \`${key}Action\` when creating your handler.`);
         onCloseIconClick: onClose,
         ...rest
       },
-      /* @__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) => {
+      /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), 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",
           {
@@ -18123,9 +18166,13 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix2, className, {
-          [`${classPrefix2}__disabled`]: disabled
-        })
+        className: classNames(
+          classPrefix2,
+          {
+            [`${classPrefix2}__disabled`]: disabled
+          },
+          className
+        )
       },
       /* @__PURE__ */ React.createElement(
         "textarea",
@@ -18380,7 +18427,7 @@ Please add \`${key}Action\` when creating your handler.`);
   }) => {
     const renderIcon = (item) => {
       if (item.status === ERROR) {
-        return item.failIcon || /* @__PURE__ */ React.createElement(t$8, { color: "#fff" });
+        return item.failIcon || /* @__PURE__ */ React.createElement(t$7, { color: "#fff" });
       }
       return item.loadingIcon || /* @__PURE__ */ React.createElement(o$2, { className: "nut-icon-loading", color: "#fff" });
     };
@@ -18393,7 +18440,7 @@ Please add \`${key}Action\` when creating your handler.`);
           key: item.uid
         },
         previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
-          t$8,
+          t$7,
           {
             color: "rgba(0,0,0,0.6)",
             className: "close",
@@ -18435,7 +18482,7 @@ Please add \`${key}Action\` when creating your handler.`);
           /* @__PURE__ */ React.createElement(t$5, null),
           /* @__PURE__ */ React.createElement("span", null, " ", item.name)
         ), deletable && /* @__PURE__ */ React.createElement(
-          t$9,
+          t$8,
           {
             color: "#808080",
             className: "nut-uploader__preview-img__file__del",
@@ -19376,7 +19423,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const refreshMaxH = React.useRef(0);
     const y = React.useRef(0);
     const distance = React.useRef(0);
-    const classes = classNames(className, classPrefix$d);
+    const classes = classNames(classPrefix$d, className);
     React.useEffect(() => {
       if (target && document.getElementById(target)) {
         scrollEl.current = document.getElementById(target);
@@ -19387,7 +19434,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return () => {
         scrollEl.current.removeEventListener("scroll", handleScroll, capture);
       };
-    }, [hasMore, isInfiniting]);
+    }, [hasMore, isInfiniting, onLoadMore]);
     React.useEffect(() => {
       const element = scroller.current;
       element.addEventListener("touchmove", touchMove, { passive: false });
@@ -19526,8 +19573,8 @@ Please add \`${key}Action\` when creating your handler.`);
       {
         className: classNames(
           classPrefix2,
-          className,
-          direction === "vertical" ? `${classPrefix2}-vertical` : ""
+          direction === "vertical" ? `${classPrefix2}-vertical` : "",
+          className
         ),
         style
       },
@@ -19881,7 +19928,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(t$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(t$9, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "nut-noticebar-vertical",
@@ -19928,7 +19975,7 @@ Please add \`${key}Action\` when creating your handler.`);
             handleClickIcon(e2);
           }
         },
-        rightIcon || (closeable ? /* @__PURE__ */ React.createElement(t$a, { width: 12, height: 12 }) : null)
+        rightIcon || (closeable ? /* @__PURE__ */ React.createElement(t$9, { width: 12, height: 12 }) : null)
       )
     ) : null);
   };
@@ -20607,7 +20654,7 @@ Please add \`${key}Action\` when creating your handler.`);
       width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
       height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
       backgroundColor: `${background}`,
-      color: `${color}`,
+      color,
       marginLeft: avatarIndex !== 1 && ((_c = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c.gap) ? `${(_d = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _d.gap}px` : "",
       zIndex: ((_e = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _e.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "",
       ...style
@@ -20701,7 +20748,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const classPrefix2 = "nut-skeleton";
-    const classes = classNames(className, classPrefix2);
+    const classes = classNames(classPrefix2, className);
     const avatarClass = classNames({
       avatar: true,
       [`avatar--${avatarShape}`]: avatarShape
@@ -20978,10 +21025,10 @@ Please add \`${key}Action\` when creating your handler.`);
             iconNode = /* @__PURE__ */ React__namespace.createElement(o$2, { className: "nut-icon-loading" });
             break;
           case "fail":
-            iconNode = /* @__PURE__ */ React__namespace.createElement(t$8, null);
+            iconNode = /* @__PURE__ */ React__namespace.createElement(t$7, null);
             break;
           case "warn":
-            iconNode = /* @__PURE__ */ React__namespace.createElement(t$7, null);
+            iconNode = /* @__PURE__ */ React__namespace.createElement(t$2, null);
             break;
         }
         return /* @__PURE__ */ React__namespace.createElement("p", { className: `${classPrefix$8}__icon-wrapper` }, iconNode);
@@ -21064,7 +21111,7 @@ Please add \`${key}Action\` when creating your handler.`);
     render(/* @__PURE__ */ React__namespace.createElement(Notification, { ...properties, ref }), element);
   };
   let messageInstance = null;
-  const options = {
+  let options = {
     ...ComponentDefaults,
     id: "",
     duration: 2,
@@ -21120,18 +21167,7 @@ Please add \`${key}Action\` when creating your handler.`);
     });
   }
   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;
-    }
-    if (config2.lockScroll !== void 0) {
-      options.lockScroll = config2.lockScroll;
-    }
+    options = { ...options, ...config2 };
   }
   const Toast = {
     show,
@@ -21554,7 +21590,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...defaultProps$o,
       ...props
     };
-    const classes = classNames(className, classPrefix$6);
+    const classes = classNames(classPrefix$6, className);
     const refRandomId = Math.random().toString(36).slice(-8);
     const styles = {
       height: `${Number(radius) * 2}px`,
@@ -22267,7 +22303,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const rootRef = React.useRef(null);
-    const classes = classNames(className, classPrefix$4);
+    const classes = classNames(classPrefix$4, className);
     React.useEffect(() => {
       init();
     }, []);
@@ -22822,6 +22858,8 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const ImagePreview = (props) => {
     const {
+      className,
+      style,
       images,
       videos,
       visible,
@@ -22979,7 +23017,8 @@ Please add \`${key}Action\` when creating your handler.`);
       /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: classPrefix2,
+          className: classNames(classPrefix2, className),
+          style,
           ref,
           onClick: closeOnImg,
           onTouchStart
@@ -23200,7 +23239,7 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${classPrefix2} ${className} ${line ? `${classPrefix2}--line` : ""}`,
+        className: `${classPrefix2} ${line ? `${classPrefix2}--line` : ""} ${className}`,
         style,
         ...rest
       },
@@ -23258,11 +23297,11 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const classPrefix2 = `nut-step`;
     const classes = classNames(
+      classPrefix2,
       {
         [`${classPrefix2}-${getCurrentStatus()}`]: true
       },
-      className,
-      classPrefix2
+      className
     );
     const renderIconClass = () => {
       if (icon) {
@@ -23299,12 +23338,12 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const classPrefix2 = `nut-steps`;
     const classes = classNames(
+      classPrefix2,
       {
         [`${classPrefix2}-${direction}`]: true,
         [`${classPrefix2}-dot`]: !!props.dot
       },
-      className,
-      classPrefix2
+      className
     );
     return /* @__PURE__ */ React.createElement(DataContext.Provider, { value: parentSteps }, React.createElement(
       "div",
@@ -23511,7 +23550,7 @@ Please add \`${key}Action\` when creating your handler.`);
         },
         closeIcon
       ) : /* @__PURE__ */ React.createElement(
-        t$a,
+        t$9,
         {
           width: 12,
           height: 12,
@@ -23587,7 +23626,7 @@ Please add \`${key}Action\` when creating your handler.`);
       width: 0,
       height: 0
     });
-    const classes = classNames(className, classPrefix$2);
+    const classes = classNames(classPrefix$2, className);
     React.useEffect(() => {
       if (visible) {
         getRootPosition();
@@ -23664,7 +23703,7 @@ Please add \`${key}Action\` when creating your handler.`);
           arrowOffset: item.arrowOffset || 0
         },
         /* @__PURE__ */ React.createElement(React.Fragment, null),
-        /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(React.Fragment, null, type2 === "step" && /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content" }, title && /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-top" }, /* @__PURE__ */ React.createElement("div", { onClick: (e2) => maskClose(e2) }, /* @__PURE__ */ React.createElement(t$a, { className: "nut-tour-content-top-close" }))), /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-inner" }, item.content), /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-bottom" }, /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-bottom-init" }, active + 1, "/", list.length), /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-bottom-operate" }, active !== 0 && showPrev && /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(React.Fragment, null, type2 === "step" && /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content" }, title && /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-top" }, /* @__PURE__ */ React.createElement("div", { onClick: (e2) => maskClose(e2) }, /* @__PURE__ */ React.createElement(t$9, { className: "nut-tour-content-top-close" }))), /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-inner" }, item.content), /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-bottom" }, /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-bottom-init" }, active + 1, "/", list.length), /* @__PURE__ */ React.createElement("div", { className: "nut-tour-content-bottom-operate" }, active !== 0 && showPrev && /* @__PURE__ */ React.createElement(
           "div",
           {
             className: "nut-tour-content-bottom-operate-btn",
@@ -23941,7 +23980,7 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: className ? `${className} nut-virtualList-box` : "nut-virtualList-box",
+        className: classNames("nut-virtualList-box", className),
         ...rest,
         style: {
           [sizeKey]: containerHeight ? `${offSetSize}px` : ""
@@ -23951,7 +23990,10 @@ Please add \`${key}Action\` when creating your handler.`);
         "div",
         {
           ref: scrollRef,
-          className: horizontal ? "nut-horizontal-box" : "nut-vertical-box",
+          className: classNames({
+            "nut-horizontal-box": horizontal,
+            "nut-vertical-box": !horizontal
+          }),
           style: {
             position: "relative",
             [sizeKey]: `${listTotalSize}px`
@@ -23960,7 +24002,10 @@ Please add \`${key}Action\` when creating your handler.`);
         /* @__PURE__ */ React.createElement(
           "ul",
           {
-            className: horizontal ? "nut-virtuallist-items nut-horizontal-items" : "nut-virtuallist-items nut-vertical-items",
+            className: classNames("nut-virtuallist-items", {
+              "nut-horizontal-items": horizontal,
+              "nut-vertical-items": !horizontal
+            }),
             ref: itemsRef,
             style: {
               transform: horizontal ? `translate3d(${options2.startOffset}px,0,0)` : `translate3d(0,${options2.startOffset}px,0)`
@@ -24516,8 +24561,8 @@ Please add \`${key}Action\` when creating your handler.`);
     space: 10,
     toolbar: [
       /* @__PURE__ */ React.createElement(Button, { type: "danger", key: "cancel" }, "取消"),
-      /* @__PURE__ */ React.createElement(Button, { type: "info", key: "reset" }, "重置"),
-      /* @__PURE__ */ React.createElement(Button, { type: "warning", key: "rotate" }, "旋转"),
+      /* @__PURE__ */ React.createElement(Button, { key: "reset" }, "重置"),
+      /* @__PURE__ */ React.createElement(Button, { key: "rotate" }, "旋转"),
       /* @__PURE__ */ React.createElement(Button, { type: "success", key: "confirm" }, "确认")
     ],
     toolbarPosition: "bottom",
@@ -24935,6 +24980,7 @@ Please add \`${key}Action\` when creating your handler.`);
   exports2.Range = Range;
   exports2.Rate = Rate;
   exports2.Row = Row;
+  exports2.SafeArea = SafeArea;
   exports2.SearchBar = SearchBar;
   exports2.ShortPassword = ShortPassword;
   exports2.SideNavBar = SideNavBar;