antd-mobile 5.0.0-rc.22 → 5.0.0-rc.23

package/2x/README.md

@@ -7,6 +7,7 @@
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Average time to resolve an issue')
 [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Percentage of issues still open')
 ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/ant-design/ant-design-mobile/Check/v5)
+[![codecov](https://codecov.io/gh/ant-design/ant-design-mobile/branch/master/graph/badge.svg?token=2kJyJBg1nK)](https://codecov.io/gh/ant-design/ant-design-mobile)
 ![GitHub](https://img.shields.io/github/license/ant-design/ant-design-mobile)
 
 ```bash

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

@@ -4,24 +4,28 @@
 }
 
 .adm-badge {
-  display: inline-block;
-  color: #fff;
-  font-weight: normal;
-  text-align: center;
+  display: inline-flex;
   vertical-align: middle;
-  box-sizing: border-box;
-  min-width: 32px;
+  box-sizing: content-box;
   border-radius: 200px;
-  padding: 0 8px;
-  font-size: 18px;
-  line-height: 28px;
-  white-space: nowrap;
   background-color: var(--color);
   --right: 0;
   --top: 0;
   --color: var(--adm-badge-color, #ff411c);
 }
 
+.adm-badge-content {
+  color: #fff;
+  box-sizing: border-box;
+  min-width: 16px;
+  padding: 2px 8px;
+  font-size: 18px;
+  line-height: 24px;
+  white-space: nowrap;
+  font-weight: normal;
+  text-align: center;
+}
+
 .adm-badge-fixed {
   position: absolute;
   right: var(--right);
@@ -34,4 +38,8 @@
   width: 20px;
   height: 20px;
   border-radius: 10px;
+}
+
+.adm-badge-bordered {
+  border: solid 2px var(--adm-color-white);
 }

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

@@ -4,5 +4,6 @@ export declare const dot: unique symbol;
 export declare type BadgeProps = {
     content?: React.ReactNode | typeof dot;
     color?: string;
+    bordered?: boolean;
 } & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

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

@@ -24,16 +24,15 @@ const Badge = props => {
     children
   } = props;
   const isDot = content === dot;
-  const badgeCls = (0, _classnames.default)(classPrefix, {
-    [`${classPrefix}-fixed`]: !!children,
-    [`${classPrefix}-dot`]: isDot
-  });
+  const badgeCls = (0, _classnames.default)(classPrefix, !!children && `${classPrefix}-fixed`, isDot && `${classPrefix}-dot`, props.bordered && `${classPrefix}-bordered`);
   const element = content ? (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: badgeCls,
     style: {
       '--color': color
     }
-  }, !isDot && content)) : null;
+  }, !isDot && _react.default.createElement("div", {
+    className: `${classPrefix}-content`
+  }, content))) : null;
   return children ? _react.default.createElement("div", {
     className: `${classPrefix}-wrap`
   }, children, element) : element;

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

@@ -71,7 +71,7 @@
 .adm-button:not(.adm-button-default).adm-button-fill-none {
   --text-color: var(--color);
   --background-color: transparent;
-  --border-color: transparent;
+  --border-width: 0;
 }
 
 .adm-button-primary {

package/2x/cjs/components/checkbox/check-icon.js

@@ -15,19 +15,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const CheckIcon = (0, _react.memo)(props => {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
-    viewBox: '0 0 24 16'
-  }, _react.default.createElement("g", {
-    stroke: 'none',
-    strokeWidth: '1',
-    fill: 'none',
-    fillRule: 'evenodd'
-  }, _react.default.createElement("g", {
-    transform: 'translate(-35.000000, -40.000000)',
-    fill: 'currentColor'
-  }, _react.default.createElement("g", {
-    transform: 'translate(24.000000, 26.000000)'
+    viewBox: '0 0 40 40'
   }, _react.default.createElement("path", {
-    d: 'M18.8574375,25.9363304 L14.4138058,21.4926987 C13.8001225,20.8790154 12.8051453,20.8790154 12.1914621,21.4926987 C11.5777807,22.10638 11.5777807,23.1013541 12.1914621,23.7150354 C12.1914632,23.7150366 12.1914644,23.7150377 12.1914656,23.7150389 L17.4442507,28.9677909 C18.225314,29.7488091 19.4916285,29.7488141 20.2726979,28.9678021 L21.0808125,28.1597054 L21.0808125,28.1597054 L32.5627182,16.6759191 C33.176366,16.0621709 33.1763252,15.0671824 32.5626272,14.4534844 C31.948944,13.8398011 30.9539668,13.8398011 30.3402835,14.4534844 L18.8574375,25.9363304 L18.8574375,25.9363304 Z'
-  }))))));
+    d: 'M31.5541766,15 L28.0892433,15 L28.0892434,15 C27.971052,15 27.8576674,15.044522 27.7740471,15.1239792 L18.2724722,24.1625319 L13.2248725,19.3630279 L13.2248725,19.3630279 C13.1417074,19.2834412 13.0287551,19.2384807 12.9107898,19.2380079 L9.44474455,19.2380079 L9.44474454,19.2380079 C9.19869815,19.2384085 8.99957935,19.4284738 9,19.66253 C9,19.7747587 9.04719253,19.8823283 9.13066188,19.9616418 L17.0907466,27.5338228 C17.4170809,27.8442545 17.8447695,28 18.2713393,28 L18.2980697,28 C18.7168464,27.993643 19.133396,27.8378975 19.4530492,27.5338228 L31.8693384,15.7236361 L31.8693384,15.7236361 C32.0434167,15.5582251 32.0435739,15.2898919 31.8696892,15.1242941 C31.7860402,15.0446329 31.6725052,15 31.5541421,15 L31.5541766,15 Z',
+    fill: 'currentColor'
+  })));
 });
 exports.CheckIcon = CheckIcon;

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

@@ -18,17 +18,15 @@
   border: 2px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: #ffffff;
+  color: var(--adm-color-white);
 }
 
-.adm-checkbox .adm-checkbox-icon-checked {
-  width: 65%;
-  height: 65%;
+.adm-checkbox .adm-checkbox-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 .adm-checkbox.adm-checkbox-block {
@@ -63,13 +61,6 @@
   color: var(--adm-color-primary);
 }
 
-.adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-indeterminate-checked {
-  width: 60%;
-  height: 60%;
-  border-radius: 100%;
-  background-color: currentColor;
-}
-
 .adm-checkbox-content {
   flex: 0 1 auto;
   font-size: var(--font-size);

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

@@ -21,6 +21,8 @@ var _devLog = require("../../utils/dev-log");
 
 var _checkIcon = require("./check-icon");
 
+var _indeterminateIcon = require("./indeterminate-icon");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -85,11 +87,7 @@ const Checkbox = p => {
 
     return _react.default.createElement("div", {
       className: `${classPrefix}-icon`
-    }, props.indeterminate ? _react.default.createElement("div", {
-      className: `${classPrefix}-indeterminate-checked`
-    }) : checked && _react.default.createElement(_checkIcon.CheckIcon, {
-      className: `${classPrefix}-icon-checked`
-    }));
+    }, props.indeterminate ? _react.default.createElement(_indeterminateIcon.IndeterminateIcon, null) : checked && _react.default.createElement(_checkIcon.CheckIcon, null));
   };
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {

package/2x/cjs/components/checkbox/indeterminate-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const IndeterminateIcon: React.NamedExoticComponent<NativeProps<never>>;

package/2x/cjs/components/checkbox/indeterminate-icon.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndeterminateIcon = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+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 IndeterminateIcon = (0, _react.memo)(props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+    viewBox: '0 0 40 40'
+  }, _react.default.createElement("path", {
+    d: 'M20,9 C26.0752953,9 31,13.9247047 31,20 C31,26.0752953 26.0752953,31 20,31 C13.9247047,31 9,26.0752953 9,20 C9,13.9247047 13.9247047,9 20,9 Z',
+    fill: 'currentColor'
+  })));
+});
+exports.IndeterminateIcon = IndeterminateIcon;

package/2x/cjs/components/image-viewer/image-viewer.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { GetContainer } from '../../utils/render-to-container';
+import { SlidesRef } from './slides';
 export declare type ImageViewerProps = {
     image?: string;
     maxZoom?: number;
@@ -9,9 +10,14 @@ export declare type ImageViewerProps = {
     afterClose?: () => void;
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
+export declare type MultiImageViewerRef = SlidesRef;
 export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
 };
-export declare const MultiImageViewer: FC<MultiImageViewerProps>;
+export declare const MultiImageViewer: React.ForwardRefExoticComponent<Pick<ImageViewerProps, "visible" | "onClose" | "afterClose" | "getContainer" | "maxZoom"> & {
+    images?: string[] | undefined;
+    defaultIndex?: number | undefined;
+    onIndexChange?: ((index: number) => void) | undefined;
+} & React.RefAttributes<SlidesRef>>;

package/2x/cjs/components/image-viewer/image-viewer.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MultiImageViewer = exports.ImageViewer = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -19,6 +19,10 @@ var _slides = require("./slides");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 classPrefix = `adm-image-viewer`;
 const defaultProps = {
   maxZoom: 3,
@@ -53,8 +57,7 @@ exports.ImageViewer = ImageViewer;
 const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
-
-const MultiImageViewer = p => {
+const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
 
   const node = _react.default.createElement(_mask.default, {
@@ -65,6 +68,7 @@ const MultiImageViewer = p => {
   }, _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && _react.default.createElement(_slides.Slides, {
+    ref: ref,
     defaultIndex: props.defaultIndex,
     onIndexChange: props.onIndexChange,
     images: props.images,
@@ -77,6 +81,5 @@ const MultiImageViewer = p => {
   })));
 
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
-};
-
+});
 exports.MultiImageViewer = MultiImageViewer;

package/2x/cjs/components/image-viewer/index.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import './image-viewer.less';
 import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
-export type { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
+export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
 export type { ImageViewerHandler } from './methods';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
-    Multi: import("react").FC<import("./image-viewer").MultiImageViewerProps> & {
+    Multi: import("react").ForwardRefExoticComponent<Pick<import("./image-viewer").ImageViewerProps, "visible" | "onClose" | "afterClose" | "getContainer" | "maxZoom"> & {
+        images?: string[] | undefined;
+        defaultIndex?: number | undefined;
+        onIndexChange?: ((index: number) => void) | undefined;
+    } & import("react").RefAttributes<import("./slides").SlidesRef>> & {
         show: typeof showMultiImageViewer;
     };
     show: typeof showImageViewer;

package/2x/cjs/components/image-viewer/slides.d.ts

@@ -1,8 +1,12 @@
-import { FC } from 'react';
-export declare const Slides: FC<{
+import React from 'react';
+export declare type SlidesType = {
     images: string[];
     onTap: () => void;
     maxZoom: number;
     defaultIndex: number;
     onIndexChange?: (index: number) => void;
-}>;
+};
+export declare type SlidesRef = {
+    swipeTo: (index: number, immediate: boolean) => void;
+};
+export declare const Slides: React.ForwardRefExoticComponent<SlidesType & React.RefAttributes<SlidesRef>>;

package/2x/cjs/components/image-viewer/slides.js

@@ -22,8 +22,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 classPrefix = `adm-image-viewer`;
-
-const Slides = props => {
+const Slides = (0, _react.forwardRef)((props, ref) => {
   const slideWidth = window.innerWidth + (0, _convertPx.convertPx)(16);
   const [{
     x
@@ -35,10 +34,23 @@ const Slides = props => {
     }
   }));
   const count = props.images.length;
-  const dragLockRef = (0, _react.useRef)(false);
-  const bind = (0, _react2.useDrag)(state => {
+
+  function swipeTo(index, immediate = false) {
     var _a;
 
+    const i = (0, _bound.bound)(index, 0, count - 1);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
+    api.start({
+      x: i * slideWidth,
+      immediate
+    });
+  }
+
+  (0, _react.useImperativeHandle)(ref, () => ({
+    swipeTo
+  }));
+  const dragLockRef = (0, _react.useRef)(false);
+  const bind = (0, _react2.useDrag)(state => {
     if (dragLockRef.current) return;
     const [offsetX] = state.offset;
 
@@ -46,11 +58,7 @@ const Slides = props => {
       const minIndex = Math.floor(offsetX / slideWidth);
       const maxIndex = minIndex + 1;
       const velocityOffset = Math.min(state.velocity[0] * 2000, slideWidth) * state.direction[0];
-      const index = (0, _bound.bound)((0, _bound.bound)(Math.round((offsetX + velocityOffset) / slideWidth), minIndex, maxIndex), 0, count - 1);
-      (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
-      api.start({
-        x: index * slideWidth
-      });
+      swipeTo((0, _bound.bound)(Math.round((offsetX + velocityOffset) / slideWidth), minIndex, maxIndex));
     } else {
       api.start({
         x: offsetX,
@@ -99,6 +107,5 @@ const Slides = props => {
     },
     dragLockRef: dragLockRef
   }))));
-};
-
+});
 exports.Slides = Slides;

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

@@ -22,10 +22,12 @@
 .adm-modal-main {
   width: 100%;
   max-height: 70vh;
+  box-sizing: border-box;
   font-size: 28px;
   background-color: white;
   border-radius: 16px;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
@@ -40,14 +42,12 @@
 
 .adm-modal-main .adm-modal-body {
   padding: 40px 24px 24px;
+  display: flex;
+  flex-direction: column;
 }
 
-.adm-modal-main .adm-modal-body .adm-modal-close {
-  position: absolute;
-  right: 24px;
-  top: 24px;
-  color: var(--adm-color-weak);
-  padding: 4px;
+.adm-modal-main .adm-modal-body > * + * {
+  margin-top: 16px;
 }
 
 .adm-modal-main .adm-modal-body-header-wrapper {
@@ -63,39 +63,44 @@
 }
 
 .adm-modal-main .adm-modal-body-content {
-  max-height: 70vh;
-  overflow-x: hidden;
-  overflow-y: auto;
   font-size: 30px;
   line-height: 1.4;
   color: #333;
 }
 
-.adm-modal-main .adm-modal-footer {
+.adm-modal-main .adm-modal-close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  color: var(--adm-color-weak);
+  padding: 8px;
+  font-size: 36px;
+}
+
+.adm-modal-footer {
   user-select: none;
   padding: 16px 24px 24px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button {
-  font-size: 36px;
-  line-height: 50px;
-  border-right: solid 1px var(--adm-border-color);
+.adm-modal-footer.adm-space {
+  --gap-vertical: 40px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:last-child {
-  border-right: none;
+.adm-modal-footer .adm-modal-button {
+  font-size: 36px;
+  line-height: 50px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
   display: none;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
   opacity: 0.7;
 }
 

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

@@ -100,7 +100,10 @@ const Modal = p => {
     style: Object.assign({}, style),
     onClick: e => e.stopPropagation(),
     className: `${classPrefix}-main`
-  }, !!props.image && _react.default.createElement("div", {
+  }, props.showCloseButton && _react.default.createElement("a", {
+    className: (0, _classnames.default)(`${classPrefix}-close`, 'adm-plain-anchor'),
+    onClick: props.onClose
+  }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), !!props.image && _react.default.createElement("div", {
     className: `${classPrefix}-image-container`
   }, _react.default.createElement(_image.default, {
     src: props.image,
@@ -109,12 +112,6 @@ const Modal = p => {
   })), _react.default.createElement("div", {
     style: props.bodyStyle,
     className: (0, _classnames.default)(`${classPrefix}-body`, props.bodyClassName)
-  }, props.showCloseButton && _react.default.createElement("a", {
-    className: (0, _classnames.default)(`${classPrefix}-close`, 'adm-plain-anchor'),
-    onClick: props.onClose
-  }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), _react.default.createElement(_space.default, {
-    direction: 'vertical',
-    block: true
   }, !!props.header && _react.default.createElement("div", {
     className: `${classPrefix}-body-header-wrapper`
   }, _react.default.createElement("div", {
@@ -123,11 +120,10 @@ const Modal = p => {
     className: `${classPrefix}-body-title`
   }, props.title), !!props.content && _react.default.createElement("div", {
     className: `${classPrefix}-body-content`
-  }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content))), _react.default.createElement("div", {
-    className: `${classPrefix}-footer`
-  }, _react.default.createElement(_space.default, {
+  }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content)), _react.default.createElement(_space.default, {
     direction: 'vertical',
-    block: true
+    block: true,
+    className: `${classPrefix}-footer`
   }, props.actions.map((action, index) => {
     return _react.default.createElement(_modalActionButton.ModalActionButton, {
       key: action.key,
@@ -142,7 +138,7 @@ const Modal = p => {
         }
       })
     });
-  }))))))));
+  })))))));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
 };
 

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

@@ -14,7 +14,7 @@ export declare type PasscodeInputProps = {
     onFocus?: () => void;
     keyboard?: ReactElement<NumberKeyboardProps>;
     onFill?: (val: string) => void;
-} & NativeProps<'--cell-gap' | '--cell-size'>;
+} & NativeProps<'--cell-gap' | '--cell-size' | '--dot-size' | '--border-color' | '--border-radius'>;
 export declare type PasscodeInputRef = {
     focus: () => void;
     blur: () => void;
@@ -32,4 +32,4 @@ export declare const PasscodeInput: React.ForwardRefExoticComponent<{
     onFocus?: (() => void) | undefined;
     keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
     onFill?: ((val: string) => void) | undefined;
-} & NativeProps<"--cell-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;
+} & NativeProps<"--border-radius" | "--border-color" | "--cell-size" | "--dot-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;

package/2x/cjs/components/picker-view/picker-view.css

@@ -66,6 +66,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  z-index: 0;
 }
 
 .adm-picker-view-column-accessible > * {
@@ -86,7 +87,7 @@
 
 .adm-picker-view-mask {
   position: absolute;
-  z-index: 100;
+  z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;

package/2x/cjs/components/picker-view/wheel.js

@@ -146,7 +146,7 @@ const Wheel = (0, _react.memo)(props => {
     className: `${classPrefix}-column`
   }, bind()), _react.default.createElement(_web.animated.div, {
     style: {
-      y
+      translateY: y
     },
     className: `${classPrefix}-column-wheel`,
     "aria-hidden": true

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

@@ -18,18 +18,15 @@
   border: 2px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: #ffffff;
+  color: var(--adm-color-white);
 }
 
-.adm-radio .adm-radio-icon-checked {
+.adm-radio .adm-radio-icon > svg {
   display: block;
-  width: 65%;
-  height: 65%;
+  width: 100%;
+  height: 100%;
 }
 
 .adm-radio.adm-radio-block {

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

@@ -70,9 +70,7 @@ const Radio = p => {
 
     return _react.default.createElement("div", {
       className: `${classPrefix}-icon`
-    }, checked && _react.default.createElement(_checkIcon.CheckIcon, {
-      className: `${classPrefix}-icon-checked`
-    }));
+    }, checked && _react.default.createElement(_checkIcon.CheckIcon, null));
   };
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {

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

@@ -57,7 +57,7 @@
   padding: 6px 24px;
 }
 
-.adm-search-bar-active .adm-input.adm-input {
+.adm-search-bar-active .adm-input.adm-input.adm-input {
   --placeholder-color: var(--adm-color-light);
 }
 

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

@@ -6,8 +6,8 @@
 
 .adm-switch {
   --checked-color: var(--adm-color-primary);
-  --height: 60px;
-  --width: 100px;
+  --height: 62px;
+  --width: 102px;
   --border-width: 4px;
   display: inline-block;
   vertical-align: middle;
@@ -69,9 +69,14 @@
 .adm-switch-inner {
   position: relative;
   z-index: 1;
-  margin: 0 20px 0 calc(var(--height) - var(--border-width) + 10px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 16px 0 calc(var(--height) - var(--border-width) + 8px);
+  height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
+  font-size: 30px;
 }
 
 .adm-switch.adm-switch-checked .adm-switch-checkbox {