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

package/2x/README.md

@@ -30,7 +30,7 @@ If you have some question about how to use ant-mobile, you can start a [discussi
 
 Feel free to join our DingDing group:
 
-<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*wy8nQLwxbKYAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="360" /><img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*fo-tQ5wRk5QAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="360" />
+<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="250" />
 
 ---
 

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'>;
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> & NativeProps<'--size' | '--border-radius'>;
 export declare const Avatar: FC<AvatarProps>;

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

@@ -14,7 +14,7 @@
   border-radius: 200px;
   padding: 0 8px;
   font-size: 18px;
-  line-height: 1.2;
+  line-height: 28px;
   white-space: nowrap;
   background-color: var(--color);
   --right: 0;

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

@@ -21,12 +21,16 @@ var _arrowLeftDouble = require("./arrow-left-double");
 
 var _configProvider = require("../config-provider");
 
+var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
+
 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; }
 
+_dayjs.default.extend(_isoWeek.default);
+
 const classPrefix = 'adm-calendar';
 const defaultProps = {
   weekStartsOn: 'Sunday'

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

@@ -33,7 +33,7 @@
   margin: 0 auto;
   border-radius: 40px;
   cursor: pointer;
-  font-size: var(--adm-font-size-main);
+  font-size: 30px;
   text-align: center;
   white-space: nowrap;
   background-color: #f5f5f5;

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

@@ -15,7 +15,7 @@
 
 .adm-checkbox .adm-checkbox-icon {
   flex: none;
-  border: 2px solid #ccc;
+  border: 2px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
   display: flex;
@@ -45,22 +45,13 @@
 }
 
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-content {
-  color: var(--adm-color-weak);
+  opacity: 0.4;
 }
 
-.adm-checkbox.adm-checkbox-disabled.adm-checkbox-indeterminate .adm-checkbox-icon {
-  color: #ccc;
-  border-color: #ccc;
-  background-color: #ebedf0;
-}
-
-.adm-checkbox.adm-checkbox-disabled.adm-checkbox-checked .adm-checkbox-icon {
-  color: #ccc;
-}
-
-.adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon {
-  border-color: #ccc;
-  background-color: #ebedf0;
+.adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
 }
 
 .adm-checkbox .adm-checkbox-custom-icon {
@@ -68,7 +59,6 @@
 }
 
 .adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {
-  border-color: var(--adm-color-primary);
   background-color: #ffffff;
   color: var(--adm-color-primary);
 }

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

@@ -94,7 +94,7 @@ const Checkbox = p => {
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {
     className: (0, _classnames.default)(classPrefix, {
-      [`${classPrefix}-checked`]: checked,
+      [`${classPrefix}-checked`]: checked && !props.indeterminate,
       [`${classPrefix}-indeterminate`]: props.indeterminate,
       [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-block`]: props.block

package/2x/cjs/components/error-block/error-block.d.ts

@@ -6,5 +6,5 @@ export declare type ErrorBlockProps = {
     image?: string | ReactElement;
     description?: ReactNode;
     fullPage?: boolean;
-} & NativeProps<'--image-height' | '--image-height-full-page'>;
+} & NativeProps<'--image-height' | '--image-height-full-page' | '--image-width' | '--image-width-full-page'>;
 export declare const ErrorBlock: FC<ErrorBlockProps>;

package/2x/cjs/components/floating-panel/floating-panel.d.ts

@@ -3,6 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 export declare type FloatingPanelProps = {
     anchors: number[];
     children: ReactNode;
+    onHeightChange?: (height: number, animating: boolean) => void;
 } & NativeProps<'--border-radius' | '--z-index'>;
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {
@@ -12,4 +13,5 @@ export declare type FloatingPanelRef = {
 export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     anchors: number[];
     children: ReactNode;
+    onHeightChange?: ((height: number, animating: boolean) => void) | undefined;
 } & NativeProps<"--z-index" | "--border-radius"> & React.RefAttributes<FloatingPanelRef>>;

package/2x/cjs/components/floating-panel/floating-panel.js

@@ -44,6 +44,11 @@ const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
     y: bounds.bottom,
     config: {
       tension: 300
+    },
+    onChange: result => {
+      var _a;
+
+      (_a = props.onHeightChange) === null || _a === void 0 ? void 0 : _a.call(props, result.value.y, y.isAnimating);
     }
   }));
   (0, _react2.useDrag)(state => {

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

@@ -8,6 +8,10 @@
   --align-items: stretch;
 }
 
+.adm-form-horizontal .adm-list.adm-list .adm-list-item-content-extra {
+  align-self: center;
+}
+
 .adm-form .adm-form-footer {
   padding: 24px;
 }

package/2x/cjs/components/form/index.css

@@ -8,6 +8,10 @@
   --align-items: stretch;
 }
 
+.adm-form-horizontal .adm-list.adm-list .adm-list-item-content-extra {
+  align-self: center;
+}
+
 .adm-form .adm-form-footer {
   padding: 24px;
 }

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

@@ -1,18 +1,24 @@
-.adm-input-wrapper {
+.adm-input {
   --font-size: 34px;
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
-  --disabled-color: var(--adm-color-weak);
   --text-align: left;
+  --background-color: transparent;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
+  background-color: var(--background-color);
 }
 
-.adm-input {
+.adm-input-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.adm-input-element {
   flex: auto;
   display: inline-block;
   box-sizing: border-box;
@@ -32,65 +38,62 @@
   text-align: var(--text-align);
 }
 
-.adm-input::placeholder {
+.adm-input-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
 
-.adm-input:-webkit-autofill {
+.adm-input-element:-webkit-autofill {
   background-color: transparent;
 }
 
-.adm-input:disabled {
-  color: var(--disabled-color);
-  cursor: not-allowed;
-  opacity: 1;
-  -webkit-text-fill-color: var(--disabled-color);
-}
-
-.adm-input:read-only {
+.adm-input-element:read-only {
   cursor: default;
 }
 
-.adm-input:invalid {
+.adm-input-element:invalid {
   box-shadow: none;
 }
 
-.adm-input::-ms-clear {
+.adm-input-element::-ms-clear {
   display: none;
 }
 
-.adm-input::-webkit-search-cancel-button {
+.adm-input-element::-webkit-search-cancel-button {
   display: none;
 }
 
-.adm-input::-webkit-search-decoration {
+.adm-input-element::-webkit-search-decoration {
   display: none;
 }
 
-.adm-input[type='date'],
-.adm-input[type='time'],
-.adm-input[type='datetime-local'] {
+.adm-input-element[type='date'],
+.adm-input-element[type='time'],
+.adm-input-element[type='datetime-local'] {
   min-height: 1.5em;
 }
 
-.adm-input[type='search'] {
+.adm-input-element[type='search'] {
   -webkit-appearance: none;
 }
 
-.adm-input[readonly] {
+.adm-input-element[readonly] {
   pointer-events: none;
 }
 
 .adm-input-clear {
   flex: none;
   margin-left: 16px;
-  color: var(--placeholder-color);
-  padding: 6px;
+  color: var(--adm-color-light);
+  padding: 8px;
   cursor: pointer;
 }
 
+.adm-input-clear:active {
+  color: var(--adm-color-weak);
+}
+
 .adm-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 28px;
+  font-size: 30px;
 }

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

@@ -13,7 +13,7 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     id?: string;
     onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
-} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align'>;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'>;
 export declare type InputRef = {
     clear: () => void;
     focus: () => void;
@@ -31,5 +31,5 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedH
     id?: string | undefined;
     onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
     enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "previous" | "send" | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--disabled-color" | "--text-align"> & React.RefAttributes<InputRef>>;
+} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align"> & React.RefAttributes<InputRef>>;
 export {};

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

@@ -15,6 +15,10 @@ var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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; }
@@ -66,10 +70,10 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     };
   }, [props.enterKeyHint]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: `${classPrefix}-wrapper`
+    className: (0, _classnames.default)(`${classPrefix}`, props.disabled && `${classPrefix}-disabled`)
   }, _react.default.createElement("input", {
     ref: nativeInputRef,
-    className: classPrefix,
+    className: `${classPrefix}-element`,
     value: value,
     onChange: e => {
       setValue(e.target.value);
@@ -102,7 +106,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
     onKeyUp: props.onKeyUp
-  }), props.clearable && !!value && hasFocus && _react.default.createElement("div", {
+  }), props.clearable && !!value && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

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

@@ -1,4 +1,5 @@
 .adm-jumbo-tabs {
+  --gap: 16px;
   position: relative;
 }
 
@@ -14,6 +15,7 @@
   align-items: center;
   position: relative;
   overflow-x: scroll;
+  padding: 0 var(--gap);
   scrollbar-width: none;
 }
 
@@ -23,7 +25,7 @@
 
 .adm-jumbo-tabs-tab-wrapper {
   flex: auto;
-  padding: 0 24px;
+  padding: 0 calc(var(--gap) / 2);
   text-align: center;
 }
 
@@ -42,6 +44,7 @@
 
 .adm-jumbo-tabs-tab-title {
   line-height: 48px;
+  padding: 0 8px;
 }
 
 .adm-jumbo-tabs-tab-description {

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

@@ -3,5 +3,5 @@ import { NativeProps } from '../../utils/native-props';
 export declare type ListProps = {
     header?: ReactNode;
     mode?: 'default' | 'card';
-} & NativeProps<'--header-font-size' | '--prefix-width' | '--prefix-padding-right' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--font-size'>;
+} & 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'>;
 export declare const List: FC<ListProps>;

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

@@ -24,14 +24,14 @@
 .adm-nav-bar-back {
   display: flex;
   align-items: center;
-  margin-right: 24px;
+  margin-right: 32px;
   padding: 12px 0;
   cursor: pointer;
 }
 
 .adm-nav-bar-back-arrow {
-  font-size: 36px;
-  margin-right: 12px;
+  font-size: 48px;
+  margin-right: 8px;
 }
 
 .adm-nav-bar-left {

package/2x/cjs/components/notice-bar/notice-bar.d.ts

@@ -17,5 +17,5 @@ export declare type NoticeBarProps = {
     extra?: React.ReactNode;
     /** 左侧广播图标 */
     icon?: React.ReactNode;
-} & NativeProps<'--background-color' | '--border-color' | '--text-color'>;
+} & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
 export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;

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

@@ -15,7 +15,7 @@
 
 .adm-radio .adm-radio-icon {
   flex: none;
-  border: 2px solid #ccc;
+  border: 2px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
   display: flex;
@@ -46,13 +46,13 @@
 }
 
 .adm-radio.adm-radio-disabled .adm-radio-content {
-  color: var(--adm-color-weak);
+  opacity: 0.4;
 }
 
 .adm-radio.adm-radio-disabled .adm-radio-icon {
-  color: #ccc;
-  border-color: #ccc;
-  background-color: #ebedf0;
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
 }
 
 .adm-radio .adm-radio-custom-icon {

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

@@ -1,9 +1,6 @@
 .adm-result {
-  --bg-color: var(--adm-color-white);
-  --color: var(--adm-color-text);
-  --adm-color-weak: var(--adm-color-weak);
   padding: 64px 24px;
-  background-color: var(--bg-color);
+  background-color: var(--adm-color-white);
 }
 
 .adm-result-icon {
@@ -19,7 +16,7 @@
 }
 
 .adm-result-title {
-  color: var(--color);
+  color: var(--adm-color-text);
   font-size: 36px;
   line-height: 1.4;
   text-align: center;

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

@@ -1,13 +1,14 @@
 .adm-search-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  --height: 56px;
+  --height: 64px;
   --padding-left: 16px;
   --background: #f5f5f5;
   --border-radius: 12px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--height);
 }
 
 .adm-search-bar .adm-search-bar-input-box {
@@ -23,23 +24,23 @@
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
-  color: var(---placeholder-color);
+  color: var(--adm-color-light);
   font-size: 32px;
 }
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
   padding: 8px 16px 8px 8px;
-  height: var(--height);
+  height: calc(var(--height) - 4px);
   box-sizing: border-box;
 }
 
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
+  --font-size: 30px;
 }
 
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input {
-  font-size: 26px;
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 38px;
 }
 
@@ -56,6 +57,10 @@
   padding: 6px 24px;
 }
 
+.adm-search-bar-active .adm-input.adm-input {
+  --placeholder-color: var(--adm-color-light);
+}
+
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
   background: var(--adm-color-white);

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

@@ -6,6 +6,10 @@
   line-height: 1.4;
 }
 
+.adm-selector .adm-space.adm-space {
+  --gap: 24px;
+}
+
 .adm-selector-item {
   padding: 16px 32px;
   position: relative;

package/2x/cjs/components/spin-loading/spin-loading.css

@@ -1,9 +1,8 @@
 .adm-spin-loading {
   --color: var(--adm-color-weak);
   --size: 64px;
-  --track-width: calc(var(--size) / 16);
   --pi: 3.14159265;
-  --radius: calc(var(--size) / 2 - var(--track-width) / 2);
+  --radius: 15;
   --circumference: calc(var(--radius) * var(--pi) * 2);
   width: var(--size);
   height: var(--size);
@@ -17,13 +16,6 @@
 
 .adm-spin-loading-svg > .adm-spin-loading-fill {
   stroke: var(--color);
-  stroke-width: var(--track-width);
-  stroke-dasharray: var(--circumference);
-  stroke-linecap: square;
-  animation: adm-spin-loading-fill 1s infinite alternate-reverse linear;
-  r: var(--radius);
-  cx: calc(var(--size) / 2);
-  cy: calc(var(--size) / 2);
 }
 
 @keyframes adm-spin-loading-rotate {
@@ -34,14 +26,4 @@
   to {
     transform: rotate(360deg);
   }
-}
-
-@keyframes adm-spin-loading-fill {
-  from {
-    stroke-dashoffset: calc(var(--circumference) * (1 - 0.4));
-  }
-
-  to {
-    stroke-dashoffset: calc(var(--circumference) * (1 - 0.8));
-  }
 }

package/2x/cjs/components/spin-loading/spin-loading.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SpinLoadingProps = {
     color?: 'default' | 'primary' | 'white' | (string & {});
-} & NativeProps<'--color' | '--size' | '--track-width'>;
+} & NativeProps<'--color' | '--size'>;
 export declare const SpinLoading: React.NamedExoticComponent<SpinLoadingProps>;

package/2x/cjs/components/spin-loading/spin-loading.js

@@ -11,6 +11,8 @@ var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _web = require("@react-spring/web");
+
 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; }
@@ -24,20 +26,46 @@ const colorRecord = {
 const defaultProps = {
   color: 'default'
 };
+const circumference = 15 * 3.14159265358979 * 2;
 const SpinLoading = (0, _react.memo)(p => {
   var _a;
 
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+  const {
+    percent
+  } = (0, _web.useSpring)({
+    loop: {
+      reverse: true
+    },
+    from: {
+      percent: 30
+    },
+    to: {
+      percent: 80
+    },
+    config: {
+      duration: 1200
+    }
+  });
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_web.animated.div, {
     className: classPrefix,
     style: {
-      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color
+      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color,
+      '--percent': percent
     }
   }, _react.default.createElement("svg", {
-    className: `${classPrefix}-svg`
-  }, _react.default.createElement("circle", {
+    className: `${classPrefix}-svg`,
+    viewBox: '0 0 32 32'
+  }, _react.default.createElement(_web.animated.circle, {
     className: `${classPrefix}-fill`,
-    fill: 'transparent'
+    fill: 'transparent',
+    strokeWidth: '2',
+    strokeDasharray: circumference,
+    strokeDashoffset: percent,
+    strokeLinecap: 'square',
+    r: 15,
+    cx: 16,
+    cy: 16
   }))));
 });
 exports.SpinLoading = SpinLoading;

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

@@ -34,13 +34,10 @@
 
 .adm-stepper .adm-stepper-input {
   height: var(--height);
-  background-color: var(--input-background-color);
-}
-
-.adm-stepper .adm-stepper-input > input {
-  text-align: center;
-  font-size: var(--input-font-size);
-  color: var(--input-font-color);
+  --background-color: var(--input-background-color);
+  --font-size: var(--input-font-size);
+  --color: var(--input-font-color);
+  --text-align: center;
 }
 
 .adm-stepper-minus,

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

@@ -102,7 +102,6 @@ const Stepper = p => {
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: (0, _classnames.default)(classPrefix, {
-      [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-active`]: hasFocus
     })
   }, _react.default.createElement(_button.default, {