@nutui/nutui-react 3.0.5 → 3.0.7

package/dist/nutui.react.umd.js

@@ -9967,7 +9967,8 @@ Please add \`${key2}Action\` when creating your handler.`);
     top: 0,
     right: 0,
     fill: "solid",
-    size: "large"
+    size: "large",
+    disabled: false
   });
   var Badge = function(props) {
     var isIcon = function isIcon2() {
@@ -9981,7 +9982,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var _this;
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps$1l, props), className = _$_object_spread.className, style = _$_object_spread.style, value2 = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size;
+    var _$_object_spread = _object_spread({}, defaultProps$1l, props), className = _$_object_spread.className, style = _$_object_spread.style, value2 = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size, disabled = _$_object_spread.disabled;
     var classPrefix2 = "nut-badge";
     var classes = classNames(classPrefix2, className);
     var getContent = function() {
@@ -9992,7 +9993,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       return value2;
     };
     var _obj;
-    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix2, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix2, "-one"), typeof getContent() === "string" && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix2, "-dot"), dot), _define_property(_obj, "".concat(classPrefix2, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix2, "-").concat(fill), fill === "outline"), _define_property(_obj, "".concat(classPrefix2, "-content"), children), _obj));
+    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix2, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix2, "-one"), typeof getContent() === "string" && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix2, "-dot"), dot), _define_property(_obj, "".concat(classPrefix2, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix2, "-").concat(fill), fill === "outline"), _define_property(_obj, "".concat(classPrefix2, "-content"), children), _define_property(_obj, "".concat(classPrefix2, "-disabled"), disabled), _obj));
     var getPositionStyle = function() {
       return _define_property({
         top: "".concat(Number(top) || 0, "px")
@@ -10371,11 +10372,12 @@ Please add \`${key2}Action\` when creating your handler.`);
     dot: false,
     max: 99,
     top: "0",
-    right: "0"
+    right: "0",
+    direction: "vertical"
   });
   var TabbarItem = function(props) {
     var ctx2 = React.useContext(TabbarContext);
-    var _ref = _object_spread({}, defaultProps$1g, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value2 = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, index2 = _ref.index, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$1g, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value2 = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, index2 = _ref.index, direction = _ref.direction, onActiveClick = _ref.onActiveClick, rest = _object_without_properties(_ref, [
       "className",
       "style",
       "title",
@@ -10385,15 +10387,19 @@ Please add \`${key2}Action\` when creating your handler.`);
       "max",
       "top",
       "right",
-      "index"
+      "index",
+      "direction",
+      "onActiveClick"
     ]);
     var active2 = index2 === (ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.selectIndex);
     var classPrefix2 = "nut-tabbar-item";
-    var tabbarItemClass = classNames(classPrefix2, _define_property({}, "".concat(classPrefix2, "-active"), active2), className);
-    var boxPrefix = "".concat(classPrefix2, "-icon-box");
-    var titleClass = classNames(boxPrefix, "".concat(boxPrefix, "-nav"), _define_property({}, "".concat(boxPrefix, "-large"), !icon));
+    var _obj;
+    var tabbarItemClass = classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-active"), active2), _define_property(_obj, "".concat(classPrefix2, "-large"), !icon || !title), _obj), className);
+    var renderNodeWithActive = function(node) {
+      return node && typeof node === "function" ? node(active2) : node;
+    };
     var badgeProps = {
-      value: value2,
+      value: renderNodeWithActive(value2),
       dot,
       max,
       top,
@@ -10402,8 +10408,26 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var renderTitleText = function() {
       return title && /* @__PURE__ */ React.createElement("div", {
-        className: titleClass
-      }, title);
+        className: "".concat(classPrefix2, "-text")
+      }, renderNodeWithActive(title));
+    };
+    var renderTitle = function() {
+      return /* @__PURE__ */ React.createElement(Badge, _object_spread({
+        size: "normal"
+      }, badgeProps), renderTitleText());
+    };
+    var renderIcon = function() {
+      return renderNodeWithActive(icon);
+    };
+    var renderIconAndTitle = function() {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Badge, _object_spread_props(_object_spread({
+        size: "normal"
+      }, badgeProps), {
+        top: 3
+      }), renderIcon()), renderTitleText());
+    };
+    var renderDualItem = function() {
+      return dot ? null : /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderTitleText(), /* @__PURE__ */ React.createElement(Badge, badgeProps));
     };
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       className: tabbarItemClass,
@@ -10411,23 +10435,22 @@ Please add \`${key2}Action\` when creating your handler.`);
         color: active2 ? ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.activeColor : ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.inactiveColor
       }, style),
       onClick: function() {
-        return ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.handleClick(index2);
+        return active2 ? onActiveClick === null || onActiveClick === void 0 ? void 0 : onActiveClick() : ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.handleClick(index2);
       }
-    }, rest), icon ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Badge, badgeProps, /* @__PURE__ */ React.createElement("div", {
-      className: boxPrefix
-    }, icon)), renderTitleText()) : /* @__PURE__ */ React.createElement(Badge, badgeProps, renderTitleText()));
+    }, rest), direction === "horizontal" && !dot ? renderDualItem() : /* @__PURE__ */ React.createElement(React.Fragment, null, icon && renderIconAndTitle(), !icon && renderTitle()));
   };
   var defaultProps$1f = _object_spread_props(_object_spread({}, ComponentDefaults), {
     defaultValue: 0,
     fixed: false,
     inactiveColor: "",
     activeColor: "",
+    direction: "vertical",
     safeArea: false,
-    onSwitch: function(value2) {
+    onSwitch: function() {
     }
   });
   var Tabbar = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$1f, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value2 = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
+    var _$_object_spread = _object_spread({}, defaultProps$1f, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value2 = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, direction = _$_object_spread.direction, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
     var classPrefix2 = "nut-tabbar";
     var _usePropsValue = _sliced_to_array(usePropsValue({
       value: value2,
@@ -10435,11 +10458,26 @@ Please add \`${key2}Action\` when creating your handler.`);
       finalValue: 0,
       onChange: onSwitch
     }), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
+    var sizeCls = React.useMemo(function() {
+      var size = React.Children.count(children);
+      var _obj;
+      return size > 3 ? "" : classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-wrap-3"), size === 3), _define_property(_obj, "".concat(classPrefix2, "-wrap-2"), size === 2), _define_property(_obj, "".concat(classPrefix2, "-wrap-").concat(direction), size === 2 && direction !== "vertical"), _obj));
+    }, [
+      children,
+      direction
+    ]);
+    var itemDirection = React.useMemo(function() {
+      var size = React.Children.count(children);
+      return size === 2 && direction !== "vertical" && direction;
+    }, [
+      direction,
+      children
+    ]);
     return /* @__PURE__ */ React.createElement("div", {
       className: classNames(classPrefix2, _define_property({}, "".concat(classPrefix2, "-fixed"), fixed), className),
       style
     }, /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-wrap")
+      className: "".concat(classPrefix2, "-wrap ").concat(sizeCls)
     }, /* @__PURE__ */ React.createElement(TabbarContext.Provider, {
       value: {
         selectIndex,
@@ -10448,12 +10486,12 @@ Please add \`${key2}Action\` when creating your handler.`);
         handleClick: setSelectIndex
       }
     }, React.Children.map(children, function(child, index2) {
-      if (!/* @__PURE__ */ React.isValidElement(child)) return null;
-      return /* @__PURE__ */ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
-        index: index2
-      }));
-    }))), (fixed || safeArea) && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-safe-area")
+      return /* @__PURE__ */ React.isValidElement(child) ? /* @__PURE__ */ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
+        index: index2,
+        direction: itemDirection
+      })) : null;
+    }))), (fixed || safeArea) && /* @__PURE__ */ React.createElement(SafeArea, {
+      position: "bottom"
     }));
   };
   Tabbar.displayName = "NutTabbar";
@@ -10469,9 +10507,9 @@ Please add \`${key2}Action\` when creating your handler.`);
     var classes = classNames(classPrefix2, {
       active: !disabled && props.active
     }, autoHeightClassName, className);
-    return children && /* @__PURE__ */ React.createElement("div", {
+    return children ? /* @__PURE__ */ React.createElement("div", {
       className: classes
-    }, !disabled && children);
+    }, !disabled && children) : null;
   };
   var defaultProps$1d = _object_spread_props(_object_spread({}, ComponentDefaults), {
     tabStyle: {},
@@ -18434,15 +18472,17 @@ Please add \`${key2}Action\` when creating your handler.`);
   var defaultProps$M = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false,
     activeText: "",
-    inactiveText: ""
+    inactiveText: "",
+    loadingIcon: /* @__PURE__ */ React.createElement(d$3, null)
   });
   var Switch = function(props) {
-    var _ref = _object_spread({}, defaultProps$M, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, className = _ref.className, style = _ref.style, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$M, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, loadingIcon = _ref.loadingIcon, className = _ref.className, style = _ref.style, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
       "checked",
       "defaultChecked",
       "disabled",
       "activeText",
       "inactiveText",
+      "loadingIcon",
       "className",
       "style",
       "onChange"
@@ -18453,6 +18493,12 @@ Please add \`${key2}Action\` when creating your handler.`);
       value: checked,
       defaultValue: defaultChecked
     }), 2), value2 = _usePropsValue[0], setValue = _usePropsValue[1];
+    React.useEffect(function() {
+      changing && setChanging(false);
+    }, [
+      value2
+    ]);
+    var _useState = _sliced_to_array(React.useState(false), 2), changing = _useState[0], setChanging = _useState[1];
     var classes = function() {
       var _obj2;
       return classNames([
@@ -18461,17 +18507,18 @@ Please add \`${key2}Action\` when creating your handler.`);
         (_obj2 = {}, _define_property(_obj2, "".concat(classPrefix2, "-close"), !value2), _define_property(_obj2, "".concat(classPrefix2, "-disabled"), disabled), _define_property(_obj2, "".concat(classPrefix2, "-disabled-close"), disabled && !value2), _obj2)
       ]);
     };
-    var onClick = function(event) {
-      if (disabled) return;
-      onChange && onChange(!value2, event);
+    var onClick = function() {
+      if (disabled || changing) return;
+      if (onChange) {
+        setChanging(true);
+        onChange(!value2);
+      }
       setValue(!value2);
     };
     var _obj, _obj1;
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       className: classes(),
-      onClick: function(e2) {
-        return onClick(e2);
-      },
+      onClick,
       style
     }, rest), /* @__PURE__ */ React.createElement("div", {
       className: classNames([
@@ -18483,9 +18530,9 @@ Please add \`${key2}Action\` when creating your handler.`);
         ],
         (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-button-open-rtl"), rtl && value2), _define_property(_obj, "".concat(classPrefix2, "-button-close-rtl"), rtl && !value2), _obj)
       ])
-    }, !value2 && !activeText && /* @__PURE__ */ React.createElement("div", {
+    }, changing && loadingIcon ? /* @__PURE__ */ React.createElement(React.Fragment, null, loadingIcon) : /* @__PURE__ */ React.createElement(React.Fragment, null, !value2 && !activeText && /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-close-line")
-    })), activeText && /* @__PURE__ */ React.createElement("div", {
+    }))), activeText && /* @__PURE__ */ React.createElement("div", {
       className: classNames("".concat(classPrefix2, "-label"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix2, "-label-open"), value2), _define_property(_obj1, "".concat(classPrefix2, "-label-close"), !value2), _define_property(_obj1, "".concat(classPrefix2, "-label-open-rtl"), rtl && value2), _define_property(_obj1, "".concat(classPrefix2, "-label-close-rtl"), rtl && !value2), _define_property(_obj1, "".concat(classPrefix2, "-label-close-disabled"), disabled && !value2), _obj1))
     }, value2 ? activeText : inactiveText));
   };
@@ -19270,6 +19317,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     }));
   };
   ActionSheet.displayName = "NutActionSheet";
+  var destroyList = [];
   var fullClone = _object_spread({}, ReactDOM__namespace);
   var version = fullClone.version, reactRender = fullClone.render, unmountComponentAtNode = fullClone.unmountComponentAtNode;
   var createRoot;
@@ -19334,10 +19382,6 @@ Please add \`${key2}Action\` when creating your handler.`);
   function ConfirmDialog(props) {
     return /* @__PURE__ */ React.createElement(Dialog, props, props.content);
   }
-  var normalizeConfig = function(config2) {
-    config2.hideCancelButton = config2.isNotice;
-    return config2;
-  };
   var confirm = function(config2, renderFunc) {
     var div2 = document.createElement("div");
     document.body.appendChild(div2);
@@ -19370,7 +19414,6 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
     };
     dialogConfig.onConfirm = onConfirm;
-    dialogConfig = normalizeConfig(dialogConfig);
     dialogConfig.visible = true;
     renderFunction(dialogConfig);
     var destroy = function() {
@@ -19378,6 +19421,13 @@ Please add \`${key2}Action\` when creating your handler.`);
       if (div2 === null || div2 === void 0 ? void 0 : div2.parentNode) {
         div2.parentNode.removeChild(div2);
       }
+      for (var i2 = 0; i2 < destroyList.length; i2++) {
+        var fn = destroyList[i2];
+        if (fn === close) {
+          destroyList.splice(i2, 1);
+          break;
+        }
+      }
     };
     var onCancel = function(confirm2) {
       !confirm2 && config2.onCancel && config2.onCancel();
@@ -19391,7 +19441,6 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var update2 = function(newConfig) {
       dialogConfig = _object_spread({}, dialogConfig, newConfig);
-      dialogConfig = normalizeConfig(dialogConfig);
       renderFunction(dialogConfig);
     };
     var close = function() {
@@ -19402,6 +19451,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       };
       renderFunction(dialogConfig);
     };
+    destroyList.push(close);
     return {
       close,
       update: update2
@@ -19447,64 +19497,13 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, children), renderFooter()));
   };
   Content.displayName = "NutContent";
-  var defaultDialogWrapProps = _object_spread_props(_object_spread({}, defaultOverlayProps, defaultContentProps), {
-    overlay: true,
-    overlayStyle: {},
-    overlayClassName: "nut-dialog-overlay",
-    onCancel: function() {
-    },
-    onClose: function() {
-    },
-    onOverlayClick: function() {
-      return true;
-    }
-  });
-  var DialogWrap = function(props) {
-    var _ref = _object_spread({}, defaultDialogWrapProps, props), visible = _ref.visible, overlay = _ref.overlay, overlayStyle = _ref.overlayStyle, overlayClassName = _ref.overlayClassName, closeOnOverlayClick = _ref.closeOnOverlayClick, lockScroll = _ref.lockScroll, zIndex = _ref.zIndex, onClose = _ref.onClose, onCancel = _ref.onCancel, onOverlayClick = _ref.onOverlayClick, restProps = _object_without_properties(_ref, [
-      "visible",
-      "overlay",
-      "overlayStyle",
-      "overlayClassName",
-      "closeOnOverlayClick",
-      "lockScroll",
-      "zIndex",
-      "onClose",
-      "onCancel",
-      "onOverlayClick"
-    ]);
-    var onHandleClickOverlay = function(e2) {
-      if (closeOnOverlayClick && visible && e2.target === e2.currentTarget) {
-        var closed = onOverlayClick && onOverlayClick(e2);
-        closed && (onClose === null || onClose === void 0 ? void 0 : onClose());
-        closed && (onCancel === null || onCancel === void 0 ? void 0 : onCancel());
-      }
-    };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, overlay && /* @__PURE__ */ React.createElement(Overlay, {
-      zIndex,
-      style: overlayStyle,
-      className: overlayClassName,
-      visible,
-      closeOnOverlayClick,
-      lockScroll,
-      onClick: onHandleClickOverlay
-    }), /* @__PURE__ */ React.createElement(CSSTransition, {
-      in: visible,
-      timeout: 300,
-      classNames: "fadeDialog",
-      unmountOnExit: true,
-      appear: true
-    }, /* @__PURE__ */ React.createElement(Content, _object_spread_props(_object_spread({}, restProps), {
-      style: {
-        zIndex
-      },
-      visible
-    }))));
-  };
-  DialogWrap.displayName = "NutDialogWrap";
-  var defaultProps$H = _object_spread_props(_object_spread({}, defaultDialogWrapProps), {
+  var defaultProps$H = _object_spread_props(_object_spread({}, defaultOverlayProps, defaultContentProps), {
+    title: "",
+    content: "",
+    header: "",
+    footer: "",
     confirmText: "",
     cancelText: "",
-    overlay: true,
     closeOnOverlayClick: true,
     hideConfirmButton: false,
     hideCancelButton: false,
@@ -19513,38 +19512,28 @@ Please add \`${key2}Action\` when creating your handler.`);
     lockScroll: true,
     closeIconPosition: "bottom",
     closeIcon: false,
+    overlay: true,
+    overlayStyle: {},
+    overlayClassName: "nut-dialog-overlay",
     zIndex: 1200,
     beforeCancel: function() {
       return true;
     },
     beforeClose: function() {
       return true;
+    },
+    onCancel: function() {
+    },
+    onClose: function() {
+    },
+    onOverlayClick: function() {
+      return true;
     }
   });
   var BaseDialog = function(props, ref) {
-    var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps$H, props), visible = _ref.visible, footer = _ref.footer, hideConfirmButton = _ref.hideConfirmButton, hideCancelButton = _ref.hideCancelButton, lockScroll = _ref.lockScroll, disableConfirmButton = _ref.disableConfirmButton;
-    _ref.closeOnOverlayClick;
-    var confirmText = _ref.confirmText, cancelText = _ref.cancelText, closeIconPosition = _ref.closeIconPosition, closeIcon = _ref.closeIcon, footerDirection = _ref.footerDirection, onClose = _ref.onClose, onCancel = _ref.onCancel, onConfirm = _ref.onConfirm, beforeCancel = _ref.beforeCancel, beforeClose = _ref.beforeClose, restProps = _object_without_properties(_ref, [
-      "visible",
-      "footer",
-      "hideConfirmButton",
-      "hideCancelButton",
-      "lockScroll",
-      "disableConfirmButton",
-      "closeOnOverlayClick",
-      "confirmText",
-      "cancelText",
-      "closeIconPosition",
-      "closeIcon",
-      "footerDirection",
-      "onClose",
-      "onCancel",
-      "onConfirm",
-      "beforeCancel",
-      "beforeClose"
-    ]);
+    var _mergeProps = mergeProps(defaultProps$H, props), closeOnOverlayClick = _mergeProps.closeOnOverlayClick, confirmText = _mergeProps.confirmText, cancelText = _mergeProps.cancelText, children = _mergeProps.children, className = _mergeProps.className, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon, content2 = _mergeProps.content, disableConfirmButton = _mergeProps.disableConfirmButton, footer = _mergeProps.footer, footerDirection = _mergeProps.footerDirection, header = _mergeProps.header, hideConfirmButton = _mergeProps.hideConfirmButton, hideCancelButton = _mergeProps.hideCancelButton, lockScroll = _mergeProps.lockScroll, overlay = _mergeProps.overlay, overlayStyle = _mergeProps.overlayStyle, overlayClassName = _mergeProps.overlayClassName, style = _mergeProps.style, title = _mergeProps.title, visible = _mergeProps.visible, zIndex = _mergeProps.zIndex, beforeCancel = _mergeProps.beforeCancel, beforeClose = _mergeProps.beforeClose, onClose = _mergeProps.onClose, onCancel = _mergeProps.onCancel, onConfirm = _mergeProps.onConfirm, onOverlayClick = _mergeProps.onOverlayClick;
     var classPrefix2 = "nut-dialog";
+    var locale = useConfig().locale;
     var _useState = _sliced_to_array(React.useState(false), 2), loading = _useState[0], setLoading = _useState[1];
     var renderFooter = function() {
       if (footer === null) return "";
@@ -19552,11 +19541,11 @@ Please add \`${key2}Action\` when creating your handler.`);
         e2.stopPropagation();
         if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
         if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onClose();
+        onCancel();
       };
       var handleOk = /* @__PURE__ */ function() {
-        var _ref2 = _async_to_generator(function(e2) {
+        var _ref = _async_to_generator(function(e2) {
           return __generator(this, function(_state) {
             switch (_state.label) {
               case 0:
@@ -19577,7 +19566,7 @@ Please add \`${key2}Action\` when creating your handler.`);
               case 2:
                 _state.sent();
                 setLoading(false);
-                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onClose();
                 return [
                   3,
                   4
@@ -19597,45 +19586,54 @@ Please add \`${key2}Action\` when creating your handler.`);
           });
         });
         return function handleOk2(e2) {
-          return _ref2.apply(this, arguments);
+          return _ref.apply(this, arguments);
         };
       }();
       var btnClass = hideCancelButton || hideConfirmButton ? "".concat(classPrefix2, "-footer-block") : "";
-      return footer || /* @__PURE__ */ React.createElement(React.Fragment, null, !hideCancelButton && (footerDirection === "vertical" ? /* @__PURE__ */ React.createElement("div", {
-        style: {
-          order: 2
-        },
-        className: "".concat(classPrefix2, "-footer-cancel ").concat(btnClass),
-        onClick: function(e2) {
-          return handleCancel(e2);
-        }
-      }, cancelText || locale.cancel) : /* @__PURE__ */ React.createElement(Button, {
-        type: "default",
-        size: "large",
-        className: "".concat(classPrefix2, "-footer-cancel ").concat(btnClass),
-        onClick: function(e2) {
-          return handleCancel(e2);
-        }
-      }, cancelText || locale.cancel)), !hideConfirmButton && /* @__PURE__ */ React.createElement(Button, {
-        type: "primary",
-        size: "large",
-        className: classNames("".concat(classPrefix2, "-footer-ok ").concat(btnClass), {
-          disabled: disableConfirmButton
-        }),
-        disabled: disableConfirmButton,
-        onClick: function(e2) {
-          return handleOk(e2);
-        },
-        loading
-      }, confirmText || locale.confirm));
+      var renderCancelOfVertical = function() {
+        return !hideCancelButton && /* @__PURE__ */ React.createElement("div", {
+          style: {
+            order: 2
+          },
+          className: "".concat(classPrefix2, "-footer-cancel ").concat(btnClass),
+          onClick: function(e2) {
+            return handleCancel(e2);
+          }
+        }, cancelText || locale.cancel);
+      };
+      var renderCancel = function() {
+        return !hideCancelButton && /* @__PURE__ */ React.createElement(Button, {
+          type: "default",
+          size: "large",
+          className: "".concat(classPrefix2, "-footer-cancel ").concat(btnClass),
+          onClick: function(e2) {
+            return handleCancel(e2);
+          }
+        }, cancelText || locale.cancel);
+      };
+      var renderConfirm = function() {
+        return !hideConfirmButton && /* @__PURE__ */ React.createElement(Button, {
+          type: "primary",
+          size: "large",
+          className: classNames("".concat(classPrefix2, "-footer-ok ").concat(btnClass), {
+            disabled: disableConfirmButton
+          }),
+          disabled: disableConfirmButton,
+          onClick: function(e2) {
+            return handleOk(e2);
+          },
+          loading
+        }, confirmText || locale.confirm);
+      };
+      return footer || /* @__PURE__ */ React.createElement(React.Fragment, null, footerDirection === "vertical" ? /* @__PURE__ */ React.createElement(React.Fragment, null, renderConfirm(), renderCancelOfVertical()) : /* @__PURE__ */ React.createElement(React.Fragment, null, renderCancel(), renderConfirm()));
     };
     var renderCloseIcon = function() {
       if (!closeIcon) return null;
       var handleCancel = function() {
         if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
         if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onClose();
+        onCancel();
       };
       var _obj;
       var closeClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-close"), true), _define_property(_obj, "".concat(classPrefix2, "-close-").concat(closeIconPosition), true), _obj));
@@ -19645,19 +19643,46 @@ Please add \`${key2}Action\` when creating your handler.`);
         onClick: handleCancel
       }, /* @__PURE__ */ React.isValidElement(closeIcon) ? closeIcon : systomIcon);
     };
+    var onHandleClickOverlay = function(e2) {
+      if (closeOnOverlayClick && visible && e2.target === e2.currentTarget) {
+        var closed = onOverlayClick && onOverlayClick(e2);
+        closed && onClose();
+        closed && onCancel();
+      }
+    };
+    var renderContent = function() {
+      return /* @__PURE__ */ React.createElement(CSSTransition, {
+        in: visible,
+        timeout: 300,
+        classNames: "fadeDialog",
+        unmountOnExit: true,
+        appear: true
+      }, /* @__PURE__ */ React.createElement(Content, {
+        className,
+        style: _object_spread({
+          zIndex
+        }, style),
+        title,
+        header,
+        close: renderCloseIcon(),
+        footer: renderFooter(),
+        footerDirection,
+        visible
+      }, content2 || children));
+    };
     return /* @__PURE__ */ React.createElement("div", {
       style: {
         display: visible ? "block" : "none"
       }
-    }, /* @__PURE__ */ React.createElement(DialogWrap, _object_spread_props(_object_spread({}, restProps), {
+    }, overlay && /* @__PURE__ */ React.createElement(Overlay, {
+      zIndex,
       visible,
+      style: overlayStyle,
+      className: overlayClassName,
+      closeOnOverlayClick,
       lockScroll,
-      footer: renderFooter(),
-      footerDirection,
-      close: renderCloseIcon(),
-      onClose,
-      onCancel
-    })));
+      onClick: onHandleClickOverlay
+    }), renderContent());
   };
   var Dialog = /* @__PURE__ */ React.forwardRef(BaseDialog);
   Dialog.confirm = function(props) {
@@ -19665,12 +19690,9 @@ Please add \`${key2}Action\` when creating your handler.`);
   };
   [
     "alert"
-  ].forEach(function(type2) {
-    Dialog[type2] = function(props) {
-      return confirm(_object_spread_props(_object_spread({}, props), {
-        isNotice: false,
-        noticeType: type2
-      }));
+  ].forEach(function() {
+    Dialog.alert = function(props) {
+      return confirm(_object_spread({}, props));
     };
   });
   Dialog.displayName = "NutDialog";
@@ -37366,6 +37388,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       {
         key: "close",
         value: function close() {
+          var _this_props;
           this.setState({
             show: false
           });
@@ -37374,7 +37397,7 @@ Please add \`${key2}Action\` when creating your handler.`);
             var element = document.getElementById(this.props.id);
             element && element.parentNode && element.parentNode.removeChild(element);
           }
-          this.props.onClose();
+          (_this_props = this.props) === null || _this_props === void 0 ? void 0 : _this_props.onClose();
         }
       },
       {
@@ -37419,22 +37442,40 @@ Please add \`${key2}Action\` when creating your handler.`);
       {
         key: "render",
         value: function render2() {
-          var _this_props = this.props, style = _this_props.style, message = _this_props.message, type2 = _this_props.type, className = _this_props.className, position2 = _this_props.position;
+          var _this_props = this.props, id = _this_props.id, style = _this_props.style, message = _this_props.message, leftIcon = _this_props.leftIcon, rightIcon = _this_props.rightIcon, closeable = _this_props.closeable, className = _this_props.className, position2 = _this_props.position, distance = _this_props.distance, navHeight = _this_props.navHeight;
           var show2 = this.state.show;
+          var classes = classNames(classPrefix$c, className);
+          var getDistance = function() {
+            if (position2 === "top") {
+              return {
+                top: "".concat(distance + navHeight, "px")
+              };
+            }
+            return {
+              bottom: "".concat(distance, "px")
+            };
+          };
           var _obj;
-          var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$c, "-popup-top"), position2 === "top"), _define_property(_obj, "".concat(classPrefix$c, "-popup-bottom"), position2 === "bottom"), _define_property(_obj, "".concat(classPrefix$c), true), _define_property(_obj, "".concat(classPrefix$c, "-").concat(type2), true), _obj));
           return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(CSSTransition, {
             in: show2,
             timeout: 300,
             classNames: "fade",
             unmountOnExit: true,
             appear: true,
-            position: position2
+            position: position2,
+            id
           }, /* @__PURE__ */ React__namespace.createElement("div", {
-            className: "".concat(classes, " ").concat(className),
-            style,
+            className: classes,
+            style: _object_spread({}, style, getDistance()),
             onClick: this.clickCover
-          }, message)));
+          }, leftIcon ? /* @__PURE__ */ React__namespace.createElement("div", {
+            className: "".concat(classPrefix$c, "-left-icon")
+          }, leftIcon) : null, /* @__PURE__ */ React__namespace.createElement("div", {
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$c, "-content"), true), _define_property(_obj, "".concat(classPrefix$c, "-ellipsis"), closeable || rightIcon), _define_property(_obj, "".concat(classPrefix$c, "-layout-left"), leftIcon || rightIcon), _obj))
+          }, message), rightIcon || closeable ? /* @__PURE__ */ React__namespace.createElement("div", {
+            className: "".concat(classPrefix$c, "-right-icon"),
+            onClick: this.close
+          }, rightIcon || (closeable ? /* @__PURE__ */ React__namespace.createElement(n$6, null) : null)) : null)));
         }
       }
     ]);
@@ -37470,9 +37511,13 @@ Please add \`${key2}Action\` when creating your handler.`);
   var messageInstance$1 = null;
   var options = _object_spread_props(_object_spread({}, ComponentDefaults), {
     id: "",
-    duration: 3e3,
-    type: "danger",
     position: "top",
+    distance: 8,
+    navHeight: 57,
+    closeable: false,
+    leftIcon: null,
+    rightIcon: null,
+    duration: 3e3,
     onClose: function() {
     },
     onClick: function() {
@@ -37507,38 +37552,6 @@ Please add \`${key2}Action\` when creating your handler.`);
         type: "base"
       }, option));
     },
-    success: function success(message) {
-      var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      errorMsg$1(message);
-      return notice$1(_object_spread({
-        message,
-        type: "success"
-      }, option));
-    },
-    primary: function primary(message) {
-      var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      errorMsg$1(message);
-      return notice$1(_object_spread({
-        message,
-        type: "primary"
-      }, option));
-    },
-    danger: function danger(message) {
-      var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      errorMsg$1(message);
-      return notice$1(_object_spread({
-        message,
-        type: "danger"
-      }, option));
-    },
-    warn: function warn(message) {
-      var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      errorMsg$1(message);
-      return notice$1(_object_spread({
-        message,
-        type: "warning"
-      }, option));
-    },
     hide: function hide() {
       if (messageInstance$1) {
         messageInstance$1.destroy();
@@ -37594,12 +37607,12 @@ Please add \`${key2}Action\` when creating your handler.`);
     var popoverRef = React.useRef(null);
     var popoverContentRef = React.useRef(null);
     var _useState = _sliced_to_array(React.useState(false), 2), showPopup = _useState[0], setShowPopup = _useState[1];
-    var _useState1 = _sliced_to_array(React.useState(), 2), rootPosition = _useState1[0], setRootPosition = _useState1[1];
+    var _useState1 = _sliced_to_array(React.useState(), 2), wrapperPosition = _useState1[0], setWrapperPosition = _useState1[1];
     React.useEffect(function() {
       setShowPopup(visible);
       if (visible) {
         setTimeout(function() {
-          getContentWidth();
+          getWrapperPosition();
         }, 0);
       }
     }, [
@@ -37607,25 +37620,10 @@ Please add \`${key2}Action\` when creating your handler.`);
       location
     ]);
     var update2 = React.useRef(function(e2) {
-      getContentWidth();
+      getWrapperPosition();
     });
-    React.useEffect(function() {
-      if (visible) {
-        scrollableParents.forEach(function(parent2) {
-          parent2.addEventListener("scroll", update2.current, {
-            passive: true
-          });
-        });
-      } else {
-        scrollableParents.forEach(function(parent2) {
-          return parent2.removeEventListener("scroll", update2.current);
-        });
-      }
-    }, [
-      visible
-    ]);
-    var element = null;
     var targetSet = [];
+    var element = null;
     if (canUseDom && targetId) {
       element = document.querySelector("#".concat(targetId));
       targetSet = [
@@ -37638,39 +37636,59 @@ Please add \`${key2}Action\` when creating your handler.`);
         popoverContentRef.current
       ];
     }
-    useClickAway(function() {
-      onClick === null || onClick === void 0 ? void 0 : onClick();
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, targetSet, "touchstart", true, visible, closeOnOutsideClick);
     var scrollableParents = React.useMemo(function() {
       return getAllScrollableParents(element || popoverRef.current);
     }, [
       element,
       popoverRef.current
     ]);
-    var getContentWidth = function() {
+    React.useEffect(function() {
+      if (visible) {
+        scrollableParents.forEach(function(parent2) {
+          parent2.addEventListener("scroll", update2.current, {
+            passive: true
+          });
+        });
+      } else {
+        scrollableParents.forEach(function(parent2) {
+          return parent2.removeEventListener("scroll", update2.current);
+        });
+      }
+    }, [
+      visible
+    ]);
+    useClickAway(function() {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, targetSet, "touchstart", true, visible, closeOnOutsideClick);
+    var getWrapperPosition = function() {
       var rect = getRect(targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current);
-      setRootPosition({
-        width: rect.width,
-        height: rect.height,
-        left: rtl ? rect.right : rect.left,
-        top: rect.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop),
-        right: rtl ? rect.left : rect.right
+      var distance = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
+      var width2 = rect.width, height2 = rect.height, right = rect.right, left = rect.left, top = rect.top;
+      setWrapperPosition({
+        width: width2,
+        height: height2,
+        left: rtl ? right : left,
+        top: top + distance,
+        right: rtl ? left : right
       });
     };
-    var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$b), true), _define_property(_obj, "".concat(classPrefix$b, "-").concat(theme), theme === "dark"), _obj), className);
+    var classes = classNames(classPrefix$b, _define_property({}, "".concat(classPrefix$b, "-").concat(theme), theme === "dark"), className);
     var popoverArrow = function() {
       var prefixCls2 = "nut-popover-arrow";
-      return "".concat(prefixCls2, " ").concat(prefixCls2, "-").concat(location.split("-")[0], " ").concat(prefixCls2, "-").concat(location);
+      var direction = location.split("-")[0];
+      return "".concat(prefixCls2, " ").concat(prefixCls2, "-").concat(direction, " ").concat(prefixCls2, "-").concat(location);
     };
-    var getRootPosition = function() {
+    var getPopoverPosition = function() {
       var _popoverContentRef_current, _popoverContentRef_current1;
       var styles = {};
-      if (!rootPosition) return {};
-      var contentWidth = (_popoverContentRef_current = popoverContentRef.current) === null || _popoverContentRef_current === void 0 ? void 0 : _popoverContentRef_current.clientWidth;
-      var contentHeight = (_popoverContentRef_current1 = popoverContentRef.current) === null || _popoverContentRef_current1 === void 0 ? void 0 : _popoverContentRef_current1.clientHeight;
-      var width2 = rootPosition.width, height2 = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.right;
+      if (!wrapperPosition) {
+        styles.visibility = "hidden";
+        return styles;
+      }
+      var popWidth = (_popoverContentRef_current = popoverContentRef.current) === null || _popoverContentRef_current === void 0 ? void 0 : _popoverContentRef_current.clientWidth;
+      var popHeight = (_popoverContentRef_current1 = popoverContentRef.current) === null || _popoverContentRef_current1 === void 0 ? void 0 : _popoverContentRef_current1.clientHeight;
+      var width2 = wrapperPosition.width, height2 = wrapperPosition.height, left = wrapperPosition.left, top = wrapperPosition.top, right = wrapperPosition.right;
       var direction = location.split("-")[0];
       var skew = location.split("-")[1];
       var cross = 0;
@@ -37686,15 +37704,15 @@ Please add \`${key2}Action\` when creating your handler.`);
           "bottom",
           "top"
         ].includes(direction)) {
-          var h = direction === "bottom" ? height2 + cross : -(contentHeight + cross);
+          var h = direction === "bottom" ? height2 + cross : -(popHeight + cross);
           styles.top = "".concat(top + h, "px");
           if (!skew) {
-            styles[dir] = "".concat(-(contentWidth - width2) / 2 + rootPosition[dir] + parallel, "px");
+            styles[dir] = "".concat(-(popWidth - width2) / 2 + wrapperPosition[dir] + parallel, "px");
           }
-          if (skew === "start") {
+          if (skew === "left") {
             styles.left = "".concat(left + parallel, "px");
           }
-          if (skew === "end") {
+          if (skew === "right") {
             styles.left = "".concat(right + parallel, "px");
           }
         }
@@ -37702,22 +37720,23 @@ Please add \`${key2}Action\` when creating your handler.`);
           "left",
           "right"
         ].includes(direction)) {
-          var contentW = direction === "left" ? -(contentWidth + cross) : width2 + cross;
+          var contentW = direction === "left" ? -(popWidth + cross) : width2 + cross;
           styles.left = "".concat(left + contentW, "px");
           if (!skew) {
-            styles.top = "".concat(top - contentHeight / 2 + height2 / 2 - 4 + parallel, "px");
+            styles.top = "".concat(top - popHeight / 2 + height2 / 2 - 4 + parallel, "px");
           }
-          if (skew === "start") {
+          if (skew === "top") {
             styles.top = "".concat(top + parallel, "px");
           }
-          if (skew === "end") {
+          if (skew === "bottom") {
             styles.top = "".concat(top + height2 + parallel, "px");
           }
         }
       }
+      styles.visibility = popWidth === 0 ? "hidden" : "initial";
       return styles;
     };
-    var arrowStyle = function() {
+    var popoverArrowStyle = function() {
       var styles = {};
       var direction = location.split("-")[0];
       var skew = location.split("-")[1];
@@ -37732,10 +37751,10 @@ Please add \`${key2}Action\` when creating your handler.`);
           if (!skew) {
             styles[dir] = "calc(50% + ".concat(arrowOffset, "px)");
           }
-          if (skew === "start") {
+          if (skew === "left") {
             styles[dir] = "".concat(base + arrowOffset, "px");
           }
-          if (skew === "end") {
+          if (skew === "right") {
             styles[dir2] = "".concat(base - arrowOffset, "px");
           }
         }
@@ -37746,10 +37765,10 @@ Please add \`${key2}Action\` when creating your handler.`);
           if (!skew) {
             styles.top = "calc(50% - ".concat(arrowOffset, "px)");
           }
-          if (skew === "start") {
+          if (skew === "top") {
             styles.top = "".concat(base - arrowOffset, "px");
           }
-          if (skew === "end") {
+          if (skew === "bottom") {
             styles.bottom = "".concat(base + arrowOffset, "px");
           }
         }
@@ -37758,28 +37777,28 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var handleSelect = function(item, index2) {
       if (!item.disabled) {
-        onSelect && onSelect(item, index2);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item, index2);
       }
       if (closeOnActionClick) {
-        onClick && onClick();
-        onClose && onClose();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
       }
     };
     return /* @__PURE__ */ React.createElement(React.Fragment, null, !targetId && /* @__PURE__ */ React.createElement("div", {
       className: "nut-popover-wrapper",
       ref: popoverRef,
       onClick: function() {
-        onClick && onClick();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
         if (!visible) {
-          onOpen && onOpen();
+          onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         } else {
-          onClose && onClose();
+          onClose === null || onClose === void 0 ? void 0 : onClose();
         }
       },
       style
     }, Array.isArray(children) ? children[0] : children), /* @__PURE__ */ ReactDOM.createPortal(/* @__PURE__ */ React.createElement("div", {
       className: classes,
-      style: getRootPosition()
+      style: _object_spread({}, getPopoverPosition(), style)
     }, /* @__PURE__ */ React.createElement(Popup, _object_spread({
       className: "nut-popover-content nut-popover-content-".concat(location),
       visible: showPopup,
@@ -37791,29 +37810,30 @@ Please add \`${key2}Action\` when creating your handler.`);
       ref: popoverContentRef
     }, showArrow && /* @__PURE__ */ React.createElement("div", {
       className: popoverArrow(),
-      style: arrowStyle()
+      style: popoverArrowStyle()
     }, /* @__PURE__ */ React.createElement(i$1, {
       width: 8,
       height: 4
     })), Array.isArray(children) ? children[1] : null, list.map(function(item, index2) {
+      var _item_action;
       return /* @__PURE__ */ React.createElement("div", {
         className: classNames({
-          "nut-popover-menu-item": true,
-          "nut-popover-menu-disabled": item.disabled
+          "nut-popover-item": true,
+          "nut-popover-item-disabled": item.disabled
         }, item.className),
         key: item.key || index2,
         onClick: function() {
           return handleSelect(item, index2);
         }
       }, item.icon && /* @__PURE__ */ React.createElement("div", {
-        className: "nut-popover-menu-item-icon"
+        className: "nut-popover-item-icon"
       }, item.icon), /* @__PURE__ */ React.createElement("div", {
-        className: "nut-popover-menu-item-name"
-      }, item.name), item.action && item.action.icon && /* @__PURE__ */ React.createElement("div", {
-        className: "nut-popover-menu-item-action-icon",
+        className: "nut-popover-item-name"
+      }, item.name), ((_item_action = item.action) === null || _item_action === void 0 ? void 0 : _item_action.icon) && /* @__PURE__ */ React.createElement("div", {
+        className: "nut-popover-item-action-icon",
         onClick: function(e2) {
-          var _item_action_onClick, _item_action;
-          return (_item_action = item.action) === null || _item_action === void 0 ? void 0 : (_item_action_onClick = _item_action.onClick) === null || _item_action_onClick === void 0 ? void 0 : _item_action_onClick.call(_item_action, e2);
+          var _item_action_onClick, _item_action2;
+          return (_item_action2 = item.action) === null || _item_action2 === void 0 ? void 0 : (_item_action_onClick = _item_action2.onClick) === null || _item_action_onClick === void 0 ? void 0 : _item_action_onClick.call(_item_action2, e2);
         }
       }, item.action.icon));
     })))), document.body));
@@ -38141,212 +38161,83 @@ Please add \`${key2}Action\` when creating your handler.`);
     })) : null, children);
   };
   ResultPage.displayName = "NutResultPage";
-  var AvatarContext = React.createContext({});
   var defaultProps$y = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    maxContent: "",
-    max: "",
-    maxBackground: "#eee",
-    maxColor: "#666",
-    gap: "-8",
-    level: "left"
+    rows: 1,
+    animated: true,
+    visible: false,
+    size: "normal",
+    shape: "round",
+    duration: 0.6,
+    inline: false
   });
-  var classPrefix$a = "nut-avatar-group";
-  var AvatarGroup = function(props) {
-    var propAvatarGroup = _object_spread({}, defaultProps$y, props);
-    var className = propAvatarGroup.className, style = propAvatarGroup.style, children = propAvatarGroup.children;
-    var avatarGroupRef = React.useRef(null);
-    var cls = classNames(classPrefix$a, className);
-    var parentAvatar = {
-      propAvatarGroup,
-      avatarGroupRef
-    };
-    return /* @__PURE__ */ React.createElement(AvatarContext.Provider, {
-      value: parentAvatar
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: cls,
-      style,
-      ref: avatarGroupRef
-    }, children));
-  };
-  AvatarGroup.displayName = "NutAvatarGroup";
-  var defaultProps$x = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    size: "",
-    shape: "round",
-    icon: "",
-    background: "#eee",
-    color: "#666",
-    fit: "cover",
-    src: "",
-    alt: ""
-  });
-  var classPrefix$9 = "nut-avatar";
-  var Avatar = function(props) {
-    var _ref = _object_spread({}, defaultProps$x, props), children = _ref.children, size = _ref.size, shape = _ref.shape, background = _ref.background, color = _ref.color, src = _ref.src, alt = _ref.alt, icon = _ref.icon, fit = _ref.fit, className = _ref.className, style = _ref.style, onClick = _ref.onClick, onError = _ref.onError, rest = _object_without_properties(_ref, [
-      "children",
-      "size",
-      "shape",
-      "background",
-      "color",
-      "src",
-      "alt",
-      "icon",
-      "fit",
-      "className",
-      "style",
-      "onClick",
-      "onError"
-    ]);
-    var _useState = _sliced_to_array(React.useState(0), 2), maxSum = _useState[0], setMaxSum = _useState[1];
-    var _useState1 = _sliced_to_array(React.useState(false), 2), showMax = _useState1[0], setShowMax = _useState1[1];
-    var _useState2 = _sliced_to_array(React.useState(1), 2), avatarIndex = _useState2[0], setAvatarIndex = _useState2[1];
-    var avatarRef = React.useRef(null);
-    var parent2 = React.useContext(AvatarContext);
-    var sizeValue = [
-      "large",
-      "normal",
-      "small"
-    ];
-    var propAvatarGroup = parent2.propAvatarGroup, avatarGroupRef = parent2.avatarGroupRef;
-    var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal"), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal", "-round"), shape === "round" && true), _obj));
-    var cls = classNames(classPrefix$9, classes, className);
-    var styles = _object_spread({
-      width: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
-      height: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
-      backgroundColor: "".concat(background),
-      color,
-      marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : "",
-      zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === "right" ? "".concat(Math.abs(maxSum - avatarIndex)) : ""
-    }, style);
-    var maxStyles = {
-      backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
-      color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)
-    };
-    var avatarLength = React.useCallback(function(children2) {
-      var _avatarRef_current_dataset, _avatarRef_current;
-      for (var i2 = 0; i2 < children2.length; i2++) {
-        if (children2[i2] && children2[i2].classList && children2[i2].classList[0] === "nut-avatar") {
-          children2[i2].setAttribute("data-index", i2 + 1);
-        }
-      }
-      var index2 = Number(avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef_current = avatarRef.current) === null || _avatarRef_current === void 0 ? void 0 : (_avatarRef_current_dataset = _avatarRef_current.dataset) === null || _avatarRef_current_dataset === void 0 ? void 0 : _avatarRef_current_dataset.index);
-      var maxCount = (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || children2.length;
-      setMaxSum(children2.length);
-      setAvatarIndex(index2);
-      if (index2 === children2.length && index2 !== maxCount && children2.length > maxCount) {
-        setShowMax(true);
-      }
-    }, [
-      propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max
-    ]);
-    React.useEffect(function() {
-      var avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
-      if (avatarChildren) {
-        avatarLength(avatarChildren);
-      }
-    }, [
-      avatarLength,
-      avatarGroupRef
-    ]);
-    var errorEvent = function() {
-      onError && onError();
+  var Skeleton = function(props) {
+    var shapeStyle = function shapeStyle2() {
+      if (shape === "circle") return {
+        borderRadius: "50%"
+      };
+      if (shape === "square") return {
+        borderRadius: "0"
+      };
+      return {};
     };
-    var clickAvatar = function(e2) {
-      onClick && onClick(e2);
+    var durationStyle = function durationStyle2() {
+      if (typeof duration !== "undefined") return {
+        animationDuration: "".concat(duration, "s")
+      };
+      return {};
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, (showMax || !(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
-      className: cls
-    }, rest), {
-      style: !showMax ? styles : maxStyles,
-      onClick: clickAvatar,
-      ref: avatarRef
-    }), (!(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement(React.Fragment, null, src && /* @__PURE__ */ React.createElement(Image$1, {
-      className: "nut-avatar-img",
-      src,
-      alt,
-      style: {
-        objectFit: fit
-      },
-      onError: errorEvent
-    }), /* @__PURE__ */ React.isValidElement(icon) ? /* @__PURE__ */ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
-      className: "".concat(icon.props.className || "", " nut-avatar-icon")
-    })) : null, children && /* @__PURE__ */ React.createElement("span", {
-      className: "nut-avatar-text"
-    }, children), !src && !icon && !children && /* @__PURE__ */ React.createElement(m, {
-      className: "nut-avatar-icon"
-    })), showMax && /* @__PURE__ */ React.createElement("div", {
-      className: "nut-avatar-text"
-    }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)))));
-  };
-  Avatar.displayName = "NutAvatar";
-  Avatar.Group = AvatarGroup;
-  var defaultProps$w = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    rows: 1,
-    animated: false,
-    title: false,
-    avatar: false,
-    avatarSize: "50px",
-    visible: false,
-    avatarShape: "round"
-  });
-  var Skeleton = function(props) {
-    var _ref = _object_spread({}, defaultProps$w, props), className = _ref.className, animated2 = _ref.animated, rows = _ref.rows, title = _ref.title, avatar = _ref.avatar, avatarSize = _ref.avatarSize, visible = _ref.visible, children = _ref.children, avatarShape = _ref.avatarShape, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$y, props), className = _ref.className, width2 = _ref.width, height2 = _ref.height, shape = _ref.shape, animated2 = _ref.animated, rows = _ref.rows, visible = _ref.visible, size = _ref.size, duration = _ref.duration, children = _ref.children, rest = _object_without_properties(_ref, [
       "className",
+      "width",
+      "height",
+      "shape",
       "animated",
       "rows",
-      "title",
-      "avatar",
-      "avatarSize",
       "visible",
-      "children",
-      "avatarShape"
+      "size",
+      "duration",
+      "children"
     ]);
     var classPrefix2 = "nut-skeleton";
     var classes = classNames(classPrefix2, className);
-    var _obj;
-    var avatarClass = classNames((_obj = {}, _define_property(_obj, "nut-avatar", true), _define_property(_obj, "nut-skeleton-content-avatar", true), _define_property(_obj, "avatar-".concat(avatarShape), avatarShape), _obj));
-    var repeatLines = function(num) {
+    var repeatCount = function(num) {
       return Array.from({
         length: num
       }, function(v, i2) {
         return i2;
       });
     };
-    var getStyle = function() {
-      if (avatarSize) {
-        return {
-          width: avatarSize,
-          height: avatarSize
-        };
-      }
-      return {
-        width: "50px",
-        height: "50px"
-      };
+    var _useState = _sliced_to_array(React.useState(false), 2), animate = _useState[0], setAnimate = _useState[1];
+    var playAnimation = function() {
+      setAnimate(false);
+      setTimeout(function() {
+        setAnimate(true);
+      }, 10);
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement("div", _object_spread({
+    React.useEffect(function() {
+      if (!animated2) return;
+      playAnimation();
+      var intervalId = setInterval(playAnimation, 1e3 + duration * 1e3);
+      return function() {
+        return clearInterval(intervalId);
+      };
+    }, []);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? children : /* @__PURE__ */ React.createElement("div", _object_spread({
       className: classes
-    }, rest), animated2 && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-animation")
-    }), /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content")
-    }, avatar && /* @__PURE__ */ React.createElement(Avatar, {
-      className: avatarClass,
-      shape: avatarShape,
-      style: getStyle(),
-      icon: "null"
-    }), rows === 1 ? /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content-block")
-    }) : /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content-line")
-    }, title && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content-title")
-    }), repeatLines(rows).map(function(item, index2) {
+    }, rest), repeatCount(rows).map(function(item, index2) {
+      var contentClass = "".concat(classPrefix2, "-content ").concat(classPrefix2, "-content-").concat(size, " ").concat(classPrefix2, "-content-").concat(size, "-").concat(index2);
       return /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix2, "-content-block"),
-        key: index2
-      });
-    })))));
+        className: "".concat(contentClass),
+        key: index2,
+        style: _object_spread({
+          width: width2,
+          height: height2
+        }, shapeStyle())
+      }, animated2 && /* @__PURE__ */ React.createElement("div", {
+        className: "".concat(classPrefix2, "-animated ").concat(animate ? "".concat(classPrefix2, "-animation") : ""),
+        style: durationStyle()
+      }));
+    })));
   };
   Skeleton.displayName = "NutSkeleton";
   function preventDefault(event, isStopPropagation) {
@@ -38357,13 +38248,13 @@ Please add \`${key2}Action\` when creating your handler.`);
       event.stopPropagation();
     }
   }
-  var defaultProps$v = {
+  var defaultProps$x = {
     name: ""
   };
   var Swipe = /* @__PURE__ */ React.forwardRef(function(props, instanceRef) {
     var classPrefix2 = "nut-swipe";
     var touch = useTouch();
-    var _$_object_spread = _object_spread({}, defaultProps$v, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
+    var _$_object_spread = _object_spread({}, defaultProps$x, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
     var root2 = React.useRef();
     var opened = React.useRef(false);
     var lockClick = React.useRef(false);
@@ -38563,7 +38454,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef)));
   });
   Swipe.displayName = "NutSwipe";
-  var classPrefix$8 = "nut-toast";
+  var classPrefix$a = "nut-toast";
   var Notification = /* @__PURE__ */ function(_superClass) {
     _inherits(Notification2, _superClass);
     function Notification2(props) {
@@ -38640,7 +38531,7 @@ Please add \`${key2}Action\` when creating your handler.`);
               })
             }[icon];
             return /* @__PURE__ */ React__namespace.createElement("p", {
-              className: "".concat(classPrefix$8, "-icon-wrapper")
+              className: "".concat(classPrefix$a, "-icon-wrapper")
             }, iconNode);
           }
           return icon;
@@ -38671,22 +38562,22 @@ Please add \`${key2}Action\` when creating your handler.`);
             visible: show2,
             style,
             zIndex,
-            className: "".concat(classPrefix$8, "-overlay-default ").concat(className),
+            className: "".concat(classPrefix$a, "-overlay-default ").concat(className),
             onClick: function() {
               return _this.clickCover();
             },
             closeOnOverlayClick,
             lockScroll
           }, /* @__PURE__ */ React__namespace.createElement("div", {
-            className: "".concat(classPrefix$8, " ").concat(classes),
+            className: "".concat(classPrefix$a, " ").concat(classes),
             id: "toast-".concat(id)
           }, /* @__PURE__ */ React__namespace.createElement("div", {
-            className: classNames("".concat(classPrefix$8, "-inner"), "".concat(classPrefix$8, "-").concat(position2), contentClassName, "".concat(classPrefix$8, "-inner-").concat(size), "".concat(classPrefix$8, "-inner-").concat(wordBreak), _define_property({}, "".concat(classPrefix$8, "-inner-descrption"), content2)),
+            className: classNames("".concat(classPrefix$a, "-inner"), "".concat(classPrefix$a, "-").concat(position2), contentClassName, "".concat(classPrefix$a, "-inner-").concat(size), "".concat(classPrefix$a, "-inner-").concat(wordBreak), _define_property({}, "".concat(classPrefix$a, "-inner-descrption"), content2)),
             style: _object_spread({}, contentStyle)
           }, this.renderIcon(), title && /* @__PURE__ */ React__namespace.createElement("div", {
-            className: "".concat(classPrefix$8, "-title")
+            className: "".concat(classPrefix$a, "-title")
           }, title), content2 && /* @__PURE__ */ React__namespace.createElement("span", {
-            className: "".concat(classPrefix$8, "-text")
+            className: "".concat(classPrefix$a, "-text")
           }, content2))));
         }
       }
@@ -38719,7 +38610,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     })), element);
   };
   var messageInstance = null;
-  var defaultProps$u = _object_spread_props(_object_spread({}, defaultOverlayProps), {
+  var defaultProps$w = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     id: "",
     position: "middle",
     title: "",
@@ -38753,7 +38644,7 @@ Please add \`${key2}Action\` when creating your handler.`);
         opts2.onClose && opts2.onClose();
       }
     }
-    var opts22 = _object_spread_props(_object_spread({}, defaultProps$u, opts2), {
+    var opts22 = _object_spread_props(_object_spread({}, defaultProps$w, opts2), {
       onClose: close
     });
     getInstance(opts22, function(notification) {
@@ -38776,7 +38667,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     return notice(_object_spread({}, option));
   }
   function config(config2) {
-    defaultProps$u = _object_spread({}, defaultProps$u, config2);
+    defaultProps$w = _object_spread({}, defaultProps$w, config2);
   }
   const Toast = {
     show,
@@ -38788,16 +38679,16 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
     }
   };
-  var defaultProps$t = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$v = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: "shake",
     action: "initial",
     loop: false,
     onClick: function(event) {
     }
   });
-  var classPrefix$7 = "nut-animate";
+  var classPrefix$9 = "nut-animate";
   var Animate = function(props) {
-    var _ref = _object_spread({}, defaultProps$t, props), className = _ref.className, type2 = _ref.type, action = _ref.action, loop2 = _ref.loop, onClick = _ref.onClick, children = _ref.children, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$v, props), className = _ref.className, type2 = _ref.type, action = _ref.action, loop2 = _ref.loop, onClick = _ref.onClick, children = _ref.children, rest = _object_without_properties(_ref, [
       "className",
       "type",
       "action",
@@ -38809,7 +38700,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     var _obj;
     var classes = classNames((_obj = {
       "nut-ani-container": true
-    }, _define_property(_obj, "".concat(classPrefix$7, "-").concat(type2), action === "initial" || clicked), _define_property(_obj, "loop", loop2), _obj), className);
+    }, _define_property(_obj, "".concat(classPrefix$9, "-").concat(type2), action === "initial" || clicked), _define_property(_obj, "loop", loop2), _obj), className);
     var handleClick = function(event) {
       setClicked(true);
       if (!loop2) {
@@ -38827,7 +38718,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, rest), children));
   };
   Animate.displayName = "NutAnimate";
-  var defaultProps$s = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$u = _object_spread_props(_object_spread({}, ComponentDefaults), {
     length: 0,
     value: "",
     delay: 300,
@@ -38835,7 +38726,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     thousands: false
   });
   var CountUp = function(props) {
-    var _mergeProps = mergeProps(defaultProps$s, props), length2 = _mergeProps.length, value2 = _mergeProps.value, delay = _mergeProps.delay, duration = _mergeProps.duration, className = _mergeProps.className, thousands = _mergeProps.thousands;
+    var _mergeProps = mergeProps(defaultProps$u, props), length2 = _mergeProps.length, value2 = _mergeProps.value, delay = _mergeProps.delay, duration = _mergeProps.duration, className = _mergeProps.className, thousands = _mergeProps.thousands;
     _mergeProps.style;
     _object_without_properties(_mergeProps, [
       "length",
@@ -38922,7 +38813,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     })));
   };
   CountUp.displayName = "NutCountUp";
-  var defaultProps$r = {};
+  var defaultProps$t = {};
   var AnimatingNumbers = /* @__PURE__ */ function(Component) {
     _inherits(AnimatingNumbers2, Component);
     function AnimatingNumbers2(props) {
@@ -38946,11 +38837,11 @@ Please add \`${key2}Action\` when creating your handler.`);
     ]);
     return AnimatingNumbers2;
   }(React.Component);
-  _define_property(AnimatingNumbers, "defaultProps", defaultProps$r);
+  _define_property(AnimatingNumbers, "defaultProps", defaultProps$t);
   _define_property(AnimatingNumbers, "displayName", "NutAnimatingNumbers");
   _define_property(AnimatingNumbers, "CountUp", CountUp);
   AnimatingNumbers.CountUp = CountUp;
-  var defaultProps$q = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$s = _object_spread_props(_object_spread({}, ComponentDefaults), {
     src: "",
     muted: false,
     autoPlay: false,
@@ -38980,7 +38871,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
     };
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps$q, props), className = _ref.className, src = _ref.src, style = _ref.style, muted = _ref.muted, autoPlay = _ref.autoPlay, loop2 = _ref.loop, preload = _ref.preload, type2 = _ref.type, onBack = _ref.onBack, onForward = _ref.onForward, onPause = _ref.onPause, onEnd = _ref.onEnd, onMute = _ref.onMute, onCanPlay = _ref.onCanPlay, children = _ref.children, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$s, props), className = _ref.className, src = _ref.src, style = _ref.style, muted = _ref.muted, autoPlay = _ref.autoPlay, loop2 = _ref.loop, preload = _ref.preload, type2 = _ref.type, onBack = _ref.onBack, onForward = _ref.onForward, onPause = _ref.onPause, onEnd = _ref.onEnd, onMute = _ref.onMute, onCanPlay = _ref.onCanPlay, children = _ref.children, rest = _object_without_properties(_ref, [
       "className",
       "src",
       "style",
@@ -39188,6 +39079,145 @@ Please add \`${key2}Action\` when creating your handler.`);
     })));
   };
   Audio.displayName = "NutAudio";
+  var AvatarContext = React.createContext({});
+  var defaultProps$r = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    maxContent: "",
+    max: "",
+    maxBackground: "#eee",
+    maxColor: "#666",
+    gap: "-8",
+    level: "left"
+  });
+  var classPrefix$8 = "nut-avatar-group";
+  var AvatarGroup = function(props) {
+    var propAvatarGroup = _object_spread({}, defaultProps$r, props);
+    var className = propAvatarGroup.className, style = propAvatarGroup.style, children = propAvatarGroup.children;
+    var avatarGroupRef = React.useRef(null);
+    var cls = classNames(classPrefix$8, className);
+    var parentAvatar = {
+      propAvatarGroup,
+      avatarGroupRef
+    };
+    return /* @__PURE__ */ React.createElement(AvatarContext.Provider, {
+      value: parentAvatar
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: cls,
+      style,
+      ref: avatarGroupRef
+    }, children));
+  };
+  AvatarGroup.displayName = "NutAvatarGroup";
+  var defaultProps$q = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    size: "",
+    shape: "round",
+    icon: "",
+    background: "#eee",
+    color: "#666",
+    fit: "cover",
+    src: "",
+    alt: ""
+  });
+  var classPrefix$7 = "nut-avatar";
+  var Avatar = function(props) {
+    var _ref = _object_spread({}, defaultProps$q, props), children = _ref.children, size = _ref.size, shape = _ref.shape, background = _ref.background, color = _ref.color, src = _ref.src, alt = _ref.alt, icon = _ref.icon, fit = _ref.fit, className = _ref.className, style = _ref.style, onClick = _ref.onClick, onError = _ref.onError, rest = _object_without_properties(_ref, [
+      "children",
+      "size",
+      "shape",
+      "background",
+      "color",
+      "src",
+      "alt",
+      "icon",
+      "fit",
+      "className",
+      "style",
+      "onClick",
+      "onError"
+    ]);
+    var _useState = _sliced_to_array(React.useState(0), 2), maxSum = _useState[0], setMaxSum = _useState[1];
+    var _useState1 = _sliced_to_array(React.useState(false), 2), showMax = _useState1[0], setShowMax = _useState1[1];
+    var _useState2 = _sliced_to_array(React.useState(1), 2), avatarIndex = _useState2[0], setAvatarIndex = _useState2[1];
+    var avatarRef = React.useRef(null);
+    var parent2 = React.useContext(AvatarContext);
+    var sizeValue = [
+      "large",
+      "normal",
+      "small"
+    ];
+    var propAvatarGroup = parent2.propAvatarGroup, avatarGroupRef = parent2.avatarGroupRef;
+    var _obj;
+    var classes = classNames((_obj = {}, _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal"), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal", "-round"), shape === "round" && true), _obj));
+    var cls = classNames(classPrefix$7, classes, className);
+    var styles = _object_spread({
+      width: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
+      height: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
+      backgroundColor: "".concat(background),
+      color,
+      marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : "",
+      zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === "right" ? "".concat(Math.abs(maxSum - avatarIndex)) : ""
+    }, style);
+    var maxStyles = {
+      backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
+      color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)
+    };
+    var avatarLength = React.useCallback(function(children2) {
+      var _avatarRef_current_dataset, _avatarRef_current;
+      for (var i2 = 0; i2 < children2.length; i2++) {
+        if (children2[i2] && children2[i2].classList && children2[i2].classList[0] === "nut-avatar") {
+          children2[i2].setAttribute("data-index", i2 + 1);
+        }
+      }
+      var index2 = Number(avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef_current = avatarRef.current) === null || _avatarRef_current === void 0 ? void 0 : (_avatarRef_current_dataset = _avatarRef_current.dataset) === null || _avatarRef_current_dataset === void 0 ? void 0 : _avatarRef_current_dataset.index);
+      var maxCount = (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || children2.length;
+      setMaxSum(children2.length);
+      setAvatarIndex(index2);
+      if (index2 === children2.length && index2 !== maxCount && children2.length > maxCount) {
+        setShowMax(true);
+      }
+    }, [
+      propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max
+    ]);
+    React.useEffect(function() {
+      var avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
+      if (avatarChildren) {
+        avatarLength(avatarChildren);
+      }
+    }, [
+      avatarLength,
+      avatarGroupRef
+    ]);
+    var errorEvent = function() {
+      onError && onError();
+    };
+    var clickAvatar = function(e2) {
+      onClick && onClick(e2);
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, (showMax || !(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
+      className: cls
+    }, rest), {
+      style: !showMax ? styles : maxStyles,
+      onClick: clickAvatar,
+      ref: avatarRef
+    }), (!(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement(React.Fragment, null, src && /* @__PURE__ */ React.createElement(Image$1, {
+      className: "nut-avatar-img",
+      src,
+      alt,
+      style: {
+        objectFit: fit
+      },
+      onError: errorEvent
+    }), /* @__PURE__ */ React.isValidElement(icon) ? /* @__PURE__ */ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
+      className: "".concat(icon.props.className || "", " nut-avatar-icon")
+    })) : null, children && /* @__PURE__ */ React.createElement("span", {
+      className: "nut-avatar-text"
+    }, children), !src && !icon && !children && /* @__PURE__ */ React.createElement(m, {
+      className: "nut-avatar-icon"
+    })), showMax && /* @__PURE__ */ React.createElement("div", {
+      className: "nut-avatar-text"
+    }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)))));
+  };
+  Avatar.displayName = "NutAvatar";
+  Avatar.Group = AvatarGroup;
   var defaultProps$p = _object_spread_props(_object_spread({}, ComponentDefaults), {
     strokeWidth: 5,
     radius: 50,
@@ -39339,57 +39369,50 @@ Please add \`${key2}Action\` when creating your handler.`);
       expanded,
       rotate
     ]);
-    var handleClick = function() {
-      if (!disabled) {
-        context2.updateValue(name2);
-      }
-    };
-    var onTransitionEnd = function() {
-      if (expanded) {
-        if (wrapperRef.current) {
-          wrapperRef.current.style.height = "";
-        }
-      }
-    };
-    var getOffsetHeight = function() {
-      var _contentRef_current;
-      var height2 = (_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.offsetHeight;
-      return height2 ? "".concat(height2, "px") : "";
-    };
-    var toggle = function() {
-      var start2 = expanded ? "0px" : getOffsetHeight();
-      if (wrapperRef.current) {
-        wrapperRef.current.style.height = start2;
-      }
-      requestAnimationFrame(function() {
-        requestAnimationFrame(function() {
-          var end = expanded ? getOffsetHeight() : "0px";
-          if (wrapperRef.current) {
-            wrapperRef.current.style.height = end;
-          }
+    var _useState = _sliced_to_array(React.useState(0), 2), tran = _useState[0], setTran = _useState[1];
+    var _useRefState = _sliced_to_array(useRefState(0), 2), currentHeight = _useRefState[0], setCurrentHeight = _useRefState[1];
+    var _useState1 = _sliced_to_array(React.useState(0), 2), wrapperHeight = _useState1[0], setWrapperHeight = _useState1[1];
+    var updateRectHeight = /* @__PURE__ */ function() {
+      var _ref2 = _async_to_generator(function() {
+        var height2;
+        return __generator(this, function(_state) {
+          height2 = contentRef.current.offsetHeight;
+          setCurrentHeight(height2);
+          setWrapperHeight(expanded ? height2 : 0);
+          setTimeout(function() {
+            setTran(1);
+          });
+          return [
+            2
+          ];
         });
       });
-    };
-    var init = React.useRef(true);
+      return function updateRectHeight2() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
     React.useEffect(function() {
-      if (init.current) {
-        init.current = false;
-        if (!expanded) {
-          wrapperRef.current.style.height = "0px";
-        }
-      } else {
-        toggle();
-      }
+      updateRectHeight();
     }, [
+      children,
       expanded
     ]);
+    var toggle = function() {
+      var end = !expanded ? currentHeight.current : 0;
+      setWrapperHeight(end);
+    };
+    var handleClick = function() {
+      if (!disabled) {
+        context2.updateValue(name2);
+        toggle();
+      }
+    };
+    var _obj;
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       className: classNames(classPrefix2, className),
       style
     }, rest), /* @__PURE__ */ React.createElement("div", {
-      className: classNames("".concat(classPrefix2, "-header"), {
-        disabled
-      }),
+      className: classNames("".concat(classPrefix2, "-header"), _define_property({}, "".concat(classPrefix2, "-header-disabled"), disabled)),
       onClick: handleClick
     }, /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-title")
@@ -39401,13 +39424,17 @@ Please add \`${key2}Action\` when creating your handler.`);
       className: "".concat(classPrefix2, "-icon"),
       style: iconStyle
     }, expandIcon || context2.expandIcon))), /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content"),
-      onTransitionEnd,
+      className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-content-wrapper"), true), _define_property(_obj, "".concat(classPrefix2, "-content-wrapper-tran"), true), _obj)),
+      style: tran ? {
+        height: wrapperHeight
+      } : {},
       ref: wrapperRef
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix2, "-content")
     }, /* @__PURE__ */ React.createElement("div", {
       ref: contentRef,
       className: "".concat(classPrefix2, "-content-text")
-    }, children)));
+    }, children))));
   };
   CollapseItem.displayName = "NutCollapseItem";
   var defaultProps$n = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -39992,7 +40019,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   var classPrefix$3 = "nut-indicator";
   var Indicator = function(props) {
     var maybeFixedWidth = function maybeFixedWidth2() {
-      if (total === 2 || type2 === "slide") {
+      if (type2 === "dualScreen" || type2 === "slide") {
         return "".concat(classPrefix$3, "-fixed-width");
       }
       return "";
@@ -42813,6 +42840,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   exports.Video = Video;
   exports.VirtualList = VirtualList;
   exports.WaterMark = WaterMark;
+  exports.destroyList = destroyList;
   exports.getDefaultConfig = getDefaultConfig;
   exports.setDefaultConfig = setDefaultConfig;
   exports.useConfig = useConfig;