@nutui/nutui-react 1.3.0 → 1.3.1-beta.0

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.0 Wed Aug 24 2022 16:38:05 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.1-beta.0 Wed Aug 31 2022 13:31:29 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -45,7 +45,7 @@ classname_production_min.cn = e$1, classname_production_min.withNaming = r$1;
   classname.exports = classname_production_min;
 }
 const cn = classname.exports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
-const defaultProps$1a = {
+const defaultProps$1j = {
   name: "",
   size: "",
   classPrefix: "nut-icon",
@@ -73,7 +73,7 @@ function Icon(props) {
     onClick,
     ...rest
   } = {
-    ...defaultProps$1a,
+    ...defaultProps$1j,
     ...props
   };
   const isImage = name ? name.indexOf("/") !== -1 : false;
@@ -107,9 +107,9 @@ function Icon(props) {
     children
   );
 }
-Icon.defaultProps = defaultProps$1a;
+Icon.defaultProps = defaultProps$1j;
 Icon.displayName = "NutIcon";
-const defaultProps$19 = {
+const defaultProps$1i = {
   className: "",
   color: "",
   shape: "round",
@@ -142,7 +142,7 @@ const Button = (props) => {
     style,
     ...rest
   } = {
-    ...defaultProps$19,
+    ...defaultProps$1i,
     ...props
   };
   const getStyle = useCallback(() => {
@@ -215,7 +215,7 @@ const Button = (props) => {
     name: icon
   }) : "", children));
 };
-Button.defaultProps = defaultProps$19;
+Button.defaultProps = defaultProps$1i;
 Button.displayName = "NutButton";
 function _setPrototypeOf(o, p2) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p3) {
@@ -677,7 +677,7 @@ function createReactContext(defaultValue, calculateChangedBits) {
         }
       }
     };
-    _proto.render = function render() {
+    _proto.render = function render2() {
       return this.props.children;
     };
     return Provider2;
@@ -725,7 +725,7 @@ function createReactContext(defaultValue, calculateChangedBits) {
         return defaultValue;
       }
     };
-    _proto2.render = function render() {
+    _proto2.render = function render2() {
       return onlyChild(this.props.children)(this.state.value);
     };
     return Consumer2;
@@ -1171,7 +1171,7 @@ var Router = /* @__PURE__ */ function(_React$Component) {
       this._pendingLocation = null;
     }
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     return /* @__PURE__ */ React__default.createElement(context.Provider, {
       value: {
         history: this.props.history,
@@ -1198,7 +1198,7 @@ var Router = /* @__PURE__ */ function(_React$Component) {
     return _this;
   }
   var _proto = MemoryRouter.prototype;
-  _proto.render = function render() {
+  _proto.render = function render2() {
     return /* @__PURE__ */ React__default.createElement(Router, {
       history: this.history,
       children: this.props.children
@@ -1224,7 +1224,7 @@ var Router = /* @__PURE__ */ function(_React$Component) {
     if (this.props.onUnmount)
       this.props.onUnmount.call(this, this);
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     return null;
   };
   return Lifecycle;
@@ -1297,7 +1297,7 @@ function isEmptyChildren(children) {
     return _React$Component.apply(this, arguments) || this;
   }
   var _proto = Route.prototype;
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var _this = this;
     return /* @__PURE__ */ React__default.createElement(context.Consumer, null, function(context$1) {
       !context$1 ? invariant(false) : void 0;
@@ -1307,13 +1307,13 @@ function isEmptyChildren(children) {
         location,
         match
       });
-      var _this$props = _this.props, children = _this$props.children, component = _this$props.component, render2 = _this$props.render;
+      var _this$props = _this.props, children = _this$props.children, component = _this$props.component, render3 = _this$props.render;
       if (Array.isArray(children) && isEmptyChildren(children)) {
         children = null;
       }
       return /* @__PURE__ */ React__default.createElement(context.Provider, {
         value: props
-      }, props.match ? children ? typeof children === "function" ? children(props) : children : component ? /* @__PURE__ */ React__default.createElement(component, props) : render2 ? render2(props) : null : typeof children === "function" ? children(props) : null);
+      }, props.match ? children ? typeof children === "function" ? children(props) : children : component ? /* @__PURE__ */ React__default.createElement(component, props) : render3 ? render3(props) : null : typeof children === "function" ? children(props) : null);
     });
   };
   return Route;
@@ -1377,7 +1377,7 @@ function noop$3() {
     context2.location = addBasename(basename, createLocation(location));
     context2.url = createURL(context2.location);
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var _this$props2 = this.props, _this$props2$basename = _this$props2.basename, basename = _this$props2$basename === void 0 ? "" : _this$props2$basename, _this$props2$context = _this$props2.context, context2 = _this$props2$context === void 0 ? {} : _this$props2$context, _this$props2$location = _this$props2.location, location = _this$props2$location === void 0 ? "/" : _this$props2$location, rest = _objectWithoutPropertiesLoose$3(_this$props2, ["basename", "context", "location"]);
     var history = {
       createHref: function createHref(path) {
@@ -1406,7 +1406,7 @@ function noop$3() {
     return _React$Component.apply(this, arguments) || this;
   }
   var _proto = Switch2.prototype;
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var _this = this;
     return /* @__PURE__ */ React__default.createElement(context.Consumer, null, function(context2) {
       !context2 ? invariant(false) : void 0;
@@ -1433,7 +1433,7 @@ var useContext = React__default.useContext;
 function useHistory() {
   return useContext(historyContext);
 }
-const defaultProps$18 = {
+const defaultProps$1h = {
   title: null,
   subTitle: null,
   desc: "",
@@ -1473,7 +1473,7 @@ const Cell = (props) => {
     linkSlot,
     ...rest
   } = {
-    ...defaultProps$18,
+    ...defaultProps$1h,
     ...props
   };
   const b2 = cn("cell");
@@ -1522,9 +1522,9 @@ const Cell = (props) => {
     className: b2("link")
   }) : linkSlot));
 };
-Cell.defaultProps = defaultProps$18;
+Cell.defaultProps = defaultProps$1h;
 Cell.displayName = "NutCell";
-const defaultProps$17 = {
+const defaultProps$1g = {
   title: "",
   desc: "",
   titleSlot: null,
@@ -1533,7 +1533,7 @@ const defaultProps$17 = {
 };
 const CellGroup = (props) => {
   const { children, classPrefix, title, desc, titleSlot, descSlot } = {
-    ...defaultProps$17,
+    ...defaultProps$1g,
     ...props
   };
   const b2 = cn("cell-group");
@@ -1547,7 +1547,7 @@ const CellGroup = (props) => {
     className: b2("wrap")
   }, children));
 };
-CellGroup.defaultProps = defaultProps$17;
+CellGroup.defaultProps = defaultProps$1g;
 CellGroup.displayName = "NutCellGroup";
 var classnames = { exports: {} };
 /*!
@@ -1909,7 +1909,7 @@ var Transition = /* @__PURE__ */ function(_React$Component) {
       setTimeout(this.nextCallback, timeout);
     }
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var status = this.state.status;
     if (status === UNMOUNTED) {
       return null;
@@ -2080,7 +2080,7 @@ var CSSTransition = /* @__PURE__ */ function(_React$Component) {
       removeClass(node, doneClassName);
     }
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var _this$props = this.props;
     _this$props.classNames;
     var props = _objectWithoutPropertiesLoose$3(_this$props, ["classNames"]);
@@ -2100,7 +2100,7 @@ CSSTransition.defaultProps = {
 };
 CSSTransition.propTypes = {};
 var CSSTransition$1 = CSSTransition;
-const defaultProps$16 = {
+const defaultProps$1f = {
   position: "center",
   transition: "",
   style: {},
@@ -2281,7 +2281,7 @@ const Popup = (props) => {
   }, [position]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderToContainer(teleport, renderNode()));
 };
-Popup.defaultProps = defaultProps$16;
+Popup.defaultProps = defaultProps$1f;
 Popup.displayName = "NutPopup";
 const zhCN = {
   save: "\u4FDD\u5B58",
@@ -2384,9 +2384,25 @@ const zhCN = {
     title4: "\u641C\u7D22\u6846\u6587\u672C\u8BBE\u7F6E",
     title5: "\u81EA\u5B9A\u4E49\u56FE\u6807\u8BBE\u7F6E",
     title6: "\u6570\u636E\u6539\u53D8\u76D1\u542C"
+  },
+  audio: {
+    back: "\u5FEB\u9000",
+    forward: "\u5FEB\u8FDB",
+    pause: "\u6682\u505C",
+    start: "\u5F00\u59CB",
+    mute: "\u9759\u97F3",
+    tips: "onPlayEnd\u4E8B\u4EF6\u5728loop=false\u65F6\u624D\u4F1A\u89E6\u53D1"
+  },
+  datepicker: {
+    year: "\u5E74",
+    month: "\u6708",
+    day: "\u65E5",
+    hour: "\u65F6",
+    min: "\u5206",
+    seconds: "\u79D2"
   }
 };
-const defaultProps$15 = {
+const defaultProps$1e = {
   locale: zhCN
 };
 const defaultConfigRef = {
@@ -2403,7 +2419,7 @@ const useConfig = () => {
 };
 const ConfigContext = createContext(null);
 const ConfigProvider = (props) => {
-  const { children, ...config2 } = { ...defaultProps$15, ...props };
+  const { children, ...config2 } = { ...defaultProps$1e, ...props };
   const parentConfig = useConfig();
   return /* @__PURE__ */ React__default.createElement(ConfigContext.Provider, {
     value: {
@@ -2412,25 +2428,25 @@ const ConfigProvider = (props) => {
     }
   }, children);
 };
-ConfigProvider.defaultProps = defaultProps$15;
+ConfigProvider.defaultProps = defaultProps$1e;
 ConfigProvider.displayName = "NutConfigProvider";
-const defaultProps$14 = {};
+const defaultProps$1d = {};
 const Layout = (props) => {
-  ({ ...defaultProps$14, ...props });
+  ({ ...defaultProps$1d, ...props });
   return /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-layout"
   }, "Layout");
 };
-Layout.defaultProps = defaultProps$14;
+Layout.defaultProps = defaultProps$1d;
 Layout.displayName = "NutLayout";
 const DataContext$2 = createContext({});
-const defaultProps$13 = {
+const defaultProps$1c = {
   span: "24",
   offset: "0",
   gutter: "0"
 };
 const Col = (props) => {
-  const { span, offset, children, onClick } = { ...defaultProps$13, ...props };
+  const { span, offset, children, onClick } = { ...defaultProps$1c, ...props };
   const [colName, setColName] = useState("");
   const [colStyle, setColStyle] = useState({});
   const { gutter } = useContext$1(DataContext$2);
@@ -2456,9 +2472,9 @@ const Col = (props) => {
     }
   }, children);
 };
-Col.defaultProps = defaultProps$13;
+Col.defaultProps = defaultProps$1c;
 Col.displayName = "NutCol";
-const defaultProps$12 = {
+const defaultProps$1b = {
   type: "",
   justify: "start",
   align: "flex-start",
@@ -2467,7 +2483,7 @@ const defaultProps$12 = {
 };
 const Row = (props) => {
   const { children, type, justify, align, wrap, gutter, onClick } = {
-    ...defaultProps$12,
+    ...defaultProps$1b,
     ...props
   };
   const prefixCls = "nut-row";
@@ -2501,9 +2517,9 @@ const Row = (props) => {
     children
   ));
 };
-Row.defaultProps = defaultProps$12;
+Row.defaultProps = defaultProps$1b;
 Row.displayName = "NutRow";
-const defaultProps$11 = {
+const defaultProps$1a = {
   contentPosition: "center",
   dashed: false,
   hairline: true,
@@ -2520,7 +2536,7 @@ const Divider = (props) => {
     direction,
     ...rest
   } = {
-    ...defaultProps$11,
+    ...defaultProps$1a,
     ...props
   };
   const dividerBem = cn("divider");
@@ -2541,9 +2557,153 @@ const Divider = (props) => {
     ...rest
   }, children);
 };
-Divider.defaultProps = defaultProps$11;
+Divider.defaultProps = defaultProps$1a;
 Divider.displayName = "NutDivider";
-const defaultProps$10 = {
+const defaultProps$19 = {
+  columnNum: 4,
+  border: true,
+  gutter: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  direction: "vertical",
+  iconSize: 28,
+  iconColor: ""
+};
+const Grid = (props) => {
+  useConfig();
+  const {
+    children,
+    columnNum,
+    border,
+    gutter,
+    center,
+    square,
+    reverse,
+    direction,
+    style,
+    iconSize,
+    iconColor,
+    className,
+    ...rest
+  } = { ...defaultProps$19, ...props };
+  const childrenDom = React__default.Children.toArray(children);
+  const pxCheck2 = (value) => {
+    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+  };
+  const b2 = cn("grid");
+  const rootClass = () => {
+    const prefixCls = b2();
+    return `${className} ${prefixCls} ${border && !gutter ? `${b2("border")}` : ""}`;
+  };
+  const rootStyle = () => {
+    let styleSelf = {};
+    if (style) {
+      styleSelf = style;
+    }
+    if (gutter) {
+      styleSelf.paddingLeft = pxCheck2(gutter);
+    }
+    return styleSelf;
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: rootClass(),
+    style: rootStyle(),
+    ...rest
+  }, childrenDom.map((item, idex) => {
+    return React__default.cloneElement(item, {
+      index: idex,
+      columnNum,
+      center,
+      border,
+      gutter,
+      square,
+      reverse,
+      direction,
+      parentIconSize: iconSize,
+      parentIconColor: iconColor
+    });
+  }));
+};
+Grid.defaultProps = defaultProps$19;
+Grid.displayName = "NutGrid";
+const defaultProps$18 = {
+  text: "",
+  icon: "",
+  iconSize: "",
+  iconColor: "",
+  parentIconSize: "",
+  parentIconColor: "",
+  columnNum: 4,
+  border: true,
+  gutter: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  direction: "vertical"
+};
+const GridItem = (props) => {
+  useConfig();
+  const {
+    children,
+    columnNum,
+    index: index2,
+    gutter,
+    square,
+    text,
+    icon,
+    iconColor,
+    iconSize,
+    parentIconSize,
+    parentIconColor,
+    border,
+    center,
+    reverse,
+    direction,
+    ...rest
+  } = { ...defaultProps$18, ...props };
+  const b2 = cn("grid-item");
+  const pxCheck2 = (value) => {
+    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+  };
+  const rootStyle = () => {
+    const style = {
+      flexBasis: `${100 / +columnNum}%`
+    };
+    if (square) {
+      style.paddingTop = `${100 / +columnNum}%`;
+    } else if (gutter) {
+      style.paddingRight = pxCheck2(gutter);
+      if (index2 >= columnNum) {
+        style.marginTop = pxCheck2(gutter);
+      }
+    }
+    return style;
+  };
+  const contentClass = () => {
+    return `${b2("content")} ${border && b2("content--border")} ${border && gutter && b2("content--surround")}  ${center && b2("content--center")} ${square && b2("content--square")} ${reverse && b2("content--reverse")} ${!!direction && b2(`content--${direction}`)}
+      `;
+  };
+  const isIconName = () => {
+    return typeof icon === "string";
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: b2(),
+    style: rootStyle(),
+    ...rest
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: contentClass()
+  }, icon && isIconName() ? /* @__PURE__ */ React__default.createElement(Icon, {
+    name: icon,
+    size: iconSize || parentIconSize,
+    color: iconColor || parentIconColor
+  }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, icon), text && /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-grid-item__text"
+  }, text), children && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children)));
+};
+GridItem.defaultProps = defaultProps$18;
+GridItem.displayName = "NutGridItem";
+const defaultProps$17 = {
   title: "",
   desc: "",
   leftShow: true,
@@ -2576,7 +2736,7 @@ const NavBar = (props) => {
     onClickBack,
     onClickRight
   } = {
-    ...defaultProps$10,
+    ...defaultProps$17,
     ...props
   };
   const b2 = cn("navbar");
@@ -2641,9 +2801,9 @@ const NavBar = (props) => {
     className: `${b2("")}--placeholder`
   }, renderWrapper()) : renderWrapper());
 };
-NavBar.defaultProps = defaultProps$10;
+NavBar.defaultProps = defaultProps$17;
 NavBar.displayName = "NutNavBar";
-const defaultProps$$ = {
+const defaultProps$16 = {
   fixednavClass: "nut-fixednav",
   activeText: "",
   unActiveText: "",
@@ -2669,7 +2829,7 @@ const FixedNav = (props) => {
     slotList,
     slotBtn,
     ...rest
-  } = { ...defaultProps$$, ...props };
+  } = { ...defaultProps$16, ...props };
   const b2 = cn("fixednav");
   const classes = classNames(
     {
@@ -2720,9 +2880,9 @@ const FixedNav = (props) => {
     className: "text"
   }, visible ? activeText || locale.fixednav.activeText : unActiveText || locale.fixednav.unActiveText))));
 };
-FixedNav.defaultProps = defaultProps$$;
+FixedNav.defaultProps = defaultProps$16;
 FixedNav.displayName = "NutFixedNav";
-const defaultProps$_ = {
+const defaultProps$15 = {
   visible: 0,
   bottom: false,
   size: 20,
@@ -2747,7 +2907,7 @@ const Tabbar = (props) => {
     style,
     tabSwitch
   } = {
-    ...defaultProps$_,
+    ...defaultProps$15,
     ...props
   };
   const b2 = cn("tabbar");
@@ -2782,9 +2942,9 @@ const Tabbar = (props) => {
     return React__default.cloneElement(child, childProps);
   }));
 };
-Tabbar.defaultProps = defaultProps$_;
+Tabbar.defaultProps = defaultProps$15;
 Tabbar.displayName = "NutTabbar";
-const defaultProps$Z = {
+const defaultProps$14 = {
   dot: false,
   size: "",
   classPrefix: "nut-icon",
@@ -2816,7 +2976,7 @@ const TabbarItem = (props) => {
     index: index2,
     handleClick: handleClick2
   } = {
-    ...defaultProps$Z,
+    ...defaultProps$14,
     ...props
   };
   const b2 = cn("tabbar-item");
@@ -2858,7 +3018,7 @@ const TabbarItem = (props) => {
   }, tabTitle)));
 };
 const elevatorContext = createContext({});
-const defaultProps$Y = {
+const defaultProps$13 = {
   height: "200px",
   acceptKey: "title",
   indexList: [],
@@ -2881,7 +3041,7 @@ const Elevator = (props) => {
     children,
     ...rest
   } = {
-    ...defaultProps$Y,
+    ...defaultProps$13,
     ...props
   };
   const b2 = cn("elevator");
@@ -2949,9 +3109,10 @@ const Elevator = (props) => {
     const firstTouch = e2.touches[0];
     touchState.current.y2 = firstTouch.pageY;
     const delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
-    const cacheIndex = state.current.anchorIndex + delta;
+    const cacheIndex = state.current.anchorIndex + Math.ceil(delta);
     setCodeIndex(cacheIndex);
     scrollTo(cacheIndex);
+    e2.preventDefault();
   };
   const touchEnd = () => {
     resetScrollState();
@@ -3024,6 +3185,15 @@ const Elevator = (props) => {
       return;
     state.current.fixedTop = fixedTop;
   }, [state.current.diff, titleHeight]);
+  const refIndexBar = useRef(null);
+  useEffect(() => {
+    refIndexBar.current && refIndexBar.current.addEventListener("touchmove", touchMove, {
+      passive: false
+    });
+    return () => {
+      refIndexBar.current && refIndexBar.current.removeEventListener("touchmove", touchMove);
+    };
+  }, []);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `${b2()} ${className}`,
     ...rest
@@ -3057,9 +3227,9 @@ const Elevator = (props) => {
   }))), indexList.length && scrollStart ? /* @__PURE__ */ React__default.createElement("div", {
     className: b2("code--current", { current: true })
   }, indexList[codeIndex][acceptKey]) : null, /* @__PURE__ */ React__default.createElement("div", {
+    ref: refIndexBar,
     className: b2("bars"),
-    onTouchStart: (event) => touchStart(event),
-    onTouchMove: (event) => touchMove(event)
+    onTouchStart: (event) => touchStart(event)
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: b2("bars__inner")
   }, indexList.map((item, index2) => {
@@ -3073,9 +3243,9 @@ const Elevator = (props) => {
     }, item[acceptKey]);
   }))));
 };
-Elevator.defaultProps = defaultProps$Y;
+Elevator.defaultProps = defaultProps$13;
 Elevator.displayName = "NutElevator";
-const defaultProps$X = {
+const defaultProps$12 = {
   defaultValue: 1,
   mode: "multi",
   prevText: "",
@@ -3092,7 +3262,7 @@ const defaultProps$X = {
 };
 const Pagination = (props) => {
   const { locale } = useConfig();
-  ({ ...defaultProps$X, ...props });
+  ({ ...defaultProps$12, ...props });
   const {
     modelValue,
     mode,
@@ -3209,7 +3379,7 @@ const Pagination = (props) => {
     onClick: (e2) => selectPage(Number(currentPage) + 1, true)
   }, nextText || locale.pagination.next));
 };
-Pagination.defaultProps = defaultProps$X;
+Pagination.defaultProps = defaultProps$12;
 Pagination.displayName = "NutPagination";
 class Title {
   constructor() {
@@ -3219,7 +3389,7 @@ class Title {
     this.index = 0;
   }
 }
-const defaultProps$W = {
+const defaultProps$11 = {
   value: 0,
   color: "",
   background: "",
@@ -3254,7 +3424,7 @@ const Tabs = (props) => {
     className,
     autoHeight,
     ...rest
-  } = { ...defaultProps$W, ...props };
+  } = { ...defaultProps$11, ...props };
   const [currentItem, setCurrentItem] = useState({ index: 0 });
   const titles = useRef([]);
   useEffect(() => {
@@ -3366,9 +3536,9 @@ const Tabs = (props) => {
     return React__default.cloneElement(child, childProps);
   })));
 };
-Tabs.defaultProps = defaultProps$W;
+Tabs.defaultProps = defaultProps$11;
 Tabs.displayName = "NutTabs";
-const defaultProps$V = {
+const defaultProps$10 = {
   title: "",
   paneKey: "",
   activeKey: "",
@@ -3376,7 +3546,7 @@ const defaultProps$V = {
 };
 const TabPane = (props) => {
   const { children, paneKey, activeKey, autoHeightClassName } = {
-    ...defaultProps$V,
+    ...defaultProps$10,
     ...props
   };
   const b2 = cn("tabpane");
@@ -3391,7 +3561,7 @@ const TabPane = (props) => {
     className: classes
   }, children);
 };
-const defaultProps$U = {
+const defaultProps$$ = {
   size: 3,
   current: 1,
   block: false,
@@ -3411,7 +3581,7 @@ const Indicator = (props) => {
     vertical,
     ...rest
   } = {
-    ...defaultProps$U,
+    ...defaultProps$$,
     ...props
   };
   const b2 = cn("indicator");
@@ -3445,7 +3615,7 @@ const Indicator = (props) => {
     ...rest
   }, renderEles());
 };
-Indicator.defaultProps = defaultProps$U;
+Indicator.defaultProps = defaultProps$$;
 Indicator.displayName = "NutIndicator";
 const handleClick = (e2) => {
   e2.stopPropagation();
@@ -3461,7 +3631,7 @@ const handleClick = (e2) => {
   }
 };
 const OffsetContext = createContext(20);
-const defaultProps$T = {
+const defaultProps$_ = {
   showhead: false,
   position: "left",
   width: "80%"
@@ -3479,7 +3649,7 @@ const SideNavBar = (props) => {
     handleClose,
     ...rest
   } = {
-    ...defaultProps$T,
+    ...defaultProps$_,
     ...props
   };
   const offset = props.offset ? Number(props.offset) : 20;
@@ -3507,14 +3677,14 @@ const SideNavBar = (props) => {
     className: "nut-sidenavbar__content"
   }, children))))));
 };
-SideNavBar.defaultProps = defaultProps$T;
+SideNavBar.defaultProps = defaultProps$_;
 SideNavBar.displayName = "NutSideNavBar";
-const defaultProps$S = {
+const defaultProps$Z = {
   open: true
 };
 const SubSideNavBar = (props) => {
   const { title, ikey, children, titleClick, open, ...rest } = {
-    ...defaultProps$S,
+    ...defaultProps$Z,
     ...props
   };
   const offset = useContext$1(OffsetContext);
@@ -3585,6 +3755,274 @@ const SideNavBarItem = (props) => {
     ...rest
   }, title);
 };
+const defaultProps$Y = {
+  className: "",
+  style: {},
+  activeColor: "#F2270C",
+  closeOnClickOverlay: true,
+  scrollFixed: false,
+  lockScroll: true,
+  titleIcon: ""
+};
+const Menu = (props) => {
+  const {
+    className,
+    titleIcon,
+    scrollFixed,
+    lockScroll,
+    closeOnClickOverlay,
+    children,
+    activeColor,
+    ...rest
+  } = {
+    ...defaultProps$Y,
+    ...props
+  };
+  const parentRef = useRef(null);
+  const onScroll = () => {
+  };
+  useEffect(() => {
+    if (scrollFixed) {
+      window.addEventListener("scroll", onScroll);
+    }
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  const [itemShow, setItemShow] = useState([]);
+  const [itemTitle, setItemTitle] = useState([]);
+  const toggleItemShow = (index2) => {
+    itemShow[index2] = !itemShow[index2];
+    const temp = itemShow.map((i, idx) => idx === index2 ? i : false);
+    setItemShow([...temp]);
+  };
+  const hideItemShow = (index2) => {
+    itemShow[index2] = false;
+    setItemShow([...itemShow]);
+  };
+  const updateTitle = (text, index2) => {
+    itemTitle[index2] = text;
+    setItemTitle([...itemTitle]);
+  };
+  const parent = () => {
+    return parentRef;
+  };
+  const cloneChildren = () => {
+    return React__default.Children.map(children, (child, index2) => {
+      return React__default.cloneElement(child, {
+        showPopup: itemShow[index2],
+        orderKey: index2,
+        activeColor,
+        parent: {
+          closeOnClickOverlay,
+          lockScroll,
+          toggleItemShow,
+          updateTitle,
+          hideItemShow,
+          parent
+        }
+      });
+    });
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: `nut-menu ${className}`,
+    ...rest,
+    ref: parentRef
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: `nut-menu__bar ${itemShow.includes(true) ? "opened" : ""} ${className}`
+  }, React__default.Children.toArray(children).map((child, index2) => {
+    if (!child)
+      return null;
+    const { disabled, title, value, direction, options: options2 } = child.props;
+    const currentTitle = options2 == null ? void 0 : options2.filter(
+      (option) => option.value === value
+    );
+    function finallyTitle() {
+      if (title)
+        return title;
+      if (itemTitle && itemTitle[index2])
+        return itemTitle[index2];
+      if (currentTitle && currentTitle[0] && currentTitle[0].text)
+        return currentTitle[0].text;
+      return "";
+    }
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `nut-menu__item ${classNames({
+        active: itemShow[index2],
+        disabled
+      })}`,
+      style: { color: itemShow[index2] ? activeColor : "" },
+      key: index2,
+      onClick: () => {
+        !disabled && toggleItemShow(index2);
+      }
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: `nut-menu__title ${classNames({
+        active: itemShow[index2],
+        disabled
+      })}`
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-menu__title-text"
+    }, finallyTitle()), /* @__PURE__ */ React__default.createElement(Icon, {
+      className: "nut-menu__title-icon",
+      size: "10",
+      name: titleIcon || (direction === "up" ? "arrow-up" : "down-arrow")
+    })));
+  })), cloneChildren());
+};
+Menu.defaultProps = defaultProps$Y;
+Menu.displayName = "NutMenu";
+const defaultProps$X = {
+  className: "",
+  style: {},
+  columns: 1,
+  direction: "down",
+  optionsIcon: "Check",
+  activeTitleClass: "",
+  inactiveTitleClass: "",
+  iconClassPrefix: "nut-icon",
+  fontClassName: "nutui-iconfont",
+  onChange: (value) => void 0
+};
+const MenuItem = (props) => {
+  useConfig();
+  const mergedProps = { ...defaultProps$X, ...props };
+  const {
+    className,
+    style,
+    options: options2,
+    value,
+    columns,
+    title,
+    iconClassPrefix,
+    fontClassName,
+    optionsIcon,
+    direction,
+    onChange,
+    activeTitleClass,
+    inactiveTitleClass,
+    children
+  } = {
+    ...defaultProps$X,
+    ...props
+  };
+  const { activeColor, showPopup, parent, orderKey } = mergedProps;
+  const [_showPopup, setShowPopup] = useState(showPopup);
+  const [_value, setValue] = useState(value);
+  useEffect(() => {
+    setShowPopup(showPopup);
+  }, [showPopup]);
+  useEffect(() => {
+    getParentOffset();
+  }, [_showPopup]);
+  const getIconCName = (optionVal, value2) => {
+    return classNames({
+      [activeTitleClass]: optionVal === value2,
+      [inactiveTitleClass]: optionVal !== value2
+    });
+  };
+  const setTitle = (text) => {
+    if (!title) {
+      parent.updateTitle(text, orderKey);
+    }
+  };
+  const handleClick2 = (item) => {
+    parent.toggleItemShow(orderKey);
+    setTitle(item.text);
+    setValue(item.value);
+    onChange && onChange(item);
+  };
+  const [position, setPosition] = useState({
+    top: 0,
+    height: 0
+  });
+  const getParentOffset = () => {
+    setTimeout(() => {
+      const p2 = parent.parent().current;
+      const rect = p2.getBoundingClientRect();
+      console.log(rect, p2.offsetTop, window.screenTop);
+      setPosition({
+        height: rect.height,
+        top: rect.top
+      });
+    });
+  };
+  const isShow = () => {
+    if (_showPopup)
+      return {};
+    return { display: "none" };
+  };
+  const getPosition = () => {
+    return direction === "down" ? { top: `${position.top + position.height}px` } : { bottom: `${window.innerHeight - position.top}px`, top: "auto" };
+  };
+  const placeholderStyle = () => {
+    if (direction === "down") {
+      return {
+        height: `${position.top + position.height}px`,
+        ...isShow(),
+        ...style
+      };
+    }
+    return {
+      height: `${window.innerHeight - position.top}px`,
+      top: "auto",
+      ...isShow(),
+      ...style
+    };
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
+    className: `placeholder-element ${classNames({
+      up: direction === "up"
+    })} ${className}`,
+    style: placeholderStyle(),
+    onClick: () => parent.toggleItemShow(orderKey)
+  }), /* @__PURE__ */ React__default.createElement(Overlay, {
+    overlayClass: "nut-menu__overlay",
+    style: getPosition(),
+    lockScroll: parent.lockScroll,
+    visible: _showPopup,
+    closeOnClickOverlay: parent.closeOnClickOverlay,
+    onClick: () => {
+      parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+    }
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-menu-item__wrap",
+    style: {
+      ...getPosition(),
+      ...isShow()
+    }
+  }, /* @__PURE__ */ React__default.createElement(CSSTransition$1, {
+    in: _showPopup,
+    timeout: 100,
+    classNames: "menu-item"
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-menu-item__content"
+  }, options2 == null ? void 0 : options2.map((item, index2) => {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `nut-menu-item__option ${classNames({
+        active: item.value === _value
+      })}`,
+      key: item.text,
+      style: {
+        flexBasis: `${100 / columns}%`
+      },
+      onClick: () => {
+        handleClick2(item);
+      }
+    }, item.value === _value ? /* @__PURE__ */ React__default.createElement(Icon, {
+      className: getIconCName(item.value, value),
+      name: optionsIcon,
+      classPrefix: iconClassPrefix,
+      fontClassName,
+      color: activeColor
+    }) : null, /* @__PURE__ */ React__default.createElement("div", {
+      className: getIconCName(item.value, value),
+      style: {
+        color: `${item.value === _value ? activeColor : ""}`
+      }
+    }, item.text));
+  }), children))));
+};
+MenuItem.defaultProps = defaultProps$X;
+MenuItem.displayName = "NutMenuItem";
 const MIN_DISTANCE = 10;
 function getDirection(x2, y2) {
   if (x2 > y2 && x2 > MIN_DISTANCE) {
@@ -3679,6 +4117,29 @@ const getRect = (elementRef) => {
     height: 0
   };
 };
+let createRoot;
+try {
+  const mainVersion = Number((ReactDOM.version || "").split(".")[0]);
+  if (mainVersion >= 18 && ReactDOM.createRoot) {
+    createRoot = ReactDOM.createRoot;
+  }
+} catch (e2) {
+  console.log(e2);
+}
+function legacyRender(node, container) {
+  ReactDOM.render(node, container);
+}
+function concurrentRender(node, container) {
+  const root = ReactDOM.createRoot(container);
+  root.render(node);
+}
+function render(node, container) {
+  if (createRoot) {
+    concurrentRender(node, container);
+    return;
+  }
+  legacyRender(node, container);
+}
 class Notification$1 extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -3795,7 +4256,7 @@ Notification$1.newInstance = (properties, callback) => {
       }
     });
   }
-  ReactDOM.render(/* @__PURE__ */ React.createElement(Notification$1, {
+  render(/* @__PURE__ */ React.createElement(Notification$1, {
     ...properties,
     ref
   }), element);
@@ -3881,7 +4342,7 @@ var Toast = {
     }
   }
 };
-const defaultProps$R = {
+const defaultProps$W = {
   range: false,
   hiddenRange: false,
   hiddenTag: false,
@@ -3912,8 +4373,8 @@ const Range = (props) => {
     change,
     dragStart,
     dragEnd
-  } = { ...defaultProps$R, ...props };
-  let { min, max, step } = { ...defaultProps$R, ...props };
+  } = { ...defaultProps$W, ...props };
+  let { min, max, step } = { ...defaultProps$W, ...props };
   min = Number(min);
   max = Number(max);
   step = Number(step);
@@ -4186,7 +4647,7 @@ const Range = (props) => {
       role: "slider",
       key: index2,
       className: `${index2 === 0 ? "nut-range-button-wrapper-left" : ""}
-              ${index2 === 1 ? "nut-range-button-wrapper-right" : ""}`,
+                  ${index2 === 1 ? "nut-range-button-wrapper-right" : ""}`,
       tabIndex: disabled ? -1 : 0,
       "aria-valuemin": +min,
       "aria-valuenow": curValue(index2),
@@ -4248,7 +4709,7 @@ const Range = (props) => {
     className: "max"
   }, +max) : null);
 };
-Range.defaultProps = defaultProps$R;
+Range.defaultProps = defaultProps$W;
 Range.displayName = "NutRange";
 const Utils = {
   isLeapYear(y2) {
@@ -4342,7 +4803,7 @@ function requestAniFrame() {
   };
 }
 var requestAniFrame$1 = requestAniFrame();
-const defaultProps$Q = {
+const defaultProps$V = {
   type: "one",
   isAutoBackFill: false,
   poppable: true,
@@ -4351,14 +4812,25 @@ const defaultProps$Q = {
   defaultValue: "",
   startDate: Utils.getDay(0),
   endDate: Utils.getDay(365),
+  showToday: true,
+  startText: "\u5F00\u59CB",
+  endText: "\u7ED3\u675F",
+  confirmText: "\u786E\u8BA4",
+  showTitle: true,
+  showSubTitle: true,
+  toDateAnimation: true,
+  onBtn: void 0,
+  onDay: void 0,
+  onTopInfo: void 0,
+  onBottomInfo: void 0,
   onChoose: (data) => {
   },
   onUpdate: () => {
   },
-  onClose: () => {
+  onSelected: (data) => {
   }
 };
-const CalendarItem = (props) => {
+const CalendarItem = React__default.forwardRef((props, ref) => {
   const { locale } = useConfig();
   const {
     type,
@@ -4366,18 +4838,31 @@ const CalendarItem = (props) => {
     poppable,
     title,
     defaultValue,
-    startDate,
-    endDate,
+    showToday,
+    startText,
+    endText,
+    confirmText,
+    showTitle,
+    showSubTitle,
+    toDateAnimation,
+    onBtn,
+    onDay,
+    onTopInfo,
+    onBottomInfo,
     onChoose,
     onUpdate,
-    onClose
-  } = { ...defaultProps$Q, ...props };
+    onSelected
+  } = { ...defaultProps$V, ...props };
   const weeks = locale.calendaritem.weekdays;
   const [yearMonthTitle, setYearMonthTitle] = useState("");
-  const [unLoadPrev, setUnLoadPrev] = useState(false);
   const [monthsData, setMonthsData] = useState([]);
+  const [translateY, setTranslateY] = useState(0);
+  const [monthDefaultRange, setMonthDefaultRange] = useState([]);
   const [state] = useState({
     currDate: "",
+    propStartDate: "",
+    propEndDate: "",
+    unLoadPrev: false,
     touchParams: {
       startY: 0,
       endY: 0,
@@ -4387,7 +4872,6 @@ const CalendarItem = (props) => {
       lastTime: 0
     },
     transformY: 0,
-    translateY: 0,
     scrollDistance: 0,
     defaultData: [],
     chooseData: [],
@@ -4395,12 +4879,17 @@ const CalendarItem = (props) => {
     dayPrefix: "calendar-month-day",
     startData: "",
     endData: "",
-    isRange: type === "range",
-    timer: 0
+    isRange: props.type === "range",
+    timer: 0,
+    currentIndex: 0,
+    avgHeight: 0,
+    monthsNum: 0
   });
   const weeksPanel = useRef(null);
   const months = useRef(null);
   const monthsPanel = useRef(null);
+  const viewArea = useRef(null);
+  let viewHeight = 0;
   const b2 = cn("calendar");
   const classes = classNames(
     {
@@ -4426,23 +4915,29 @@ const CalendarItem = (props) => {
   const isEnd = (currDate) => {
     return Utils.isEqual(state.currDate[1], currDate);
   };
-  const getCurrDate = (day, month, isRange) => {
-    return isRange ? `${month.curData[3]}-${month.curData[4]}-${Utils.getNumTwoBit(
-      +day.day
-    )}` : `${month.curData[0]}-${month.curData[1]}-${Utils.getNumTwoBit(
+  const isMultiple = (currDate) => {
+    if (state.currDate.length > 0) {
+      return state.currDate.some((item) => {
+        return Utils.isEqual(item, currDate);
+      });
+    }
+    return false;
+  };
+  const getCurrDate = (day, month) => {
+    return `${month.curData[0]}-${month.curData[1]}-${Utils.getNumTwoBit(
       +day.day
     )}`;
   };
-  const getClass = (day, month, isRange) => {
-    const currDate = getCurrDate(day, month, isRange);
+  const getClass = (day, month) => {
+    const currDate = getCurrDate(day, month);
     if (day.type === "curr") {
-      if (!state.isRange && Utils.isEqual(state.currDate, currDate) || state.isRange && (isStart(currDate) || isEnd(currDate))) {
+      if (Utils.isEqual(state.currDate, currDate) || type === "range" && (isStart(currDate) || isEnd(currDate)) || type === "multiple" && isMultiple(currDate)) {
         return `${state.dayPrefix}-active`;
       }
-      if (startDate && Utils.compareDate(currDate, startDate) || endDate && Utils.compareDate(endDate, currDate)) {
+      if (state.propStartDate && Utils.compareDate(currDate, state.propStartDate) || state.propEndDate && Utils.compareDate(state.propEndDate, currDate)) {
         return `${state.dayPrefix}-disabled`;
       }
-      if (state.isRange && Array.isArray(state.currDate) && Object.values(state.currDate).length === 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
+      if (type === "range" && Array.isArray(state.currDate) && Object.values(state.currDate).length === 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
         return `${state.dayPrefix}-choose`;
       }
       return null;
@@ -4457,56 +4952,86 @@ const CalendarItem = (props) => {
     return Utils.isEqual(date, Utils.date2Str(new Date()));
   };
   const confirm2 = () => {
-    if (state.isRange && state.chooseData.length === 2 || !state.isRange) {
-      onChoose && onChoose(state.chooseData);
+    const { type: type2 } = props;
+    if (type2 === "range" && state.chooseData.length === 2 || type2 !== "range") {
+      const chooseData = state.chooseData.slice(0);
+      onChoose && onChoose(chooseData);
       if (poppable) {
         onUpdate && onUpdate();
       }
     }
   };
-  const chooseDay = (day, month, isFirst, isRange) => {
-    if (getClass(day, month, isRange) !== `${state.dayPrefix}-disabled`) {
-      let days = [...month.curData];
-      days = isRange ? days.splice(3) : days.splice(0, 3);
+  const chooseDay = (day, month, isFirst) => {
+    if (getClass(day, month) !== `${state.dayPrefix}-disabled`) {
+      const { type: type2 } = props;
+      const days = [...month.curData];
       days[2] = typeof day.day === "number" ? Utils.getNumTwoBit(day.day) : day.day;
       days[3] = `${days[0]}-${days[1]}-${days[2]}`;
       days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
-      if (!state.isRange) {
-        state.currDate = days[3];
-        state.chooseData = [...days];
-      } else {
-        if (Object.values(state.currDate).length === 2) {
-          state.currDate = [days[3]];
-        } else if (Utils.compareDate(state.currDate[0], days[3])) {
-          Array.isArray(state.currDate) && state.currDate.push(days[3]);
+      if (type2 === "multiple") {
+        if (state.currDate.length > 0) {
+          let hasIndex = "";
+          state.currDate.forEach((item, index2) => {
+            if (item === days[3]) {
+              hasIndex = index2;
+            }
+          });
+          if (isFirst) {
+            state.chooseData.push([...days]);
+          } else if (hasIndex !== "") {
+            state.currDate.splice(hasIndex, 1);
+            state.chooseData.splice(hasIndex, 1);
+          } else {
+            state.currDate.push(days[3]);
+            state.chooseData.push([...days]);
+          }
+        } else {
+          state.currDate = [days[3]];
+          state.chooseData = [[...days]];
+        }
+      } else if (type2 === "range") {
+        const curDataLength = Object.values(state.currDate).length;
+        if (curDataLength === 2 || curDataLength === 0) {
+          state.currDate = [days[3]];
+        } else if (Utils.compareDate(state.currDate[0], days[3])) {
+          Array.isArray(state.currDate) && state.currDate.push(days[3]);
         } else {
           Array.isArray(state.currDate) && state.currDate.unshift(days[3]);
         }
         if (state.chooseData.length === 2 || !state.chooseData.length) {
-          state.chooseData = [...days];
-        } else if (Utils.compareDate(state.chooseData[3], days[3])) {
-          state.chooseData = [[...state.chooseData], [...days]];
+          state.chooseData = [[...days]];
+        } else if (Utils.compareDate(state.chooseData[0][3], days[3])) {
+          state.chooseData = [...state.chooseData, [...days]];
         } else {
-          state.chooseData = [[...days], [...state.chooseData]];
+          state.chooseData = [[...days], ...state.chooseData];
         }
+      } else {
+        state.currDate = days[3];
+        state.chooseData = [...days];
       }
-      if (isAutoBackFill && !isFirst) {
-        confirm2();
+      if (!isFirst) {
+        onSelected && onSelected(state.chooseData);
+        if (isAutoBackFill || !poppable) {
+          confirm2();
+        }
       }
       setMonthsData(state.monthsData.slice());
     }
   };
   const isStartTip = (day, month) => {
-    if (isActive(day, month)) {
-      return isStart(getCurrDate(day, month));
+    return isActive(day, month) && isStart(getCurrDate(day, month));
+  };
+  const isEndTip = (day, month) => {
+    if (state.currDate.length >= 2 && isEnd(getCurrDate(day, month))) {
+      return isActive(day, month);
     }
     return false;
   };
-  const isEndTip = (day, month) => {
-    if (isStartTip(day, month)) {
-      return false;
+  const rangeTip = () => {
+    if (state.currDate.length >= 2) {
+      return Utils.isEqual(state.currDate[0], state.currDate[1]);
     }
-    return isActive(day, month);
+    return false;
   };
   const getCurrData = (type2) => {
     const monthData = type2 === "prev" ? state.monthsData[0] : state.monthsData[state.monthsData.length - 1];
@@ -4528,20 +5053,45 @@ const CalendarItem = (props) => {
       Utils.getMonthDays(String(year), String(month))
     ];
   };
-  const getDaysStatus = (days, type2) => {
+  const getDaysStatus = (days, type2, dateInfo) => {
+    const { year, month } = dateInfo;
     if (type2 === "prev" && days >= 7) {
       days -= 7;
     }
     return Array.from(Array(days), (v2, k2) => {
       return {
         day: k2 + 1,
-        type: type2
+        type: type2,
+        year,
+        month
       };
     });
   };
+  const getPreDaysStatus = (days, type2, dateInfo, preCurrMonthDays) => {
+    const { year, month } = dateInfo;
+    if (type2 === "prev" && days >= 7) {
+      days -= 7;
+    }
+    const months2 = Array.from(Array(preCurrMonthDays), (v2, k2) => {
+      return {
+        day: k2 + 1,
+        type: type2,
+        year,
+        month
+      };
+    });
+    return months2.slice(preCurrMonthDays - days);
+  };
   const getMonth = (curData, type2) => {
     const preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
+    let preMonth = +curData[1] - 1;
+    let preYear = curData[0];
+    if (preMonth <= 0) {
+      preMonth = 12;
+      preYear += 1;
+    }
     const currMonthDays = Utils.getMonthDays(curData[0], curData[1]);
+    const preCurrMonthDays = Utils.getMonthDays(`${preYear}`, `${preMonth}`);
     const title2 = {
       year: curData[0],
       month: curData[1]
@@ -4550,10 +5100,21 @@ const CalendarItem = (props) => {
       curData,
       title: locale.calendaritem.monthTitle(title2.year, title2.month),
       monthData: [
-        ...getDaysStatus(preMonthDays, "prev"),
-        ...getDaysStatus(currMonthDays, "curr")
+        ...getPreDaysStatus(
+          preMonthDays,
+          "prev",
+          { month: preMonth, year: preYear },
+          preCurrMonthDays
+        ),
+        ...getDaysStatus(currMonthDays, "curr", title2)
       ]
     };
+    monthInfo.cssHeight = 39 + (monthInfo.monthData.length > 35 ? 384 : 320);
+    let cssScrollHeight = 0;
+    if (state.monthsData.length > 0) {
+      cssScrollHeight = state.monthsData[state.monthsData.length - 1].cssScrollHeight + state.monthsData[state.monthsData.length - 1].cssHeight;
+    }
+    monthInfo.cssScrollHeight = cssScrollHeight;
     if (type2 === "next") {
       if (!state.endData || !Utils.compareDate(
         `${state.endData[0]}-${state.endData[1]}-${Utils.getMonthDays(
@@ -4569,187 +5130,260 @@ const CalendarItem = (props) => {
       `${state.startData[0]}-${state.startData[1]}-01`
     )) {
       state.monthsData.unshift(monthInfo);
-    } else {
-      setUnLoadPrev(true);
     }
     setMonthsData(state.monthsData);
   };
-  const loadScroll = () => {
-    if (!props.poppable) {
-      return false;
-    }
-    requestAniFrame$1(() => {
-      if ((weeksPanel == null ? void 0 : weeksPanel.current) && (monthsPanel == null ? void 0 : monthsPanel.current)) {
-        const top = weeksPanel == null ? void 0 : weeksPanel.current.getBoundingClientRect().bottom;
-        const monthsDoms = monthsPanel.current.getElementsByClassName("calendar-month");
-        for (let i = 0; i < monthsDoms.length; i++) {
-          if (monthsDoms[i].getBoundingClientRect().top <= top && monthsDoms[i].getBoundingClientRect().bottom >= top) {
-            setYearMonthTitle(state.monthsData[i].title);
-          } else if (state.scrollDistance === 0) {
-            setYearMonthTitle(state.monthsData[0].title);
-          }
-        }
-      }
-    });
-  };
-  const setTransform = (translateY = 0, type2, time = 1e3) => {
-    if (monthsPanel == null ? void 0 : monthsPanel.current) {
-      if (type2 === "end") {
-        monthsPanel.current.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
-        clearTimeout(state.timer);
-        state.timer = setTimeout(() => {
-          loadScroll();
-        }, time);
-      } else {
-        monthsPanel.current.style.webkitTransition = "";
-        loadScroll();
+  const setDefaultRange = (monthsNum, current) => {
+    let start2 = 0;
+    let end = 0;
+    if (monthsNum >= 3) {
+      if (current > 0 && current < monthsNum) {
+        start2 = current - 1;
+        end = current + 3;
+      } else if (current === 0) {
+        start2 = current;
+        end = current + 4;
+      } else if (current === monthsNum) {
+        start2 = current - 2;
+        end = current + 2;
       }
-      monthsPanel.current.style.webkitTransform = `translateY(${translateY}px)`;
-      state.scrollDistance = translateY;
+    } else {
+      start2 = 0;
+      end = monthsNum + 2;
     }
+    setMonthDefaultRange([start2, end]);
+    setTranslateY(state.monthsData[start2].cssScrollHeight);
   };
-  const setMove = (move, type2, time) => {
-    var _a, _b;
-    let updateMove = move + state.transformY;
-    const h2 = ((_a = months.current) == null ? void 0 : _a.offsetHeight) || 0;
-    const offsetHeight = ((_b = monthsPanel.current) == null ? void 0 : _b.offsetHeight) || 0;
-    if (type2 === "end") {
-      if (updateMove > 0) {
-        updateMove = 0;
+  const mothsViewScroll = (e2) => {
+    if (state.monthsData.length <= 1) {
+      return;
+    }
+    const target = e2.target;
+    const currentScrollTop = target.scrollTop;
+    let current = Math.floor(currentScrollTop / state.avgHeight);
+    if (current === 0) {
+      if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+        current += 1;
       }
-      if (updateMove < 0 && updateMove < -offsetHeight + h2) {
-        updateMove = -offsetHeight + h2;
+    } else if (current > 0 && current < state.monthsNum - 1) {
+      if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+        current += 1;
       }
-      if (offsetHeight <= h2 && state.monthsData.length === 1) {
-        updateMove = 0;
+      if (currentScrollTop < state.monthsData[current].cssScrollHeight) {
+        current -= 1;
       }
-      setTransform(updateMove, type2, time);
     } else {
-      if (updateMove > 0 && updateMove > 100) {
-        updateMove = 100;
-      }
-      if (updateMove < -offsetHeight + h2 - 100 && state.monthsData.length > 1) {
-        updateMove = -offsetHeight + h2 - 100;
+      const viewPosition = Math.round(currentScrollTop + viewHeight);
+      if (viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight && currentScrollTop > state.monthsData[current - 1].cssScrollHeight) {
+        current -= 1;
       }
-      if (updateMove < 0 && updateMove < -100 && state.monthsData.length === 1) {
-        updateMove = -100;
+      if (current + 1 <= state.monthsNum && viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight) {
+        current += 1;
       }
-      setTransform(updateMove);
-    }
-  };
-  const onTouchStart = (event) => {
-    event.stopPropagation();
-    const changedTouches = event.changedTouches[0];
-    state.touchParams.startY = changedTouches.pageY;
-    state.touchParams.startTime = event.timeStamp || Date.now();
-    state.transformY = state.scrollDistance;
-  };
-  const onTouchMove = (event) => {
-    event.stopPropagation();
-    const changedTouches = event.changedTouches[0];
-    state.touchParams.lastY = changedTouches.pageY;
-    state.touchParams.lastTime = event.timeStamp || Date.now();
-    const move = state.touchParams.lastY - state.touchParams.startY;
-    if (Math.abs(move) < 5) {
-      return false;
-    }
-    setMove(move);
-  };
-  const onTouchEnd = (event) => {
-    var _a, _b;
-    event.stopPropagation();
-    const changedTouches = event.changedTouches[0];
-    state.touchParams.lastY = changedTouches.pageY;
-    state.touchParams.lastTime = event.timeStamp || Date.now();
-    let move = state.touchParams.lastY - state.touchParams.startY;
-    if (Math.abs(move) < 5) {
-      return false;
-    }
-    const updateMove = move + state.transformY;
-    const h2 = ((_a = months.current) == null ? void 0 : _a.offsetHeight) || 0;
-    const offsetHeight = ((_b = monthsPanel.current) == null ? void 0 : _b.offsetHeight) || 0;
-    if (updateMove > 0) {
-      getMonth(getCurrData("prev"), "prev");
-    } else if (updateMove < 0 && updateMove < -offsetHeight + (Math.abs(move) > h2 ? Math.abs(move) : h2) * 5) {
-      getMonth(getCurrData("next"), "next");
-      if (Math.abs(move) >= 300) {
-        getMonth(getCurrData("next"), "next");
+      if (current >= 1 && currentScrollTop < state.monthsData[current - 1].cssScrollHeight) {
+        current -= 1;
       }
     }
-    let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
-    if (moveTime <= 300) {
-      move *= 2;
-      moveTime += 1e3;
-      setMove(move, "end", moveTime);
-    } else {
-      setMove(move, "end");
+    if (state.currentIndex !== current) {
+      state.currentIndex = current;
+      setDefaultRange(state.monthsNum, current);
     }
+    setYearMonthTitle(state.monthsData[current].title);
   };
   const initData = () => {
-    state.startData = startDate ? splitDate(startDate) : "";
-    state.endData = endDate ? splitDate(endDate) : "";
-    if (!defaultValue) {
-      state.currDate = state.isRange ? [Utils.date2Str(new Date()), Utils.getDay(1)] : Utils.date2Str(new Date());
-    } else {
-      state.currDate = state.isRange ? [...defaultValue] : defaultValue;
+    const propStartDate = props.startDate ? props.startDate : Utils.getDay(0);
+    const propEndDate = props.endDate ? props.endDate : Utils.getDay(365);
+    state.propStartDate = propStartDate;
+    state.propEndDate = propEndDate;
+    state.startData = splitDate(propStartDate);
+    state.endData = splitDate(propEndDate);
+    if (defaultValue || Array.isArray(defaultValue) && defaultValue.length > 0) {
+      state.currDate = props.type !== "one" ? [...props.defaultValue] : props.defaultValue;
+    }
+    const startDate = {
+      year: Number(state.startData[0]),
+      month: Number(state.startData[1])
+    };
+    const endDate = {
+      year: Number(state.endData[0]),
+      month: Number(state.endData[1])
+    };
+    let monthsNum = endDate.month - startDate.month;
+    if (endDate.year - startDate.year > 0) {
+      monthsNum += 12 * (endDate.year - startDate.year);
+    }
+    if (monthsNum <= 0) {
+      monthsNum = 1;
     }
-    if (state.isRange && Array.isArray(state.currDate)) {
-      if (startDate && Utils.compareDate(state.currDate[0], startDate)) {
-        state.currDate.splice(0, 1, startDate);
+    getMonth(state.startData, "next");
+    let i = 1;
+    do {
+      getMonth(getCurrData("next"), "next");
+    } while (i++ < monthsNum);
+    state.monthsNum = monthsNum;
+    if (type === "range" && Array.isArray(state.currDate)) {
+      if (state.currDate.length > 0) {
+        if (propStartDate && Utils.compareDate(state.currDate[0], propStartDate)) {
+          state.currDate.splice(0, 1, propStartDate);
+        }
+        if (propEndDate && Utils.compareDate(propEndDate, state.currDate[1])) {
+          state.currDate.splice(1, 1, propEndDate);
+        }
+        state.defaultData = [
+          ...splitDate(state.currDate[0]),
+          ...splitDate(state.currDate[1])
+        ];
       }
-      if (endDate && Utils.compareDate(endDate, state.currDate[1])) {
-        state.currDate.splice(1, 1, endDate);
+    } else if (props.type === "multiple" && Array.isArray(state.currDate)) {
+      if (state.currDate.length > 0) {
+        const defaultArr = [];
+        const obj = {};
+        state.currDate.forEach((item) => {
+          if (propStartDate && !Utils.compareDate(item, propStartDate) && propEndDate && !Utils.compareDate(propEndDate, item)) {
+            if (!Object.hasOwnProperty.call(obj, item)) {
+              defaultArr.push(item);
+              obj[item] = item;
+            }
+          }
+        });
+        state.currDate = [...defaultArr];
+        state.defaultData = [...splitDate(defaultArr[0])];
       }
-      state.defaultData = [
-        ...splitDate(state.currDate[0]),
-        ...splitDate(state.currDate[1])
-      ];
-    } else {
-      if (startDate && Utils.compareDate(state.currDate, startDate)) {
-        state.currDate = startDate;
-      } else if (endDate && !Utils.compareDate(state.currDate, endDate)) {
-        state.currDate = endDate;
+    } else if (state.currDate) {
+      if (propStartDate && Utils.compareDate(state.currDate, propStartDate)) {
+        state.currDate = propStartDate;
+      } else if (propEndDate && !Utils.compareDate(state.currDate, propEndDate)) {
+        state.currDate = propEndDate;
       }
       state.defaultData = [...splitDate(state.currDate)];
     }
-    getMonth(state.defaultData, "next");
-    setYearMonthTitle(state.monthsData[0].title);
-    let i = 1;
-    do {
-      getMonth(getCurrData("next"), "next");
-    } while (i++ < 4);
-    if (state.isRange) {
-      chooseDay(
-        { day: state.defaultData[2], type: "curr" },
-        state.monthsData[0],
-        true
-      );
-      chooseDay(
-        { day: state.defaultData[5], type: "curr" },
-        state.monthsData[0],
-        true,
-        true
-      );
-    } else {
-      chooseDay(
-        { day: state.defaultData[2], type: "curr" },
-        state.monthsData[0],
-        true
-      );
+    let current = 0;
+    let lastCurrent = 0;
+    if (state.defaultData.length > 0) {
+      state.monthsData.forEach((item, index2) => {
+        if (item.title === locale.calendaritem.monthTitle(
+          state.defaultData[0],
+          state.defaultData[1]
+        )) {
+          current = index2;
+        }
+        if (props.type === "range") {
+          if (item.title === locale.calendaritem.monthTitle(
+            state.defaultData[3],
+            state.defaultData[4]
+          )) {
+            lastCurrent = index2;
+          }
+        }
+      });
+    }
+    setDefaultRange(monthsNum, current);
+    state.currentIndex = current;
+    setYearMonthTitle(state.monthsData[state.currentIndex].title);
+    if (state.defaultData.length > 0) {
+      if (type === "range") {
+        chooseDay(
+          { day: state.defaultData[2], type: "curr" },
+          state.monthsData[state.currentIndex],
+          true
+        );
+        chooseDay(
+          { day: state.defaultData[5], type: "curr" },
+          state.monthsData[lastCurrent],
+          true
+        );
+      } else if (type === "multiple") {
+        [...state.currDate].forEach((item) => {
+          const dateArr = splitDate(item);
+          let current2 = state.currentIndex;
+          state.monthsData.forEach((item2, index2) => {
+            if (item2.title === locale.calendaritem.monthTitle(dateArr[0], dateArr[1])) {
+              current2 = index2;
+            }
+          });
+          chooseDay(
+            { day: dateArr[2], type: "curr" },
+            state.monthsData[current2],
+            true
+          );
+        });
+      } else {
+        chooseDay(
+          { day: state.defaultData[2], type: "curr" },
+          state.monthsData[state.currentIndex],
+          true
+        );
+      }
     }
+    const lastItem = state.monthsData[state.monthsData.length - 1];
+    const containerHeight = lastItem.cssHeight + lastItem.cssScrollHeight;
+    requestAniFrame$1(() => {
+      if (months && monthsPanel && viewArea) {
+        viewHeight = months.current.clientHeight;
+        monthsPanel.current.style.height = `${containerHeight}px`;
+        months.current.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+      }
+    });
+    state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
+  };
+  const resetRender = () => {
+    state.chooseData.splice(0);
+    state.monthsData.splice(0);
+    initData();
+  };
+  const scrollToDate = (date) => {
+    if (Utils.compareDate(date, state.propStartDate)) {
+      date = state.propStartDate;
+    } else if (!Utils.compareDate(date, state.propEndDate)) {
+      date = state.propEndDate;
+    }
+    const dateArr = splitDate(date);
+    state.monthsData.forEach((item, index2) => {
+      if (item.title === locale.calendaritem.monthTitle(dateArr[0], dateArr[1])) {
+        if (months.current) {
+          const distance = state.monthsData[index2].cssScrollHeight - months.current.scrollTop;
+          if (toDateAnimation) {
+            let flag = 0;
+            const interval = setInterval(() => {
+              flag++;
+              if (months.current) {
+                const offset = distance / 10;
+                months.current.scrollTop += offset;
+              }
+              if (flag >= 10) {
+                clearInterval(interval);
+                if (months.current) {
+                  months.current.scrollTop = state.monthsData[index2].cssScrollHeight;
+                }
+              }
+            }, 40);
+          } else {
+            months.current.scrollTop = state.monthsData[index2].cssScrollHeight;
+          }
+        }
+      }
+    });
   };
   useEffect(() => {
     initData();
   }, []);
+  useEffect(() => {
+    poppable && resetRender();
+  }, [defaultValue]);
+  React__default.useImperativeHandle(ref, () => ({
+    scrollToDate
+  }));
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     className: classes
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: headerClasses
-  }, poppable ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
+  }, showTitle && /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-title"
-  }, locale.calendaritem.title), /* @__PURE__ */ React__default.createElement("div", {
+  }, title || locale.calendaritem.title), onBtn && /* @__PURE__ */ React__default.createElement("div", {
+    className: "calendar-top-slot"
+  }, onBtn()), showSubTitle && /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-curr-month"
-  }, yearMonthTitle)) : "", /* @__PURE__ */ React__default.createElement("div", {
+  }, yearMonthTitle), /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-weeks",
     ref: weeksPanel
   }, weeks.map((item) => /* @__PURE__ */ React__default.createElement("div", {
@@ -4757,51 +5391,57 @@ const CalendarItem = (props) => {
     key: item
   }, item)))), /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-calendar-content",
-    onTouchStart,
-    onTouchMove,
-    onTouchEnd,
+    onScroll: mothsViewScroll,
     ref: months
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-months-panel",
     ref: monthsPanel
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "calendar-loading-tip"
-  }, !unLoadPrev ? locale.calendaritem.loadPreviousMonth : locale.calendaritem.noEarlierMonth), monthsData.map((month, key) => /* @__PURE__ */ React__default.createElement("div", {
-    className: "calendar-month",
-    key
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "calendar-month-title"
-  }, month.title), /* @__PURE__ */ React__default.createElement("div", {
-    className: "calendar-month-con"
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: monthitemclasses
-  }, month.monthData && month.monthData.map((day, index2) => /* @__PURE__ */ React__default.createElement("div", {
-    className: [
-      "calendar-month-day",
-      getClass(day, month)
-    ].join(" "),
-    key: index2,
-    onClick: () => {
-      chooseDay(day, month);
-    }
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "calendar-day"
-  }, day.type === "curr" ? day.day : ""), isCurrDay(month, day.day) ? /* @__PURE__ */ React__default.createElement("div", {
-    className: "calendar-curr-tips"
-  }, locale.calendaritem.today) : "", isStartTip(day, month) ? /* @__PURE__ */ React__default.createElement("div", {
-    className: "calendar-day-tip"
-  }, locale.calendaritem.start) : "", isEndTip(day, month) ? /* @__PURE__ */ React__default.createElement("div", {
-    className: "calendar-day-tip"
-  }, locale.calendaritem.end) : "")))))))), poppable && !isAutoBackFill ? /* @__PURE__ */ React__default.createElement("div", {
+    className: "viewArea",
+    ref: viewArea,
+    style: { transform: `translateY(${translateY}px)` }
+  }, state.monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map((month, key) => {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: "calendar-month",
+      key
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: "calendar-month-title"
+    }, month.title), /* @__PURE__ */ React__default.createElement("div", {
+      className: "calendar-month-con"
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: monthitemclasses
+    }, month.monthData.map((day, i) => /* @__PURE__ */ React__default.createElement("div", {
+      className: [
+        "calendar-month-day",
+        getClass(day, month)
+      ].join(" "),
+      onClick: () => {
+        chooseDay(day, month);
+      },
+      key: i
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: "calendar-day"
+    }, onDay ? onDay(day) : day.day), onTopInfo && /* @__PURE__ */ React__default.createElement("div", {
+      className: "calendar-curr-tips calendar-curr-tips-top"
+    }, onTopInfo(day)), onBottomInfo && /* @__PURE__ */ React__default.createElement("div", {
+      className: "calendar-curr-tips calendar-curr-tips-bottom"
+    }, onBottomInfo(day)), !onBottomInfo && showToday && isCurrDay(month, day.day) && /* @__PURE__ */ React__default.createElement("div", {
+      className: "calendar-curr-tip-curr"
+    }, locale.calendaritem.today), isStartTip(day, month) && /* @__PURE__ */ React__default.createElement("div", {
+      className: `calendar-day-tip ${rangeTip() ? "calendar-curr-tips-top" : ""}`
+    }, startText || locale.calendaritem.start), isEndTip(day, month) && /* @__PURE__ */ React__default.createElement("div", {
+      className: "calendar-day-tip"
+    }, endText || locale.calendaritem.end))))));
+  })))), poppable && !isAutoBackFill ? /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-calendar-footer"
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-confirm-btn",
     onClick: confirm2
-  }, locale.confirm)) : ""));
-};
-CalendarItem.defaultProps = defaultProps$Q;
+  }, confirmText || locale.confirm)) : ""));
+});
+CalendarItem.defaultProps = defaultProps$V;
 CalendarItem.displayName = "NutCalendarItem";
-const defaultProps$P = {
+const defaultProps$U = {
   type: "one",
   isAutoBackFill: false,
   poppable: true,
@@ -4810,15 +5450,27 @@ const defaultProps$P = {
   defaultValue: "",
   startDate: Utils.getDay(0),
   endDate: Utils.getDay(365),
+  showToday: true,
+  startText: "\u5F00\u59CB",
+  endText: "\u7ED3\u675F",
+  confirmText: "\u786E\u8BA4",
+  showTitle: true,
+  showSubTitle: true,
+  toDateAnimation: true,
+  onBtn: void 0,
+  onDay: void 0,
+  onTopInfo: void 0,
+  onBottomInfo: void 0,
   onClose: () => {
   },
   onChoose: (param) => {
+  },
+  onSelected: (data) => {
   }
 };
-const Calendar = (props) => {
+const Calendar = React__default.forwardRef((props, ref) => {
   const { locale } = useConfig();
   const {
-    children,
     poppable,
     visible,
     type,
@@ -4827,14 +5479,25 @@ const Calendar = (props) => {
     defaultValue,
     startDate,
     endDate,
+    showToday,
+    startText,
+    endText,
+    confirmText,
+    showTitle,
+    showSubTitle,
+    toDateAnimation,
+    onBtn,
+    onDay,
+    onTopInfo,
+    onBottomInfo,
     onClose,
-    onChoose
-  } = { ...defaultProps$P, ...props };
+    onChoose,
+    onSelected
+  } = { ...defaultProps$U, ...props };
+  const calendarRef = useRef(null);
   const close = () => {
     onClose && onClose();
   };
-  const update2 = () => {
-  };
   const choose = (param) => {
     close();
     onChoose && onChoose(param);
@@ -4842,39 +5505,56 @@ const Calendar = (props) => {
   const closePopup = () => {
     close();
   };
+  const select = (param) => {
+    onSelected && onSelected(param);
+  };
+  const scrollToDate = (date) => {
+    var _a;
+    (_a = calendarRef.current) == null ? void 0 : _a.scrollToDate(date);
+  };
+  React__default.useImperativeHandle(ref, () => ({
+    scrollToDate
+  }));
+  const renderItem = () => {
+    return /* @__PURE__ */ React__default.createElement(CalendarItem, {
+      ref: calendarRef,
+      type,
+      isAutoBackFill,
+      poppable,
+      title: locale.calendaritem.title || title,
+      defaultValue,
+      startDate,
+      endDate,
+      showToday,
+      startText,
+      endText,
+      confirmText,
+      showTitle,
+      showSubTitle,
+      toDateAnimation,
+      onBtn,
+      onDay,
+      onTopInfo,
+      onBottomInfo,
+      onChoose: choose,
+      onSelected: select
+    });
+  };
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, poppable ? /* @__PURE__ */ React__default.createElement(Popup, {
     visible,
     position: "bottom",
     round: true,
+    duration: 0.5,
     closeable: true,
+    destroyOnClose: true,
     onClickOverlay: closePopup,
-    onClickCloseIcon: closePopup
-  }, /* @__PURE__ */ React__default.createElement(CalendarItem, {
-    type,
-    isAutoBackFill,
-    poppable,
-    title: locale.calendaritem.title || title,
-    defaultValue,
-    startDate,
-    endDate,
-    onUpdate: update2,
-    onClose: close,
-    onChoose: choose
-  })) : /* @__PURE__ */ React__default.createElement(CalendarItem, {
-    type,
-    isAutoBackFill,
-    poppable,
-    title: locale.calendaritem.title,
-    defaultValue,
-    startDate,
-    endDate,
-    onClose: close,
-    onChoose: choose
-  }));
-};
-Calendar.defaultProps = defaultProps$P;
+    onClickCloseIcon: closePopup,
+    style: { height: "85vh" }
+  }, renderItem()) : renderItem());
+});
+Calendar.defaultProps = defaultProps$U;
 Calendar.displayName = "NutCalendar";
-const defaultProps$O = {
+const defaultProps$T = {
   disabled: false,
   checkedValue: [],
   max: void 0,
@@ -4883,7 +5563,7 @@ const defaultProps$O = {
 };
 const CheckboxGroup = React__default.forwardRef(
   (props, ref) => {
-    const { children } = { ...defaultProps$O, ...props };
+    const { children } = { ...defaultProps$T, ...props };
     const b2 = cn("checkboxgroup");
     const { className, disabled, onChange, checkedValue, max, ...rest } = props;
     const [innerDisabled, setInnerDisabled] = useState(disabled);
@@ -4961,9 +5641,9 @@ const CheckboxGroup = React__default.forwardRef(
     }, cloneChildren());
   }
 );
-CheckboxGroup.defaultProps = defaultProps$O;
+CheckboxGroup.defaultProps = defaultProps$T;
 CheckboxGroup.displayName = "NutCheckboxGroup";
-const defaultProps$N = {
+const defaultProps$S = {
   checked: false,
   disabled: false,
   textPosition: "right",
@@ -4977,7 +5657,7 @@ const defaultProps$N = {
   }
 };
 const Checkbox = (props) => {
-  const { children } = { ...defaultProps$N, ...props };
+  const { children } = { ...defaultProps$S, ...props };
   const b2 = cn("checkbox");
   const {
     iconName,
@@ -5057,7 +5737,7 @@ const Checkbox = (props) => {
     onClick: handleClick2
   }, renderIcon(), renderLabel());
 };
-Checkbox.defaultProps = defaultProps$N;
+Checkbox.defaultProps = defaultProps$S;
 Checkbox.displayName = "NutCheckBox";
 Checkbox.Group = CheckboxGroup;
 const InternalPickerSlot = (props, ref) => {
@@ -5140,7 +5820,7 @@ const InternalPickerSlot = (props, ref) => {
   const touchMove = (event) => {
     touch.move(event);
     if (touch.isVertical) {
-      preventDefault(event, true);
+      preventDefault2(event, true);
     }
     const move = touch.deltaY - startY;
     setMove(move);
@@ -5190,7 +5870,7 @@ const InternalPickerSlot = (props, ref) => {
   const stopMomentum = () => {
     setChooseValue(scrollDistance);
   };
-  const preventDefault = (event, isStopPropagation) => {
+  const preventDefault2 = (event, isStopPropagation) => {
     if (typeof event.cancelable !== "boolean" || event.cancelable) {
       event.preventDefault();
     }
@@ -5423,7 +6103,7 @@ const InternalPicker = (props, ref) => {
 };
 const Picker = React__default.forwardRef(InternalPicker);
 const currentYear = new Date().getFullYear();
-const defaultProps$M = {
+const defaultProps$R = {
   modelValue: null,
   visible: false,
   title: "",
@@ -5453,9 +6133,10 @@ const DatePicker = (props) => {
     style,
     ...rest
   } = {
-    ...defaultProps$M,
+    ...defaultProps$R,
     ...props
   };
+  const { locale } = useConfig();
   const [show, setShow] = useState(false);
   const [currentDate, setCurrentDate] = useState(modelValue);
   const [defaultValue, setDefaultValue] = useState([]);
@@ -5464,13 +6145,14 @@ const DatePicker = (props) => {
   const isDate = (val) => {
     return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
   };
+  const datepickerLang = locale.datepicker;
   const zhCNType = {
-    day: "\u65E5",
-    year: "\u5E74",
-    month: "\u6708",
-    hour: "\u65F6",
-    minute: "\u5206",
-    seconds: "\u79D2"
+    day: datepickerLang.day,
+    year: datepickerLang.year,
+    month: datepickerLang.month,
+    hour: datepickerLang.hour,
+    minute: datepickerLang.min,
+    seconds: datepickerLang.seconds
   };
   const formatValue = (value) => {
     let cvalue = value;
@@ -5718,9 +6400,9 @@ const DatePicker = (props) => {
     ref: pickerRef
   }));
 };
-DatePicker.defaultProps = defaultProps$M;
+DatePicker.defaultProps = defaultProps$R;
 DatePicker.displayName = "NutDatePicker";
-const defaultProps$L = {
+const defaultProps$Q = {
   disabled: false,
   buttonSize: "",
   min: 1,
@@ -5758,7 +6440,7 @@ const InputNumber = (props) => {
     focus,
     ...restProps
   } = {
-    ...defaultProps$L,
+    ...defaultProps$Q,
     ...props
   };
   const [inputValue, setInputValue] = useState(modelValue);
@@ -5883,7 +6565,7 @@ const InputNumber = (props) => {
     onClick: addNumber
   }));
 };
-InputNumber.defaultProps = defaultProps$L;
+InputNumber.defaultProps = defaultProps$Q;
 InputNumber.displayName = "NutInputNumber";
 function trimExtraChar(value, char, regExp) {
   const index2 = value.indexOf(char);
@@ -5909,7 +6591,7 @@ function formatNumber(value, allowDot = true, allowMinus = true) {
   const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
   return value.replace(regExp, "");
 }
-const defaultProps$K = {
+const defaultProps$P = {
   type: "text",
   defaultValue: "",
   placeholder: "",
@@ -5992,7 +6674,7 @@ const Input = (props) => {
     clickRightIcon,
     click,
     ...rest
-  } = { ...defaultProps$K, ...props };
+  } = { ...defaultProps$P, ...props };
   locale.placeholder = placeholder || locale.placeholder;
   const [inputValue, SetInputValue] = useState("");
   const [active, SetActive] = useState(false);
@@ -6204,14 +6886,14 @@ const Input = (props) => {
     }
   }, errorMessage) : null)));
 };
-Input.defaultProps = defaultProps$K;
+Input.defaultProps = defaultProps$P;
 Input.displayName = "NutInput";
 const radioContext = {
   onChange: (val) => {
   }
 };
 var RadioContext = React__default.createContext(radioContext);
-const defaultProps$J = {
+const defaultProps$O = {
   value: null,
   textPosition: "right",
   onChange: (value) => {
@@ -6220,7 +6902,7 @@ const defaultProps$J = {
 };
 const RadioGroup = React__default.forwardRef(
   (props, ref) => {
-    const { children } = { ...defaultProps$J, ...props };
+    const { children } = { ...defaultProps$O, ...props };
     cn("RadioGroup");
     const { className, value, onChange, textPosition, direction, ...rest } = props;
     const [val2State, setVal2State] = useState(value);
@@ -6257,9 +6939,9 @@ const RadioGroup = React__default.forwardRef(
     }, cloneChildren()));
   }
 );
-RadioGroup.defaultProps = defaultProps$J;
+RadioGroup.defaultProps = defaultProps$O;
 RadioGroup.displayName = "NutRadioGroup";
-const defaultProps$I = {
+const defaultProps$N = {
   disabled: false,
   checked: false,
   shape: "round",
@@ -6272,7 +6954,7 @@ const defaultProps$I = {
   }
 };
 const Radio = (props) => {
-  const { children } = { ...defaultProps$I, ...props };
+  const { children } = { ...defaultProps$N, ...props };
   const {
     className,
     disabled,
@@ -6346,10 +7028,10 @@ const Radio = (props) => {
     ...rest
   }, renderRadioItem());
 };
-Radio.defaultProps = defaultProps$I;
+Radio.defaultProps = defaultProps$N;
 Radio.displayName = "NutRadio";
 Radio.RadioGroup = RadioGroup;
-const defaultProps$H = {
+const defaultProps$M = {
   count: 5,
   modelValue: 0,
   minimizeValue: 0,
@@ -6378,7 +7060,7 @@ const Rate = (props) => {
     allowHalf,
     spacing,
     change
-  } = { ...defaultProps$H, ...props };
+  } = { ...defaultProps$M, ...props };
   const b2 = cn("rate");
   const bi = cn("rate-item");
   const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
@@ -6444,9 +7126,9 @@ const Rate = (props) => {
     }));
   }));
 };
-Rate.defaultProps = defaultProps$H;
+Rate.defaultProps = defaultProps$M;
 Rate.displayName = "NutRate";
-const defaultProps$G = {
+const defaultProps$L = {
   title: "",
   desc: "",
   tips: "",
@@ -6609,9 +7291,9 @@ const ShortPassword = (props) => {
     onClick: () => sure()
   }, locale.confirm)) : null)));
 };
-ShortPassword.defaultProps = defaultProps$G;
+ShortPassword.defaultProps = defaultProps$L;
 ShortPassword.displayName = "NutShortPassword";
-const defaultProps$F = {
+const defaultProps$K = {
   defaultValue: "",
   textAlign: "left",
   limitshow: false,
@@ -6639,9 +7321,10 @@ const TextArea = (props) => {
     onChange,
     onBlur,
     onFocus
-  } = { ...defaultProps$F, ...props };
+  } = { ...defaultProps$K, ...props };
   const textareaBem = cn("textarea");
   const [inputValue, SetInputValue] = useState("");
+  const textareaRef = useRef(null);
   useEffect(() => {
     if (defaultValue) {
       let initValue = defaultValue;
@@ -6650,7 +7333,38 @@ const TextArea = (props) => {
       }
       SetInputValue(initValue);
     }
-  }, [defaultValue]);
+    if (autosize) {
+      setTimeout(() => {
+        setContentHeight();
+      });
+    }
+  }, [defaultValue, autosize]);
+  useEffect(() => {
+    if (inputValue) {
+      if (autosize) {
+        setContentHeight();
+      }
+    }
+  }, [inputValue]);
+  const setContentHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      let height = textarea == null ? void 0 : textarea.scrollHeight;
+      if (typeof autosize === "object") {
+        const { maxHeight, minHeight } = autosize;
+        if (maxHeight !== void 0) {
+          height = Math.min(height, maxHeight);
+        }
+        if (minHeight !== void 0) {
+          height = Math.max(height, minHeight);
+        }
+      }
+      if (height) {
+        textarea.style.height = `${height}px`;
+      }
+    }
+  };
   const textChange = (event) => {
     const text = event.target;
     if (maxlength && text.value.length > Number(maxlength)) {
@@ -6678,10 +7392,10 @@ const TextArea = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `${textareaBem()} ${disabled ? textareaBem("disabled") : ""} ${className || ""}`
   }, /* @__PURE__ */ React__default.createElement("textarea", {
+    ref: textareaRef,
     className: textareaBem("textarea"),
     style: {
       textAlign,
-      resize: `${autosize ? "vertical" : "none"}`,
       ...style
     },
     disabled,
@@ -6706,7 +7420,7 @@ const TextArea = (props) => {
     className: textareaBem("limit")
   }, inputValue.length, "/", maxlength < 0 ? 0 : maxlength) : null);
 };
-TextArea.defaultProps = defaultProps$F;
+TextArea.defaultProps = defaultProps$K;
 TextArea.displayName = "NutTextArea";
 class UploadOptions {
   constructor() {
@@ -6759,7 +7473,7 @@ class Upload {
     }
   }
 }
-const defaultProps$E = {
+const defaultProps$J = {
   url: "",
   maximum: 1,
   uploadIcon: "photograph",
@@ -6834,7 +7548,7 @@ const InternalUploader = (props, ref) => {
     beforeUpload,
     beforeDelete,
     ...restProps
-  } = { ...defaultProps$E, ...props };
+  } = { ...defaultProps$J, ...props };
   const [fileList, setFileList] = useState([]);
   const [uploadQueue, setUploadQueue] = useState([]);
   useEffect(() => {
@@ -7133,9 +7847,497 @@ const InternalUploader = (props, ref) => {
   })));
 };
 const Uploader = React__default.forwardRef(InternalUploader);
-Uploader.defaultProps = defaultProps$E;
+Uploader.defaultProps = defaultProps$J;
 Uploader.displayName = "NutUploader";
-const defaultProps$D = {
+const defaultProps$I = {
+  data: {
+    text: "",
+    value: "",
+    paneKey: "",
+    disabled: false,
+    loading: false,
+    children: []
+  },
+  checked: false,
+  chooseItem: () => {
+  }
+};
+const InternalCascaderItem = (props) => {
+  const { data, checked, chooseItem } = {
+    ...defaultProps$I,
+    ...props
+  };
+  const b2 = cn("cascader-item");
+  const classes = classNames(
+    {
+      active: checked,
+      disabled: data.disabled
+    },
+    b2("")
+  );
+  const classesTitle = classNames({
+    [`${b2("")}__title`]: true
+  });
+  useEffect(() => {
+    initData();
+  }, [data]);
+  const initData = () => {
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: classes,
+    onClick: () => {
+      chooseItem(data);
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: classesTitle
+  }, data.text), data.loading ? /* @__PURE__ */ React__default.createElement(Icon, {
+    color: "#969799",
+    className: "nut-cascader-item__icon-loading",
+    name: "loading"
+  }) : /* @__PURE__ */ React__default.createElement(Icon, {
+    className: `${checked ? b2("icon-check") : ""}`,
+    name: "checklist"
+  }));
+};
+const CascaderItem = React__default.forwardRef(InternalCascaderItem);
+CascaderItem.defaultProps = defaultProps$I;
+CascaderItem.displayName = "NutCascaderItem";
+const formatTree = (tree, parent, config2) => tree.map((node) => {
+  const {
+    value: valueKey = "value",
+    text: textKey = "text",
+    children: childrenKey = "children"
+  } = config2;
+  const {
+    [valueKey]: value,
+    [textKey]: text,
+    [childrenKey]: children,
+    ...others
+  } = node;
+  const newNode = {
+    loading: false,
+    ...others,
+    level: parent ? (parent && parent.level || 0) + 1 : 0,
+    value,
+    text,
+    children,
+    _parent: parent
+  };
+  if (newNode.children && newNode.children.length) {
+    newNode.children = formatTree(newNode.children, newNode, config2);
+  }
+  return newNode;
+});
+const eachTree = (tree, cb) => {
+  let i = 0;
+  let node;
+  while (node = tree[i++]) {
+    if (cb(node) === true) {
+      break;
+    }
+    if (node.children && node.children.length) {
+      eachTree(node.children, cb);
+    }
+  }
+};
+const defaultConvertConfig = {
+  topId: null,
+  idKey: "id",
+  pidKey: "pid",
+  sortKey: ""
+};
+const convertListToOptions = (list, options2) => {
+  const mergedOptions = {
+    ...defaultConvertConfig,
+    ...options2 || {}
+  };
+  const { topId, idKey, pidKey, sortKey } = mergedOptions;
+  let result = [];
+  let map = {};
+  list.forEach((node) => {
+    node = { ...node };
+    const { [idKey]: id, [pidKey]: pid } = node;
+    const children = map[pid] = map[pid] || [];
+    if (!result.length && pid === topId) {
+      result = children;
+    }
+    children.push(node);
+    node.children = map[id] || (map[id] = []);
+  });
+  if (sortKey) {
+    Object.keys(map).forEach((i) => {
+      if (map[i].length > 1) {
+        map[i].sort((a, b2) => a[sortKey] - b2[sortKey]);
+      }
+    });
+  }
+  map = null;
+  return result;
+};
+class Tree {
+  constructor(nodes, config2) {
+    this.isLeaf = (node, lazy) => {
+      const { leaf, children } = node;
+      const hasChildren = Array.isArray(children) && Boolean(children.length);
+      return leaf || !hasChildren && !lazy;
+    };
+    this.hasChildren = (node, lazy) => {
+      const isLeaf = this.isLeaf(node, lazy);
+      if (isLeaf) {
+        return false;
+      }
+      const { children } = node;
+      return Array.isArray(children) && Boolean(children.length);
+    };
+    this.config = {
+      value: "value",
+      text: "text",
+      children: "children",
+      ...config2 || {}
+    };
+    this.nodes = formatTree(nodes, null, this.config);
+  }
+  updateChildren(nodes, parent) {
+    if (!parent) {
+      this.nodes = formatTree(nodes, null, this.config);
+    } else {
+      parent.children = formatTree(nodes, parent, this.config);
+    }
+  }
+  getNodeByValue(value) {
+    let foundNode;
+    eachTree(this.nodes, (node) => {
+      if (node.value === value) {
+        foundNode = node;
+        return true;
+      }
+      return null;
+    });
+    return foundNode;
+  }
+  getPathNodesByValue(value) {
+    if (!value.length) {
+      return [];
+    }
+    const pathNodes = [];
+    let currentNodes = this.nodes;
+    while (currentNodes && currentNodes.length) {
+      const foundNode = currentNodes.find(
+        (node) => node.value === value[node.level]
+      );
+      if (!foundNode) {
+        break;
+      }
+      pathNodes.push(foundNode);
+      currentNodes = foundNode.children;
+    }
+    return pathNodes;
+  }
+}
+const defaultProps$H = {
+  className: "",
+  style: {},
+  visible: false,
+  options: [],
+  value: [],
+  title: "",
+  textKey: "text",
+  valueKey: "value",
+  childrenKey: "children",
+  convertConfig: {},
+  closeable: false,
+  closeIconPosition: "top-right",
+  closeIcon: "close",
+  lazy: false,
+  lazyLoad: () => {
+  },
+  onClose: () => {
+  },
+  onChange: () => {
+  },
+  onPathChange: () => {
+  },
+  ...Popup.defaultProps
+};
+const InternalCascader = (props) => {
+  const {
+    className,
+    style,
+    visible,
+    options: options2,
+    value,
+    title,
+    textKey,
+    valueKey,
+    childrenKey,
+    convertConfig: convertConfig2,
+    closeable,
+    closeIconPosition,
+    closeIcon,
+    lazy,
+    lazyLoad,
+    onClose,
+    onChange,
+    onPathChange
+  } = { ...defaultProps$H, ...props };
+  const [tabvalue, setTabvalue] = useState("c1");
+  const [optiosData, setOptiosData] = useState([]);
+  const isLazy = () => state.configs.lazy && Boolean(state.configs.lazyLoad);
+  const [state] = useState({
+    optionsData: [],
+    panes: [
+      {
+        nodes: [],
+        selectedNode: [],
+        paneKey: ""
+      }
+    ],
+    innerValue: value,
+    tree: new Tree([], {}),
+    tabsCursor: 0,
+    initLoading: false,
+    currentProcessNode: [],
+    configs: {
+      lazy,
+      lazyLoad,
+      valueKey,
+      textKey,
+      childrenKey,
+      convertConfig: convertConfig2
+    },
+    lazyLoadMap: /* @__PURE__ */ new Map()
+  });
+  const b2 = cn("cascader");
+  const classes = classNames(b2(""));
+  const classesPane = classNames({
+    [`${b2("")}-pane`]: true
+  });
+  useEffect(() => {
+    initData();
+  }, []);
+  useEffect(() => {
+    if (value !== state.innerValue) {
+      state.innerValue = value;
+    }
+  }, [value]);
+  useEffect(() => {
+    initData();
+  }, [options2]);
+  const initData = async () => {
+    state.lazyLoadMap.clear();
+    if (convertConfig2 && Object.keys(convertConfig2).length > 0) {
+      state.optionsData = convertListToOptions(
+        options2,
+        convertConfig2
+      );
+    } else {
+      state.optionsData = options2;
+    }
+    state.tree = new Tree(state.optionsData, {
+      value: state.configs.valueKey,
+      text: state.configs.textKey,
+      children: state.configs.childrenKey
+    });
+    if (isLazy() && !state.tree.nodes.length) {
+      await invokeLazyLoad({
+        root: true,
+        loading: true,
+        text: "",
+        value: ""
+      });
+    }
+    state.panes = [
+      {
+        nodes: state.tree.nodes,
+        selectedNode: null,
+        paneKey: "c1"
+      }
+    ];
+    syncValue();
+    setOptiosData(state.panes);
+  };
+  const syncValue = async () => {
+    const currentValue2 = state.innerValue;
+    if (currentValue2 === void 0 || !state.tree.nodes.length) {
+      return;
+    }
+    if (currentValue2.length === 0) {
+      state.tabsCursor = 0;
+      return;
+    }
+    let needToSync = currentValue2;
+    if (isLazy() && Array.isArray(currentValue2) && currentValue2.length) {
+      needToSync = [];
+      const parent = state.tree.nodes.find(
+        (node) => node.value === currentValue2[0]
+      );
+      if (parent) {
+        needToSync = [parent.value];
+        state.initLoading = true;
+        const last = await currentValue2.slice(1).reduce(async (p2, value2) => {
+          var _a;
+          const parent2 = await p2;
+          await invokeLazyLoad(parent2);
+          const node = (_a = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _a.find(
+            (item) => item.value === value2
+          );
+          if (node) {
+            needToSync.push(value2);
+          }
+          return Promise.resolve(node);
+        }, Promise.resolve(parent));
+        await invokeLazyLoad(last);
+        state.initLoading = false;
+      }
+    }
+    if (needToSync.length && currentValue2 === value) {
+      const pathNodes = state.tree.getPathNodesByValue(needToSync);
+      pathNodes.forEach((node, index2) => {
+        state.tabsCursor = index2;
+        chooseItem(node, true);
+      });
+    }
+  };
+  const invokeLazyLoad = async (node) => {
+    if (!node) {
+      return;
+    }
+    if (!state.configs.lazyLoad) {
+      node.leaf = true;
+      return;
+    }
+    if (state.tree.isLeaf(node, isLazy()) || state.tree.hasChildren(node, isLazy())) {
+      return;
+    }
+    node.loading = true;
+    const parent = node.root ? null : node;
+    let lazyLoadPromise = state.lazyLoadMap.get(node);
+    if (!lazyLoadPromise) {
+      lazyLoadPromise = new Promise((resolve) => {
+        var _a, _b;
+        (_b = (_a = state.configs).lazyLoad) == null ? void 0 : _b.call(_a, node, resolve);
+      });
+      state.lazyLoadMap.set(node, lazyLoadPromise);
+    }
+    const nodes = await lazyLoadPromise;
+    if (Array.isArray(nodes) && nodes.length > 0) {
+      state.tree.updateChildren(nodes, parent);
+    } else {
+      node.leaf = true;
+    }
+    node.loading = false;
+    state.lazyLoadMap.delete(node);
+  };
+  const close = () => {
+    onClose && onClose();
+  };
+  const closePopup = () => {
+    close();
+  };
+  const chooseItem = async (node, type) => {
+    if (!type && node.disabled || !state.panes[state.tabsCursor]) {
+      return;
+    }
+    if (state.tree.isLeaf(node, isLazy())) {
+      node.leaf = true;
+      state.panes[state.tabsCursor].selectedNode = node;
+      state.panes = state.panes.slice(0, node.level + 1);
+      if (!type) {
+        const pathNodes = state.panes.map((item) => item.selectedNode);
+        const optionParams = pathNodes.map((item) => item.value);
+        onChange(optionParams, pathNodes);
+        onPathChange(optionParams, pathNodes);
+      }
+      setOptiosData(state.panes);
+      close();
+      return;
+    }
+    if (state.tree.hasChildren(node, isLazy())) {
+      const level = node.level + 1;
+      state.panes[state.tabsCursor].selectedNode = node;
+      state.panes = state.panes.slice(0, level);
+      state.tabsCursor = level;
+      state.panes.push({
+        nodes: node.children || [],
+        selectedNode: null,
+        paneKey: `c${state.tabsCursor + 1}`
+      });
+      setTabvalue(`c${state.tabsCursor + 1}`);
+      setOptiosData(state.panes);
+      if (!type) {
+        const pathNodes = state.panes.map((item) => item.selectedNode);
+        const optionParams = pathNodes.map((item) => item == null ? void 0 : item.value);
+        onPathChange(optionParams, pathNodes);
+      }
+      return;
+    }
+    state.currentProcessNode = node;
+    if (node.loading) {
+      return;
+    }
+    await invokeLazyLoad(node);
+    if (state.currentProcessNode === node) {
+      state.panes[state.tabsCursor].selectedNode = node;
+      chooseItem(node, type);
+    }
+    setOptiosData(state.panes);
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: `${classes} ${className}`,
+    style
+  }, /* @__PURE__ */ React__default.createElement(Popup, {
+    popClass: "cascadar-popup",
+    visible,
+    position: "bottom",
+    round: true,
+    closeable,
+    closeIconPosition,
+    closeIcon,
+    onClickOverlay: closePopup,
+    onClickCloseIcon: closePopup
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: b2("title")
+  }, title), /* @__PURE__ */ React__default.createElement(Tabs, {
+    value: tabvalue,
+    titleNode: () => {
+      return optiosData.map((pane, index2) => {
+        var _a, _b;
+        return /* @__PURE__ */ React__default.createElement("div", {
+          onClick: () => {
+            setTabvalue(pane.paneKey);
+            state.tabsCursor = index2;
+          },
+          className: `nut-tabs__titles-item ${tabvalue === pane.paneKey ? "active" : ""}`,
+          key: pane.paneKey
+        }, /* @__PURE__ */ React__default.createElement("span", {
+          className: "nut-tabs__titles-item__text"
+        }, !state.initLoading && state.panes.length && ((_a = pane == null ? void 0 : pane.selectedNode) == null ? void 0 : _a.text), !state.initLoading && state.panes.length && !((_b = pane == null ? void 0 : pane.selectedNode) == null ? void 0 : _b.text) && "\u8BF7\u9009\u62E9", !(!state.initLoading && state.panes.length) && "Loading..."), /* @__PURE__ */ React__default.createElement("span", {
+          className: "nut-tabs__titles-item__line"
+        }));
+      });
+    }
+  }, !state.initLoading && state.panes.length ? optiosData.map((pane) => /* @__PURE__ */ React__default.createElement(TabPane, {
+    key: pane.paneKey,
+    paneKey: pane.paneKey
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: classesPane
+  }, pane.nodes && pane.nodes.map((node, index2) => {
+    var _a;
+    return /* @__PURE__ */ React__default.createElement(CascaderItem, {
+      key: index2,
+      ...props,
+      data: node,
+      checked: ((_a = pane.selectedNode) == null ? void 0 : _a.value) === node.value,
+      chooseItem: (node2) => chooseItem(node2, false)
+    });
+  })))) : /* @__PURE__ */ React__default.createElement(TabPane, null, /* @__PURE__ */ React__default.createElement("div", {
+    className: classesPane
+  })))));
+};
+const Cascader = React__default.forwardRef(InternalCascader);
+Cascader.defaultProps = defaultProps$H;
+Cascader.displayName = "NutCascader";
+const defaultProps$G = {
   placeholder: "",
   shape: "square",
   disabled: false,
@@ -7182,7 +8384,7 @@ const SearchBar = (props) => {
     onClickRightinIcon,
     onClickRightoutIcon
   } = {
-    ...defaultProps$D,
+    ...defaultProps$G,
     ...props
   };
   const alignClass = `${align}`;
@@ -7319,9 +8521,9 @@ const SearchBar = (props) => {
     className: `${searchbarBem("content")}`
   }, renderLeftinIcon(), renderField(), renderRightinIcon(), clearable && value && handleClear()), renderRightoutIcon(), renderRightLabel());
 };
-SearchBar.defaultProps = defaultProps$D;
+SearchBar.defaultProps = defaultProps$G;
 SearchBar.displayName = "NutSearchBar";
-const defaultProps$C = {
+const defaultProps$F = {
   confirmText: "",
   title: "",
   visible: false,
@@ -7519,9 +8721,9 @@ const NumberKeyboard = (props) => {
     })
   }, confirmText || locale.done))) : null))));
 };
-NumberKeyboard.defaultProps = defaultProps$C;
+NumberKeyboard.defaultProps = defaultProps$F;
 NumberKeyboard.displayName = "NutNumberKeyboard";
-const defaultProps$B = {
+const defaultProps$E = {
   cancelTxt: "",
   optionTag: "name",
   optionSubTag: "subname",
@@ -7554,7 +8756,7 @@ const ActionSheet = (props) => {
     className,
     style,
     ...rest
-  } = { ...defaultProps$B, ...props };
+  } = { ...defaultProps$E, ...props };
   const b2 = cn("actionsheet");
   const isHighlight = (item) => {
     return props.chooseTagValue && props.chooseTagValue === item[props.optionTag || "name"] ? props.color : "#1a1a1a";
@@ -7598,9 +8800,9 @@ const ActionSheet = (props) => {
     onClick: () => cancelActionSheet()
   }, cancelTxt)));
 };
-ActionSheet.defaultProps = defaultProps$B;
+ActionSheet.defaultProps = defaultProps$E;
 ActionSheet.displayName = "NutActionSheet";
-const defaultProps$A = {
+const defaultProps$D = {
   bottom: 20,
   right: 10,
   elId: "body",
@@ -7623,7 +8825,7 @@ const BackTop = (props) => {
     style,
     onClick
   } = {
-    ...defaultProps$A,
+    ...defaultProps$D,
     ...props
   };
   const [backTop, SetBackTop] = useState(false);
@@ -7712,7 +8914,7 @@ const BackTop = (props) => {
     name: "top"
   }));
 };
-BackTop.defaultProps = defaultProps$A;
+BackTop.defaultProps = defaultProps$D;
 BackTop.displayName = "NutBackTop";
 function clamp(v2, min, max) {
   return Math.max(min, Math.min(v2, max));
@@ -12116,7 +13318,7 @@ const host = createHost(primitives, {
   }
 });
 const animated = host.animated;
-const defaultProps$z = {
+const defaultProps$C = {
   attract: false,
   direction: void 0,
   boundary: {
@@ -12129,7 +13331,7 @@ const defaultProps$z = {
 };
 const Drag = (props) => {
   const { attract, direction, boundary, children, className, style, ...reset } = {
-    ...defaultProps$z,
+    ...defaultProps$C,
     ...props
   };
   const b2 = cn("drag");
@@ -12191,7 +13393,7 @@ const Drag = (props) => {
     ...bind()
   }, children));
 };
-Drag.defaultProps = defaultProps$z;
+Drag.defaultProps = defaultProps$C;
 Drag.displayName = "NutDrag";
 const Content = (props) => {
   const {
@@ -12312,13 +13514,13 @@ const normalizeConfig = (_config) => {
 function confirm(config2, renderFunc) {
   const div = document.createElement("div");
   document.body.appendChild(div);
-  function render(props) {
+  function render2(props) {
     ReactDOM__default.render(/* @__PURE__ */ React__default.createElement(ConfirmDialog, {
       ...props,
       onCancel
     }), div);
   }
-  const renderFunction = renderFunc || render;
+  const renderFunction = renderFunc || render2;
   let dialogConfig = {
     ...config2,
     visible: false
@@ -12386,9 +13588,9 @@ function confirm(config2, renderFunc) {
     update: update2
   };
 }
-const defaultProps$y = {
-  okText: "",
-  cancelText: "",
+const defaultProps$B = {
+  okText: "\u786E\u8BA4",
+  cancelText: "\u53D6\u6D88",
   mask: true,
   closeOnClickOverlay: true,
   noFooter: false,
@@ -12401,10 +13603,10 @@ const defaultProps$y = {
   lockScroll: false
 };
 const BaseDialog = (props, ref) => {
-  const { locale } = useConfig();
   const {
     visible,
     footer,
+    noFooter,
     noOkBtn,
     noCancelBtn,
     lockScroll,
@@ -12418,9 +13620,9 @@ const BaseDialog = (props, ref) => {
     ...restProps
   } = props;
   const renderFooter = function() {
-    if (footer === null)
+    if (footer === null || noFooter)
       return "";
-    const handleCancel = function(e2) {
+    const handleCancel = (e2) => {
       e2.stopPropagation();
       if (!cancelAutoClose)
         return;
@@ -12430,7 +13632,7 @@ const BaseDialog = (props, ref) => {
         document.body.classList.remove("nut-overflow-hidden");
       }
     };
-    const handleOk = function(e2) {
+    const handleOk = (e2) => {
       e2.stopPropagation();
       onClosed == null ? void 0 : onClosed();
       onOk == null ? void 0 : onOk(e2);
@@ -12443,16 +13645,16 @@ const BaseDialog = (props, ref) => {
       plain: true,
       type: "primary",
       className: "nut-dialog__footer-cancel",
-      onClick: (e2) => handleCancel(e2)
-    }, cancelText || locale.cancel), !noOkBtn && /* @__PURE__ */ React__default.createElement(Button, {
+      onClick: handleCancel
+    }, cancelText), !noOkBtn && /* @__PURE__ */ React__default.createElement(Button, {
       size: "small",
       type: "primary",
       className: classNames("nut-dialog__footer-ok", {
         disabled: okBtnDisabled
       }),
       disabled: okBtnDisabled,
-      onClick: (e2) => handleOk(e2)
-    }, okText || locale.confirm));
+      onClick: handleOk
+    }, okText));
     return footerContent;
   };
   return /* @__PURE__ */ React__default.createElement(DialogWrapper, {
@@ -12477,9 +13679,9 @@ Dialog.confirm = (props) => {
     });
   };
 });
-Dialog.defaultProps = defaultProps$y;
+Dialog.defaultProps = defaultProps$B;
 Dialog.displayName = "NutDialog";
-const defaultProps$x = {
+const defaultProps$A = {
   hasMore: true,
   threshold: 200,
   containerId: "",
@@ -12513,7 +13715,7 @@ const Infiniteloading = (props) => {
     scrollChange,
     ...restProps
   } = {
-    ...defaultProps$x,
+    ...defaultProps$A,
     ...props
   };
   const [isInfiniting, setIsInfiniting] = useState(false);
@@ -12673,7 +13875,7 @@ const Infiniteloading = (props) => {
     className: "tips"
   }, loadMoreTxt || locale.infiniteloading.loadMoreText)));
 };
-Infiniteloading.defaultProps = defaultProps$x;
+Infiniteloading.defaultProps = defaultProps$A;
 Infiniteloading.displayName = "NutInfiniteloading";
 class Notification extends React.PureComponent {
   constructor(props) {
@@ -12780,7 +13982,7 @@ Notification.newInstance = (properties, callback) => {
       }
     });
   }
-  ReactDOM.render(/* @__PURE__ */ React.createElement(Notification, {
+  render(/* @__PURE__ */ React.createElement(Notification, {
     ...properties,
     ref
   }), element);
@@ -12848,7 +14050,7 @@ var Notify = {
     }
   }
 };
-const defaultProps$w = {
+const defaultProps$z = {
   isAsync: false,
   checked: false,
   disable: false,
@@ -12871,7 +14073,7 @@ const Switch = (props) => {
     className,
     style
   } = {
-    ...defaultProps$w,
+    ...defaultProps$z,
     ...props
   };
   const [value, setValue] = useState(false);
@@ -12882,39 +14084,223 @@ const Switch = (props) => {
   const classes = () => {
     return `${b2()} ${value ? "switch-open" : "switch-close"} ${disable ? `${b2()}-disable` : ""} ${`${b2()}-base`} ${className}`;
   };
-  const styles = () => {
-    const myStyle = {
-      backgroundColor: value ? activeColor : inactiveColor,
-      ...style || {}
-    };
-    return myStyle;
+  const styles = () => {
+    const myStyle = {
+      backgroundColor: value ? activeColor : inactiveColor,
+      ...style || {}
+    };
+    return myStyle;
+  };
+  const onClick = (event) => {
+    if (disable)
+      return;
+    if (!isAsync) {
+      setValue(!value);
+    }
+    change && change(!value, event);
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: classes(),
+    onClick: (e2) => onClick(e2),
+    style: styles()
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "switch-button"
+  }, !value && /* @__PURE__ */ React__default.createElement("div", {
+    className: "close-line"
+  }), activeText && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, value ? /* @__PURE__ */ React__default.createElement("div", {
+    className: `${b2("label")} open`
+  }, activeText) : /* @__PURE__ */ React__default.createElement("div", {
+    className: `${b2("label")} close`
+  }, inactiveText))));
+};
+Switch.defaultProps = defaultProps$z;
+Switch.displayName = "NutSwitch";
+function preventDefault(event, isStopPropagation) {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    event.stopPropagation();
+  }
+}
+const defaultProps$y = {
+  name: "",
+  leftWidth: 0,
+  rightWidth: 0
+};
+const Swipe = forwardRef((props, instanceRef) => {
+  const swipeBem = cn("swipe");
+  const touch = useTouch();
+  const { children, className, style } = { ...defaultProps$y, ...props };
+  const root = useRef();
+  const opened = useRef(false);
+  const lockClick = useRef(false);
+  const startOffset = useRef(0);
+  const [state, setState] = useState({
+    offset: 0,
+    dragging: false
+  });
+  const [actionWidth, setActionWidth] = useState({
+    left: 0,
+    right: 0
+  });
+  const wrapperStyle = {
+    transform: `translate3d(${state.offset}px, 0, 0)`,
+    transitionDuration: state.dragging ? "0s" : ".6s"
+  };
+  const leftWidth = useMemo(
+    () => props.leftWidth ? props.leftWidth : actionWidth.left,
+    [props.leftWidth, actionWidth.left]
+  );
+  const rightWidth = useMemo(
+    () => props.rightWidth ? props.rightWidth : actionWidth.right,
+    [props.rightWidth, actionWidth.right]
+  );
+  const onTouchStart = (event) => {
+    if (!props.disabled) {
+      startOffset.current = state.offset;
+      touch.start(event);
+    }
+  };
+  const onTouchMove = (event) => {
+    if (props.disabled) {
+      return;
+    }
+    touch.move(event);
+    if (touch.isHorizontal()) {
+      lockClick.current = true;
+      const newState = { ...state, dragging: true };
+      const isEdge = !opened || touch.deltaX * startOffset.current < 0;
+      if (isEdge) {
+        preventDefault(event, true);
+      }
+      newState.offset = rangeCalculation(
+        touch.deltaX + startOffset.current,
+        -rightWidth,
+        leftWidth
+      );
+      setState(newState);
+    }
+  };
+  const onTouchEnd = () => {
+    if (state.dragging) {
+      setState((v2) => ({ ...v2, dragging: false }));
+      toggle(state.offset > 0 ? "left" : "right");
+      setTimeout(() => {
+        lockClick.current = false;
+      }, 0);
+    }
+  };
+  const toggle = (side) => {
+    const offset = Math.abs(state.offset);
+    const base = 0.3;
+    const baseNum = opened ? 1 - base : base;
+    const width = side === "left" ? leftWidth : rightWidth;
+    if (width && offset > Number(width) * baseNum) {
+      open(side);
+    } else {
+      close(side);
+    }
+  };
+  const open = (side) => {
+    var _a;
+    opened.current = true;
+    const offset = side === "left" ? leftWidth : -rightWidth;
+    const name = props.name;
+    (_a = props.onOpen) == null ? void 0 : _a.call(props, { name, position: side });
+    setState((v2) => ({ ...v2, offset: Number(offset) || 0 }));
+  };
+  const close = (position) => {
+    var _a;
+    if (opened.current) {
+      opened.current = false;
+      (_a = props.onClose) == null ? void 0 : _a.call(props, {
+        name: props.name,
+        position: position || "left"
+      });
+    }
+    setState((v2) => ({ ...v2, offset: 0 }));
+  };
+  const rangeCalculation = (num, min, max) => {
+    return Math.min(Math.max(Number(num), Number(min)), Number(max));
   };
-  const onClick = (event) => {
-    if (disable)
-      return;
-    if (!isAsync) {
-      setValue(!value);
+  const getNodeWidth = (node) => {
+    if (node) {
+      const ele = getRect(node);
+      return ele.width;
+    }
+    return 0;
+  };
+  const leftRef = useCallback(
+    (node) => {
+      if (node !== null) {
+        setActionWidth((v2) => ({ ...v2, left: getNodeWidth(node) }));
+      }
+    },
+    [props.leftAction]
+  );
+  const rightRef = useCallback(
+    (node) => {
+      if (node !== null) {
+        setActionWidth((v2) => ({ ...v2, right: getNodeWidth(node) }));
+      }
+    },
+    [props.rightAction]
+  );
+  const renderActionContent = (side, measuredRef) => {
+    if (props[`${side}Action`]) {
+      return /* @__PURE__ */ React__default.createElement("div", {
+        ref: measuredRef,
+        className: `${swipeBem(side)}`,
+        onClick: (e2) => handleOperate(e2, side)
+      }, props[`${side}Action`]);
+    }
+    return null;
+  };
+  const handleOperate = (event, position) => {
+    event.stopPropagation();
+    if (props.beforeClose) {
+      props.beforeClose(position);
+    } else {
+      props.onActionClick && props.onActionClick(event, position);
     }
-    change && change(!value, event);
   };
+  useImperativeHandle(instanceRef, () => ({
+    open,
+    close: () => close()
+  }));
+  useEffect(() => {
+    const handler = (event) => {
+      const targets = [root];
+      if (targets.some((targetItem) => {
+        const targetElement = targetItem.current || targetItem;
+        return !targetElement || (targetElement == null ? void 0 : targetElement.contains(event.target));
+      })) {
+        return;
+      }
+      close();
+    };
+    document.addEventListener("touchstart", handler);
+    return () => {
+      document.removeEventListener("touchstart", handler);
+    };
+  }, []);
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: classes(),
-    onClick: (e2) => onClick(e2),
-    style: styles()
+    ref: root,
+    className: `${swipeBem()} ${className}`,
+    onTouchStart: (e2) => onTouchStart(e2),
+    onTouchMove: (e2) => onTouchMove(e2),
+    onTouchEnd,
+    style
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "switch-button"
-  }, !value && /* @__PURE__ */ React__default.createElement("div", {
-    className: "close-line"
-  }), activeText && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, value ? /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2("label")} open`
-  }, activeText) : /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2("label")} close`
-  }, inactiveText))));
-};
-Switch.defaultProps = defaultProps$w;
-Switch.displayName = "NutSwitch";
+    className: `${swipeBem("wrapper")}`,
+    style: wrapperStyle
+  }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef)));
+});
+Swipe.defaultProps = defaultProps$y;
+Swipe.displayName = "NutSwipe";
 const isObject = (val) => val !== null && typeof val === "object";
-const defaultProps$v = {
+const defaultProps$x = {
   strokeWidth: 5,
   radius: 50,
   strokeLinecap: "round",
@@ -12937,7 +14323,7 @@ const CircleProgress = (props) => {
     strokeLinecap,
     ...restProps
   } = {
-    ...defaultProps$v,
+    ...defaultProps$x,
     ...props
   };
   const b2 = cn("circleprogress");
@@ -13023,9 +14409,9 @@ const CircleProgress = (props) => {
     className: "nut-circleprogress-text"
   }, children || /* @__PURE__ */ React__default.createElement("div", null, progress, "%")));
 };
-CircleProgress.defaultProps = defaultProps$v;
+CircleProgress.defaultProps = defaultProps$x;
 CircleProgress.displayName = "NutCircleProgress";
-const defaultProps$u = {
+const defaultProps$w = {
   direction: "across",
   list: [],
   standTime: 1e3,
@@ -13063,7 +14449,7 @@ const NoticeBar = (props) => {
     rightIcon,
     close,
     click
-  } = { ...defaultProps$u, ...props };
+  } = { ...defaultProps$w, ...props };
   const wrap = useRef(null);
   const content = useRef(null);
   const [showNoticeBar, SetShowNoticeBar] = useState(true);
@@ -13128,8 +14514,8 @@ const NoticeBar = (props) => {
       if (!wrap.current || !content.current) {
         return;
       }
-      const wrapW = wrap.current.getBoundingClientRect().width;
-      const offsetW = content.current.getBoundingClientRect().width;
+      const wrapW = getRect(wrap.current).width;
+      const offsetW = getRect(content.current).width;
       const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
       SetIsCanScroll(canScroll);
       if (canScroll) {
@@ -13303,16 +14689,16 @@ const NoticeBar = (props) => {
     size: "11px"
   }) : null))) : null);
 };
-NoticeBar.defaultProps = defaultProps$u;
+NoticeBar.defaultProps = defaultProps$w;
 NoticeBar.displayName = "NutNoticeBar";
 const DataContext$1 = createContext({});
-const defaultProps$t = {
+const defaultProps$v = {
   current: 0,
   direction: "horizontal",
   progressDot: false
 };
 const Steps = (props) => {
-  const propSteps = { ...defaultProps$t, ...props };
+  const propSteps = { ...defaultProps$v, ...props };
   const {
     children,
     current,
@@ -13345,9 +14731,9 @@ const Steps = (props) => {
     children
   ));
 };
-Steps.defaultProps = defaultProps$t;
+Steps.defaultProps = defaultProps$v;
 Steps.displayName = "NutSteps";
-const defaultProps$s = {
+const defaultProps$u = {
   title: "",
   content: "",
   activeIndex: 0,
@@ -13368,7 +14754,7 @@ const Step = (props) => {
     renderContent,
     ...restProps
   } = {
-    ...defaultProps$s,
+    ...defaultProps$u,
     ...props
   };
   const parent = useContext$1(DataContext$1);
@@ -13429,10 +14815,10 @@ const Step = (props) => {
     className: "nut-step-content"
   }, renderContent())));
 };
-Step.defaultProps = defaultProps$s;
+Step.defaultProps = defaultProps$u;
 Step.displayName = "NutStep";
 const DataContext = createContext({});
-const defaultProps$r = {
+const defaultProps$t = {
   width: typeof window === "object" ? window.innerWidth : 375,
   height: 0,
   duration: 500,
@@ -13450,7 +14836,7 @@ const defaultProps$r = {
 };
 const DISTANCE = 5;
 const Swiper = React__default.forwardRef((props, ref) => {
-  const propSwiper = { ...defaultProps$r, ...props };
+  const propSwiper = { ...defaultProps$t, ...props };
   const {
     children,
     direction,
@@ -13754,7 +15140,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     _swiper.current.activePagination = (active + childCount) % childCount;
   }, [active]);
   const init = (active2 = +propSwiper.initPage) => {
-    const rect2 = container.current.getBoundingClientRect();
+    const rect2 = getRect(container == null ? void 0 : container.current);
     const _active = Math.max(Math.min(childCount - 1, active2), 0);
     const _width = propSwiper.width ? +propSwiper.width : rect2.width;
     const _height = propSwiper.height ? +propSwiper.height : rect2.height;
@@ -13860,13 +15246,13 @@ const Swiper = React__default.forwardRef((props, ref) => {
     });
   })) : /* @__PURE__ */ React__default.createElement("div", null, pageContent)));
 });
-Swiper.defaultProps = defaultProps$r;
+Swiper.defaultProps = defaultProps$t;
 Swiper.displayName = "NutSwiper";
-const defaultProps$q = {
+const defaultProps$s = {
   direction: "horizontal"
 };
 const SwiperItem = React__default.forwardRef((props, ref) => {
-  const _props = { ...defaultProps$q, ...props };
+  const _props = { ...defaultProps$s, ...props };
   const { children, direction, size } = _props;
   const parent = useContext$1(DataContext);
   const b2 = cn("swiper-item");
@@ -13885,10 +15271,10 @@ const SwiperItem = React__default.forwardRef((props, ref) => {
     style: style()
   }, children);
 });
-SwiperItem.defaultProps = defaultProps$q;
+SwiperItem.defaultProps = defaultProps$s;
 SwiperItem.displayName = "NutSwiperItem";
 const AvatarContext = createContext({});
-const defaultProps$p = {
+const defaultProps$r = {
   size: "",
   icon: "",
   bgColor: "#eee",
@@ -13915,7 +15301,7 @@ const Avatar = (props) => {
     onError,
     ...rest
   } = {
-    ...defaultProps$p,
+    ...defaultProps$r,
     ...props
   };
   const [maxSum, setMaxSum] = useState(0);
@@ -13996,9 +15382,9 @@ const Avatar = (props) => {
     className: "text"
   }, ((_l = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _l.maxContent) ? (_m = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _m.maxContent : `+ ${avatarIndex - ((_n = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _n.maxCount)}`)));
 };
-Avatar.defaultProps = defaultProps$p;
+Avatar.defaultProps = defaultProps$r;
 Avatar.displayName = "NutAvatar";
-const defaultProps$o = {
+const defaultProps$q = {
   maxContent: "",
   maxCount: "",
   maxBgColor: "#eee",
@@ -14010,7 +15396,7 @@ const defaultProps$o = {
 };
 const AvatarGroup = (props) => {
   useConfig();
-  const propAvatarGroup = { ...defaultProps$o, ...props };
+  const propAvatarGroup = { ...defaultProps$q, ...props };
   const { className, style, children } = propAvatarGroup;
   const avatarGroupRef = useRef(null);
   const b2 = cn("avatar-group");
@@ -14027,9 +15413,9 @@ const AvatarGroup = (props) => {
     ref: avatarGroupRef
   }, children));
 };
-AvatarGroup.defaultProps = defaultProps$o;
+AvatarGroup.defaultProps = defaultProps$q;
 AvatarGroup.displayName = "NutAvatarGroup";
-const defaultProps$n = {
+const defaultProps$p = {
   price: 0,
   needSymbol: true,
   symbol: "&yen;",
@@ -14047,7 +15433,7 @@ const Price = (props) => {
     className,
     ...rest
   } = {
-    ...defaultProps$n,
+    ...defaultProps$p,
     ...props
   };
   const b2 = cn("price");
@@ -14110,9 +15496,9 @@ const Price = (props) => {
     className: `${b2("small")}`
   }, formatDecimal(price)));
 };
-Price.defaultProps = defaultProps$n;
+Price.defaultProps = defaultProps$p;
 Price.displayName = "NutPrice";
-const defaultProps$m = {
+const defaultProps$o = {
   value: "",
   dot: false,
   max: 1e4,
@@ -14124,7 +15510,7 @@ const defaultProps$m = {
 };
 const Badge = (props) => {
   const { children, dot, top, right, zIndex, color, icons } = {
-    ...defaultProps$m,
+    ...defaultProps$o,
     ...props
   };
   function content() {
@@ -14159,9 +15545,9 @@ const Badge = (props) => {
     style: getStyle()
   }, content()));
 };
-Badge.defaultProps = defaultProps$m;
+Badge.defaultProps = defaultProps$o;
 Badge.displayName = "NutBadge";
-const defaultProps$l = {
+const defaultProps$n = {
   type: "default",
   color: "",
   textColor: "",
@@ -14189,7 +15575,7 @@ const Tag = (props) => {
     onClick,
     onClose
   } = {
-    ...defaultProps$l,
+    ...defaultProps$n,
     ...props
   };
   const [btnName, setBtnName] = useState("");
@@ -14261,7 +15647,7 @@ const Tag = (props) => {
     className: "text"
   }, children)));
 };
-Tag.defaultProps = defaultProps$l;
+Tag.defaultProps = defaultProps$n;
 Tag.displayName = "NutTag";
 function fillRef(ref, node) {
   if (typeof ref === "function") {
@@ -14305,13 +15691,7 @@ class Trigger extends React__default.Component {
     return trigger;
   }
 }
-const getEleAttr = (ele) => {
-  if (ele && ele.getBoundingClientRect) {
-    return ele.getBoundingClientRect();
-  }
-  return null;
-};
-const defaultProps$k = {
+const defaultProps$m = {
   list: [],
   theme: "light",
   location: "bottom",
@@ -14337,14 +15717,14 @@ const Popover = (props) => {
     onChoose,
     ...reset
   } = {
-    ...defaultProps$k,
+    ...defaultProps$m,
     ...props
   };
   const goodItem = useRef(null);
   setTimeout(() => {
-    if (goodItem.current && getEleAttr(goodItem.current)) {
-      setElWidth(getEleAttr(goodItem.current).width);
-      setElHeight(getEleAttr(goodItem.current).height);
+    if (goodItem.current && getRect(goodItem.current)) {
+      setElWidth(getRect(goodItem.current).width);
+      setElHeight(getRect(goodItem.current).height);
     }
   });
   const [classes, setClasses] = useState("");
@@ -14429,9 +15809,9 @@ const Popover = (props) => {
     style: { background: "transparent" }
   }) : "");
 };
-Popover.defaultProps = defaultProps$k;
+Popover.defaultProps = defaultProps$m;
 Popover.displayName = "NutPopover";
-const defaultProps$j = {
+const defaultProps$l = {
   width: "100px",
   height: "100px",
   row: 1,
@@ -14459,7 +15839,7 @@ const Skeleton = (props) => {
     avatarShape,
     ...restProps
   } = {
-    ...defaultProps$j,
+    ...defaultProps$l,
     ...props
   };
   const b2 = cn("skeleton");
@@ -14514,9 +15894,9 @@ const Skeleton = (props) => {
     });
   })))));
 };
-Skeleton.defaultProps = defaultProps$j;
+Skeleton.defaultProps = defaultProps$l;
 Skeleton.displayName = "NutSkeleton";
-const defaultProps$i = {
+const defaultProps$k = {
   showPlainText: false,
   showDays: false,
   paused: false,
@@ -14539,7 +15919,7 @@ const CountDown = (props) => {
     onUpdate,
     children,
     ...rest
-  } = { ...defaultProps$i, ...props };
+  } = { ...defaultProps$k, ...props };
   const b2 = cn("countdown");
   const [restTimeStamp, setRestTime] = useState(0);
   const stateRef = useRef({
@@ -14686,9 +16066,9 @@ const CountDown = (props) => {
     className: b2("block")
   }, resttime.s))));
 };
-CountDown.defaultProps = defaultProps$i;
+CountDown.defaultProps = defaultProps$k;
 CountDown.displayName = "NutCountDown";
-const defaultProps$h = {
+const defaultProps$j = {
   activeName: ["0"],
   accordion: false,
   icon: "",
@@ -14711,7 +16091,7 @@ const Collapse = memo(
       iconColor,
       change
     } = {
-      ...defaultProps$h,
+      ...defaultProps$j,
       ...props
     };
     const childrenDom = React__default.Children.toArray(children);
@@ -14768,9 +16148,9 @@ const Collapse = memo(
   },
   areEqual
 );
-Collapse.defaultProps = defaultProps$h;
+Collapse.defaultProps = defaultProps$j;
 Collapse.displayName = "NutCollapse";
-const defaultProps$g = {
+const defaultProps$i = {
   title: "",
   name: "",
   isOpen: false,
@@ -14804,7 +16184,7 @@ const CollapseItem = (props) => {
     iconColor,
     ...rest
   } = {
-    ...defaultProps$g,
+    ...defaultProps$i,
     ...props
   };
   const [domHeight, setDomHeight] = useState(-1);
@@ -14878,9 +16258,9 @@ const CollapseItem = (props) => {
     className: colBem("content-text")
   }, children)));
 };
-CollapseItem.defaultProps = defaultProps$g;
+CollapseItem.defaultProps = defaultProps$i;
 CollapseItem.displayName = "NutCollapseItem";
-const defaultProps$f = {
+const defaultProps$h = {
   maxLen: 0,
   endNumber: "",
   delaySpeed: 300,
@@ -14898,7 +16278,7 @@ const CountUp = (props) => {
     thousands,
     ...reset
   } = {
-    ...defaultProps$f,
+    ...defaultProps$h,
     ...props
   };
   const b2 = cn("countup");
@@ -14968,9 +16348,9 @@ const CountUp = (props) => {
     }, item));
   })));
 };
-CountUp.defaultProps = defaultProps$f;
+CountUp.defaultProps = defaultProps$h;
 CountUp.displayName = "NutCountUp";
-const defaultProps$e = {};
+const defaultProps$g = {};
 class AnimatingNumbers extends Component {
   constructor(props) {
     super(props);
@@ -14982,7 +16362,7 @@ class AnimatingNumbers extends Component {
     });
   }
 }
-AnimatingNumbers.defaultProps = defaultProps$e;
+AnimatingNumbers.defaultProps = defaultProps$g;
 AnimatingNumbers.displayName = "NutAnimatingNumbers";
 AnimatingNumbers.CountUp = CountUp;
 AnimatingNumbers.CountUp = CountUp;
@@ -14991,7 +16371,7 @@ const defaultStatus = {
   error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
   network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
 };
-const defaultProps$d = {
+const defaultProps$f = {
   description: "\u65E0\u5185\u5BB9",
   image: "empty",
   imageSize: "",
@@ -14999,9 +16379,9 @@ const defaultProps$d = {
 };
 const Empty = (props) => {
   const { locale } = useConfig();
-  defaultProps$d.description = locale.noData || defaultProps$d.description;
+  defaultProps$f.description = locale.noData || defaultProps$f.description;
   const { image, imageSize, description, children, className, ...rest } = {
-    ...defaultProps$d,
+    ...defaultProps$f,
     ...props
   };
   const [imgStyle, setImgStyle] = useState({});
@@ -15043,7 +16423,7 @@ const Empty = (props) => {
     className: b2("description")
   }, description) : { description }, children));
 };
-Empty.defaultProps = defaultProps$d;
+Empty.defaultProps = defaultProps$f;
 Empty.displayName = "NutEmpty";
 const initPositinoCache = (reaItemSize, length = 0) => {
   let index2 = 0;
@@ -15156,7 +16536,7 @@ const updateItemSize = (positions, items, sizeKey) => {
     }
   });
 };
-const defaultProps$c = {};
+const defaultProps$e = {};
 const VirtualList = (props) => {
   const {
     sourceData = [],
@@ -15315,9 +16695,9 @@ const VirtualList = (props) => {
     }) : data);
   }))));
 };
-VirtualList.defaultProps = defaultProps$c;
+VirtualList.defaultProps = defaultProps$e;
 VirtualList.displayName = "NutVirtualList";
-const defaultProps$b = {
+const defaultProps$d = {
   className: "",
   style: {},
   columns: [],
@@ -15328,7 +16708,7 @@ const defaultProps$b = {
 };
 const Table = (props) => {
   const { locale } = useConfig();
-  defaultProps$b.noData = locale.noData;
+  defaultProps$d.noData = locale.noData;
   const {
     children,
     className,
@@ -15342,7 +16722,7 @@ const Table = (props) => {
     onSorter,
     ...rest
   } = {
-    ...defaultProps$b,
+    ...defaultProps$d,
     ...props
   };
   const [curData, setCurData] = useState(data);
@@ -15394,14 +16774,14 @@ const Table = (props) => {
     });
   };
   const renderBodyTds = (item) => {
-    return sortDataItem().map(([value, render], index2) => {
+    return sortDataItem().map(([value, render2], index2) => {
       return /* @__PURE__ */ React__default.createElement("span", {
         className: classNames(
           "nut-table__main__body__tr__td",
           cellClasses(getColumnItem(value))
         ),
         key: value
-      }, typeof item[value] === "function" || typeof render === "function" ? /* @__PURE__ */ React__default.createElement("div", null, render ? render(item) : item[value](item)) : item[value]);
+      }, typeof item[value] === "function" || typeof render2 === "function" ? /* @__PURE__ */ React__default.createElement("div", null, render2 ? render2(item) : item[value](item)) : item[value]);
     });
   };
   const renderBoyTrs = () => {
@@ -15438,9 +16818,9 @@ const Table = (props) => {
     className: "nut-table__nodata__text"
   }, noData))));
 };
-Table.defaultProps = defaultProps$b;
+Table.defaultProps = defaultProps$d;
 Table.displayName = "NutTable";
-const defaultProps$a = {
+const defaultProps$c = {
   source: {
     type: {},
     src: ""
@@ -15465,7 +16845,7 @@ const Video = (props) => {
     playend,
     ...restProps
   } = {
-    ...defaultProps$a,
+    ...defaultProps$c,
     ...props
   };
   const rootRef = useRef(null);
@@ -15519,9 +16899,9 @@ const Video = (props) => {
     kind: "captions"
   })));
 };
-Video.defaultProps = defaultProps$a;
+Video.defaultProps = defaultProps$c;
 Video.displayName = "NutVideo";
-const defaultProps$9 = {
+const defaultProps$b = {
   className: "",
   style: {},
   isShowPercentage: true,
@@ -15565,7 +16945,7 @@ const Progress = (props) => {
     rounded,
     children,
     ...rest
-  } = { ...defaultProps$9, ...props };
+  } = { ...defaultProps$b, ...props };
   const b2 = cn("progress");
   const classes = classNames(b2(""));
   const classesOuter = classNames({
@@ -15639,8 +17019,436 @@ const Progress = (props) => {
     color: iconColor
   })));
 };
-Progress.defaultProps = defaultProps$9;
+Progress.defaultProps = defaultProps$b;
 Progress.displayName = "NutProgress";
+const defaultProps$a = {
+  className: "",
+  url: "",
+  style: {},
+  muted: false,
+  autoplay: false,
+  loop: false,
+  preload: "auto",
+  type: "progress",
+  onFastBack: (e2) => {
+  },
+  onForward: (e2) => {
+  },
+  onPause: (e2) => {
+  },
+  onPlayEnd: (e2) => {
+  },
+  onMute: (e2) => {
+  },
+  onCanPlay: (e2) => {
+  }
+};
+const Audio = (props) => {
+  const { locale } = useConfig();
+  const {
+    className,
+    url,
+    style,
+    muted,
+    autoplay,
+    loop: loop2,
+    preload,
+    type,
+    onFastBack,
+    onForward,
+    onPause,
+    onPlayEnd,
+    onMute,
+    onCanPlay,
+    children,
+    ...rest
+  } = {
+    ...defaultProps$a,
+    ...props
+  };
+  const [playing, setPlaying] = useState(false);
+  const [percent, setPercent] = useState(0);
+  const [isCanPlay, setIsCanPlay] = useState(false);
+  const [currentDuration, setCurrentDuration] = useState("00:00:00");
+  const AudioRef = useRef(null);
+  const statusRef = useRef({
+    currentTime: 0,
+    currentDuration: "00:00:00",
+    percent: 0,
+    duration: "00:00:00",
+    second: 0,
+    hanMuted: props.muted,
+    playing: props.autoplay,
+    handPlaying: false
+  });
+  const b2 = cn("audio");
+  const warn = console.warn;
+  const handleEnded = (e2) => {
+    if (props.loop) {
+      warn(locale.audio.tips || "onPlayEnd\u4E8B\u4EF6\u5728loop=false\u65F6\u624D\u4F1A\u89E6\u53D1");
+    } else {
+      props.onPlayEnd && props.onPlayEnd(e2);
+    }
+  };
+  function watch() {
+    if (AudioRef && AudioRef.current) {
+      const current = AudioRef.current;
+      current.addEventListener("play", () => {
+        setPlaying(true);
+      });
+    }
+  }
+  useEffect(() => {
+    watch();
+  }, []);
+  useEffect(() => {
+  }, [currentDuration]);
+  const handleStatusChange = () => {
+    setPlaying(!playing);
+    if (playing) {
+      AudioRef && AudioRef.current && AudioRef.current.pause();
+    } else {
+      AudioRef && AudioRef.current && AudioRef.current.play();
+    }
+  };
+  const renderIcon = () => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
+      className: b2("icon")
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: `${b2("icon-box")} ${playing ? b2("icon-play") : b2("icon-stop")}`,
+      onClick: handleStatusChange
+    }, playing ? /* @__PURE__ */ React__default.createElement(Icon, {
+      name: "service",
+      className: "nut-icon-loading"
+    }) : /* @__PURE__ */ React__default.createElement(Icon, {
+      name: "service"
+    }))));
+  };
+  const handleBack = () => {
+    if (statusRef.current.currentTime > 0 && AudioRef.current) {
+      statusRef.current.currentTime--;
+      AudioRef.current.currentTime = statusRef.current.currentTime;
+      props.onFastBack && props.onFastBack(AudioRef.current);
+    }
+  };
+  const handleForward = () => {
+    if (AudioRef.current) {
+      statusRef.current.currentTime++;
+      AudioRef.current.currentTime = statusRef.current.currentTime;
+      props.onForward && props.onForward(AudioRef.current);
+    }
+  };
+  const handleMute = () => {
+    if (AudioRef.current) {
+      AudioRef.current.muted = !AudioRef.current.muted;
+      props.onMute && props.onMute(AudioRef.current);
+    }
+  };
+  const handlePause = (e2) => {
+    setPlaying(false);
+    props.onPause && props.onPause(e2);
+  };
+  const formatSeconds = (value) => {
+    if (!value) {
+      return "00:00:00";
+    }
+    const time = parseInt(value);
+    const hours = Math.floor(time / 3600);
+    const minutes = Math.floor((time - hours * 3600) / 60);
+    const seconds = time - hours * 3600 - minutes * 60;
+    let result = "";
+    result += `${`0${hours.toString()}`.slice(-2)}:`;
+    result += `${`0${minutes.toString()}`.slice(-2)}:`;
+    result += `0${seconds.toString()}`.slice(-2);
+    return result;
+  };
+  const renderProgerss = () => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
+      className: b2("progress")
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: "time"
+    }, currentDuration), /* @__PURE__ */ React__default.createElement("div", {
+      className: b2("progress-bar-wrapper")
+    }, /* @__PURE__ */ React__default.createElement(Range, {
+      modelValue: percent,
+      hiddenTag: true,
+      hiddenRange: true,
+      "inactive-color": "#cccccc",
+      "active-color": "#fa2c19"
+    })), /* @__PURE__ */ React__default.createElement("div", {
+      className: "time"
+    }, AudioRef.current ? formatSeconds(`${statusRef.current.second}`) : "00:00:00")), /* @__PURE__ */ React__default.createElement("div", {
+      className: isCanPlay ? "custom-button-group" : "custom-button-group-disable"
+    }, /* @__PURE__ */ React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      className: "back",
+      onClick: handleBack
+    }, locale.audio.back || "\u5FEB\u9000"), /* @__PURE__ */ React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      className: "start",
+      onClick: handleStatusChange
+    }, playing ? `${locale.audio.pause || "\u6682\u505C"}` : `${locale.audio.start || "\u5F00\u59CB"}`), /* @__PURE__ */ React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      onClick: handleForward
+    }, locale.audio.forward || "\u5FEB\u8FDB"), /* @__PURE__ */ React__default.createElement(Button, {
+      type: AudioRef.current && AudioRef.current.muted ? "default" : "primary",
+      size: "small",
+      onClick: handleMute
+    }, locale.audio.mute || "\u9759\u97F3")));
+  };
+  const renderNone = () => {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: b2("none-container"),
+      onClick: handleStatusChange
+    }, children);
+  };
+  const renderAudio = () => {
+    switch (type) {
+      case "icon":
+        return renderIcon();
+      case "progress":
+        return renderProgerss();
+      case "none":
+        return renderNone();
+      default:
+        return null;
+    }
+  };
+  const handleCanplay = (e2) => {
+    setIsCanPlay(true);
+    if (props.autoplay && !playing) {
+      AudioRef && AudioRef.current && AudioRef.current.play();
+    }
+    if (AudioRef.current) {
+      statusRef.current.second = AudioRef.current.duration || 0;
+      props.onCanPlay && props.onCanPlay(e2);
+    }
+  };
+  const onTimeupdate = (e2) => {
+    const time = parseInt(e2.target.currentTime);
+    const formated = formatSeconds(`${time}`);
+    statusRef.current.currentDuration = formated;
+    setPercent(time / statusRef.current.second * 100);
+    setCurrentDuration(formated);
+    statusRef.current.currentTime = time;
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: `${b2()} ${className}`,
+    style,
+    ...rest
+  }, renderAudio(), /* @__PURE__ */ React__default.createElement("audio", {
+    className: "audioMain",
+    controls: type === "controls",
+    ref: AudioRef,
+    src: url,
+    muted,
+    preload,
+    loop: loop2,
+    onPause: (e2) => handlePause(e2),
+    onEnded: (e2) => handleEnded(e2),
+    onCanPlay: (e2) => handleCanplay(e2),
+    onTimeUpdate: (e2) => onTimeupdate(e2)
+  }, /* @__PURE__ */ React__default.createElement("track", {
+    kind: "captions"
+  })));
+};
+Audio.defaultProps = defaultProps$a;
+Audio.displayName = "NutAudio";
+const defaultProps$9 = {
+  images: [],
+  videos: [],
+  show: false,
+  autoplay: 3e3,
+  initNo: 1,
+  contentClose: false,
+  paginationVisible: false,
+  paginationColor: "#fff",
+  onClose: () => {
+  }
+};
+const ImagePreview = (props) => {
+  const {
+    images,
+    videos,
+    show,
+    initNo,
+    paginationColor,
+    paginationVisible,
+    autoplay,
+    contentClose,
+    onClose
+  } = props;
+  const nutImagePreview = useRef(null);
+  const [showPop, setShowPop] = useState(false);
+  const [active, setActive] = useState(1);
+  const [maxNo, setMaxNo] = useState(1);
+  const [store, setStore] = useState({
+    scale: 1,
+    moveable: false
+  });
+  const [lastTouchEndTime, setLastTouchEndTime] = useState(0);
+  const onTouchStart = (event) => {
+    const touches = event.touches;
+    const events = touches[0];
+    const events2 = touches[1];
+    const curTouchTime = new Date().getTime();
+    if (curTouchTime - lastTouchEndTime < 300) {
+      const store12 = store;
+      if (store12.scale > 1) {
+        store12.scale = 1;
+      } else if (store12.scale === 1) {
+        store12.scale = 2;
+      }
+      scaleNow();
+    }
+    const store1 = store;
+    store1.moveable = true;
+    if (events2) {
+      store1.oriDistance = getDistance(
+        {
+          x: events.pageX,
+          y: events.pageY
+        },
+        {
+          x: events2.pageX,
+          y: events2.pageY
+        }
+      );
+    }
+    store1.originScale = store1.scale || 1;
+  };
+  const onTouchMove = (event) => {
+    const touches = event.touches;
+    const events = touches[0];
+    const events2 = touches[1];
+    if (!store.moveable) {
+      return;
+    }
+    const store1 = store;
+    if (events2) {
+      const curDistance = getDistance(
+        {
+          x: events.pageX,
+          y: events.pageY
+        },
+        {
+          x: events2.pageX,
+          y: events2.pageY
+        }
+      );
+      const curScale = curDistance / store1.oriDistance;
+      store1.scale = store1.originScale * curScale;
+      if (store1.scale > 3) {
+        store1.scale = 3;
+      }
+      scaleNow();
+    }
+  };
+  const onTouchEnd = () => {
+    setLastTouchEndTime(new Date().getTime());
+    const store1 = store;
+    store1.moveable = false;
+    if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
+      store1.scale = 1;
+      scaleNow();
+    }
+  };
+  const init = () => {
+    document.addEventListener("touchmove", onTouchMove);
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("touchcancel", onTouchEnd);
+  };
+  useEffect(() => {
+    if (show !== void 0) {
+      setShowPop(show);
+      init();
+    }
+  }, [show]);
+  useEffect(() => {
+    if (initNo !== void 0) {
+      setActive(initNo);
+    }
+    if (show !== void 0) {
+      setShowPop(show);
+    }
+    if (images && videos) {
+      setMaxNo(images.length + videos.length);
+    }
+  }, []);
+  const scaleNow = () => {
+    if (nutImagePreview.current) {
+      nutImagePreview.current.style.transform = `scale(${store.scale})`;
+    }
+  };
+  const onCloseInner = () => {
+    setShowPop(false);
+    setActive(1);
+    scaleNow();
+    onClose && onClose();
+    setStore({
+      ...store,
+      scale: 1
+    });
+  };
+  const getDistance = (first, second) => {
+    return Math.hypot(
+      Math.abs(second.x - first.x),
+      Math.abs(second.y - first.y)
+    );
+  };
+  const slideChangeEnd = (page) => {
+    setActive(page + 1);
+  };
+  const closeOnImg = () => {
+    if (contentClose) {
+      onCloseInner();
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(Popup, {
+    visible: showPop,
+    popClass: "custom-pop",
+    style: { width: "100%" },
+    onClick: onCloseInner
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-imagepreview",
+    ref: nutImagePreview,
+    onClick: closeOnImg,
+    onTouchStart
+  }, /* @__PURE__ */ React__default.createElement(Swiper, {
+    autoPlay: autoplay,
+    className: "nut-imagepreview-swiper",
+    loop: true,
+    isPreventDefault: false,
+    style: { display: showPop ? "block" : "none" },
+    direction: "horizontal",
+    onChange: slideChangeEnd,
+    initPage: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1),
+    paginationColor,
+    paginationVisible
+  }, videos && videos.length > 0 && videos.map((item, index2) => {
+    return /* @__PURE__ */ React__default.createElement(SwiperItem, {
+      key: index2
+    }, /* @__PURE__ */ React__default.createElement(Video, {
+      source: item.source,
+      options: item.options
+    }));
+  }), images && images.length > 0 && images.map((item, index2) => {
+    return /* @__PURE__ */ React__default.createElement(SwiperItem, {
+      key: index2
+    }, /* @__PURE__ */ React__default.createElement("img", {
+      src: item.src,
+      alt: "",
+      className: "nut-imagepreview-img"
+    }));
+  }))), /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-imagepreview-index"
+  }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)));
+};
+ImagePreview.defaultProps = defaultProps$9;
+ImagePreview.displayName = "NutImagePreview";
 const defaultProps$8 = {
   type: "custom",
   existAddress: [],
@@ -16666,4 +18474,4 @@ const TimeSelect = (props) => {
 };
 TimeSelect.defaultProps = defaultProps;
 TimeSelect.displayName = "NutTimeSelect";
-export { ActionSheet, Address, AnimatingNumbers, Avatar, AvatarGroup, BackTop, Badge, Barrage, Button, Calendar, CalendarItem, Card, Cell, CellGroup, Checkbox, CheckboxGroup, CircleProgress, Col, Collapse, CollapseItem, ConfigProvider, CountDown, DatePicker, Dialog, Divider, Drag, Elevator, Empty, FixedNav, Icon, Indicator, Infiniteloading, Input, InputNumber, Layout, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, Picker, Popover, Popup, Price, Progress, Radio, RadioGroup, Range, Rate, Row, SearchBar, ShortPassword, SideNavBar, SideNavBarItem, Signature, Skeleton, Step, Steps, SubSideNavBar, Swiper, SwiperItem, Switch, TabPane, Tabbar, TabbarItem, Table, Tabs, Tag, TextArea, TimeDetail, TimePannel, TimeSelect, Toast, Uploader, Video, VirtualList };
+export { ActionSheet, Address, AnimatingNumbers, Audio, Avatar, AvatarGroup, BackTop, Badge, Barrage, Button, Calendar, CalendarItem, Card, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, CircleProgress, Col, Collapse, CollapseItem, ConfigProvider, CountDown, DatePicker, Dialog, Divider, Drag, Elevator, Empty, FixedNav, Grid, GridItem, Icon, ImagePreview, Indicator, Infiniteloading, Input, InputNumber, Layout, Menu, MenuItem, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, Picker, Popover, Popup, Price, Progress, Radio, RadioGroup, Range, Rate, Row, SearchBar, ShortPassword, SideNavBar, SideNavBarItem, Signature, Skeleton, Step, Steps, SubSideNavBar, Swipe, Swiper, SwiperItem, Switch, TabPane, Tabbar, TabbarItem, Table, Tabs, Tag, TextArea, TimeDetail, TimePannel, TimeSelect, Toast, Uploader, Video, VirtualList };