antd-mobile 5.28.2 → 5.29.1

package/2x/bundle/style.css

@@ -16,14 +16,17 @@
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
-  --adm-color-white: #ffffff;
   --adm-color-text: #333333;
   --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
   --adm-color-border: #eeeeee;
-  --adm-color-box: #f5f5f5;
   --adm-color-background: #ffffff;
+  --adm-color-white: #ffffff;
+  --adm-color-box: #f5f5f5;
+  --adm-color-text-light-solid: var(--adm-color-white);
+  --adm-color-text-dark-solid: #000000;
+  --adm-color-fill-content: var(--adm-color-box);
   --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, segoe ui, arial, roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
   --adm-border-color: var(--adm-color-border);
@@ -154,7 +157,7 @@ div.adm-px-tester {
 }
 
 .adm-action-sheet-cancel {
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   padding-top: 16px;
 }
 
@@ -308,7 +311,7 @@ div.adm-px-tester {
 
 .adm-image-tip {
   position: relative;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   height: 100%;
   min-height: 48px;
   min-width: 48px;
@@ -341,7 +344,7 @@ div.adm-px-tester {
 }
 
 .adm-badge-content {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   box-sizing: border-box;
   min-width: 16px;
   padding: 2px 8px;
@@ -367,11 +370,11 @@ div.adm-px-tester {
 }
 
 .adm-badge-bordered {
-  border: solid 2px var(--adm-color-white);
+  border: solid 2px var(--adm-color-text-light-solid);
 }
 
 .adm-button {
-  --color: var(--adm-color-white);
+  --color: var(--adm-color-text-light-solid);
   --text-color: var(--adm-button-text-color, var(--adm-color-text));
   --background-color: var(--adm-button-background-color, var(--adm-color-background));
   --border-radius: var(--adm-button-border-radius, 8px);
@@ -431,7 +434,7 @@ div.adm-px-tester {
 }
 
 .adm-button:not(.adm-button-default) {
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   --background-color: var(--color);
   --border-color: var(--color);
 }
@@ -685,11 +688,11 @@ div.adm-px-tester {
   font-size: var(--adm-font-size-7);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-capsule-tabs-tab-active {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
 }
 
@@ -1417,7 +1420,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   box-sizing: border-box;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
 }
 
 .adm-checkbox .adm-checkbox-icon>svg {
@@ -1446,7 +1449,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-checkbox .adm-checkbox-custom-icon {
@@ -2098,7 +2101,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-popover-arrow-icon {
   display: block;
   height: var(--arrow-size);
-  width: 30px;
+  width: calc(var(--arrow-size) / 8 * 15);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -2476,7 +2479,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   overflow: hidden;
   height: 100%;
   position: relative;
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
   --sticky-offset-top: 0;
 }
 
@@ -2498,7 +2501,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   padding: 0 24px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-index-bar-sidebar {
@@ -2521,7 +2524,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   right: 120px;
   width: 94px;
   height: 94px;
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   font-size: 50px;
   line-height: 94px;
   text-align: center;
@@ -2552,7 +2555,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-index-bar-sidebar-item-active {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
   border-radius: 50%;
 }
@@ -2756,7 +2759,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   border-radius: 20px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-jumbo-tabs-tab-active {
@@ -2764,7 +2767,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-jumbo-tabs-tab-active .adm-jumbo-tabs-tab-description {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
 }
 
@@ -2927,7 +2930,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-notice-bar {
   --background-color: #ababab;
   --border-color: #999999;
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   --font-size: var(--adm-font-size-7);
   --icon-font-size: var(--adm-font-size-10);
   --height: 80px;
@@ -3484,7 +3487,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   box-sizing: border-box;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
 }
 
 .adm-radio .adm-radio-icon>svg {
@@ -3513,7 +3516,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-radio.adm-radio-disabled .adm-radio-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-radio .adm-radio-custom-icon {
@@ -3756,7 +3759,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-search-bar {
   --height: 64px;
   --padding-left: 16px;
-  --background: var(--adm-color-box);
+  --background: var(--adm-color-fill-content);
   --border-radius: 12px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
@@ -3822,7 +3825,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-selector {
-  --color: var(--adm-color-box);
+  --color: var(--adm-color-fill-content);
   --checked-color: #e7f1ff;
   --text-color: var(--adm-color-text);
   --checked-text-color: var(--adm-color-primary);
@@ -3905,7 +3908,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   --height: 100%;
   --width: 210px;
   --item-border-radius: 16px;
-  --background-color: var(--adm-color-box);
+  --background-color: var(--adm-color-fill-content);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
@@ -4004,7 +4007,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   position: relative;
   width: 100%;
   height: 6px;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   border-radius: 6px;
 }
 
@@ -4029,7 +4032,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   width: 14px;
   height: 14px;
   margin-left: -6px;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   border-radius: 50%;
 }
 
@@ -4044,7 +4047,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   border-radius: 50%;
   text-align: center;
   line-height: 56px;
-  background: var(--adm-color-white);
+  background: var(--adm-color-text-light-solid);
   box-shadow: 0 4px 10px rgba(0,0,0,.12);
   color: var(--fill-color);
 }
@@ -4128,14 +4131,14 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   --input-width: 88px;
   --input-font-size: var(--adm-font-size-main);
   --input-font-color: var(--adm-color-text);
-  --input-background-color: var(--adm-color-box);
+  --input-background-color: var(--adm-color-fill-content);
   --border-radius: 4px;
   --border: none;
   --border-inner: solid 4px transparent;
   --active-border: var(--border);
   --button-font-size: var(--adm-font-size-7);
   --button-text-color: var(--adm-color-primary);
-  --button-background-color: var(--adm-color-box);
+  --button-background-color: var(--adm-color-fill-content);
   --button-width: var(--height);
   display: flex;
   align-items: center;
@@ -4408,7 +4411,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-swipe-action-action-button.adm-button {
   --border-radius: 0;
   --border-width: 0;
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   padding-left: 40px;
   padding-right: 40px;
 }
@@ -4562,7 +4565,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   width: calc(var(--height) - 2 * var(--border-width));
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
-  background: var(--adm-color-white);
+  background: var(--adm-color-text-light-solid);
   position: absolute;
   z-index: 2;
   top: var(--border-width);
@@ -4598,7 +4601,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 
 .adm-switch.adm-switch-checked .adm-switch-inner {
   margin: 0 calc(var(--height) - var(--border-width) + 10px) 0 20px;
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
 }
 
 .adm-switch.adm-switch-disabled {

package/2x/cjs/components/action-sheet/action-sheet.css

@@ -62,6 +62,6 @@
 }
 
 .adm-action-sheet-cancel {
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   padding-top: 16px;
 }

package/2x/cjs/components/action-sheet/action-sheet.js

@@ -63,13 +63,17 @@ const ActionSheet = p => {
       if (props.closeOnAction) {
         (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
       }
-    }
+    },
+    role: 'option',
+    "aria-disabled": action.disabled
   }, _react.default.createElement("div", {
     className: `${classPrefix}-button-item-name`
   }, action.text), action.description && _react.default.createElement("div", {
     className: `${classPrefix}-button-item-description`
   }, action.description))))), props.cancelText && _react.default.createElement("div", {
-    className: `${classPrefix}-cancel`
+    className: `${classPrefix}-cancel`,
+    role: 'option',
+    "aria-label": props.cancelText
   }, _react.default.createElement("div", {
     className: `${classPrefix}-button-item-wrapper`
   }, _react.default.createElement("a", {

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

@@ -5,5 +5,5 @@ export declare type AvatarProps = {
     src: string;
     fallback?: ReactNode;
     fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> & NativeProps<'--size' | '--border-radius'>;
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError' | 'onLoad'> & NativeProps<'--size' | '--border-radius'>;
 export declare const Avatar: FC<AvatarProps>;

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

@@ -26,7 +26,8 @@ const Avatar = p => {
     lazy: props.lazy,
     fit: props.fit,
     onClick: props.onClick,
-    onError: props.onError
+    onError: props.onError,
+    onLoad: props.onLoad
   }));
 };
 exports.Avatar = Avatar;

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

@@ -15,7 +15,7 @@
 }
 
 .adm-badge-content {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   box-sizing: border-box;
   min-width: 16px;
   padding: 2px 8px;
@@ -41,5 +41,5 @@
 }
 
 .adm-badge-bordered {
-  border: solid 2px var(--adm-color-white);
+  border: solid 2px var(--adm-color-text-light-solid);
 }

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

@@ -1,5 +1,5 @@
 .adm-button {
-  --color: var(--adm-color-white);
+  --color: var(--adm-color-text-light-solid);
   --text-color: var(--adm-button-text-color, var(--adm-color-text));
   --background-color: var(--adm-button-background-color, var(--adm-color-background));
   --border-radius: var(--adm-button-border-radius, 8px);
@@ -59,7 +59,7 @@
 }
 
 .adm-button:not(.adm-button-default) {
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   --background-color: var(--color);
   --border-color: var(--color);
 }

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

@@ -90,7 +90,7 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
         return;
       }
     }
-    setCurrent(current[action](num, type));
+    setCurrent(nxtCurrent);
   };
   const header = _react.default.createElement("div", {
     className: `${classPrefix}-header`

package/2x/cjs/components/capsule-tabs/capsule-tabs.css

@@ -37,11 +37,11 @@
   font-size: var(--adm-font-size-7);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-capsule-tabs-tab-active {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
 }
 

package/2x/cjs/components/check-list/check-list-item.js

@@ -22,9 +22,11 @@ const CheckListItem = props => {
   }
   const active = context.value.includes(props.value);
   const readOnly = props.readOnly || context.readOnly;
+  const defaultExtra = active ? context.activeIcon : null;
+  const renderExtra = context.extra ? context.extra(active) : defaultExtra;
   const extra = _react.default.createElement("div", {
     className: `${classPrefix}-extra`
-  }, active ? context.activeIcon : null);
+  }, renderExtra);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_list.default.Item, {
     title: props.title,
     className: (0, _classnames.default)(classPrefix, readOnly && `${classPrefix}-readonly`, active && `${classPrefix}-active`),

package/2x/cjs/components/check-list/check-list.d.ts

@@ -7,6 +7,7 @@ export declare type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
     onChange?: (val: string[]) => void;
     multiple?: boolean;
     activeIcon?: ReactNode;
+    extra?: (active: boolean) => ReactNode;
     disabled?: boolean;
     readOnly?: boolean;
     children?: React.ReactNode;

package/2x/cjs/components/check-list/check-list.js

@@ -33,6 +33,7 @@ const CheckList = p => {
   }
   const {
     activeIcon,
+    extra,
     disabled,
     readOnly
   } = props;
@@ -42,6 +43,7 @@ const CheckList = p => {
       check,
       uncheck,
       activeIcon,
+      extra,
       disabled,
       readOnly
     }

package/2x/cjs/components/check-list/context.d.ts

@@ -4,6 +4,7 @@ export declare const CheckListContext: import("react").Context<{
     check: (val: string) => void;
     uncheck: (val: string) => void;
     activeIcon?: ReactNode;
+    extra?: ((active: boolean) => ReactNode) | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
 } | null>;

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

@@ -20,7 +20,7 @@
   box-sizing: border-box;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
 }
 
 .adm-checkbox .adm-checkbox-icon > svg {
@@ -49,7 +49,7 @@
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-checkbox .adm-checkbox-custom-icon {

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

@@ -129,7 +129,7 @@ const Ellipsis = p => {
       setExpanded(true);
     }
   }, props.expandText)) : null;
-  const collapseActionElement = exceeded && props.expandText ? (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
+  const collapseActionElement = exceeded && props.collapseText ? (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
     onClick: () => {
       setExpanded(false);
     }

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

@@ -14,7 +14,7 @@
 
 .adm-image-tip {
   position: relative;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   height: 100%;
   min-height: 48px;
   min-width: 48px;

package/2x/cjs/components/index-bar/index-bar.css

@@ -3,7 +3,7 @@
   overflow: hidden;
   height: 100%;
   position: relative;
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
   --sticky-offset-top: 0;
 }
 
@@ -25,7 +25,7 @@
   padding: 0 24px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-index-bar-sidebar {
@@ -48,7 +48,7 @@
   right: 120px;
   width: 94px;
   height: 94px;
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   font-size: 50px;
   line-height: 94px;
   text-align: center;
@@ -79,7 +79,7 @@
 }
 
 .adm-index-bar-sidebar-item-active {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
   border-radius: 50%;
 }

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

@@ -26,7 +26,7 @@ export declare type InputRef = {
     blur: () => void;
     nativeElement: HTMLInputElement | null;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "autoFocus" | "maxLength" | "minLength" | "step"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoFocus" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength" | "step"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/2x/cjs/components/jumbo-tabs/jumbo-tabs.css

@@ -56,7 +56,7 @@
   border-radius: 20px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-jumbo-tabs-tab-active {
@@ -64,7 +64,7 @@
 }
 
 .adm-jumbo-tabs-tab-active .adm-jumbo-tabs-tab-description {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
 }
 

package/2x/cjs/components/notice-bar/notice-bar.css

@@ -1,7 +1,7 @@
 .adm-notice-bar {
   --background-color: #ababab;
   --border-color: #999999;
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   --font-size: var(--adm-font-size-7);
   --icon-font-size: var(--adm-font-size-10);
   --height: 80px;

package/2x/cjs/components/number-keyboard/number-keyboard.js

@@ -97,16 +97,18 @@ const NumberKeyboard = p => {
       className: (0, _classnames.default)(`${classPrefix}-header`, {
         [`${classPrefix}-header-with-title`]: !!title
       })
-    }, title && _react.default.createElement("div", {
-      className: `${classPrefix}-title`
+    }, 'title' && _react.default.createElement("div", {
+      className: `${classPrefix}-title`,
+      "aria-label": title
     }, title), showCloseButton && _react.default.createElement("span", {
       className: `${classPrefix}-header-close-button`,
       onClick: () => {
         var _a;
         (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
       },
-      role: 'button',
-      title: 'CLOSE'
+      role: 'grid',
+      title: 'CLOSE',
+      tabIndex: -1
     }, _react.default.createElement(_antdMobileIcons.DownOutline, null)));
   };
   const renderKey = (key, index) => {
@@ -117,8 +119,9 @@ const NumberKeyboard = p => {
       [`${classPrefix}-key-mid`]: index === 9 && !!confirmText && keys.length < 12
     });
     const ariaProps = key ? {
-      role: 'button',
-      title: key
+      role: 'grid',
+      title: key,
+      tabIndex: -1
     } : undefined;
     return _react.default.createElement("div", Object.assign({
       key: key,
@@ -170,11 +173,14 @@ const NumberKeyboard = p => {
       onBackspacePressEnd();
     },
     title: 'BACKSPACE',
-    role: 'button'
+    role: 'grid',
+    tabIndex: -1
   }, _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null)), _react.default.createElement("div", {
     className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
     onTouchEnd: e => onKeyPress(e, 'OK'),
-    role: 'button'
+    role: 'grid',
+    tabIndex: -1,
+    "aria-label": confirmText
   }, confirmText))), props.safeArea && _react.default.createElement("div", {
     className: `${classPrefix}-footer`
   }, _react.default.createElement(_safeArea.default, {

package/2x/cjs/components/popover/index.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     content: import("react").ReactNode;
 } & {
     className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--z-index", string>>) | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--z-index" | "--arrow-size", string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & import("react").RefAttributes<import("./popover").PopoverRef>> & {
     Menu: import("react").ForwardRefExoticComponent<Omit<import("./popover").PopoverProps, "content"> & {

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

@@ -65,7 +65,7 @@
 .adm-popover-arrow-icon {
   display: block;
   height: var(--arrow-size);
-  width: 30px;
+  width: calc(var(--arrow-size) / 8 * 15);
   position: absolute;
   top: 50%;
   left: 50%;

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

@@ -15,7 +15,7 @@ export declare type PopoverProps = {
     placement?: Placement | DeprecatedPlacement;
     stopPropagation?: PropagationEvent[];
     content: React.ReactNode;
-} & NativeProps<'--z-index'>;
+} & NativeProps<'--z-index' | '--arrow-size'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
@@ -35,6 +35,6 @@ export declare const Popover: React.ForwardRefExoticComponent<{
     content: React.ReactNode;
 } & {
     className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--z-index", string>>) | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--z-index" | "--arrow-size", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & React.RefAttributes<PopoverRef>>;

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

@@ -108,7 +108,7 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
         top: arrowY != null ? `${arrowY}px` : '',
         right: '',
         bottom: '',
-        [arrowSide]: `-${(0, _convertPx.convertPx)(8)}px`
+        [arrowSide]: 'calc(var(--arrow-size) * -1)'
       });
       const arrowRotate = {
         top: '0deg',