antd-mobile 5.14.3 → 5.15.0

package/2x/bundle/antd-mobile.es.js

@@ -1,14 +1,14 @@
 import { __rest, __awaiter } from "tslib";
-import React$1, { useContext, useRef, useEffect, useMemo, useState, useImperativeHandle, memo, forwardRef, useCallback, createContext, cloneElement, createRef } from "react";
+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 { useSpring, animated, to, Globals } from "@react-spring/web";
 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, StarFill, CheckCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill, SearchOutline, MinusOutline } from "antd-mobile-icons";
+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, useForm } from "rc-field-form";
+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";
 import Big from "big.js";
 function _mergeNamespaces(n2, m2) {
@@ -27,7 +27,7 @@ function _mergeNamespaces(n2, m2) {
   });
   return Object.freeze(Object.defineProperty(n2, Symbol.toStringTag, { value: "Module" }));
 }
-var global$1 = /* @__PURE__ */ (() => ":root {\n  --adm-radius-s: 4px;\n  --adm-radius-m: 8px;\n  --adm-radius-l: 12px;\n  --adm-font-size-1: 9px;\n  --adm-font-size-2: 10px;\n  --adm-font-size-3: 11px;\n  --adm-font-size-4: 12px;\n  --adm-font-size-5: 13px;\n  --adm-font-size-6: 14px;\n  --adm-font-size-7: 15px;\n  --adm-font-size-8: 16px;\n  --adm-font-size-9: 17px;\n  --adm-font-size-10: 18px;\n  --adm-hd: 1;\n  --adm-color-primary: #1677ff;\n  --adm-color-success: #00b578;\n  --adm-color-warning: #ff8f1f;\n  --adm-color-danger: #ff3141;\n  --adm-color-white: #ffffff;\n  --adm-color-text: #333333;\n  --adm-color-text-secondary: #666666;\n  --adm-color-weak: #999999;\n  --adm-color-light: #cccccc;\n  --adm-color-border: #eeeeee;\n  --adm-color-box: #f5f5f5;\n  --adm-color-background: #ffffff;\n  --adm-font-size-main: var(--adm-font-size-5);\n  --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',\n    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',\n    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;\n  --adm-border-color: var(--adm-color-border);\n}\nhtml[data-prefers-color-scheme='dark'] {\n  --adm-color-primary: #3086ff;\n  --adm-color-success: #34b368;\n  --adm-color-warning: #ffa930;\n  --adm-color-danger: #ff4a58;\n  --adm-color-text: #e6e6e6;\n  --adm-color-text-secondary: #b3b3b3;\n  --adm-color-weak: #808080;\n  --adm-color-light: #4d4d4d;\n  --adm-color-border: #2b2b2b;\n  --adm-color-box: #0a0a0a;\n  --adm-color-background: #1a1a1a;\n  --adm-border-color: var(--adm-color-border);\n}\n:root {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\nbody {\n  color: var(--adm-color-text);\n  font-size: var(--adm-font-size-main);\n  font-family: var(--adm-font-family);\n}\na,\nbutton {\n  cursor: pointer;\n}\na {\n  color: var(--adm-color-primary);\n  transition: opacity ease-in-out 0.2s;\n}\na:active {\n  opacity: 0.8;\n}\n.adm-plain-anchor {\n  color: unset;\n  transition: none;\n}\n.adm-plain-anchor:active {\n  opacity: unset;\n}\nbody.adm-overflow-hidden {\n  overflow: hidden !important;\n}\ndiv.adm-px-tester {\n  --size: 1;\n  height: calc(var(--size) / 2 * 2px);\n  width: 0;\n  position: fixed;\n  right: -100vw;\n  bottom: -100vh;\n  user-select: none;\n  pointer-events: none;\n}\n")();
+var global$1 = /* @__PURE__ */ (() => ":root {\n  --adm-radius-s: 4px;\n  --adm-radius-m: 8px;\n  --adm-radius-l: 12px;\n  --adm-font-size-1: 9px;\n  --adm-font-size-2: 10px;\n  --adm-font-size-3: 11px;\n  --adm-font-size-4: 12px;\n  --adm-font-size-5: 13px;\n  --adm-font-size-6: 14px;\n  --adm-font-size-7: 15px;\n  --adm-font-size-8: 16px;\n  --adm-font-size-9: 17px;\n  --adm-font-size-10: 18px;\n  --adm-color-primary: #1677ff;\n  --adm-color-success: #00b578;\n  --adm-color-warning: #ff8f1f;\n  --adm-color-danger: #ff3141;\n  --adm-color-white: #ffffff;\n  --adm-color-text: #333333;\n  --adm-color-text-secondary: #666666;\n  --adm-color-weak: #999999;\n  --adm-color-light: #cccccc;\n  --adm-color-border: #eeeeee;\n  --adm-color-box: #f5f5f5;\n  --adm-color-background: #ffffff;\n  --adm-font-size-main: var(--adm-font-size-5);\n  --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',\n    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',\n    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;\n  --adm-border-color: var(--adm-color-border);\n}\nhtml[data-prefers-color-scheme='dark'] {\n  --adm-color-primary: #3086ff;\n  --adm-color-success: #34b368;\n  --adm-color-warning: #ffa930;\n  --adm-color-danger: #ff4a58;\n  --adm-color-text: #e6e6e6;\n  --adm-color-text-secondary: #b3b3b3;\n  --adm-color-weak: #808080;\n  --adm-color-light: #4d4d4d;\n  --adm-color-border: #2b2b2b;\n  --adm-color-box: #0a0a0a;\n  --adm-color-background: #1a1a1a;\n  --adm-border-color: var(--adm-color-border);\n}\n:root {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\nbody {\n  color: var(--adm-color-text);\n  font-size: var(--adm-font-size-main);\n  font-family: var(--adm-font-family);\n}\na,\nbutton {\n  cursor: pointer;\n}\na {\n  color: var(--adm-color-primary);\n  transition: opacity ease-in-out 0.2s;\n}\na:active {\n  opacity: 0.8;\n}\n.adm-plain-anchor {\n  color: unset;\n  transition: none;\n}\n.adm-plain-anchor:active {\n  opacity: unset;\n}\nbody.adm-overflow-hidden {\n  overflow: hidden !important;\n}\ndiv.adm-px-tester {\n  --size: 1;\n  height: calc(var(--size) / 2 * 2px);\n  width: 0;\n  position: fixed;\n  right: -100vw;\n  bottom: -100vh;\n  user-select: none;\n  pointer-events: none;\n}\n")();
 const canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
 if (canUseDom) {
   document.addEventListener("touchstart", () => {
@@ -9029,7 +9029,7 @@ const Popup = (p2) => {
   }, shouldRender && props.children))));
   return renderToContainer(props.getContainer, node);
 };
-var safeArea = /* @__PURE__ */ (() => ".adm-safe-area {\n  display: block;\n  width: 100%;\n}\n.adm-safe-area-position-top {\n  padding-top: calc(env(safe-area-inset-top) * var(--adm-hd));\n}\n.adm-safe-area-position-bottom {\n  padding-bottom: calc(env(safe-area-inset-bottom) * var(--adm-hd));\n}\n")();
+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";
 const SafeArea = (props) => {
   return withNativeProps(props, React$1.createElement("div", {
@@ -9088,7 +9088,7 @@ function concurrentUnmount(container) {
     });
   });
 }
-function unmount$1(container) {
+function unmount(container) {
   if (createRoot) {
     return concurrentUnmount(container);
   }
@@ -9097,19 +9097,21 @@ function unmount$1(container) {
 function renderToBody(element) {
   const container = document.createElement("div");
   document.body.appendChild(container);
-  function unmount2() {
-    const unmountResult = unmount$1(container);
+  function unmount$1() {
+    const unmountResult = unmount(container);
     if (unmountResult && container.parentNode) {
       container.parentNode.removeChild(container);
     }
   }
   render(element, container);
-  return unmount2;
+  return unmount$1;
 }
 function renderImperatively(element) {
   const Wrapper2 = React$1.forwardRef((_, ref) => {
     const [visible, setVisible] = useState(false);
     const closedRef = useRef(false);
+    const [elementToRender, setElementToRender] = useState(element);
+    const keyRef = useRef(0);
     useEffect(() => {
       if (!closedRef.current) {
         setVisible(true);
@@ -9121,17 +9123,24 @@ function renderImperatively(element) {
       var _a, _b;
       closedRef.current = true;
       setVisible(false);
-      (_b = (_a = element.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_b = (_a = elementToRender.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     function afterClose() {
       var _a, _b;
       unmount2();
-      (_b = (_a = element.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     useImperativeHandle(ref, () => ({
-      close: onClose
+      close: onClose,
+      replace: (element2) => {
+        var _a, _b;
+        keyRef.current++;
+        (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        setElementToRender(element2);
+      }
     }));
-    return React$1.cloneElement(element, Object.assign(Object.assign({}, element.props), {
+    return React$1.cloneElement(elementToRender, Object.assign(Object.assign({}, elementToRender.props), {
+      key: keyRef.current,
       visible,
       onClose,
       afterClose
@@ -9141,12 +9150,15 @@ function renderImperatively(element) {
   const unmount2 = renderToBody(React$1.createElement(Wrapper2, {
     ref: wrapperRef
   }));
-  function close() {
-    var _a;
-    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
-  }
   return {
-    close
+    close: () => {
+      var _a;
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    },
+    replace: (element2) => {
+      var _a;
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.replace(element2);
+    }
   };
 }
 const classPrefix$1f = `adm-action-sheet`;
@@ -9218,7 +9230,7 @@ const ActionSheet = (p2) => {
 function showActionSheet(props) {
   return renderImperatively(React$1.createElement(ActionSheet, Object.assign({}, props)));
 }
-var index$h = attachPropertiesToComponent(ActionSheet, {
+var index$i = attachPropertiesToComponent(ActionSheet, {
   show: showActionSheet
 });
 var autoCenter = /* @__PURE__ */ (() => ".adm-auto-center {\n  display: flex;\n  justify-content: center;\n}\n.adm-auto-center-content {\n  flex: 0 1 auto;\n}\n")();
@@ -9288,7 +9300,7 @@ const Avatar = (p2) => {
     onError: props.onError
   }));
 };
-var badge = /* @__PURE__ */ (() => ".adm-badge-wrap {\n  display: inline-block;\n  position: relative;\n}\n.adm-badge {\n  display: inline-flex;\n  vertical-align: middle;\n  box-sizing: content-box;\n  border-radius: 100px;\n  background-color: var(--color);\n  --right: 0;\n  --top: 0;\n  --color: var(--adm-badge-color, #ff411c);\n}\n.adm-badge-content {\n  color: var(--adm-color-white);\n  box-sizing: border-box;\n  min-width: 8px;\n  padding: 1px 4px;\n  font-size: var(--adm-font-size-1);\n  line-height: 12px;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n}\n.adm-badge-fixed {\n  position: absolute;\n  right: var(--right);\n  top: var(--top);\n  transform: translate(50%, -50%);\n}\n.adm-badge-dot {\n  min-width: 10px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n}\n.adm-badge-bordered {\n  border: solid 1px var(--adm-color-white);\n}\n")();
+var badge = /* @__PURE__ */ (() => ".adm-badge-wrapper {\n  display: inline-block;\n  position: relative;\n}\n.adm-badge {\n  display: inline-flex;\n  vertical-align: middle;\n  box-sizing: content-box;\n  border-radius: 100px;\n  background-color: var(--color);\n  --right: 0;\n  --top: 0;\n  --color: var(--adm-badge-color, #ff411c);\n}\n.adm-badge-content {\n  color: var(--adm-color-white);\n  box-sizing: border-box;\n  min-width: 8px;\n  padding: 1px 4px;\n  font-size: var(--adm-font-size-1);\n  line-height: 12px;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n}\n.adm-badge-fixed {\n  position: absolute;\n  right: var(--right);\n  top: var(--top);\n  transform: translate(50%, -50%);\n}\n.adm-badge-dot {\n  min-width: 10px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n}\n.adm-badge-bordered {\n  border: solid 1px var(--adm-color-white);\n}\n")();
 const classPrefix$1c = `adm-badge`;
 const dot = React$1.createElement(React$1.Fragment, null);
 const Badge$1 = (props) => {
@@ -9308,7 +9320,8 @@ const Badge$1 = (props) => {
     className: `${classPrefix$1c}-content`
   }, content))) : null;
   return children ? React$1.createElement("div", {
-    className: `${classPrefix$1c}-wrap`
+    className: classNames(`${classPrefix$1c}-wrapper`, props.wrapperClassName),
+    style: props.wrapperStyle
   }, children, element) : element;
 };
 var Badge = attachPropertiesToComponent(Badge$1, {
@@ -9534,10 +9547,8 @@ function usePropsValue(options) {
   }
   const setState = useMemoizedFn((v) => {
     const nextValue = typeof v === "function" ? v(stateRef.current) : v;
-    if (value === void 0) {
-      stateRef.current = nextValue;
-      update();
-    }
+    stateRef.current = nextValue;
+    update();
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
   });
   return [stateRef.current, setState];
@@ -9992,7 +10003,7 @@ const CapsuleTabs = (props) => {
     }, pane.props.children));
   })));
 };
-var index$g = attachPropertiesToComponent(CapsuleTabs, {
+var index$h = attachPropertiesToComponent(CapsuleTabs, {
   Tab: CapsuleTab
 });
 var card = /* @__PURE__ */ (() => ".adm-card {\n  background: var(--adm-color-background);\n  border-radius: 8px;\n  padding: 0 12px;\n}\n.adm-card-header {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 12px 0;\n}\n.adm-card-header:not(:last-child) {\n  border-bottom: solid 0.5px var(--adm-color-border);\n}\n.adm-card-header-title {\n  font-size: var(--adm-font-size-7);\n  line-height: 1.4;\n  font-weight: bold;\n}\n.adm-card-body {\n  padding: 12px 0;\n}\n")();
@@ -10820,7 +10831,7 @@ function prompt$2(props) {
     const unmount2 = renderToBody(React$1.createElement(Wrapper2, null));
   });
 }
-var index$f = attachPropertiesToComponent(CascadePicker, {
+var index$g = attachPropertiesToComponent(CascadePicker, {
   prompt: prompt$2
 });
 const CascadePickerView = (props) => {
@@ -11063,7 +11074,7 @@ var Tabs = attachPropertiesToComponent(Tabs$1, {
   Tab
 });
 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}\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  padding-left: 12px;\n  font-size: var(--adm-font-size-7);\n  color: var(--adm-color-weak);\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")();
+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 = {
   mode: "default"
@@ -11513,7 +11524,7 @@ function prompt$1(props) {
   });
 }
 var cascader = /* @__PURE__ */ (() => ".adm-cascader {\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.adm-cascader-header {\n  flex: none;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 6px 8px;\n}\n.adm-cascader-header-button {\n  font-size: var(--adm-font-size-7);\n  display: inline-block;\n  padding: 4px 4px;\n}\n.adm-cascader-header-title {\n  padding: 4px 4px;\n  font-size: var(--adm-font-size-7);\n  color: var(--adm-color-text);\n  text-align: center;\n  flex: 1;\n}\n.adm-cascader-body {\n  flex: auto;\n  height: 100%;\n  width: 100%;\n}\n.adm-cascader-body > .adm-cascader-view {\n  --height: 310px;\n}\n")();
-var index$e = attachPropertiesToComponent(Cascader, {
+var index$f = attachPropertiesToComponent(Cascader, {
   prompt: prompt$1,
   optionSkeleton
 });
@@ -11669,7 +11680,7 @@ const defaultProps$L = {
   defaultChecked: false,
   indeterminate: false
 };
-const Checkbox$1 = (p2) => {
+const Checkbox$1 = forwardRef((p2, ref) => {
   const groupContext = useContext(CheckboxGroupContext);
   const props = mergeProps(defaultProps$L, p2);
   let [checked, setChecked] = usePropsValue({
@@ -11694,6 +11705,17 @@ const Checkbox$1 = (p2) => {
     };
     disabled = disabled || groupContext.disabled;
   }
+  useImperativeHandle(ref, () => ({
+    check: () => {
+      setChecked(true);
+    },
+    uncheck: () => {
+      setChecked(false);
+    },
+    toggle: () => {
+      setChecked(!checked);
+    }
+  }));
   const renderIcon = () => {
     if (props.icon) {
       return React$1.createElement("div", {
@@ -11720,7 +11742,7 @@ const Checkbox$1 = (p2) => {
   }), renderIcon(), props.children && React$1.createElement("div", {
     className: `${classPrefix$W}-content`
   }, props.children)));
-};
+});
 var Checkbox = attachPropertiesToComponent(Checkbox$1, {
   Group: Group$1
 });
@@ -11868,7 +11890,7 @@ const Collapse = (props) => {
     }, panel.props.children));
   }))));
 };
-var index$d = attachPropertiesToComponent(Collapse, {
+var index$e = attachPropertiesToComponent(Collapse, {
   Panel: CollapsePanel
 });
 var datePicker = /* @__PURE__ */ (() => "")();
@@ -12273,7 +12295,7 @@ function prompt(props) {
     const unmount2 = renderToBody(React$1.createElement(Wrapper2, null));
   });
 }
-var index$c = attachPropertiesToComponent(DatePicker, {
+var index$d = attachPropertiesToComponent(DatePicker, {
   prompt
 });
 const thisYear = new Date().getFullYear();
@@ -12577,7 +12599,7 @@ function clear$2() {
     close();
   });
 }
-var index$b = attachPropertiesToComponent(Dialog, {
+var index$c = attachPropertiesToComponent(Dialog, {
   show: show$2,
   alert: alert$1,
   confirm: confirm$1,
@@ -12726,7 +12748,7 @@ const Dropdown = forwardRef((p2, ref) => {
     }, item.props.children);
   })))));
 });
-var index$a = attachPropertiesToComponent(Dropdown, {
+var index$b = attachPropertiesToComponent(Dropdown, {
   Item
 });
 var ellipsis = /* @__PURE__ */ (() => ".adm-ellipsis {\n  overflow: hidden;\n  line-height: 1.5;\n}\n")();
@@ -13668,7 +13690,7 @@ const FloatingPanel = forwardRef((p2, ref) => {
     ref: contentRef
   }, props.children)));
 });
-var index$9 = /* @__PURE__ */ (() => ".adm-form {\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  ---border-inner: var(--border-inner);\n  ---border-top: var(--border-top);\n  ---border-bottom: var(--border-bottom);\n}\n.adm-form .adm-list.adm-list {\n  --padding-left: 16px;\n  --padding-right: 12px;\n  --border-inner: var(---border-inner);\n  --border-top: var(---border-top);\n  --border-bottom: var(---border-bottom);\n}\n.adm-form .adm-form-footer {\n  padding: 20px 12px;\n}\n.adm-form-list-operation {\n  text-align: center;\n  color: #1677ff;\n}\n.adm-form-item + .adm-form-item {\n  border-top: none;\n}\n.adm-form-item-label {\n  display: block;\n  height: 100%;\n  line-height: 1.5;\n  box-sizing: border-box;\n  position: relative;\n  color: var(--adm-color-text-secondary);\n}\n.adm-form-item-label .adm-form-item-required-asterisk {\n  position: absolute;\n  left: -0.6em;\n  top: 0;\n  font-family: SimSun, sans-serif;\n  color: var(--adm-color-danger);\n  user-select: none;\n}\n.adm-form-item-label .adm-form-item-required-text {\n  margin-left: 4px;\n  color: var(--adm-color-weak);\n}\n.adm-form-item-label-help {\n  margin-left: 4px;\n  cursor: pointer;\n}\n.adm-form-item-child {\n  display: flex;\n}\n.adm-form-item-child-position-normal {\n  justify-content: normal;\n}\n.adm-form-item-child-position-normal > * {\n  flex: auto;\n}\n.adm-form-item-child-position-right {\n  justify-content: flex-end;\n}\n.adm-form-item-child-position-right > * {\n  flex: none;\n}\n.adm-form-item-feedback-error {\n  color: var(--adm-color-danger);\n  margin-top: 4px;\n}\n.adm-form-item-feedback-warning {\n  color: var(--adm-color-warning);\n  margin-top: 4px;\n}\n.adm-form-item.adm-form-item-hidden {\n  display: none;\n}\n.adm-form-item.adm-form-item-horizontal.adm-list-item {\n  --align-items: stretch;\n  --prefix-width: 6.8em;\n}\n.adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {\n  padding-top: 12px;\n  padding-bottom: 12px;\n}\n.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {\n  align-self: center;\n}\n.adm-form-item.adm-form-item-vertical .adm-form-item-label {\n  font-size: var(--adm-font-size-7);\n  margin-bottom: 4px;\n}\n")();
+var index$a = /* @__PURE__ */ (() => ".adm-form {\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  ---border-inner: var(--border-inner);\n  ---border-top: var(--border-top);\n  ---border-bottom: var(--border-bottom);\n}\n.adm-form .adm-list.adm-list {\n  --padding-left: 16px;\n  --padding-right: 12px;\n  --border-inner: var(---border-inner);\n  --border-top: var(---border-top);\n  --border-bottom: var(---border-bottom);\n}\n.adm-form .adm-form-footer {\n  padding: 20px 12px;\n}\n.adm-form-list-operation {\n  text-align: center;\n  color: #1677ff;\n}\n.adm-form-item + .adm-form-item {\n  border-top: none;\n}\n.adm-form-item-label {\n  display: block;\n  height: 100%;\n  line-height: 1.5;\n  box-sizing: border-box;\n  position: relative;\n  color: var(--adm-color-text-secondary);\n}\n.adm-form-item-label .adm-form-item-required-asterisk {\n  position: absolute;\n  left: -0.6em;\n  top: 0;\n  font-family: SimSun, sans-serif;\n  color: var(--adm-color-danger);\n  user-select: none;\n}\n.adm-form-item-label .adm-form-item-required-text {\n  margin-left: 4px;\n  color: var(--adm-color-weak);\n}\n.adm-form-item-label-help {\n  margin-left: 4px;\n  cursor: pointer;\n}\n.adm-form-item-child {\n  display: flex;\n}\n.adm-form-item-child-position-normal {\n  justify-content: normal;\n}\n.adm-form-item-child-position-normal > * {\n  flex: auto;\n}\n.adm-form-item-child-position-right {\n  justify-content: flex-end;\n}\n.adm-form-item-child-position-right > * {\n  flex: none;\n}\n.adm-form-item-feedback-error {\n  color: var(--adm-color-danger);\n  margin-top: 4px;\n}\n.adm-form-item-feedback-warning {\n  color: var(--adm-color-warning);\n  margin-top: 4px;\n}\n.adm-form-item.adm-form-item-hidden {\n  display: none;\n}\n.adm-form-item.adm-form-item-horizontal.adm-list-item {\n  --align-items: stretch;\n  --prefix-width: 6.8em;\n}\n.adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {\n  padding-top: 12px;\n  padding-bottom: 12px;\n}\n.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {\n  align-self: center;\n}\n.adm-form-item.adm-form-item-vertical .adm-form-item-label {\n  font-size: var(--adm-font-size-7);\n  margin-bottom: 4px;\n}\n")();
 const defaultFormContext = {
   name: void 0,
   hasFeedback: true,
@@ -13713,7 +13735,7 @@ const FormArray = (props) => {
 };
 const classPrefix$M = "adm-form";
 const defaultProps$z = defaultFormContext;
-const Form$1 = forwardRef((p2, ref) => {
+const Form = forwardRef((p2, ref) => {
   const props = mergeProps(defaultProps$z, p2);
   const {
     className,
@@ -14263,13 +14285,13 @@ const FormItemLayout = (props) => {
       e2.preventDefault();
     }
   }, React$1.createElement(QuestionCircleOutline, null)))) : null;
-  const description = React$1.createElement(React$1.Fragment, null, props.description, hasFeedback && React$1.createElement(React$1.Fragment, null, props.errors.map((error, index2) => React$1.createElement("div", {
+  const description = props.description || hasFeedback ? React$1.createElement(React$1.Fragment, null, props.description, hasFeedback && React$1.createElement(React$1.Fragment, null, props.errors.map((error, index2) => React$1.createElement("div", {
     key: `error-${index2}`,
     className: `${classPrefix$J}-feedback-error`
   }, error)), props.warnings.map((warning2, index2) => React$1.createElement("div", {
     key: `warning-${index2}`,
     className: `${classPrefix$J}-feedback-warning`
-  }, warning2))));
+  }, warning2)))) : null;
   return React$1.createElement(List.Item, {
     style,
     title: layout === "vertical" && labelElement,
@@ -14463,15 +14485,13 @@ const FormItem = (props) => {
 };
 const FormSubscribe = (props) => {
   const update = useUpdate();
-  return React$1.createElement(Form.Item, {
-    noStyle: true,
-    dependencies: props.to
-  }, (form) => React$1.createElement(React$1.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map((namePath) => React$1.createElement(Watcher, {
+  const form = useContext(FieldContext$1);
+  return React$1.createElement(React$1.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map((namePath) => React$1.createElement(Watcher, {
     key: namePath.toString(),
     form,
     namePath,
     onChange: update
-  }))));
+  })));
 };
 const Watcher = memo((props) => {
   const value = useWatch(props.namePath, props.form);
@@ -14480,7 +14500,7 @@ const Watcher = memo((props) => {
   }, [value]);
   return null;
 });
-var Form = attachPropertiesToComponent(Form$1, {
+var index$9 = attachPropertiesToComponent(Form, {
   Item: FormItem,
   Subscribe: FormSubscribe,
   Header,
@@ -15453,7 +15473,9 @@ const InfiniteScroll = (p2) => {
   const [flag, setFlag] = useState({});
   const nextFlagRef = useRef(flag);
   const [scrollParent, setScrollParent] = useState();
-  const check = useMemoizedFn(() => __awaiter(void 0, void 0, void 0, function* () {
+  const {
+    run: check
+  } = useThrottleFn(() => __awaiter(void 0, void 0, void 0, function* () {
     if (nextFlagRef.current !== flag)
       return;
     if (!props.hasMore)
@@ -15476,7 +15498,11 @@ const InfiniteScroll = (p2) => {
       yield doLoadMore(false);
       setFlag(nextFlag);
     }
-  }));
+  }), {
+    wait: 100,
+    leading: true,
+    trailing: true
+  });
   useEffect(() => {
     check();
   });
@@ -15495,9 +15521,11 @@ const InfiniteScroll = (p2) => {
     };
   }, [scrollParent]);
   function retry() {
-    setFailed(false);
-    doLoadMore(true);
-    setFlag(nextFlagRef.current);
+    return __awaiter(this, void 0, void 0, function* () {
+      setFailed(false);
+      yield doLoadMore(true);
+      setFlag(nextFlagRef.current);
+    });
   }
   return withNativeProps(props, React$1.createElement("div", {
     className: classPrefix$y,
@@ -16632,12 +16660,26 @@ const Radio = (p2) => {
 var index$5 = attachPropertiesToComponent(Radio, {
   Group
 });
-var rate = /* @__PURE__ */ (() => ".adm-rate {\n  --star-size: 24px;\n  --active-color: #ffd21e;\n  --inactive-color: var(--adm-color-light);\n  display: inline-flex;\n}\n.adm-rate-box {\n  position: relative;\n}\n.adm-rate-star {\n  padding: calc(var(--star-size) / 8);\n  line-height: var(--star-size);\n  font-size: var(--star-size);\n  color: var(--inactive-color);\n  text-align: center;\n  overflow: hidden;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.adm-rate-star-half {\n  padding-right: 0;\n  width: 50%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.adm-rate-star-active {\n  color: var(--active-color);\n}\n.adm-rate-star-readonly {\n  cursor: unset;\n}\n")();
+var rate = /* @__PURE__ */ (() => ".adm-rate {\n  --star-size: 24px;\n  --active-color: #ffd21e;\n  --inactive-color: var(--adm-color-border);\n  display: inline-flex;\n}\n.adm-rate-box {\n  position: relative;\n}\n.adm-rate-star {\n  padding: 0.125em;\n  line-height: var(--star-size);\n  font-size: var(--star-size);\n  color: var(--inactive-color);\n  text-align: center;\n  overflow: hidden;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.adm-rate-star-half {\n  padding-right: 0;\n  width: 50%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.adm-rate-star-active {\n  color: var(--active-color);\n}\n.adm-rate-star-readonly {\n  cursor: unset;\n}\n")();
+const Star = () => {
+  return React$1.createElement("svg", {
+    viewBox: "0 0 42 40",
+    height: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      verticalAlign: "-0.125em"
+    }
+  }, React$1.createElement("path", {
+    d: "m21 34-10.52 5.53a2 2 0 0 1-2.902-2.108l2.01-11.714-8.511-8.296a2 2 0 0 1 1.108-3.411l11.762-1.71 5.26-10.657a2 2 0 0 1 3.586 0l5.26 10.658L39.815 14a2 2 0 0 1 1.108 3.411l-8.51 8.296 2.009 11.714a2 2 0 0 1-2.902 2.109L21 34Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
 const classPrefix$m = `adm-rate`;
 const defaultProps$g = {
   count: 5,
   allowHalf: false,
-  character: React$1.createElement(StarFill, null),
+  character: React$1.createElement(Star, null),
   defaultValue: 0,
   readOnly: false,
   allowClear: true
@@ -18135,6 +18177,9 @@ const TextArea = forwardRef((p2, ref) => {
     blur: () => {
       var _a;
       (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+    get nativeElement() {
+      return nativeTextAreaRef.current;
     }
   }));
   useIsomorphicLayoutEffect(() => {
@@ -18276,79 +18321,41 @@ const InternalToast = (p2) => {
     className: `${classPrefix$4}-icon`
   }, iconElement), React$1.createElement(AutoCenter, null, content))));
 };
-const containers = [];
-function unmount(container) {
-  const unmountResult = unmount$1(container);
-  if (unmountResult && container.parentNode) {
-    container.parentNode.removeChild(container);
-  }
-}
+let currentHandler = null;
+let currentTimeout = null;
 const defaultProps$3 = {
   duration: 2e3,
   position: "center",
   maskClickable: true
 };
+const ToastInner = (props) => React$1.createElement(InternalToast, Object.assign({}, props));
 function show(p2) {
   const props = mergeProps(defaultProps$3, typeof p2 === "string" ? {
     content: p2
   } : p2);
-  let timer = 0;
-  const {
-    getContainer = () => document.body
-  } = props;
-  const container = document.createElement("div");
-  const bodyContainer = resolveContainer(getContainer);
-  bodyContainer.appendChild(container);
-  clear();
-  containers.push(container);
-  const TempToast = forwardRef((_, ref2) => {
-    const [visible, setVisible] = useState(true);
-    useEffect(() => {
-      return () => {
-        var _a;
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      };
-    }, []);
-    useEffect(() => {
-      if (props.duration === 0) {
-        return;
-      }
-      timer = window.setTimeout(() => {
-        setVisible(false);
-      }, props.duration);
-      return () => {
-        window.clearTimeout(timer);
-      };
-    }, []);
-    useImperativeHandle(ref2, () => ({
-      close: () => setVisible(false)
-    }));
-    return React$1.createElement(InternalToast, Object.assign({}, props, {
-      getContainer: () => container,
-      visible,
-      afterClose: () => {
-        unmount(container);
-      }
-    }));
-  });
-  const ref = createRef();
-  render(React$1.createElement(TempToast, {
-    ref
-  }), container);
-  return {
-    close: () => {
-      var _a;
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+  const element = React$1.createElement(ToastInner, Object.assign({}, props, {
+    onClose: () => {
+      currentHandler = null;
     }
-  };
+  }));
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = renderImperatively(element);
+  }
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(() => {
+      clear();
+    }, props.duration);
+  }
+  return currentHandler;
 }
 function clear() {
-  while (true) {
-    const container = containers.pop();
-    if (!container)
-      break;
-    unmount(container);
-  }
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
 }
 function config(val) {
   if (val.duration !== void 0) {
@@ -18852,12 +18859,12 @@ const WaterMark = (p2) => {
         const img = new Image();
         img.crossOrigin = "anonymous";
         img.referrerPolicy = "no-referrer";
-        img.src = image2;
         img.onload = () => {
           ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
           ctx.restore();
           setBase64Url(canvas.toDataURL());
         };
+        img.src = image2;
       } else if (content) {
         ctx.textBaseline = "middle";
         ctx.textAlign = "center";
@@ -18871,7 +18878,7 @@ const WaterMark = (p2) => {
         setBase64Url(canvas.toDataURL());
       }
     } else {
-      throw new Error("\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301Canvas");
+      throw new Error("Canvas is not supported in the current environment");
     }
   }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image2, content, fontSize]);
   return withNativeProps(props, React$1.createElement("div", {
@@ -18885,4 +18892,4 @@ const WaterMark = (p2) => {
     }
   }));
 };
-export { index$h as ActionSheet, AutoCenter, Avatar, Badge, Button, Calendar, index$g as CapsuleTabs, Card, index$f as CascadePicker, CascadePickerView, index$e as Cascader, CascaderView, CenterPopup, CheckList, Checkbox, index$d as Collapse, ConfigProvider, index$c as DatePicker, DatePickerView, index$b as Dialog, Divider, DotLoading, index$a as Dropdown, Ellipsis, Empty, ErrorBlock, FloatingBubble, FloatingPanel, Form, Grid, Image$1 as Image, ImageUploader, ImageViewer, index$8 as IndexBar, InfiniteScroll, Input, index$7 as JumboTabs, List, DotLoading as Loading, Mask, index$6 as Modal, NavBar, NoticeBar, NumberKeyboard, PageIndicator, PasscodeInput, Picker, PickerView, Popover, Popup, ProgressBar, ProgressCircle, PullToRefresh, index$5 as Radio, Rate, Result, SafeArea, ScrollMask, SearchBar, Selector, index$4 as SideBar, Skeleton, Slider, Space, SpinLoading, Stepper, index$3 as Steps, SwipeAction, index$2 as Swiper, Switch, index$1 as TabBar, Tabs, Tag, TextArea, Toast, index as TreeSelect, VirtualInput, WaterMark, createErrorBlock, reduceMotion, restoreMotion, setDefaultConfig };
+export { index$i as ActionSheet, AutoCenter, Avatar, Badge, Button, Calendar, index$h as CapsuleTabs, Card, index$g as CascadePicker, CascadePickerView, index$f as Cascader, CascaderView, CenterPopup, CheckList, Checkbox, index$e as Collapse, ConfigProvider, index$d as DatePicker, DatePickerView, index$c as Dialog, Divider, DotLoading, index$b as Dropdown, Ellipsis, Empty, ErrorBlock, FloatingBubble, FloatingPanel, index$9 as Form, Grid, Image$1 as Image, ImageUploader, ImageViewer, index$8 as IndexBar, InfiniteScroll, Input, index$7 as JumboTabs, List, DotLoading as Loading, Mask, index$6 as Modal, NavBar, NoticeBar, NumberKeyboard, PageIndicator, PasscodeInput, Picker, PickerView, Popover, Popup, ProgressBar, ProgressCircle, PullToRefresh, index$5 as Radio, Rate, Result, SafeArea, ScrollMask, SearchBar, Selector, index$4 as SideBar, Skeleton, Slider, Space, SpinLoading, Stepper, index$3 as Steps, SwipeAction, index$2 as Swiper, Switch, index$1 as TabBar, Tabs, Tag, TextArea, Toast, index as TreeSelect, VirtualInput, WaterMark, createErrorBlock, reduceMotion, restoreMotion, setDefaultConfig };

package/2x/bundle/style.css

@@ -12,7 +12,6 @@
   --adm-font-size-8: 32px;
   --adm-font-size-9: 34px;
   --adm-font-size-10: 36px;
-  --adm-hd: 2;
   --adm-color-primary: #1677ff;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
@@ -221,16 +220,17 @@ div.adm-px-tester {
 }
 
 .adm-safe-area {
+  --multiple: var(--adm-safe-area-multiple, 1);
   display: block;
   width: 100%;
 }
 
 .adm-safe-area-position-top {
-  padding-top: calc(env(safe-area-inset-top) * var(--adm-hd));
+  padding-top: calc(env(safe-area-inset-top) * var(--multiple));
 }
 
 .adm-safe-area-position-bottom {
-  padding-bottom: calc(env(safe-area-inset-bottom) * var(--adm-hd));
+  padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
 }
 
 .adm-auto-center {
@@ -259,7 +259,7 @@ div.adm-px-tester {
   display: block;
 }
 
-.adm-badge-wrap {
+.adm-badge-wrapper {
   display: inline-block;
   position: relative;
 }
@@ -1036,6 +1036,7 @@ div.adm-px-tester {
   --padding-left: 24px;
   --padding-right: 24px;
   --font-size: var(--adm-font-size-9);
+  --extra-max-width: 70%;
 }
 
 .adm-list-header {
@@ -1105,9 +1106,11 @@ div.adm-px-tester {
 }
 
 .adm-list-item-content-extra {
+  flex: none;
   padding-left: 24px;
   font-size: var(--adm-font-size-7);
   color: var(--adm-color-weak);
+  max-width: var(--extra-max-width);
 }
 
 .adm-list-item-content-arrow {
@@ -3405,7 +3408,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-rate {
   --star-size: 48px;
   --active-color: #ffd21e;
-  --inactive-color: var(--adm-color-light);
+  --inactive-color: var(--adm-color-border);
   display: inline-flex;
 }
 
@@ -3414,7 +3417,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 
 .adm-rate-star {
-  padding: calc(var(--star-size) / 8);
+  padding: 0.125em;
   line-height: var(--star-size);
   font-size: var(--star-size);
   color: var(--inactive-color);

package/2x/cjs/components/badge/badge.css

@@ -1,4 +1,4 @@
-.adm-badge-wrap {
+.adm-badge-wrapper {
   display: inline-block;
   position: relative;
 }

package/2x/cjs/components/badge/badge.d.ts

@@ -6,5 +6,7 @@ export declare type BadgeProps = {
     color?: string;
     bordered?: boolean;
     children?: React.ReactNode;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
 } & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

package/2x/cjs/components/badge/badge.js

@@ -36,7 +36,8 @@ const Badge = props => {
     className: `${classPrefix}-content`
   }, content))) : null;
   return children ? _react.default.createElement("div", {
-    className: `${classPrefix}-wrap`
+    className: (0, _classnames.default)(`${classPrefix}-wrapper`, props.wrapperClassName),
+    style: props.wrapperStyle
   }, children, element) : element;
 };