antd-mobile 5.15.1 → 5.16.0

package/bundle/antd-mobile.es.js

@@ -1,12 +1,12 @@
 import { __rest, __awaiter } from "tslib";
 import React$1, { useContext, useRef, useEffect, useMemo, useState, useImperativeHandle, memo, forwardRef, useCallback, createContext, cloneElement } from "react";
 import classNames from "classnames";
-import { useUnmountedRef, useUpdate, useMemoizedFn, useUpdateEffect, useIsomorphicLayoutEffect, createUpdateEffect, useThrottleFn, useDebounceEffect, useMount, useInViewport, useClickAway, useUnmount, useLockFn, useTimeout } from "ahooks";
+import { useUnmountedRef, useIsomorphicLayoutEffect, useUpdate, useMemoizedFn, useUpdateEffect, createUpdateEffect, useThrottleFn, useDebounceEffect, useMount, useInViewport, useClickAway, useUnmount, useLockFn, useTimeout } from "ahooks";
 import { useSpring, animated, to, Globals } from "@react-spring/web";
+import { CloseOutline, RightOutline, CheckOutline, DownOutline, DownFill, QuestionCircleOutline, AddOutline, CloseCircleFill, LeftOutline, SoundOutline, TextDeletionOutline, CheckCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill, SearchOutline, MinusOutline } from "antd-mobile-icons";
 import dayjs from "dayjs";
 import { isFragment, isMemo } from "react-is";
 import { useDrag, useWheel, createUseGesture, dragAction, pinchAction } from "@use-gesture/react";
-import { RightOutline, CheckOutline, DownOutline, DownFill, QuestionCircleOutline, CloseOutline, AddOutline, CloseCircleFill, LeftOutline, SoundOutline, TextDeletionOutline, CheckCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill, SearchOutline, MinusOutline } from "antd-mobile-icons";
 import { staged } from "staged-components";
 import RcForm, { List as List$2, Field, useWatch, FieldContext as FieldContext$1, useForm } from "rc-field-form";
 import { computePosition, offset, shift, limitShift, flip, hide, arrow, autoUpdate } from "@floating-ui/dom";
@@ -1348,6 +1348,13 @@ const base = {
     canRelease: "Release to refresh immediately",
     complete: "Refresh successful"
   },
+  Slider: {
+    name: "Slider"
+  },
+  Stepper: {
+    decrease: "decrease",
+    increase: "increase"
+  },
   Switch: {
     name: "Switch"
   }
@@ -1459,6 +1466,13 @@ const zhCN = mergeLocale(base, {
     canRelease: "\u91CA\u653E\u7ACB\u5373\u5237\u65B0",
     complete: "\u5237\u65B0\u6210\u529F"
   },
+  Slider: {
+    name: "\u6ED1\u52A8\u8F93\u5165\u6761"
+  },
+  Stepper: {
+    decrease: "\u51CF\u5C11",
+    increase: "\u589E\u52A0"
+  },
   Switch: {
     name: "\u5F00\u5173"
   }
@@ -1552,7 +1566,7 @@ function mergeProps(...items) {
   }
   return ret;
 }
-var popup = /* @__PURE__ */ (() => ".adm-popup {\n  --z-index: var(--adm-popup-z-index, 1000);\n  position: fixed;\n  z-index: var(--z-index);\n}\n.adm-popup-body {\n  position: fixed;\n  background-color: var(--adm-color-background);\n  z-index: calc(var(--z-index) + 10);\n}\n.adm-popup-body-position-bottom {\n  width: 100%;\n  bottom: 0;\n  left: 0;\n}\n.adm-popup-body-position-top {\n  width: 100%;\n  top: 0;\n  left: 0;\n}\n.adm-popup-body-position-left {\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.adm-popup-body-position-right {\n  height: 100%;\n  top: 0;\n  right: 0;\n}\n")();
+var popup = /* @__PURE__ */ (() => ".adm-popup {\n  --z-index: var(--adm-popup-z-index, 1000);\n  position: fixed;\n  z-index: var(--z-index);\n}\n.adm-popup-body {\n  position: fixed;\n  background-color: var(--adm-color-background);\n  z-index: calc(var(--z-index) + 10);\n}\n.adm-popup-body .adm-popup-close-icon {\n  position: absolute;\n  z-index: 100;\n}\n.adm-popup-body-position-bottom {\n  width: 100%;\n  bottom: 0;\n  left: 0;\n}\n.adm-popup-body-position-bottom .adm-popup-close-icon {\n  right: 8px;\n  top: 8px;\n}\n.adm-popup-body-position-top {\n  width: 100%;\n  top: 0;\n  left: 0;\n}\n.adm-popup-body-position-top .adm-popup-close-icon {\n  right: 8px;\n  bottom: 8px;\n}\n.adm-popup-body-position-left {\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.adm-popup-body-position-left .adm-popup-close-icon {\n  right: 8px;\n  top: 8px;\n}\n.adm-popup-body-position-right {\n  height: 100%;\n  top: 0;\n  right: 0;\n}\n.adm-popup-body-position-right .adm-popup-close-icon {\n  left: 8px;\n  top: 8px;\n}\n.adm-popup-close-icon {\n  cursor: pointer;\n  padding: 4px;\n  font-size: 18px;\n  color: var(--adm-color-weak);\n}\n")();
 var mask = /* @__PURE__ */ (() => ".adm-mask {\n  --z-index: var(--adm-mask-z-index, 1000);\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.adm-mask-aria-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.adm-mask-content {\n  z-index: 1;\n}\n")();
 const MIN_DISTANCE = 10;
 function getDirection(x, y) {
@@ -8879,7 +8893,7 @@ const opacityRecord = {
   thin: 0.35,
   thick: 0.75
 };
-const defaultProps$$ = {
+const defaultProps$10 = {
   visible: true,
   destroyOnClose: false,
   forceRender: false,
@@ -8890,7 +8904,7 @@ const defaultProps$$ = {
   stopPropagation: ["click"]
 };
 const Mask = (p2) => {
-  const props = mergeProps(defaultProps$$, p2);
+  const props = mergeProps(defaultProps$10, p2);
   const {
     locale
   } = useConfig();
@@ -8958,21 +8972,39 @@ const Mask = (p2) => {
     destroyOnClose: props.destroyOnClose
   }, renderToContainer(props.getContainer, node));
 };
-const classPrefix$1h = `adm-popup`;
-const defaultProps$_ = {
-  position: "bottom",
-  visible: false,
-  getContainer: () => document.body,
+const defaultPopupBaseProps = {
+  closeOnMaskClick: false,
+  destroyOnClose: false,
+  disableBodyScroll: true,
+  forceRender: false,
+  getContainer: null,
   mask: true,
-  stopPropagation: ["click"]
+  showCloseButton: false,
+  stopPropagation: ["click"],
+  visible: false
 };
+function useInnerVisible(outerVisible) {
+  const [innerVisible, setInnerVisible] = useState(outerVisible);
+  useIsomorphicLayoutEffect(() => {
+    setInnerVisible(outerVisible);
+  }, [outerVisible]);
+  return innerVisible;
+}
+const classPrefix$1h = `adm-popup`;
+const defaultProps$$ = Object.assign(Object.assign({}, defaultPopupBaseProps), {
+  position: "bottom"
+});
 const Popup = (p2) => {
-  const props = mergeProps(defaultProps$_, p2);
+  const props = mergeProps(defaultProps$$, p2);
   const bodyCls = classNames(`${classPrefix$1h}-body`, props.bodyClassName, `${classPrefix$1h}-body-position-${props.position}`);
-  const ref = useRef(null);
   const [active, setActive] = useState(props.visible);
-  useLockScroll(ref, active);
-  const shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
+  useIsomorphicLayoutEffect(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const ref = useRef(null);
+  useLockScroll(ref, props.disableBodyScroll && active);
   const unmountedRef = useUnmountedRef();
   const {
     percent
@@ -8984,9 +9016,6 @@ const Popup = (p2) => {
       tension: 300,
       friction: 30
     },
-    onStart: () => {
-      setActive(true);
-    },
     onRest: () => {
       var _a, _b;
       if (unmountedRef.current)
@@ -8999,6 +9028,7 @@ const Popup = (p2) => {
       }
     }
   });
+  const maskVisible = useInnerVisible(active && props.visible);
   const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React$1.createElement("div", {
     className: classPrefix$1h,
     onClick: props.onClick,
@@ -9006,8 +9036,16 @@ const Popup = (p2) => {
       display: active ? void 0 : "none"
     }
   }, props.mask && React$1.createElement(Mask, {
-    visible: props.visible,
-    onMaskClick: props.onMaskClick,
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: (e2) => {
+      var _a, _b;
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e2);
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
     className: props.maskClassName,
     style: props.maskStyle,
     disableBodyScroll: false,
@@ -9032,8 +9070,18 @@ const Popup = (p2) => {
       })
     }),
     ref
-  }, shouldRender && props.children))));
-  return renderToContainer(props.getContainer, node);
+  }, props.showCloseButton && React$1.createElement("a", {
+    className: classNames(`${classPrefix$1h}-close-icon`, "adm-plain-anchor"),
+    onClick: () => {
+      var _a;
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React$1.createElement(CloseOutline, null)), props.children))));
+  return React$1.createElement(ShouldRender, {
+    active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
 };
 var safeArea = /* @__PURE__ */ (() => ".adm-safe-area {\n  --multiple: var(--adm-safe-area-multiple, 1);\n  display: block;\n  width: 100%;\n}\n.adm-safe-area-position-top {\n  padding-top: calc(env(safe-area-inset-top) * var(--multiple));\n}\n.adm-safe-area-position-bottom {\n  padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));\n}\n")();
 const classPrefix$1g = "adm-safe-area";
@@ -9168,16 +9216,18 @@ function renderImperatively(element) {
   };
 }
 const classPrefix$1f = `adm-action-sheet`;
-const defaultProps$Z = {
+const defaultProps$_ = {
   visible: false,
   actions: [],
   cancelText: "",
   closeOnAction: false,
   closeOnMaskClick: true,
-  safeArea: true
+  safeArea: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 const ActionSheet = (p2) => {
-  const props = mergeProps(defaultProps$Z, p2);
+  const props = mergeProps(defaultProps$_, p2);
   return React$1.createElement(Popup, {
     visible: props.visible,
     onMaskClick: () => {
@@ -9190,7 +9240,9 @@ const ActionSheet = (p2) => {
     afterClose: props.afterClose,
     className: classNames(`${classPrefix$1f}-popup`, props.popupClassName),
     style: props.popupStyle,
-    getContainer: props.getContainer
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, withNativeProps(props, React$1.createElement("div", {
     className: classPrefix$1f
   }, props.extra && React$1.createElement("div", {
@@ -9288,12 +9340,12 @@ const Fallback = memo(() => React$1.createElement("svg", {
   mask: "url(#mask-2)"
 }))))));
 const classPrefix$1d = "adm-avatar";
-const defaultProps$Y = {
+const defaultProps$Z = {
   fallback: React$1.createElement(Fallback, null),
   fit: "cover"
 };
 const Avatar = (p2) => {
-  const props = mergeProps(defaultProps$Y, p2);
+  const props = mergeProps(defaultProps$Z, p2);
   return withNativeProps(props, React$1.createElement(Image$1, {
     className: classPrefix$1d,
     src: props.src,
@@ -9341,12 +9393,12 @@ const colorRecord$3 = {
   primary: "var(--adm-color-primary)",
   white: "var(--adm-color-white)"
 };
-const defaultProps$X = {
+const defaultProps$Y = {
   color: "default"
 };
 const DotLoading = memo((p2) => {
   var _a;
-  const props = mergeProps(defaultProps$X, p2);
+  const props = mergeProps(defaultProps$Y, p2);
   return withNativeProps(props, React$1.createElement("div", {
     style: {
       color: (_a = colorRecord$3[props.color]) !== null && _a !== void 0 ? _a : props.color
@@ -9395,7 +9447,7 @@ function isIOS() {
   return canUseDom ? /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) : false;
 }
 const classPrefix$1a = `adm-button`;
-const defaultProps$W = {
+const defaultProps$X = {
   color: "default",
   fill: "solid",
   block: false,
@@ -9408,7 +9460,7 @@ const defaultProps$W = {
   size: "middle"
 };
 const Button = forwardRef((p2, ref) => {
-  const props = mergeProps(defaultProps$W, p2);
+  const props = mergeProps(defaultProps$X, p2);
   const [innerLoading, setInnerLoading] = useState(false);
   const nativeButtonRef = useRef(null);
   const loading = props.loading === "auto" ? innerLoading : props.loading;
@@ -9573,7 +9625,7 @@ function convertValueToRange(selectionMode, value) {
 }
 dayjs.extend(isoWeek);
 const classPrefix$19 = "adm-calendar";
-const defaultProps$V = {
+const defaultProps$W = {
   weekStartsOn: "Sunday",
   defaultValue: null,
   allowClear: true,
@@ -9584,7 +9636,7 @@ const defaultProps$V = {
 };
 const Calendar = forwardRef((p2, ref) => {
   const today = dayjs();
-  const props = mergeProps(defaultProps$V, p2);
+  const props = mergeProps(defaultProps$W, p2);
   const {
     locale
   } = useConfig();
@@ -10441,26 +10493,30 @@ const Wheel = memo((props) => {
       className: "adm-picker-view-column-accessible-current",
       role: "button",
       "aria-label": current ? `\u5F53\u524D\u9009\u62E9\u7684\u662F\uFF1A${current.label}` : "\u5F53\u524D\u672A\u9009\u62E9"
-    }, "-"), React$1.createElement("div", null, previous && React$1.createElement("div", {
+    }, "-"), React$1.createElement("div", {
       className: "adm-picker-view-column-accessible-button",
       onClick: () => {
+        if (!previous)
+          return;
         scrollSelect(previousIndex);
       },
-      role: "button",
-      "aria-label": `\u9009\u62E9\u4E0A\u4E00\u9879\uFF1A${previous.label}`
-    }, "-")), React$1.createElement("div", null, next && React$1.createElement("div", {
+      role: previous ? "button" : "text",
+      "aria-label": !previous ? "\u6CA1\u6709\u4E0A\u4E00\u9879" : `\u9009\u62E9\u4E0A\u4E00\u9879\uFF1A${previous.label}`
+    }, "-"), React$1.createElement("div", {
       className: "adm-picker-view-column-accessible-button",
       onClick: () => {
+        if (!next)
+          return;
         scrollSelect(nextIndex);
       },
-      role: "button",
-      "aria-label": `\u9009\u62E9\u4E0B\u4E00\u9879\uFF1A${next.label}`
-    }, "-")));
+      role: next ? "button" : "text",
+      "aria-label": !next ? "\u6CA1\u6709\u4E0B\u4E00\u9879" : `\u9009\u62E9\u4E0B\u4E00\u9879\uFF1A${next.label}`
+    }, "-"));
   }
   return React$1.createElement("div", {
-    ref: rootRef,
     className: `${classPrefix$15}-column`
   }, React$1.createElement(animated.div, {
+    ref: rootRef,
     style: {
       translateY: y
     },
@@ -10540,13 +10596,13 @@ function useColumnsExtend(rawColumns, value) {
 }
 const defaultRenderLabel$3 = (item) => item.label;
 const classPrefix$14 = `adm-picker-view`;
-const defaultProps$U = {
+const defaultProps$V = {
   defaultValue: [],
   renderLabel: defaultRenderLabel$3,
   mouseWheel: false
 };
 const PickerView = memo((p2) => {
-  const props = mergeProps(defaultProps$U, p2);
+  const props = mergeProps(defaultProps$V, p2);
   const [innerValue, setInnerValue] = useState(props.value === void 0 ? props.defaultValue : props.value);
   useEffect(() => {
     if (props.value === void 0)
@@ -10607,19 +10663,21 @@ const PickerView = memo((p2) => {
   }))));
 });
 PickerView.displayName = "PickerView";
-var pickerView = /* @__PURE__ */ (() => ".adm-picker-view {\n  --height: 240px;\n  --item-height: 34px;\n  --item-font-size: var(--adm-font-size-8);\n  height: var(--height);\n  width: 100%;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  background: var(--adm-color-white);\n}\n.adm-picker-view-column {\n  height: 100%;\n  flex: 1;\n  user-select: none;\n  touch-action: none;\n  position: relative;\n  z-index: 0;\n}\n.adm-picker-view-column-wheel {\n  width: 100%;\n  cursor: grab;\n  position: absolute;\n  top: calc(50% - var(--item-height) / 2);\n  left: 0;\n}\n.adm-picker-view-column-wheel::before {\n  content: ' ';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100vh;\n  top: -100vh;\n}\n.adm-picker-view-column-wheel::after {\n  content: ' ';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100vh;\n  bottom: -100vh;\n}\n.adm-picker-view-column-item {\n  font-size: var(--item-font-size);\n  padding: 0 6px;\n  height: var(--item-height);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.adm-picker-view-column-item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.adm-picker-view-column-accessible {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  opacity: 0;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: 0;\n}\n.adm-picker-view-column-accessible > * {\n  flex: 1;\n  text-overflow: ellipsis;\n}\n.adm-picker-view-column-accessible-current {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.adm-picker-view-column-accessible-button {\n  width: 100%;\n  height: 100%;\n}\n.adm-picker-view-mask {\n  position: absolute;\n  z-index: 10000;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  pointer-events: none;\n}\n.adm-picker-view-mask-top,\n.adm-picker-view-mask-bottom {\n  flex: auto;\n}\n.adm-picker-view-mask-middle {\n  height: var(--item-height);\n  box-sizing: border-box;\n  flex: none;\n  border-top: solid 1px var(--adm-color-border);\n  border-bottom: solid 1px var(--adm-color-border);\n}\n.adm-picker-view-mask-top {\n  background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);\n}\n.adm-picker-view-mask-bottom {\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);\n}\n")();
+var pickerView = /* @__PURE__ */ (() => ".adm-picker-view {\n  --height: 240px;\n  --item-height: 34px;\n  --item-font-size: var(--adm-font-size-8);\n  height: var(--height);\n  width: 100%;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  background: var(--adm-color-white);\n}\n.adm-picker-view-column {\n  height: 100%;\n  flex: 1;\n  user-select: none;\n  touch-action: none;\n  position: relative;\n  z-index: 0;\n}\n.adm-picker-view-column-wheel {\n  width: 100%;\n  cursor: grab;\n  position: absolute;\n  top: calc(50% - var(--item-height) / 2);\n  left: 0;\n}\n.adm-picker-view-column-wheel::before {\n  content: ' ';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100vh;\n  top: -100vh;\n}\n.adm-picker-view-column-wheel::after {\n  content: ' ';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100vh;\n  bottom: -100vh;\n}\n.adm-picker-view-column-item {\n  font-size: var(--item-font-size);\n  padding: 0 6px;\n  height: var(--item-height);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.adm-picker-view-column-item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.adm-picker-view-column-accessible {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  opacity: 0;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: 0;\n  padding-bottom: 1px;\n}\n.adm-picker-view-column-accessible > * {\n  flex: 1;\n  text-overflow: ellipsis;\n}\n.adm-picker-view-column-accessible-current {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.adm-picker-view-column-accessible-button {\n  width: 100%;\n  height: 100%;\n}\n.adm-picker-view-mask {\n  position: absolute;\n  z-index: 10000;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  pointer-events: none;\n}\n.adm-picker-view-mask-top,\n.adm-picker-view-mask-bottom {\n  flex: auto;\n}\n.adm-picker-view-mask-middle {\n  height: var(--item-height);\n  box-sizing: border-box;\n  flex: none;\n  border-top: solid 1px var(--adm-color-border);\n  border-bottom: solid 1px var(--adm-color-border);\n}\n.adm-picker-view-mask-top {\n  background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);\n}\n.adm-picker-view-mask-bottom {\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);\n}\n")();
 const classPrefix$13 = `adm-picker`;
-const defaultProps$T = {
+const defaultProps$U = {
   defaultValue: [],
   closeOnMaskClick: true,
-  renderLabel: defaultRenderLabel$3
+  renderLabel: defaultRenderLabel$3,
+  destroyOnClose: false,
+  forceRender: false
 };
 const Picker$1 = memo(forwardRef((p2, ref) => {
   var _a;
   const {
     locale
   } = useConfig();
-  const props = mergeProps(defaultProps$T, {
+  const props = mergeProps(defaultProps$U, {
     confirmText: locale.common.confirm,
     cancelText: locale.common.cancel
   }, p2);
@@ -10671,12 +10729,12 @@ const Picker$1 = memo(forwardRef((p2, ref) => {
       (_a2 = props.onSelect) === null || _a2 === void 0 ? void 0 : _a2.call(props, val, ext);
     }
   });
-  const shouldRender = useShouldRender(visible, props.forceRender, props.destroyOnClose);
   const pickerElement = withNativeProps(props, React$1.createElement("div", {
     className: classPrefix$13
   }, React$1.createElement("div", {
     className: `${classPrefix$13}-header`
   }, React$1.createElement("a", {
+    role: "button",
     className: `${classPrefix$13}-header-button`,
     onClick: () => {
       var _a2;
@@ -10686,6 +10744,7 @@ const Picker$1 = memo(forwardRef((p2, ref) => {
   }, props.cancelText), React$1.createElement("div", {
     className: `${classPrefix$13}-header-title`
   }, props.title), React$1.createElement("a", {
+    role: "button",
     className: `${classPrefix$13}-header-button`,
     onClick: () => {
       setValue(innerValue);
@@ -10713,13 +10772,13 @@ const Picker$1 = memo(forwardRef((p2, ref) => {
       setVisible(false);
     },
     getContainer: props.getContainer,
-    destroyOnClose: true,
+    destroyOnClose: props.destroyOnClose,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
-    forceRender: true,
+    forceRender: props.forceRender,
     stopPropagation: props.stopPropagation
-  }, shouldRender && pickerElement, React$1.createElement(SafeArea, {
+  }, pickerElement, React$1.createElement(SafeArea, {
     position: "bottom"
   }));
   return React$1.createElement(React$1.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, extend.items, actions));
@@ -10855,13 +10914,13 @@ const classPrefix$12 = `adm-tabs`;
 const Tab = () => {
   return null;
 };
-const defaultProps$S = {
+const defaultProps$T = {
   activeLineMode: "auto",
   stretch: true
 };
 const Tabs$1 = (p2) => {
   var _a;
-  const props = mergeProps(defaultProps$S, p2);
+  const props = mergeProps(defaultProps$T, p2);
   const tabListContainerRef = useRef(null);
   const activeLineRef = useRef(null);
   const keyToIndexRecord = {};
@@ -11082,13 +11141,20 @@ var Tabs = attachPropertiesToComponent(Tabs$1, {
 var checkList = /* @__PURE__ */ (() => ".adm-check-list-item-extra {\n  font-size: var(--adm-font-size-8);\n  line-height: 1;\n  color: var(--adm-color-primary);\n}\n.adm-check-list-item-readonly {\n  cursor: unset;\n}\n")();
 var list = /* @__PURE__ */ (() => ".adm-list {\n  --header-font-size: var(--adm-font-size-7);\n  --prefix-width: 'auto';\n  --prefix-padding-right: 12px;\n  --align-items: center;\n  --active-background-color: var(--adm-color-border);\n  --border-inner: solid 1px var(--adm-color-border);\n  --border-top: solid 1px var(--adm-color-border);\n  --border-bottom: solid 1px var(--adm-color-border);\n  --padding-left: 12px;\n  --padding-right: 12px;\n  --font-size: var(--adm-font-size-9);\n  --extra-max-width: 70%;\n}\n.adm-list-header {\n  color: var(--adm-color-weak);\n  font-size: var(--header-font-size);\n  padding: 8px var(--padding-right) 8px var(--padding-left);\n}\n.adm-list-body {\n  background-color: var(--adm-color-background);\n  overflow: hidden;\n  font-size: var(--font-size);\n}\n.adm-list-body-inner {\n  margin-top: -1px;\n}\n.adm-list-default .adm-list-body {\n  border-top: var(--border-top);\n  border-bottom: var(--border-bottom);\n}\n.adm-list-card {\n  margin: 12px;\n}\n.adm-list-card .adm-list-body {\n  border-radius: 8px;\n}\n.adm-list-card .adm-list-header {\n  padding-left: 0;\n}\n.adm-list-item {\n  display: block;\n  padding-left: var(--padding-left);\n  position: relative;\n  background-color: var(--adm-color-background);\n  line-height: 1.5;\n}\n.adm-list-item-title,\n.adm-list-item-description {\n  color: var(--adm-color-weak);\n  font-size: var(--adm-font-size-main);\n}\n.adm-list-item-content {\n  display: flex;\n  align-items: var(--align-items);\n  justify-content: flex-start;\n  border-top: var(--border-inner);\n  padding-right: var(--padding-right);\n}\n.adm-list-item-content-prefix {\n  width: var(--prefix-width);\n  flex: none;\n  padding-right: var(--prefix-padding-right);\n}\n.adm-list-item-content-main {\n  flex: auto;\n  padding: 12px 0;\n}\n.adm-list-item-content-extra {\n  flex: none;\n  padding-left: 12px;\n  font-size: var(--adm-font-size-7);\n  color: var(--adm-color-weak);\n  max-width: var(--extra-max-width);\n}\n.adm-list-item-content-arrow {\n  flex: none;\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  color: var(--adm-color-light);\n  font-size: 19px;\n}\n.adm-list-item-disabled {\n  cursor: not-allowed;\n}\n.adm-list-item-disabled.adm-list-item-disabled > .adm-list-item-content > * {\n  opacity: 0.4;\n  pointer-events: none;\n}\na.adm-list-item:active:not(.adm-list-item-disabled) {\n  background-color: var(--active-background-color);\n}\na.adm-list-item:active:not(.adm-list-item-disabled)::after {\n  content: ' ';\n  display: block;\n  position: absolute;\n  width: 100%;\n  bottom: -1px;\n  left: 0;\n  border-bottom: var(--border-inner);\n}\n")();
 const classPrefix$11 = `adm-list`;
-const defaultProps$R = {
+const defaultProps$S = {
   mode: "default"
 };
-const List$1 = (p2) => {
-  const props = mergeProps(defaultProps$R, p2);
+const List$1 = forwardRef((p2, ref) => {
+  const props = mergeProps(defaultProps$S, p2);
+  const nativeElementRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    get nativeElement() {
+      return nativeElementRef.current;
+    }
+  }));
   return withNativeProps(props, React$1.createElement("div", {
-    className: classNames(classPrefix$11, `${classPrefix$11}-${props.mode}`)
+    className: classNames(classPrefix$11, `${classPrefix$11}-${props.mode}`),
+    ref: nativeElementRef
   }, props.header && React$1.createElement("div", {
     className: `${classPrefix$11}-header`
   }, props.header), React$1.createElement("div", {
@@ -11096,7 +11162,7 @@ const List$1 = (p2) => {
   }, React$1.createElement("div", {
     className: `${classPrefix$11}-body-inner`
   }, props.children))));
-};
+});
 function isNodeWithContent(node) {
   return node !== void 0 && node !== null && node !== false;
 }
@@ -11130,13 +11196,13 @@ var List = attachPropertiesToComponent(List$1, {
 });
 const CheckListContext = createContext(null);
 const classPrefix$$ = "adm-check-list";
-const defaultProps$Q = {
+const defaultProps$R = {
   multiple: false,
   defaultValue: [],
   activeIcon: React$1.createElement(CheckOutline, null)
 };
 const CheckList$1 = (p2) => {
-  const props = mergeProps(defaultProps$Q, p2);
+  const props = mergeProps(defaultProps$R, p2);
   const [value, setValue] = usePropsValue(props);
   function check(val) {
     if (props.multiple) {
@@ -11305,14 +11371,14 @@ var Skeleton = attachPropertiesToComponent(Skeleton$1, {
   Paragraph: SkeletonParagraph
 });
 const classPrefix$Y = `adm-cascader-view`;
-const defaultProps$P = {
+const defaultProps$Q = {
   defaultValue: []
 };
 const CascaderView$1 = (p2) => {
   const {
     locale
   } = useConfig();
-  const props = mergeProps(defaultProps$P, {
+  const props = mergeProps(defaultProps$Q, {
     placeholder: locale.Cascader.placeholder
   }, p2);
   const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
@@ -11419,19 +11485,43 @@ var CascaderView = attachPropertiesToComponent(CascaderView$1, {
   optionSkeleton
 });
 const classPrefix$X = `adm-cascader`;
-const defaultProps$O = {
-  defaultValue: []
+const defaultProps$P = {
+  defaultValue: [],
+  destroyOnClose: true,
+  forceRender: false
 };
-const Cascader = (p2) => {
+const Cascader = forwardRef((p2, ref) => {
   var _a;
   const {
     locale
   } = useConfig();
-  const props = mergeProps(defaultProps$O, {
+  const props = mergeProps(defaultProps$P, {
     confirmText: locale.common.confirm,
     cancelText: locale.common.cancel,
     placeholder: locale.Cascader.placeholder
   }, p2);
+  const [visible, setVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    onChange: (v) => {
+      var _a2;
+      if (v === false) {
+        (_a2 = props.onClose) === null || _a2 === void 0 ? void 0 : _a2.call(props);
+      }
+    }
+  });
+  const actions = {
+    toggle: () => {
+      setVisible((v) => !v);
+    },
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    }
+  };
+  useImperativeHandle(ref, () => actions);
   const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
     onChange: (val) => {
       var _a2;
@@ -11441,12 +11531,12 @@ const Cascader = (p2) => {
   const generateValueExtend = useCascaderValueExtend(props.options);
   const [innerValue, setInnerValue] = useState(value);
   useEffect(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
-  }, [props.visible]);
+  }, [visible]);
   useEffect(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
   }, [value]);
@@ -11457,18 +11547,17 @@ const Cascader = (p2) => {
   }, React$1.createElement("a", {
     className: `${classPrefix$X}-header-button`,
     onClick: () => {
-      var _a2, _b;
+      var _a2;
       (_a2 = props.onCancel) === null || _a2 === void 0 ? void 0 : _a2.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     }
   }, props.cancelText), React$1.createElement("div", {
     className: `${classPrefix$X}-header-title`
   }, props.title), React$1.createElement("a", {
     className: `${classPrefix$X}-header-button`,
     onClick: () => {
-      var _a2;
       setValue(innerValue);
-      (_a2 = props.onClose) === null || _a2 === void 0 ? void 0 : _a2.call(props);
+      setVisible(false);
     }
   }, props.confirmText)), React$1.createElement("div", {
     className: `${classPrefix$X}-body`
@@ -11477,28 +11566,29 @@ const Cascader = (p2) => {
     onChange: (val, ext) => {
       var _a2;
       setInnerValue(val);
-      if (props.visible) {
+      if (visible) {
         (_a2 = props.onSelect) === null || _a2 === void 0 ? void 0 : _a2.call(props, val, ext);
       }
     }
   })))));
   const popupElement = React$1.createElement(Popup, {
-    visible: props.visible,
+    visible,
     position: "bottom",
     onMaskClick: () => {
-      var _a2, _b;
+      var _a2;
       (_a2 = props.onCancel) === null || _a2 === void 0 ? void 0 : _a2.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     },
     getContainer: props.getContainer,
-    destroyOnClose: true,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
     stopPropagation: props.stopPropagation
   }, cascaderElement);
-  return React$1.createElement(React$1.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
-};
+  return React$1.createElement(React$1.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items, actions));
+});
 function prompt$1(props) {
   return new Promise((resolve) => {
     const Wrapper2 = () => {
@@ -11534,26 +11624,10 @@ var index$f = attachPropertiesToComponent(Cascader, {
   prompt: prompt$1,
   optionSkeleton
 });
-var centerPopup = /* @__PURE__ */ (() => ".adm-center-popup {\n  --background-color: var(--adm-center-popup-background-color, var(--adm-color-background));\n  --border-radius: var(--adm-center-popup-border-radius, 8px);\n  --max-width: var(--adm-center-popup-max-width, 75vw);\n  --min-width: var(--adm-center-popup-min-width, 280px);\n  --z-index: var(--adm-center-popup-z-index, 1000);\n  position: fixed;\n  z-index: var(--z-index);\n}\n.adm-center-popup .adm-center-popup-mask {\n  z-index: 0;\n}\n.adm-center-popup-wrap {\n  position: fixed;\n  z-index: 1;\n  top: 50%;\n  left: 50%;\n  width: auto;\n  min-width: var(--min-width);\n  max-width: var(--max-width);\n  transform: translate(-50%, -50%);\n}\n.adm-center-popup-body {\n  background-color: var(--background-color);\n  border-radius: var(--border-radius);\n}\n")();
-function useInnerVisible(outerVisible) {
-  const [innerVisible, setInnerVisible] = useState(outerVisible);
-  useIsomorphicLayoutEffect(() => {
-    setInnerVisible(outerVisible);
-  }, [outerVisible]);
-  return innerVisible;
-}
-const defaultProps$N = {
-  destroyOnClose: false,
-  disableBodyScroll: true,
-  forceRender: false,
-  getContainer: null,
-  mask: true,
-  showCloseButton: false,
-  stopPropagation: ["click"],
-  visible: false
-};
+var centerPopup = /* @__PURE__ */ (() => ".adm-center-popup {\n  --background-color: var(--adm-center-popup-background-color, var(--adm-color-background));\n  --border-radius: var(--adm-center-popup-border-radius, 8px);\n  --max-width: var(--adm-center-popup-max-width, 75vw);\n  --min-width: var(--adm-center-popup-min-width, 280px);\n  --z-index: var(--adm-center-popup-z-index, 1000);\n  position: fixed;\n  z-index: var(--z-index);\n}\n.adm-center-popup .adm-center-popup-mask {\n  z-index: 0;\n}\n.adm-center-popup-wrap {\n  position: fixed;\n  z-index: 1;\n  top: 50%;\n  left: 50%;\n  width: auto;\n  min-width: var(--min-width);\n  max-width: var(--max-width);\n  transform: translate(-50%, -50%);\n}\n.adm-center-popup-body {\n  background-color: var(--background-color);\n  border-radius: var(--border-radius);\n}\n.adm-center-popup-close {\n  position: absolute;\n  z-index: 100;\n  right: 8px;\n  top: 8px;\n  cursor: pointer;\n  padding: 4px;\n  font-size: 18px;\n  color: var(--adm-color-weak);\n}\n")();
+const defaultProps$O = defaultPopupBaseProps;
 const CenterPopup = (p2) => {
-  const props = mergeProps(defaultProps$N, p2);
+  const props = mergeProps(defaultProps$O, p2);
   const unmountedRef = useUnmountedRef();
   const style = useSpring({
     scale: props.visible ? 1 : 0.8,
@@ -11599,10 +11673,17 @@ const CenterPopup = (p2) => {
     visible: maskVisible,
     forceRender: props.forceRender,
     destroyOnClose: props.destroyOnClose,
-    onMaskClick: props.onMaskClick,
+    onMaskClick: (e2) => {
+      var _a, _b;
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e2);
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
     style: props.maskStyle,
     className: classNames("adm-center-popup-mask", props.maskClassName),
-    disableBodyScroll: false
+    disableBodyScroll: false,
+    stopPropagation: props.stopPropagation
   }), React$1.createElement("div", {
     className: "adm-center-popup-wrap",
     role: props.role,
@@ -11610,7 +11691,13 @@ const CenterPopup = (p2) => {
   }, React$1.createElement(animated.div, {
     style,
     ref
-  }, body)))));
+  }, props.showCloseButton && React$1.createElement("a", {
+    className: classNames("adm-center-popup-close", "adm-plain-anchor"),
+    onClick: () => {
+      var _a;
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React$1.createElement(CloseOutline, null)), body)))));
   return React$1.createElement(ShouldRender, {
     active,
     forceRender: props.forceRender,
@@ -11619,12 +11706,12 @@ const CenterPopup = (p2) => {
 };
 var checkbox = /* @__PURE__ */ (() => ".adm-checkbox {\n  --icon-size: 22px;\n  --font-size: var(--adm-font-size-9);\n  --gap: 8px;\n  display: inline-flex;\n  vertical-align: text-bottom;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n}\n.adm-checkbox input {\n  display: none;\n}\n.adm-checkbox .adm-checkbox-icon {\n  flex: none;\n  border: 1px solid var(--adm-color-light);\n  border-radius: var(--icon-size);\n  box-sizing: border-box;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--adm-color-white);\n}\n.adm-checkbox .adm-checkbox-icon > svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.adm-checkbox.adm-checkbox-block {\n  display: flex;\n}\n.adm-checkbox.adm-checkbox-checked .adm-checkbox-icon {\n  border-color: var(--adm-color-primary);\n  background-color: var(--adm-color-primary);\n}\n.adm-checkbox.adm-checkbox-disabled {\n  cursor: not-allowed;\n}\n.adm-checkbox.adm-checkbox-disabled .adm-checkbox-content {\n  opacity: 0.4;\n}\n.adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {\n  color: #b7b7b7;\n  border-color: var(--adm-color-light);\n  background-color: var(--adm-color-box);\n}\n.adm-checkbox .adm-checkbox-custom-icon {\n  font-size: var(--icon-size);\n}\n.adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {\n  background-color: var(--adm-color-background);\n  color: var(--adm-color-primary);\n}\n.adm-checkbox-content {\n  flex: 0 1 auto;\n  font-size: var(--font-size);\n  padding-left: var(--gap);\n}\n")();
 const CheckboxGroupContext = createContext(null);
-const defaultProps$M = {
+const defaultProps$N = {
   disabled: false,
   defaultValue: []
 };
 const Group$1 = (p2) => {
-  const props = mergeProps(defaultProps$M, p2);
+  const props = mergeProps(defaultProps$N, p2);
   const [value, setValue] = usePropsValue(props);
   return React$1.createElement(CheckboxGroupContext.Provider, {
     value: {
@@ -11687,13 +11774,13 @@ const NativeInput = (props) => {
   });
 };
 const classPrefix$W = `adm-checkbox`;
-const defaultProps$L = {
+const defaultProps$M = {
   defaultChecked: false,
   indeterminate: false
 };
 const Checkbox$1 = forwardRef((p2, ref) => {
   const groupContext = useContext(CheckboxGroupContext);
-  const props = mergeProps(defaultProps$L, p2);
+  const props = mergeProps(defaultProps$M, p2);
   let [checked, setChecked] = usePropsValue({
     value: props.checked,
     defaultValue: props.defaultChecked,
@@ -12218,7 +12305,7 @@ const defaultRenderLabel = (precision, data) => {
   }
 };
 const thisYear$1 = new Date().getFullYear();
-const defaultProps$K = {
+const defaultProps$L = {
   min: new Date(new Date().setFullYear(thisYear$1 - 10)),
   max: new Date(new Date().setFullYear(thisYear$1 + 10)),
   precision: "day",
@@ -12226,7 +12313,7 @@ const defaultProps$K = {
   defaultValue: null
 };
 const DatePicker = forwardRef((p2, ref) => {
-  const props = mergeProps(defaultProps$K, p2);
+  const props = mergeProps(defaultProps$L, p2);
   const [value, setValue] = usePropsValue({
     value: props.value,
     defaultValue: props.defaultValue,
@@ -12270,7 +12357,9 @@ const DatePicker = forwardRef((p2, ref) => {
     onClick: props.onClick,
     title: props.title,
     stopPropagation: props.stopPropagation,
-    mouseWheel: props.mouseWheel
+    mouseWheel: props.mouseWheel,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, (_, actions) => {
     var _a;
     return (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, value, actions);
@@ -12310,7 +12399,7 @@ var index$d = attachPropertiesToComponent(DatePicker, {
   prompt
 });
 const thisYear = new Date().getFullYear();
-const defaultProps$J = {
+const defaultProps$K = {
   min: new Date(new Date().setFullYear(thisYear - 10)),
   max: new Date(new Date().setFullYear(thisYear + 10)),
   precision: "day",
@@ -12318,7 +12407,7 @@ const defaultProps$J = {
 };
 const DatePickerView = (p2) => {
   var _a;
-  const props = mergeProps(defaultProps$J, p2);
+  const props = mergeProps(defaultProps$K, p2);
   const [value, setValue] = usePropsValue({
     value: props.value,
     defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null
@@ -12391,7 +12480,7 @@ const BrokenImageIcon = () => React$1.createElement("svg", {
   fillRule: "nonzero"
 }));
 const classPrefix$U = `adm-image`;
-const defaultProps$I = {
+const defaultProps$J = {
   fit: "fill",
   placeholder: React$1.createElement("div", {
     className: `${classPrefix$U}-tip`
@@ -12403,7 +12492,7 @@ const defaultProps$I = {
   draggable: false
 };
 const Image$1 = staged((p2) => {
-  const props = mergeProps(defaultProps$I, p2);
+  const props = mergeProps(defaultProps$J, p2);
   const [loaded, setLoaded] = useState(false);
   const [failed, setFailed] = useState(false);
   const ref = useRef(null);
@@ -12469,13 +12558,13 @@ const Image$1 = staged((p2) => {
     }
   }), renderInner()));
 });
-const defaultProps$H = {
+const defaultProps$I = {
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false
 };
 const Dialog = (p2) => {
-  const props = mergeProps(defaultProps$H, p2);
+  const props = mergeProps(defaultProps$I, p2);
   const element = React$1.createElement(React$1.Fragment, null, !!props.image && React$1.createElement("div", {
     className: cls$1("image-container")
   }, React$1.createElement(Image$1, {
@@ -12566,7 +12655,7 @@ function alert$1(p2) {
     }));
   });
 }
-const defaultProps$G = {
+const defaultProps$H = {
   confirmText: "\u786E\u8BA4",
   cancelText: "\u53D6\u6D88"
 };
@@ -12574,7 +12663,7 @@ function confirm$1(p2) {
   const {
     locale
   } = getDefaultConfig();
-  const props = mergeProps(defaultProps$G, {
+  const props = mergeProps(defaultProps$H, {
     confirmText: locale.common.confirm,
     cancelText: locale.common.cancel
   }, p2);
@@ -12620,12 +12709,12 @@ var index$c = attachPropertiesToComponent(Dialog, {
 });
 var divider = /* @__PURE__ */ (() => ".adm-divider-horizontal {\n  display: flex;\n  align-items: center;\n  margin: 16px 0;\n  border-width: 0;\n  border-color: var(--adm-color-border);\n  border-style: solid;\n  color: var(--adm-color-weak);\n  font-size: 14px;\n}\n.adm-divider-left.adm-divider-horizontal::before {\n  max-width: 10%;\n}\n.adm-divider-right.adm-divider-horizontal::after {\n  max-width: 10%;\n}\n.adm-divider-horizontal::after,\n.adm-divider-horizontal::before {\n  flex: auto;\n  display: block;\n  content: '';\n  border-style: inherit;\n  border-color: inherit;\n  border-width: 1px 0 0;\n}\n.adm-divider-horizontal .adm-divider-content {\n  flex: none;\n  padding: 0 16px;\n}\n.adm-divider-vertical {\n  position: relative;\n  top: -0.06em;\n  display: inline-block;\n  height: 0.9em;\n  margin: 0 16px;\n  vertical-align: middle;\n  border-top: 0;\n  border-left: 1px solid var(--adm-color-border);\n}\n")();
 const classPrefix$T = `adm-divider`;
-const defaultProps$F = {
+const defaultProps$G = {
   contentPosition: "center",
   direction: "horizontal"
 };
 const Divider = (p2) => {
-  const props = mergeProps(defaultProps$F, p2);
+  const props = mergeProps(defaultProps$G, p2);
   return withNativeProps(props, React$1.createElement("div", {
     className: classNames(classPrefix$T, `${classPrefix$T}-${props.direction}`, `${classPrefix$T}-${props.contentPosition}`)
   }, props.children && React$1.createElement("div", {
@@ -12667,13 +12756,13 @@ const ItemChildrenWrap = (props) => {
   }, props.children) : null;
 };
 const classPrefix$R = `adm-dropdown`;
-const defaultProps$E = {
+const defaultProps$F = {
   defaultActiveKey: null,
   closeOnMaskClick: true,
   closeOnClickAway: false
 };
 const Dropdown = forwardRef((p2, ref) => {
-  const props = mergeProps(defaultProps$E, p2);
+  const props = mergeProps(defaultProps$F, p2);
   const [value, setValue] = usePropsValue({
     value: props.activeKey,
     defaultValue: props.defaultActiveKey,
@@ -12766,7 +12855,7 @@ var index$b = attachPropertiesToComponent(Dropdown, {
 });
 var ellipsis = /* @__PURE__ */ (() => ".adm-ellipsis {\n  overflow: hidden;\n  line-height: 1.5;\n}\n")();
 const classPrefix$Q = `adm-ellipsis`;
-const defaultProps$D = {
+const defaultProps$E = {
   direction: "end",
   rows: 1,
   expandText: "",
@@ -12776,7 +12865,7 @@ const defaultProps$D = {
   }
 };
 const Ellipsis = (p2) => {
-  const props = mergeProps(defaultProps$D, p2);
+  const props = mergeProps(defaultProps$E, p2);
   const rootRef = useRef(null);
   const [ellipsised, setEllipsised] = useState({});
   const [expanded, setExpanded] = useState(false);
@@ -12960,13 +13049,13 @@ const Empty = (props) => {
 };
 var errorBlock = /* @__PURE__ */ (() => ".adm-error-block {\n  --color: var(--adm-color-text);\n  --image-height: var(--adm-error-block-image-height, 100px);\n  --image-height-full-page: var(--adm-error-block-image-height-full-page, 200px);\n  --image-width: var(--adm-error-block-image-width, auto);\n  --image-width-full-page: var(--adm-error-block-image-width-full-page, auto);\n  box-sizing: border-box;\n  text-align: center;\n}\n.adm-error-block-image {\n  height: var(--image-height);\n  width: var(--image-width);\n  max-width: 100%;\n}\n.adm-error-block-image svg,\n.adm-error-block-image img {\n  height: 100%;\n}\n.adm-error-block-description {\n  font-size: var(--adm-font-size-4);\n  color: #999;\n  line-height: 1.4;\n  margin-top: 12px;\n}\n.adm-error-block-description-title {\n  font-size: var(--adm-font-size-7);\n}\n.adm-error-block-description-subtitle {\n  margin-top: 8px;\n}\n.adm-error-block-content {\n  margin-top: 12px;\n}\n.adm-error-block-full-page {\n  padding-top: calc(50vh - var(--image-height-full-page));\n}\n.adm-error-block-full-page .adm-error-block-image {\n  height: var(--image-height-full-page);\n  width: var(--image-width-full-page);\n}\n.adm-error-block-full-page .adm-error-block-description {\n  margin-top: 20px;\n  font-size: var(--adm-font-size-main);\n}\n.adm-error-block-full-page .adm-error-block-description-title {\n  font-size: 20px;\n  color: var(--adm-color-text);\n}\n")();
 const classPrefix$O = `adm-error-block`;
-const defaultProps$C = {
+const defaultProps$D = {
   status: "default"
 };
 function createErrorBlock(imageRecord2) {
   const ErrorBlock2 = (p2) => {
     var _a;
-    const props = mergeProps(defaultProps$C, p2);
+    const props = mergeProps(defaultProps$D, p2);
     const {
       locale
     } = useConfig();
@@ -13499,11 +13588,11 @@ const imageRecord = {
 const ErrorBlock = createErrorBlock(imageRecord);
 var floatingBubble = /* @__PURE__ */ (() => ".adm-floating-bubble {\n  --initial-position-left: var(--initial-position-left);\n  --initial-position-right: var(--initial-position-right);\n  --initial-position-top: var(--initial-position-top);\n  --initial-position-bottom: var(--initial-position-bottom);\n  --z-index: 1;\n  --edge-distance: 0;\n  --size: 48px;\n  --border-radius: 50%;\n  --background: var(--adm-color-primary);\n}\n.adm-floating-bubble-boundary-outer {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n  padding: var(--edge-distance);\n  box-sizing: border-box;\n  pointer-events: none;\n}\n.adm-floating-bubble-boundary {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.adm-floating-bubble-button {\n  position: fixed;\n  top: var(--initial-position-top);\n  bottom: var(--initial-position-bottom);\n  left: var(--initial-position-left);\n  right: var(--initial-position-right);\n  box-sizing: border-box;\n  width: var(--size);\n  height: var(--size);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  transition: opacity ease 0.15s;\n  user-select: none;\n  touch-action: none;\n  background: var(--background);\n  color: var(--adm-color-white);\n  border-radius: var(--border-radius);\n  z-index: var(--z-index);\n}\n")();
 const classPrefix$N = `adm-floating-bubble`;
-const defaultProps$B = {
+const defaultProps$C = {
   axis: "y"
 };
 const FloatingBubble = (p2) => {
-  const props = mergeProps(defaultProps$B, p2);
+  const props = mergeProps(defaultProps$C, p2);
   const boundaryRef = useRef(null);
   const buttonRef = useRef(null);
   const [{
@@ -13584,12 +13673,12 @@ function nearest(arr, target) {
     return Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur;
   });
 }
-const defaultProps$A = {
+const defaultProps$B = {
   handleDraggingOfContent: true
 };
 const FloatingPanel = forwardRef((p2, ref) => {
   var _a, _b;
-  const props = mergeProps(defaultProps$A, p2);
+  const props = mergeProps(defaultProps$B, p2);
   const {
     anchors
   } = props;
@@ -13747,9 +13836,9 @@ const FormArray = (props) => {
   });
 };
 const classPrefix$M = "adm-form";
-const defaultProps$z = defaultFormContext;
+const defaultProps$A = defaultFormContext;
 const Form = forwardRef((p2, ref) => {
-  const props = mergeProps(defaultProps$z, p2);
+  const props = mergeProps(defaultProps$A, p2);
   const {
     className,
     style,
@@ -14047,14 +14136,14 @@ function convertPx(px) {
   return tester.getBoundingClientRect().height;
 }
 const classPrefix$L = `adm-popover`;
-const defaultProps$y = {
+const defaultProps$z = {
   placement: "top",
   defaultVisible: false,
   stopPropagation: ["click"],
   getContainer: () => document.body
 };
 const Popover$1 = forwardRef((p2, ref) => {
-  const props = mergeProps(defaultProps$y, p2);
+  const props = mergeProps(defaultProps$z, p2);
   const {
     mode = "light"
   } = props;
@@ -14784,14 +14873,14 @@ const Slides = forwardRef((props, ref) => {
   }))));
 });
 const classPrefix$F = `adm-image-viewer`;
-const defaultProps$x = {
+const defaultProps$y = {
   maxZoom: 3,
   getContainer: null,
   visible: false
 };
 const ImageViewer$1 = (p2) => {
   var _a;
-  const props = mergeProps(defaultProps$x, p2);
+  const props = mergeProps(defaultProps$y, p2);
   const node = React$1.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
@@ -14813,7 +14902,7 @@ const ImageViewer$1 = (p2) => {
   })));
   return renderToContainer(props.getContainer, node);
 };
-const multiDefaultProps = Object.assign(Object.assign({}, defaultProps$x), {
+const multiDefaultProps = Object.assign(Object.assign({}, defaultProps$y), {
   defaultIndex: 0
 });
 const MultiImageViewer = forwardRef((p2, ref) => {
@@ -14985,13 +15074,13 @@ const colorRecord$2 = {
   primary: "var(--adm-color-primary)",
   white: "var(--adm-color-white)"
 };
-const defaultProps$w = {
+const defaultProps$x = {
   color: "default"
 };
 const circumference = 15 * 3.14159265358979 * 2;
 const SpinLoading = memo((p2) => {
   var _a;
-  const props = mergeProps(defaultProps$w, p2);
+  const props = mergeProps(defaultProps$x, p2);
   const motionReduced = useMotionReduced();
   const {
     percent
@@ -15082,11 +15171,11 @@ const PreviewItem = (props) => {
 };
 var space = /* @__PURE__ */ (() => ".adm-space-item {\n  flex: none;\n}\n.adm-space {\n  display: inline-flex;\n  --gap: 8px;\n  --gap-vertical: var(--gap);\n  --gap-horizontal: var(--gap);\n}\n.adm-space-vertical {\n  flex-direction: column;\n}\n.adm-space-vertical > .adm-space-item {\n  margin-bottom: var(--gap-vertical);\n}\n.adm-space-vertical > .adm-space-item:last-child {\n  margin-bottom: 0;\n}\n.adm-space-horizontal {\n  flex-direction: row;\n}\n.adm-space-horizontal > .adm-space-item {\n  margin-right: var(--gap-horizontal);\n}\n.adm-space-horizontal > .adm-space-item:last-child {\n  margin-right: 0;\n}\n.adm-space-horizontal.adm-space-wrap {\n  flex-wrap: wrap;\n  margin-bottom: calc(var(--gap-vertical) * -1);\n}\n.adm-space-horizontal.adm-space-wrap > .adm-space-item {\n  padding-bottom: var(--gap-vertical);\n}\n.adm-space.adm-space-block {\n  display: flex;\n}\n.adm-space-align-center {\n  align-items: center;\n}\n.adm-space-align-start {\n  align-items: flex-start;\n}\n.adm-space-align-end {\n  align-items: flex-end;\n}\n.adm-space-align-baseline {\n  align-items: baseline;\n}\n.adm-space-justify-center {\n  justify-content: center;\n}\n.adm-space-justify-start {\n  justify-content: flex-start;\n}\n.adm-space-justify-end {\n  justify-content: flex-end;\n}\n.adm-space-justify-between {\n  justify-content: space-between;\n}\n.adm-space-justify-around {\n  justify-content: space-around;\n}\n.adm-space-justify-evenly {\n  justify-content: space-evenly;\n}\n.adm-space-justify-stretch {\n  justify-content: stretch;\n}\n")();
 const classPrefix$C = `adm-space`;
-const defaultProps$v = {
+const defaultProps$w = {
   direction: "horizontal"
 };
 const Space = (p2) => {
-  const props = mergeProps(defaultProps$v, p2);
+  const props = mergeProps(defaultProps$w, p2);
   const {
     direction,
     onClick
@@ -15107,7 +15196,7 @@ const Space = (p2) => {
   })));
 };
 const classPrefix$B = `adm-image-uploader`;
-const defaultProps$u = {
+const defaultProps$v = {
   disableUpload: false,
   deletable: true,
   showUpload: true,
@@ -15123,7 +15212,7 @@ const ImageUploader = (p2) => {
   const {
     locale
   } = useConfig();
-  const props = mergeProps(defaultProps$u, p2);
+  const props = mergeProps(defaultProps$v, p2);
   const [value, setValue] = usePropsValue(props);
   const [tasks, setTasks] = useState([]);
   useIsomorphicLayoutEffect(() => {
@@ -15358,11 +15447,11 @@ const Sidebar = (props) => {
   }));
 };
 const classPrefix$z = `adm-index-bar`;
-const defaultProps$t = {
+const defaultProps$u = {
   sticky: true
 };
 const IndexBar = forwardRef((p2, ref) => {
-  const props = mergeProps(defaultProps$t, p2);
+  const props = mergeProps(defaultProps$u, p2);
   const titleHeight = convertPx(35);
   const bodyRef = useRef(null);
   const indexItems = [];
@@ -15463,7 +15552,7 @@ function isWindow(element) {
   return element === window;
 }
 const classPrefix$y = `adm-infinite-scroll`;
-const defaultProps$s = {
+const defaultProps$t = {
   threshold: 250,
   children: (hasMore, failed, retry) => React$1.createElement(InfiniteScrollContent, {
     hasMore,
@@ -15472,7 +15561,7 @@ const defaultProps$s = {
   })
 };
 const InfiniteScroll = (p2) => {
-  const props = mergeProps(defaultProps$s, p2);
+  const props = mergeProps(defaultProps$t, p2);
   const [failed, setFailed] = useState(false);
   const doLoadMore = useLockFn((isRetry) => __awaiter(void 0, void 0, void 0, function* () {
     try {
@@ -15563,14 +15652,14 @@ const InfiniteScrollContent = (props) => {
   }
   return React$1.createElement(React$1.Fragment, null, React$1.createElement("span", null, locale.common.loading), React$1.createElement(DotLoading, null));
 };
-var input = /* @__PURE__ */ (() => ".adm-input {\n  --font-size: var(--adm-font-size-9);\n  --color: var(--adm-color-text);\n  --placeholder-color: var(--adm-color-light);\n  --text-align: left;\n  --background-color: transparent;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 24px;\n  background-color: var(--background-color);\n}\n.adm-input-disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.adm-input-element {\n  flex: auto;\n  display: inline-block;\n  box-sizing: border-box;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  padding: 0;\n  margin: 0;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: 1.5;\n  background: transparent;\n  border: 0;\n  outline: none;\n  appearance: none;\n  min-height: 1.5em;\n  text-align: var(--text-align);\n}\n.adm-input-element::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n}\n.adm-input-element:-webkit-autofill {\n  background-color: transparent;\n}\n.adm-input-element:read-only {\n  cursor: default;\n}\n.adm-input-element:invalid {\n  box-shadow: none;\n}\n.adm-input-element::-ms-clear {\n  display: none;\n}\n.adm-input-element::-webkit-search-cancel-button {\n  display: none;\n}\n.adm-input-element::-webkit-search-decoration {\n  display: none;\n}\n.adm-input-element:disabled {\n  opacity: 1;\n}\n.adm-input-element[type='date'],\n.adm-input-element[type='time'],\n.adm-input-element[type='datetime-local'] {\n  min-height: 1.5em;\n}\n.adm-input-element[type='search'] {\n  -webkit-appearance: none;\n}\n.adm-input-element[readonly] {\n  pointer-events: none;\n}\n.adm-input-clear {\n  flex: none;\n  margin-left: 8px;\n  color: var(--adm-color-light);\n  padding: 4px;\n  cursor: pointer;\n}\n.adm-input-clear:active {\n  color: var(--adm-color-weak);\n}\n.adm-input-clear .antd-mobile-icon {\n  display: block;\n  font-size: var(--adm-font-size-7);\n}\n")();
+var input = /* @__PURE__ */ (() => ".adm-input {\n  --font-size: var(--adm-font-size-9);\n  --color: var(--adm-color-text);\n  --placeholder-color: var(--adm-color-light);\n  --text-align: left;\n  --background-color: transparent;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  min-height: 24px;\n  background-color: var(--background-color);\n}\n.adm-input-disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.adm-input-element {\n  flex: auto;\n  display: inline-block;\n  box-sizing: border-box;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  padding: 0;\n  margin: 0;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: 1.5;\n  background: transparent;\n  border: 0;\n  outline: none;\n  appearance: none;\n  min-height: 1.5em;\n  text-align: var(--text-align);\n}\n.adm-input-element::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n}\n.adm-input-element:-webkit-autofill {\n  background-color: transparent;\n}\n.adm-input-element:read-only {\n  cursor: default;\n}\n.adm-input-element:invalid {\n  box-shadow: none;\n}\n.adm-input-element::-ms-clear {\n  display: none;\n}\n.adm-input-element::-ms-reveal {\n  display: none;\n}\n.adm-input-element::-webkit-search-cancel-button {\n  display: none;\n}\n.adm-input-element::-webkit-search-decoration {\n  display: none;\n}\n.adm-input-element:disabled {\n  opacity: 1;\n}\n.adm-input-element[type='date'],\n.adm-input-element[type='time'],\n.adm-input-element[type='datetime-local'] {\n  min-height: 1.5em;\n}\n.adm-input-element[type='search'] {\n  -webkit-appearance: none;\n}\n.adm-input-element[readonly] {\n  pointer-events: none;\n}\n.adm-input-clear {\n  flex: none;\n  margin-left: 8px;\n  color: var(--adm-color-light);\n  padding: 4px;\n  cursor: pointer;\n}\n.adm-input-clear:active {\n  color: var(--adm-color-weak);\n}\n.adm-input-clear .antd-mobile-icon {\n  display: block;\n  font-size: var(--adm-font-size-7);\n}\n")();
 const classPrefix$x = `adm-input`;
-const defaultProps$r = {
+const defaultProps$s = {
   defaultValue: "",
   onlyShowClearWhenFocus: true
 };
 const Input = forwardRef((p2, ref) => {
-  const props = mergeProps(defaultProps$r, p2);
+  const props = mergeProps(defaultProps$s, p2);
   const [value, setValue] = usePropsValue(props);
   const [hasFocus, setHasFocus] = useState(false);
   const compositionStartRef = useRef(false);
@@ -15674,7 +15763,11 @@ const Input = forwardRef((p2, ref) => {
       compositionStartRef.current = false;
       (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e2);
     },
-    onClick: props.onClick
+    onClick: props.onClick,
+    role: props.role,
+    "aria-valuenow": props["aria-valuenow"],
+    "aria-valuemax": props["aria-valuemax"],
+    "aria-valuemin": props["aria-valuemin"]
   }), shouldShowClear && React$1.createElement("div", {
     className: `${classPrefix$x}-clear`,
     onMouseDown: (e2) => {
@@ -15787,7 +15880,7 @@ const JumboTabs = (props) => {
 var index$7 = attachPropertiesToComponent(JumboTabs, {
   Tab: JumboTab
 });
-var modal = /* @__PURE__ */ (() => ".adm-modal {\n  --z-index: var(--adm-modal-z-index, 1000);\n  ---z-index: var(--z-index);\n}\n.adm-modal .adm-center-popup {\n  --z-index: var(---z-index);\n}\n.adm-modal-body {\n  width: 100%;\n  max-height: 70vh;\n  font-size: var(--adm-font-size-6);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n.adm-modal-body > * {\n  flex: none;\n}\n.adm-modal-body > .adm-modal-content {\n  flex: auto;\n}\n.adm-modal-body:not(.adm-modal-with-image) {\n  padding-top: 20px;\n}\n.adm-modal-image-container {\n  margin-bottom: 12px;\n  max-height: 40vh;\n  overflow-y: scroll;\n}\n.adm-modal-header {\n  margin-bottom: 8px;\n  padding: 0 12px;\n}\n.adm-modal-title {\n  margin-bottom: 8px;\n  padding: 0 12px;\n  font-weight: bold;\n  font-size: var(--adm-font-size-10);\n  line-height: 25px;\n  text-align: center;\n}\n.adm-modal-content {\n  padding: 0 12px 12px;\n  max-height: 70vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-size: var(--adm-font-size-7);\n  line-height: 1.4;\n  color: var(--adm-color-text);\n}\n.adm-modal-close {\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  color: var(--adm-color-weak);\n  padding: 4px;\n  font-size: var(--adm-font-size-10);\n}\n.adm-modal-footer {\n  user-select: none;\n  padding: 8px 12px 12px;\n}\n.adm-modal-footer-empty {\n  padding: 0;\n  height: 8px;\n}\n.adm-modal-footer.adm-space {\n  --gap-vertical: 20px;\n}\n.adm-modal-footer .adm-modal-button {\n  font-size: var(--adm-font-size-10);\n  line-height: 25px;\n}\n.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {\n  display: none;\n}\n.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {\n  opacity: 0.7;\n}\n")();
+var modal = /* @__PURE__ */ (() => ".adm-modal {\n  --z-index: var(--adm-modal-z-index, 1000);\n  ---z-index: var(--z-index);\n}\n.adm-modal .adm-center-popup {\n  --z-index: var(---z-index);\n}\n.adm-modal-body {\n  width: 100%;\n  max-height: 70vh;\n  font-size: var(--adm-font-size-6);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n.adm-modal-body > * {\n  flex: none;\n}\n.adm-modal-body > .adm-modal-content {\n  flex: auto;\n}\n.adm-modal-body:not(.adm-modal-with-image) {\n  padding-top: 20px;\n}\n.adm-modal-image-container {\n  margin-bottom: 12px;\n  max-height: 40vh;\n  overflow-y: scroll;\n}\n.adm-modal-header {\n  margin-bottom: 8px;\n  padding: 0 12px;\n}\n.adm-modal-title {\n  margin-bottom: 8px;\n  padding: 0 12px;\n  font-weight: bold;\n  font-size: var(--adm-font-size-10);\n  line-height: 25px;\n  text-align: center;\n}\n.adm-modal-content {\n  padding: 0 12px 12px;\n  max-height: 70vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-size: var(--adm-font-size-7);\n  line-height: 1.4;\n  color: var(--adm-color-text);\n}\n.adm-modal-footer {\n  user-select: none;\n  padding: 8px 12px 12px;\n}\n.adm-modal-footer-empty {\n  padding: 0;\n  height: 8px;\n}\n.adm-modal-footer.adm-space {\n  --gap-vertical: 20px;\n}\n.adm-modal-footer .adm-modal-button {\n  font-size: var(--adm-font-size-10);\n  line-height: 25px;\n}\n.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {\n  display: none;\n}\n.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {\n  opacity: 0.7;\n}\n")();
 const ModalActionButton = (props) => {
   const {
     action
@@ -15806,17 +15899,14 @@ const ModalActionButton = (props) => {
     disabled: action.disabled
   }, action.text));
 };
-const defaultProps$q = {
+const defaultProps$r = {
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false
 };
 const Modal = (p2) => {
-  const props = mergeProps(defaultProps$q, p2);
-  const element = React$1.createElement(React$1.Fragment, null, props.showCloseButton && React$1.createElement("a", {
-    className: classNames(cls("close"), "adm-plain-anchor"),
-    onClick: props.onClose
-  }, React$1.createElement(CloseOutline, null)), !!props.image && React$1.createElement("div", {
+  const props = mergeProps(defaultProps$r, p2);
+  const element = React$1.createElement(React$1.Fragment, null, !!props.image && React$1.createElement("div", {
     className: cls("image-container")
   }, React$1.createElement(Image$1, {
     src: props.image,
@@ -15850,10 +15940,9 @@ const Modal = (p2) => {
     style: props.style,
     afterClose: props.afterClose,
     afterShow: props.afterShow,
-    onMaskClick: props.closeOnMaskClick ? () => {
-      var _a;
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    } : void 0,
+    showCloseButton: props.showCloseButton,
+    closeOnMaskClick: props.closeOnMaskClick,
+    onClose: props.onClose,
     visible: props.visible,
     getContainer: props.getContainer,
     bodyStyle: props.bodyStyle,
@@ -15903,7 +15992,7 @@ function alert(p2) {
     }));
   });
 }
-const defaultProps$p = {
+const defaultProps$q = {
   confirmText: "\u786E\u8BA4",
   cancelText: "\u53D6\u6D88"
 };
@@ -15911,7 +16000,7 @@ function confirm(p2) {
   const {
     locale
   } = getDefaultConfig();
-  const props = mergeProps(defaultProps$p, {
+  const props = mergeProps(defaultProps$q, {
     confirmText: locale.common.confirm,
     cancelText: locale.common.cancel
   }, p2);
@@ -15957,12 +16046,12 @@ var index$6 = attachPropertiesToComponent(Modal, {
 });
 var navBar = /* @__PURE__ */ (() => ".adm-nav-bar {\n  --height: 45px;\n  --border-bottom: none;\n  display: flex;\n  align-items: center;\n  height: var(--height);\n  border-bottom: var(--border-bottom);\n  padding: 0 12px;\n  white-space: nowrap;\n}\n.adm-nav-bar-left,\n.adm-nav-bar-right {\n  flex: 1;\n}\n.adm-nav-bar-title {\n  flex: auto;\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.adm-nav-bar-back {\n  display: flex;\n  align-items: center;\n  margin-right: 16px;\n  padding: 6px 0;\n  cursor: pointer;\n}\n.adm-nav-bar-back-arrow {\n  font-size: 24px;\n  margin-right: 4px;\n}\n.adm-nav-bar-left {\n  font-size: var(--adm-font-size-7);\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.adm-nav-bar-title {\n  justify-content: center;\n  white-space: nowrap;\n  font-size: var(--adm-font-size-10);\n  padding: 0 12px;\n}\n.adm-nav-bar-right {\n  text-align: right;\n}\n")();
 const classPrefix$v = `adm-nav-bar`;
-const defaultProps$o = {
+const defaultProps$p = {
   back: "",
   backArrow: true
 };
 const NavBar = (p2) => {
-  const props = mergeProps(defaultProps$o, p2);
+  const props = mergeProps(defaultProps$p, p2);
   const {
     back,
     backArrow
@@ -15987,14 +16076,14 @@ const NavBar = (p2) => {
 };
 var noticeBar = /* @__PURE__ */ (() => ".adm-notice-bar {\n  --background-color: #ababab;\n  --border-color: #999999;\n  --text-color: var(--adm-color-white);\n  --font-size: var(--adm-font-size-7);\n  --icon-font-size: var(--adm-font-size-10);\n  --height: 38px;\n  height: var(--height);\n  box-sizing: border-box;\n  font-size: var(--font-size);\n  line-height: var(--height);\n  padding: 0 12px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border: solid 1px var(--border-color);\n  border-left: none;\n  border-right: none;\n  background-color: var(--background-color);\n  color: var(--text-color);\n}\n.adm-notice-bar > span[role='img'] {\n  color: var(--text-color);\n}\n.adm-notice-bar.adm-notice-bar-alert {\n  --background-color: #fff9ed;\n  --border-color: #fff3e9;\n  --text-color: #ff6010;\n}\n.adm-notice-bar.adm-notice-bar-error {\n  --background-color: #ff3b30;\n  --border-color: #d9281e;\n  --text-color: #ffffff;\n}\n.adm-notice-bar.adm-notice-bar-info {\n  --background-color: #d0e4ff;\n  --border-color: #bcd8ff;\n  --text-color: #1677ff;\n}\n.adm-notice-bar .adm-notice-bar-left {\n  flex-shrink: 0;\n  margin-right: 8px;\n  font-size: var(--icon-font-size);\n  line-height: var(--height);\n}\n.adm-notice-bar .adm-notice-bar-content {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n.adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {\n  width: auto;\n  transition-timing-function: linear;\n  position: absolute;\n  white-space: nowrap;\n}\n.adm-notice-bar .adm-notice-bar-right {\n  flex-shrink: 0;\n  margin-left: 12px;\n}\n.adm-notice-bar-close-icon {\n  font-size: var(--adm-font-size-10);\n}\n")();
 const classPrefix$u = `adm-notice-bar`;
-const defaultProps$n = {
+const defaultProps$o = {
   color: "default",
   delay: 2e3,
   speed: 50,
   icon: React$1.createElement(SoundOutline, null)
 };
 const NoticeBar = memo((p2) => {
-  const props = mergeProps(defaultProps$n, p2);
+  const props = mergeProps(defaultProps$o, p2);
   const containerRef = useRef(null);
   const textRef = useRef(null);
   const [visible, setVisible] = useState(true);
@@ -16079,16 +16168,18 @@ function shuffle(array) {
   return result2;
 }
 const classPrefix$t = "adm-number-keyboard";
-const defaultProps$m = {
+const defaultProps$n = {
   defaultVisible: false,
   randomOrder: false,
   showCloseButton: true,
   confirmText: null,
   closeOnConfirm: true,
-  safeArea: true
+  safeArea: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 const NumberKeyboard = (p2) => {
-  const props = mergeProps(defaultProps$m, p2);
+  const props = mergeProps(defaultProps$n, p2);
   const {
     visible,
     title,
@@ -16173,7 +16264,11 @@ const NumberKeyboard = (p2) => {
       "sign-key": !isNumberKey && key,
       "mid-key": index2 === 9 && !!confirmText
     });
-    return React$1.createElement("div", {
+    const ariaProps = key ? {
+      role: "button",
+      title: key
+    } : void 0;
+    return React$1.createElement("div", Object.assign({
       key,
       className,
       onTouchStart: () => {
@@ -16186,10 +16281,8 @@ const NumberKeyboard = (p2) => {
         if (key === "BACKSPACE") {
           onBackspacePressEnd();
         }
-      },
-      title: key,
-      role: "button"
-    }, key === "BACKSPACE" ? React$1.createElement(TextDeletionOutline, null) : key);
+      }
+    }, ariaProps), key === "BACKSPACE" ? React$1.createElement(TextDeletionOutline, null) : key);
   };
   return React$1.createElement(Popup, {
     visible,
@@ -16198,7 +16291,9 @@ const NumberKeyboard = (p2) => {
     afterClose: props.afterClose,
     afterShow: props.afterShow,
     className: `${classPrefix$t}-popup`,
-    stopPropagation: props.stopPropagation
+    stopPropagation: props.stopPropagation,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, withNativeProps(props, React$1.createElement("div", {
     ref: keyboardRef,
     className: classPrefix$t,
@@ -16236,12 +16331,12 @@ const NumberKeyboard = (p2) => {
 };
 var pageIndicator = /* @__PURE__ */ (() => ".adm-page-indicator {\n  display: flex;\n  width: auto;\n  --dot-color: rgba(0, 0, 0, 0.2);\n  --active-dot-color: var(--adm-color-primary);\n  --dot-size: 3px;\n  --active-dot-size: 13px;\n  --dot-border-radius: 1px;\n  --active-dot-border-radius: var(--dot-border-radius);\n  --dot-spacing: 3px;\n}\n.adm-page-indicator-dot {\n  display: block;\n  width: var(--dot-size);\n  height: var(--dot-size);\n  border-radius: var(--dot-border-radius);\n  background: var(--dot-color);\n}\n.adm-page-indicator-dot:last-child {\n  margin-right: 0;\n}\n.adm-page-indicator-dot-active {\n  border-radius: var(--active-dot-border-radius);\n  background: var(--active-dot-color);\n}\n.adm-page-indicator-color-white {\n  --active-dot-color: var(--adm-color-white);\n}\n.adm-page-indicator-horizontal {\n  flex-direction: row;\n}\n.adm-page-indicator-horizontal .adm-page-indicator-dot {\n  margin-right: var(--dot-spacing);\n}\n.adm-page-indicator-horizontal .adm-page-indicator-dot-active {\n  width: var(--active-dot-size);\n}\n.adm-page-indicator-vertical {\n  flex-direction: column;\n}\n.adm-page-indicator-vertical .adm-page-indicator-dot {\n  margin-bottom: var(--dot-spacing);\n}\n.adm-page-indicator-vertical .adm-page-indicator-dot-active {\n  height: var(--active-dot-size);\n}\n")();
 const classPrefix$s = `adm-page-indicator`;
-const defaultProps$l = {
+const defaultProps$m = {
   color: "primary",
   direction: "horizontal"
 };
 const PageIndicator = memo((p2) => {
-  const props = mergeProps(defaultProps$l, p2);
+  const props = mergeProps(defaultProps$m, p2);
   const dots = [];
   for (let i = 0; i < props.total; i++) {
     dots.push(React$1.createElement("div", {
@@ -16257,7 +16352,7 @@ const PageIndicator = memo((p2) => {
 });
 var passcodeInput = /* @__PURE__ */ (() => ".adm-passcode-input {\n  position: relative;\n  display: inline-block;\n  --cell-size: 40px;\n  --cell-gap: 6px;\n  --dot-size: 10px;\n  --border-color: #e5e5e5;\n  --border-radius: 8px;\n}\n.adm-passcode-input-cell-container {\n  display: inline-flex;\n  vertical-align: top;\n}\n.adm-passcode-input-cell {\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  font-size: var(--adm-font-size-10);\n  width: var(--cell-size);\n  height: var(--cell-size);\n  background: var(--adm-color-white);\n}\n.adm-passcode-input:not(.seperated) {\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n}\n.adm-passcode-input:not(.seperated) .adm-passcode-input-cell:not(:last-child) {\n  border-right: 1px solid var(--border-color);\n}\n.adm-passcode-input:not(.seperated).focused {\n  border-color: var(--adm-color-primary);\n  box-shadow: 0 0 2px 0 var(--adm-color-primary);\n  outline: none;\n}\n.adm-passcode-input:not(.seperated).error {\n  border-color: var(--adm-color-danger);\n  box-shadow: 0 0 2px 0 var(--adm-color-danger);\n  animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;\n}\n.adm-passcode-input.seperated .adm-passcode-input-cell {\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n}\n.adm-passcode-input.seperated .adm-passcode-input-cell:not(:last-child) {\n  margin-right: var(--cell-gap);\n}\n.adm-passcode-input.seperated .adm-passcode-input-cell.focused {\n  border-color: var(--adm-color-primary);\n  box-shadow: 0 0 2px 0 var(--adm-color-primary);\n}\n.adm-passcode-input.seperated.focused {\n  outline: none;\n}\n.adm-passcode-input.seperated.error {\n  animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;\n}\n.adm-passcode-input.seperated.error .adm-passcode-input-cell {\n  border-color: var(--adm-color-danger);\n  box-shadow: 0 0 2px 0 var(--adm-color-danger);\n}\n.adm-passcode-input-cell.dot::before {\n  content: '';\n  width: var(--dot-size);\n  height: var(--dot-size);\n  border-radius: 50%;\n  background: var(--adm-color-text);\n}\n.adm-passcode-input-cell.caret::after {\n  content: '';\n  width: 2px;\n  height: 1.1em;\n  margin-left: 1px;\n  background: var(--adm-color-primary);\n  animation: 1s linear infinite adm-caret-blink;\n}\n.adm-passcode-input > .adm-passcode-input-native-input {\n  position: absolute;\n  left: -200vw;\n  top: 0;\n  display: block;\n  width: 50px;\n  height: 20px;\n  opacity: 0.5;\n}\n@keyframes adm-shake-horizontal {\n  0% {\n    transform: translateX(0);\n  }\n  10% {\n    transform: translateX(-4px);\n  }\n  20% {\n    transform: translateX(5px);\n  }\n  30% {\n    transform: translateX(-1px);\n  }\n  40% {\n    transform: translateX(8px);\n  }\n  50% {\n    transform: translateX(0);\n  }\n  60% {\n    transform: translateX(-8px);\n  }\n  70% {\n    transform: translateX(1px);\n  }\n  80% {\n    transform: translateX(-5px);\n  }\n  90% {\n    transform: translateX(4px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes adm-caret-blink {\n  from {\n    opacity: 1;\n  }\n  60% {\n    opacity: 1;\n  }\n  80% {\n    opacity: 0;\n  }\n  to {\n    opacity: 0;\n  }\n}\n")();
 const classPrefix$r = "adm-passcode-input";
-const defaultProps$k = {
+const defaultProps$l = {
   defaultValue: "",
   length: 6,
   plain: false,
@@ -16266,8 +16361,8 @@ const defaultProps$k = {
   caret: true
 };
 const PasscodeInput = forwardRef((p2, ref) => {
-  const props = mergeProps(defaultProps$k, p2);
-  const cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps$k.length;
+  const props = mergeProps(defaultProps$l, p2);
+  const cellLength = props.length > 0 && props.length < Infinity ? Math.floor(props.length) : defaultProps$l.length;
   const [focused, setFocused] = useState(false);
   const [value, setValue] = usePropsValue(props);
   const rootRef = useRef(null);
@@ -16373,23 +16468,37 @@ const PasscodeInput = forwardRef((p2, ref) => {
     }
   }));
 });
-var progressBar = /* @__PURE__ */ (() => ".adm-progress-bar {\n  --track-width: var(--adm-progress-bar-track-width, 3px);\n  --track-color: var(--adm-progress-bar-track-color, #e5e5e5);\n  --fill-color: var(--adm-progress-bar-fill-color, var(--adm-color-primary));\n}\n.adm-progress-bar-trail {\n  background: var(--track-color);\n  overflow: hidden;\n  height: var(--track-width);\n  border-radius: var(--track-width);\n}\n.adm-progress-bar-fill {\n  transition: width 0.3s;\n  background: var(--fill-color);\n  height: 100%;\n  border-radius: var(--track-width);\n}\n")();
+var progressBar = /* @__PURE__ */ (() => ".adm-progress-bar {\n  --track-width: var(--adm-progress-bar-track-width, 8px);\n  --track-color: var(--adm-progress-bar-track-color, #e5e5e5);\n  --fill-color: var(--adm-progress-bar-fill-color, var(--adm-color-primary));\n  --text-width: var(--adm-progress-bar-text-width, 40px);\n  display: flex;\n  align-items: center;\n}\n.adm-progress-bar-trail {\n  flex: auto;\n  background: var(--track-color);\n  overflow: hidden;\n  height: var(--track-width);\n}\n.adm-progress-bar-fill {\n  transition: width 0.3s;\n  background: var(--fill-color);\n  height: var(--track-width);\n}\n.adm-progress-bar-text {\n  flex: none;\n  width: calc(var(--text-width) + 8px);\n  padding-left: 8px;\n  color: #999999;\n}\n.adm-progress-bar-rounded .adm-progress-bar-trail,\n.adm-progress-bar-rounded .adm-progress-bar-fill {\n  border-radius: var(--track-width);\n}\n")();
 const classPrefix$q = `adm-progress-bar`;
+const defaultProps$k = {
+  percent: 0,
+  rounded: true,
+  text: false
+};
 const ProgressBar = (p2) => {
-  const props = mergeProps({
-    percent: 0
-  }, p2);
+  const props = mergeProps(defaultProps$k, p2);
   const fillStyle = {
     width: `${props.percent}%`
   };
+  const textElement = function() {
+    if (props.text === true) {
+      return `${props.percent}%`;
+    }
+    if (typeof props.text === "function") {
+      return props.text(props.percent);
+    }
+    return props.text;
+  }();
   return withNativeProps(props, React$1.createElement("div", {
-    className: classPrefix$q
+    className: classNames(classPrefix$q, props.rounded && `${classPrefix$q}-rounded`)
   }, React$1.createElement("div", {
     className: `${classPrefix$q}-trail`
   }, React$1.createElement("div", {
     className: `${classPrefix$q}-fill`,
     style: fillStyle
-  }))));
+  })), isNodeWithContent(textElement) && React$1.createElement("div", {
+    className: `${classPrefix$q}-text`
+  }, textElement)));
 };
 var progressCircle = /* @__PURE__ */ (() => "/*\u8FDB\u5EA6\u5708*/\n.adm-progress-circle {\n  --track-width: var(--adm-progress-circle-track-width, 3px);\n  --size: var(--adm-progress-circle-size, 50px);\n  --track-color: var(--adm-progress-circle-track-color, #e5e5e5);\n  --fill-color: var(--adm-progress-circle-fill-color, var(--adm-color-primary));\n  --percent: 0;\n  --pi: 3.14159265;\n  --radius: calc(var(--size) / 2 - var(--track-width) / 2);\n  --circumference: calc(var(--radius) * var(--pi) * 2);\n  display: inline-block;\n  width: var(--size);\n  height: var(--size);\n}\n.adm-progress-circle-svg {\n  width: 100%;\n  height: 100%;\n}\n.adm-progress-circle-svg > .adm-progress-circle-track,\n.adm-progress-circle-svg .adm-progress-circle-fill {\n  stroke-width: var(--track-width);\n  r: var(--radius);\n  cx: calc(var(--size) / 2);\n  cy: calc(var(--size) / 2);\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n.adm-progress-circle-svg > .adm-progress-circle-track {\n  stroke: var(--track-color);\n}\n.adm-progress-circle-svg > .adm-progress-circle-fill {\n  transition: stroke-dashoffset 0.35s;\n  stroke: var(--fill-color);\n  stroke-dasharray: var(--circumference);\n  stroke-dashoffset: calc(var(--circumference) * (1 - var(--percent) / 100));\n  stroke-linecap: round;\n}\n.adm-progress-circle-content {\n  position: relative;\n  margin: auto;\n  width: 100%;\n  height: 100%;\n}\n.adm-progress-circle-info {\n  position: absolute;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  text-align: center;\n  transform: translate(-50%, -50%);\n}\n")();
 const classPrefix$p = `adm-progress-circle`;
@@ -17131,6 +17240,9 @@ const Thumb = (props) => {
     icon
   } = props;
   const prevValue = useRef(value);
+  const {
+    locale
+  } = useConfig();
   const currentPosition = () => {
     return {
       left: `${(value - min) / (max - min) * 100}%`,
@@ -17167,7 +17279,14 @@ const Thumb = (props) => {
   return React$1.createElement("div", Object.assign({
     className: `${classPrefix$f}-thumb-container`,
     style: currentPosition()
-  }, bind()), renderPopoverContent ? React$1.createElement(Popover$1, {
+  }, bind(), {
+    role: "slider",
+    "aria-label": props["aria-label"] || locale.Slider.name,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    "aria-disabled": disabled
+  }), renderPopoverContent ? React$1.createElement(Popover$1, {
     content: renderPopoverContent(value),
     placement: "top",
     visible: dragging,
@@ -17304,7 +17423,8 @@ const Slider = (p2) => {
             dragLockRef.current -= 1;
           }, 100);
         }
-      }
+      },
+      "aria-label": props["aria-label"]
     });
   };
   return withNativeProps(props, React$1.createElement("div", {
@@ -17355,6 +17475,9 @@ const Stepper = (p2) => {
     min,
     inputReadOnly
   } = props;
+  const {
+    locale
+  } = useConfig();
   const [value, setValue] = usePropsValue(props);
   const [inputValue, setInputValue] = useState(() => convertValueToText(value, props.digits));
   function setValueWithCheck(v) {
@@ -17426,7 +17549,8 @@ const Stepper = (p2) => {
     disabled: minusDisabled(),
     fill: "none",
     shape: "rectangular",
-    color: "primary"
+    color: "primary",
+    "aria-label": locale.Stepper.decrease
   }, React$1.createElement(MinusOutline, null)), React$1.createElement("div", {
     className: `${classPrefix$d}-middle`
   }, React$1.createElement(Input, {
@@ -17446,14 +17570,19 @@ const Stepper = (p2) => {
       setHasFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e2);
     },
-    readOnly: inputReadOnly
+    readOnly: inputReadOnly,
+    role: "spinbutton",
+    "aria-valuenow": Number(inputValue),
+    "aria-valuemax": max,
+    "aria-valuemin": min
   })), React$1.createElement(Button, {
     className: `${classPrefix$d}-plus`,
     onClick: handlePlus,
     disabled: plusDisabled(),
     fill: "none",
     shape: "rectangular",
-    color: "primary"
+    color: "primary",
+    "aria-label": locale.Stepper.increase
   }, React$1.createElement(AddOutline, null))));
 };
 function convertValueToText(value, digits) {
@@ -17470,7 +17599,7 @@ function convertTextToValue(text) {
     return null;
   return parseFloat(text);
 }
-var steps = /* @__PURE__ */ (() => ".adm-step {\n  --line-to-next-color: #e5e5e5;\n  --icon-color: #e5e5e5;\n}\n.adm-step .adm-step-indicator {\n  position: relative;\n}\n.adm-step .adm-step-indicator::after {\n  content: '';\n  position: absolute;\n  z-index: 0;\n  background-color: var(--line-to-next-color);\n}\n.adm-step .adm-step-indicator .adm-step-icon-container {\n  position: absolute;\n  z-index: 1;\n  background: var(--adm-color-white);\n  color: var(--icon-color);\n}\n.adm-step .adm-step-indicator .adm-step-icon-container > .antd-mobile-icon {\n  display: block;\n}\n.adm-step:last-child .adm-step-indicator::after {\n  display: none;\n}\n.adm-step-status-finish {\n  --line-to-next-color: var(--adm-color-primary);\n}\n.adm-step-status-wait {\n  --icon-color: #e5e5e5;\n}\n.adm-step-status-wait .adm-step-title {\n  color: var(--adm-color-weak);\n}\n.adm-step-status-process {\n  --icon-color: var(--adm-color-primary);\n}\n.adm-step-status-process .adm-step-title {\n  color: var(--adm-color-primary);\n}\n.adm-step-status-finish {\n  --icon-color: var(--adm-color-primary);\n}\n.adm-step-status-error {\n  --icon-color: var(--adm-color-danger);\n}\n.adm-step-status-error .adm-step-title {\n  color: var(--adm-color-danger);\n}\n.adm-steps {\n  --title-font-size: var(--adm-font-size-main);\n  --description-font-size: var(--adm-font-size-4);\n  --indicator-margin-right: 0;\n  --icon-size: 18px;\n  width: 100%;\n  box-sizing: border-box;\n}\n.adm-steps-horizontal {\n  display: flex;\n  justify-content: space-around;\n  padding: 8px 0;\n}\n.adm-steps-horizontal .adm-step {\n  flex: 1;\n}\n.adm-steps-horizontal .adm-step .adm-step-indicator {\n  width: 100%;\n  height: 24px;\n}\n.adm-steps-horizontal .adm-step .adm-step-indicator::after {\n  left: 50%;\n  top: 50%;\n  height: 1px;\n  transform: translateY(-50%);\n  width: 100%;\n}\n.adm-steps-horizontal .adm-step .adm-step-indicator .adm-step-icon-container {\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.adm-steps-horizontal .adm-step-content {\n  text-align: center;\n  font-size: var(--description-font-size);\n  padding: 2px 8px 0;\n}\n.adm-steps-horizontal .adm-step-content .adm-step-title {\n  font-size: var(--title-font-size);\n}\n.adm-steps-horizontal .adm-step-content .adm-step-description {\n  margin-top: 4px;\n  color: var(--adm-color-weak);\n}\n.adm-steps-vertical {\n  padding: 8px 16px;\n}\n.adm-steps-vertical .adm-step {\n  display: flex;\n  align-items: stretch;\n}\n.adm-steps-vertical .adm-step .adm-step-indicator {\n  flex: none;\n  width: 24px;\n  margin-right: var(--indicator-margin-right);\n}\n.adm-steps-vertical .adm-step .adm-step-indicator::after {\n  left: 50%;\n  top: calc(var(--title-font-size) * 1.5 / 2);\n  width: 1px;\n  transform: translateX(-50%);\n  height: 100%;\n}\n.adm-steps-vertical .adm-step .adm-step-indicator .adm-step-icon-container {\n  top: calc(var(--title-font-size) * 1.5 / 2);\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.adm-steps-vertical .adm-step:last-child .adm-step-content {\n  padding-bottom: 0;\n}\n.adm-steps-vertical .adm-step .adm-step-content {\n  flex: auto;\n  padding-bottom: 24px;\n}\n.adm-steps-vertical .adm-step .adm-step-content .adm-step-title {\n  font-size: var(--title-font-size);\n  line-height: 1.5;\n}\n.adm-steps-vertical .adm-step .adm-step-content .adm-step-description {\n  padding-top: 4px;\n  font-size: var(--description-font-size);\n  color: var(--adm-color-weak);\n}\n.adm-step-icon-container {\n  font-size: var(--icon-size);\n}\n.adm-step-icon-dot {\n  display: block;\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 4px;\n}\n")();
+var steps = /* @__PURE__ */ (() => ".adm-step {\n  --line-to-next-color: #e5e5e5;\n  --icon-color: #e5e5e5;\n}\n.adm-step .adm-step-indicator {\n  position: relative;\n}\n.adm-step .adm-step-indicator::after {\n  content: '';\n  position: absolute;\n  z-index: 0;\n  background-color: var(--line-to-next-color);\n}\n.adm-step .adm-step-indicator .adm-step-icon-container {\n  position: absolute;\n  z-index: 1;\n  background: var(--adm-color-background);\n  color: var(--icon-color);\n}\n.adm-step .adm-step-indicator .adm-step-icon-container > .antd-mobile-icon {\n  display: block;\n}\n.adm-step:last-child .adm-step-indicator::after {\n  display: none;\n}\n.adm-step-status-finish {\n  --line-to-next-color: var(--adm-color-primary);\n}\n.adm-step-status-wait {\n  --icon-color: #e5e5e5;\n}\n.adm-step-status-wait .adm-step-title {\n  color: var(--adm-color-weak);\n}\n.adm-step-status-process {\n  --icon-color: var(--adm-color-primary);\n}\n.adm-step-status-process .adm-step-title {\n  color: var(--adm-color-primary);\n}\n.adm-step-status-finish {\n  --icon-color: var(--adm-color-primary);\n}\n.adm-step-status-error {\n  --icon-color: var(--adm-color-danger);\n}\n.adm-step-status-error .adm-step-title {\n  color: var(--adm-color-danger);\n}\n.adm-steps {\n  --title-font-size: var(--adm-font-size-main);\n  --description-font-size: var(--adm-font-size-4);\n  --indicator-margin-right: 0;\n  --icon-size: 18px;\n  width: 100%;\n  box-sizing: border-box;\n}\n.adm-steps-horizontal {\n  display: flex;\n  justify-content: space-around;\n  padding: 8px 0;\n}\n.adm-steps-horizontal .adm-step {\n  flex: 1;\n}\n.adm-steps-horizontal .adm-step .adm-step-indicator {\n  width: 100%;\n  height: 24px;\n}\n.adm-steps-horizontal .adm-step .adm-step-indicator::after {\n  left: 50%;\n  top: 50%;\n  height: 1px;\n  transform: translateY(-50%);\n  width: 100%;\n}\n.adm-steps-horizontal .adm-step .adm-step-indicator .adm-step-icon-container {\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.adm-steps-horizontal .adm-step-content {\n  text-align: center;\n  font-size: var(--description-font-size);\n  padding: 2px 8px 0;\n}\n.adm-steps-horizontal .adm-step-content .adm-step-title {\n  font-size: var(--title-font-size);\n}\n.adm-steps-horizontal .adm-step-content .adm-step-description {\n  margin-top: 4px;\n  color: var(--adm-color-weak);\n}\n.adm-steps-vertical {\n  padding: 8px 16px;\n}\n.adm-steps-vertical .adm-step {\n  display: flex;\n  align-items: stretch;\n}\n.adm-steps-vertical .adm-step .adm-step-indicator {\n  flex: none;\n  width: 24px;\n  margin-right: var(--indicator-margin-right);\n}\n.adm-steps-vertical .adm-step .adm-step-indicator::after {\n  left: 50%;\n  top: calc(var(--title-font-size) * 1.5 / 2);\n  width: 1px;\n  transform: translateX(-50%);\n  height: 100%;\n}\n.adm-steps-vertical .adm-step .adm-step-indicator .adm-step-icon-container {\n  top: calc(var(--title-font-size) * 1.5 / 2);\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.adm-steps-vertical .adm-step:last-child .adm-step-content {\n  padding-bottom: 0;\n}\n.adm-steps-vertical .adm-step .adm-step-content {\n  flex: auto;\n  padding-bottom: 24px;\n}\n.adm-steps-vertical .adm-step .adm-step-content .adm-step-title {\n  font-size: var(--title-font-size);\n  line-height: 1.5;\n}\n.adm-steps-vertical .adm-step .adm-step-content .adm-step-description {\n  padding-top: 4px;\n  font-size: var(--description-font-size);\n  color: var(--adm-color-weak);\n}\n.adm-step-icon-container {\n  font-size: var(--icon-size);\n}\n.adm-step-icon-dot {\n  display: block;\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 4px;\n}\n")();
 const classPrefix$c = `adm-step`;
 const Step = (props) => {
   const {