antd-mobile 5.14.1 → 5.15.0

package/2x/bundle/css-vars-patch.css

@@ -2,17 +2,17 @@
   .adm-button {
     color: #333333;
     background-color: #ffffff;
-    font-size: 17px;
-    border-width: 1px;
+    font-size: 34px;
+    border-width: 2px;
     border-style: solid;
     border-color: #eeeeee;
-    border-radius: 4px;
+    border-radius: 8px;
   }
 
   .adm-button::before {
-    transform: translate(-1px, -1px);
-    border: 1px solid #000;
-    border-radius: 4px;
+    transform: translate(-2px, -2px);
+    border: 2px solid #000;
+    border-radius: 8px;
   }
 
   .adm-button-default.adm-button-fill-outline {
@@ -79,27 +79,27 @@
   }
 
   .adm-button.adm-button-mini {
-    font-size: 13px;
+    font-size: 26px;
   }
 
   .adm-button.adm-button-small {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    font-size: 15px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    font-size: 30px;
   }
 
   .adm-button.adm-button-large {
-    padding-top: 11px;
-    padding-bottom: 11px;
-    font-size: 18px;
+    padding-top: 22px;
+    padding-bottom: 22px;
+    font-size: 36px;
   }
 
   .adm-button.adm-button-shape-rounded {
-    border-radius: 1000px;
+    border-radius: 2000px;
   }
 
   .adm-button.adm-button-shape-rounded::before {
-    border-radius: 1000px;
+    border-radius: 2000px;
   }
 
   .adm-button.adm-button-shape-rectangular {
@@ -111,17 +111,17 @@
   }
 
   .adm-center-popup-wrap {
-    min-width: 280px;
+    min-width: 560px;
     max-width: 75vw;
   }
 
   .adm-center-popup-body {
     background-color: #ffffff;
-    border-radius: 8px;
+    border-radius: 16px;
   }
 
   .adm-error-block-image {
-    height: 100px;
+    height: 200px;
     width: auto;
   }
 
@@ -134,11 +134,11 @@
   }
 
   .adm-error-block-full-page {
-    padding-top: calc(50vh - 200px);
+    padding-top: calc(50vh - 400px);
   }
 
   .adm-error-block-full-page .adm-error-block-image {
-    height: 200px;
+    height: 400px;
     width: auto;
   }
 
@@ -168,25 +168,25 @@
   }
 
   .adm-modal-body {
-    font-size: 14px;
+    font-size: 28px;
   }
 
   .adm-modal-title {
-    font-size: 18px;
+    font-size: 36px;
   }
 
   .adm-modal-content {
-    font-size: 15px;
+    font-size: 30px;
     color: #333333;
   }
 
   .adm-modal-close {
     color: #999999;
-    font-size: 18px;
+    font-size: 36px;
   }
 
   .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item {
-    margin-bottom: 20px;
+    margin-bottom: 40px;
   }
 
   .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item:last-child {
@@ -194,18 +194,18 @@
   }
 
   .adm-modal-footer .adm-modal-button {
-    font-size: 18px;
+    font-size: 36px;
   }
 
   .adm-page-indicator-dot {
-    width: 3px;
-    height: 3px;
-    border-radius: 1px;
+    width: 6px;
+    height: 6px;
+    border-radius: 2px;
     background: rgba(0, 0, 0, 0.2);
   }
 
   .adm-page-indicator-dot-active {
-    border-radius: 1px;
+    border-radius: 2px;
     background: #1677ff;
   }
 
@@ -214,19 +214,19 @@
   }
 
   .adm-page-indicator-horizontal .adm-page-indicator-dot {
-    margin-right: 3px;
+    margin-right: 6px;
   }
 
   .adm-page-indicator-horizontal .adm-page-indicator-dot-active {
-    width: 13px;
+    width: 26px;
   }
 
   .adm-page-indicator-vertical .adm-page-indicator-dot {
-    margin-bottom: 3px;
+    margin-bottom: 6px;
   }
 
   .adm-page-indicator-vertical .adm-page-indicator-dot-active {
-    height: 13px;
+    height: 26px;
   }
 
   .adm-popover-menu.adm-popover .adm-popover-inner-content {
@@ -234,7 +234,7 @@
   }
 
   .adm-popover-menu-item-text {
-    border-top: solid 1px #eeeeee;
+    border-top: solid 2px #eeeeee;
   }
 
   .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
@@ -242,7 +242,7 @@
   }
 
   .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
-    border-bottom: solid 1px #eeeeee;
+    border-bottom: solid 2px #eeeeee;
   }
 
   .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item-text {
@@ -275,11 +275,11 @@
 
   .adm-popover-inner {
     background-color: #ffffff;
-    font-size: 15px;
+    font-size: 30px;
   }
 
   .adm-popover-inner-content {
-    padding: 8px 12px;
+    padding: 16px 24px;
   }
 
   .adm-popover-arrow {
@@ -295,25 +295,25 @@
   }
 
   .adm-space-vertical > .adm-space-item {
-    margin-bottom: 8px;
+    margin-bottom: 16px;
   }
 
   .adm-space-horizontal > .adm-space-item {
-    margin-right: 8px;
+    margin-right: 16px;
   }
 
   .adm-space-horizontal.adm-space-wrap {
     flex-wrap: wrap;
-    margin-bottom: -8px;
+    margin-bottom: -16px;
   }
 
   .adm-space-horizontal.adm-space-wrap > .adm-space-item {
-    padding-bottom: 8px;
+    padding-bottom: 16px;
   }
 
   .adm-spin-loading {
-    width: 32px;
-    height: 32px;
+    width: 64px;
+    height: 64px;
   }
 
   .adm-spin-loading-svg {
@@ -354,11 +354,11 @@
   }
 
   .adm-tabs-header {
-    border-bottom: solid 1px #eeeeee;
+    border-bottom: solid 2px #eeeeee;
   }
 
   .adm-tabs-tab {
-    font-size: 17px;
+    font-size: 34px;
   }
 
   .adm-tabs-tab-active {
@@ -366,13 +366,13 @@
   }
 
   .adm-tabs-tab-line {
-    height: 2px;
+    height: 4px;
     background: #1677ff;
-    border-radius: 2px;
+    border-radius: 4px;
   }
 
   .adm-tabs-content {
-    padding: 12px;
+    padding: 24px;
   }
 
   .adm-tabs-header-mask-left {
@@ -384,13 +384,13 @@
   }
 
   .adm-toast-mask .adm-toast-main {
-    font-size: 15px;
+    font-size: 30px;
   }
 
   .adm-toast-loading.adm-toast-loading {
-    width: 48px;
-    height: 48px;
-    margin: 0 auto 8px;
+    width: 96px;
+    height: 96px;
+    margin: 0 auto 16px;
   }
 
   .adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {

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;
 };
 

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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CheckboxValue = string | number;
 export declare type CheckboxProps = {
@@ -13,4 +13,20 @@ export declare type CheckboxProps = {
     icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode;
     children?: React.ReactNode;
 } & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
-export declare const Checkbox: FC<CheckboxProps>;
+export declare type CheckboxRef = {
+    check: () => void;
+    uncheck: () => void;
+    toggle: () => void;
+};
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => React.ReactNode) | undefined;
+    children?: React.ReactNode;
+} & NativeProps<"--font-size" | "--icon-size" | "--gap"> & React.RefAttributes<CheckboxRef>>;

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

@@ -38,8 +38,7 @@ const defaultProps = {
   defaultChecked: false,
   indeterminate: false
 };
-
-const Checkbox = p => {
+const Checkbox = (0, _react.forwardRef)((p, ref) => {
   const groupContext = (0, _react.useContext)(_groupContext.CheckboxGroupContext);
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   let [checked, setChecked] = (0, _usePropsValue.usePropsValue)({
@@ -80,6 +79,18 @@ const Checkbox = p => {
     disabled = disabled || groupContext.disabled;
   }
 
+  (0, _react.useImperativeHandle)(ref, () => ({
+    check: () => {
+      setChecked(true);
+    },
+    uncheck: () => {
+      setChecked(false);
+    },
+    toggle: () => {
+      setChecked(!checked);
+    }
+  }));
+
   const renderIcon = () => {
     if (props.icon) {
       return _react.default.createElement("div", {
@@ -108,6 +119,5 @@ const Checkbox = p => {
   }), renderIcon(), props.children && _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.children)));
-};
-
+});
 exports.Checkbox = Checkbox;

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

@@ -1,8 +1,19 @@
 /// <reference types="react" />
 import './checkbox.less';
-export type { CheckboxValue, CheckboxProps } from './checkbox';
+export type { CheckboxValue, CheckboxProps, CheckboxRef } from './checkbox';
 export type { CheckboxGroupProps } from './group';
-declare const _default: import("react").FC<import("./checkbox").CheckboxProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: import("./checkbox").CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => import("react").ReactNode) | undefined;
+    children?: import("react").ReactNode;
+} & import("../../utils/native-props").NativeProps<"--font-size" | "--icon-size" | "--gap"> & import("react").RefAttributes<import("./checkbox").CheckboxRef>> & {
     Group: import("react").FC<import("./group").CheckboxGroupProps>;
 };
 export default _default;

package/2x/cjs/components/form/form-item.js

@@ -107,15 +107,13 @@ const FormItemLayout = props => {
       e.preventDefault();
     }
   }, _react.default.createElement(_antdMobileIcons.QuestionCircleOutline, null)))) : null;
-
-  const description = _react.default.createElement(_react.default.Fragment, null, props.description, hasFeedback && _react.default.createElement(_react.default.Fragment, null, props.errors.map((error, index) => _react.default.createElement("div", {
+  const description = props.description || hasFeedback ? _react.default.createElement(_react.default.Fragment, null, props.description, hasFeedback && _react.default.createElement(_react.default.Fragment, null, props.errors.map((error, index) => _react.default.createElement("div", {
     key: `error-${index}`,
     className: `${classPrefix}-feedback-error`
   }, error)), props.warnings.map((warning, index) => _react.default.createElement("div", {
     key: `warning-${index}`,
     className: `${classPrefix}-feedback-warning`
-  }, warning))));
-
+  }, warning)))) : null;
   return _react.default.createElement(_list.default.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,

package/2x/cjs/components/form/form-subscribe.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import type { FormInstance } from 'rc-field-form';
 import type { NamePath } from 'rc-field-form/es/interface';
 declare type RenderChildren<Values = any> = (changedValues: Record<string, any>, form: FormInstance<Values>) => React.ReactNode;
@@ -7,5 +7,10 @@ export interface FormSubscribeProps {
     to: NamePath[];
     children: ChildrenType;
 }
-export declare const FormSubscribe: React.VFC<FormSubscribeProps>;
+export declare const FormSubscribe: FC<FormSubscribeProps>;
+export declare const Watcher: React.NamedExoticComponent<{
+    form: FormInstance;
+    namePath: NamePath;
+    onChange: () => void;
+}>;
 export {};

package/2x/cjs/components/form/form-subscribe.js

@@ -3,25 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FormSubscribe = void 0;
+exports.Watcher = exports.FormSubscribe = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _ = _interopRequireDefault(require("."));
+var _rcFieldForm = require("rc-field-form");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ahooks = require("ahooks");
 
-const FormSubscribe = ({
-  children,
-  to
-}) => {
-  return _react.default.createElement(_.default.Item, {
-    noStyle: true,
-    dependencies: to
-  }, form => {
-    const changedValues = form.getFieldsValue(to);
-    return children(changedValues, form);
-  });
+var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const FormSubscribe = props => {
+  const update = (0, _ahooks.useUpdate)();
+  const form = (0, _react.useContext)(_rcFieldForm.FieldContext);
+  return _react.default.createElement(_react.default.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => _react.default.createElement(Watcher, {
+    key: namePath.toString(),
+    form: form,
+    namePath: namePath,
+    onChange: update
+  })));
 };
 
-exports.FormSubscribe = FormSubscribe;
+exports.FormSubscribe = FormSubscribe;
+const Watcher = (0, _react.memo)(props => {
+  const value = (0, _rcFieldForm.useWatch)(props.namePath, props.form);
+  (0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
+    props.onChange();
+  }, [value]);
+  return null;
+});
+exports.Watcher = Watcher;

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

@@ -8,7 +8,7 @@ export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'na
     footer?: ReactNode;
     mode?: ListProps['mode'];
 };
-export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<FormContextType> & {
+export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-bottom" | "--border-inner" | "--border-top"> & Partial<FormContextType> & {
     footer?: ReactNode;
     mode?: ListProps['mode'];
 } & React.RefAttributes<FormInstance>>;

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

@@ -7,12 +7,12 @@ export type { FormItemProps } from './form-item';
 export type { FormSubscribeProps } from './form-subscribe';
 export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
-declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<import("./context").FormContextType> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-bottom" | "--border-inner" | "--border-top"> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("./form").FormInstance>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
-    Subscribe: import("react").VFC<import("./form-subscribe").FormSubscribeProps>;
+    Subscribe: import("react").FC<import("./form-subscribe").FormSubscribeProps>;
     Header: import("react").FC<{
         children?: import("react").ReactNode;
     }>;

package/2x/cjs/components/infinite-scroll/infinite-scroll.js

@@ -57,7 +57,9 @@ const InfiniteScroll = p => {
   const [flag, setFlag] = (0, _react.useState)({});
   const nextFlagRef = (0, _react.useRef)(flag);
   const [scrollParent, setScrollParent] = (0, _react.useState)();
-  const check = (0, _ahooks.useMemoizedFn)(() => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
+  const {
+    run: check
+  } = (0, _ahooks.useThrottleFn)(() => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
     if (nextFlagRef.current !== flag) return;
     if (!props.hasMore) return;
     const element = elementRef.current;
@@ -76,7 +78,11 @@ const InfiniteScroll = p => {
       yield doLoadMore(false);
       setFlag(nextFlag);
     }
-  })); // 确保在内容不足时会自动触发加载事件
+  }), {
+    wait: 100,
+    leading: true,
+    trailing: true
+  }); // Make sure to trigger `loadMore` when content changes
 
   (0, _react.useEffect)(() => {
     check();
@@ -97,8 +103,11 @@ const InfiniteScroll = p => {
   }, [scrollParent]);
 
   function retry() {
-    setFailed(false);
-    doLoadMore(true);
+    return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
+      setFailed(false);
+      yield doLoadMore(true);
+      setFlag(nextFlagRef.current);
+    });
   }
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {

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

@@ -10,6 +10,7 @@
   --padding-left: 24px;
   --padding-right: 24px;
   --font-size: var(--adm-font-size-9);
+  --extra-max-width: 70%;
 }
 
 .adm-list-header {
@@ -79,9 +80,11 @@
 }
 
 .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 {

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

@@ -4,5 +4,5 @@ export declare type ListProps = {
     header?: ReactNode;
     mode?: 'default' | 'card';
     children?: ReactNode;
-} & NativeProps<'--header-font-size' | '--prefix-width' | '--prefix-padding-right' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--padding-right' | '--font-size'>;
+} & NativeProps<'--active-background-color' | '--align-items' | '--border-bottom' | '--border-inner' | '--border-top' | '--extra-max-width' | '--font-size' | '--header-font-size' | '--padding-left' | '--padding-right' | '--prefix-padding-right' | '--prefix-width'>;
 export declare const List: FC<ListProps>;