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

package/2x/es/components/selector/selector.js

@@ -10,7 +10,8 @@ import { CheckMark } from './check-mark';
 const classPrefix = `adm-selector`;
 const defaultProps = {
   multiple: false,
-  defaultValue: []
+  defaultValue: [],
+  showCheckMark: true
 };
 export const Selector = p => {
   const props = mergeProps(defaultProps, p);
@@ -55,7 +56,7 @@ export const Selector = p => {
       }
     }, option.label, option.description && React.createElement("div", {
       className: `${classPrefix}-item-description`
-    }, option.description), active && React.createElement("div", {
+    }, option.description), active && props.showCheckMark && React.createElement("div", {
       className: `${classPrefix}-check-mark-wrapper`
     }, React.createElement(CheckMark, null)));
   });

package/2x/es/components/swiper/swiper.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
@@ -10,7 +10,7 @@ import PageIndicator from '../page-indicator';
 import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
-import { useUpdateEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -184,7 +184,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
       swipeNext,
       swipePrev
     }));
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       const maxIndex = validChildren.length - 1;
 
       if (current > maxIndex) {

package/2x/es/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 {

package/2x/es/components/tabs/tabs.js

@@ -1,10 +1,10 @@
-import React, { useRef, useLayoutEffect } from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { bound } from '../../utils/bound';
-import { useUpdateLayoutEffect, useThrottleFn } from 'ahooks';
+import { useUpdateLayoutEffect, useThrottleFn, useIsomorphicLayoutEffect } from 'ahooks';
 import { useMutationEffect } from '../../utils/use-mutation-effect';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { mergeProps } from '../../utils/with-default-props';
@@ -134,7 +134,7 @@ export const Tabs = p => {
     });
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     animate(true);
   }, []);
   useUpdateLayoutEffect(() => {
@@ -168,7 +168,7 @@ export const Tabs = p => {
     trailing: true,
     leading: true
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     updateMask(true);
   }, []);
   return withNativeProps(props, React.createElement("div", {

package/2x/es/components/text-area/text-area.css

@@ -1,4 +1,4 @@
-.adm-text-area-wrapper {
+.adm-text-area {
   --font-size: 34px;
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
@@ -8,7 +8,7 @@
   max-height: 100%;
 }
 
-.adm-text-area {
+.adm-text-area-element {
   font-family: var(--adm-font-family);
   resize: none;
   flex: auto;
@@ -29,35 +29,35 @@
   min-height: 1.5em;
 }
 
-.adm-text-area::placeholder {
+.adm-text-area-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
 
-.adm-text-area:-webkit-autofill {
+.adm-text-area-element:-webkit-autofill {
   background-color: transparent;
 }
 
-.adm-text-area:disabled {
+.adm-text-area-element:disabled {
   color: var(--disabled-color);
   cursor: not-allowed;
   opacity: 1;
   -webkit-text-fill-color: var(--disabled-color);
 }
 
-.adm-text-area:read-only {
+.adm-text-area-element:read-only {
   cursor: default;
 }
 
-.adm-text-area:invalid {
+.adm-text-area-element:invalid {
   box-shadow: none;
 }
 
-.adm-text-area::-ms-clear {
+.adm-text-area-element::-ms-clear {
   display: none;
 }
 
-.adm-text-area[readonly] {
+.adm-text-area-element[readonly] {
   pointer-events: none;
 }
 

package/2x/es/components/text-area/text-area.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur'> & {
+export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd'> & {
     onChange?: (val: string) => void;
     value?: string;
     defaultValue?: string;
@@ -20,7 +20,7 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/2x/es/components/text-area/text-area.js

@@ -1,6 +1,5 @@
-import { __rest } from "tslib";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 const classPrefix = 'adm-text-area';
@@ -12,19 +11,11 @@ const defaultProps = {
 };
 export const TextArea = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
-
   const {
-    className,
-    style,
-    defaultValue: outerDefaultValue,
-    value: outerValue,
-    onChange: outerOnChange,
-    rows: rows,
-    autoSize: autoSize,
-    showCount
-  } = props,
-        textAreaProps = __rest(props, ["className", "style", "defaultValue", "value", "onChange", "rows", "autoSize", "showCount"]);
-
+    autoSize,
+    showCount,
+    maxLength
+  } = props;
   const [value, setValue] = usePropsValue(props);
   const nativeTextAreaRef = useRef(null);
   useImperativeHandle(ref, () => ({
@@ -64,39 +55,58 @@ export const TextArea = forwardRef((p, ref) => {
 
     textArea.style.height = `${height}px`;
   }, [value, autoSize]);
+  const compositingRef = useRef(false);
   let count;
+  const valueLength = [...value].length;
 
   if (typeof showCount === 'function') {
-    count = showCount(value.length, props.maxLength);
+    count = showCount(valueLength, maxLength);
   } else if (showCount) {
     count = React.createElement("div", {
       className: `${classPrefix}-count`
-    }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength);
+    }, maxLength === undefined ? valueLength : valueLength + '/' + maxLength);
   }
 
-  return React.createElement("div", {
-    className: classNames(`${classPrefix}-wrapper`, className),
-    style: style
-  }, React.createElement("textarea", Object.assign({
-    ref: nativeTextAreaRef
-  }, textAreaProps, {
-    className: classPrefix,
-    rows: rows,
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("textarea", {
+    ref: nativeTextAreaRef,
+    className: `${classPrefix}-element`,
+    rows: props.rows,
     value: value,
+    placeholder: props.placeholder,
     onChange: e => {
-      setValue(e.target.value);
+      let v = e.target.value;
+
+      if (maxLength && !compositingRef.current) {
+        v = [...v].slice(0, maxLength).join('');
+      }
+
+      setValue(v);
     },
-    onFocus: e => {
+    id: props.id,
+    onCompositionStart: e => {
       var _a;
 
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: e => {
+    onCompositionEnd: e => {
       var _a;
 
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = false;
+
+      if (maxLength) {
+        setValue([...value].slice(0, maxLength).join(''));
+      }
+
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    id: props.id
-  })), count);
+    autoComplete: props.autoComplete,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur
+  }), count));
 });
 TextArea.defaultProps = defaultProps;

package/2x/es/components/virtual-input/virtual-input.js

@@ -1,9 +1,10 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import classNames from 'classnames';
 import { CloseCircleFill } from 'antd-mobile-icons';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = 'adm-virtual-input';
 const defaultProps = {
   defaultValue: ''
@@ -28,7 +29,7 @@ export const VirtualInput = forwardRef((p, ref) => {
     content.scrollLeft = content.clientWidth;
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     scrollToEnd();
   }, [value]);
   useEffect(() => {

package/2x/es/utils/get-scroll-parent.js

@@ -4,7 +4,7 @@ const defaultRoot = canUseDom ? window : undefined;
 
 function isElement(node) {
   const ELEMENT_NODE_TYPE = 1;
-  return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
+  return node.nodeType === ELEMENT_NODE_TYPE;
 } // https://github.com/youzan/vant/issues/3823
 
 

package/2x/es/utils/use-ref-state.js

@@ -1,8 +1,8 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 export function useRefState(initialState) {
   const [state, setState] = useState(initialState);
   const ref = useRef(state);
-  useLayoutEffect(() => {
+  useEffect(() => {
     ref.current = state;
   }, [state]);
   return [state, setState, ref];

package/2x/es/utils/use-resize-effect.js

@@ -1,8 +1,7 @@
-import { useLayoutEffect } from 'react';
-import { useMemoizedFn } from 'ahooks';
+import { useIsomorphicLayoutEffect, useMemoizedFn } from 'ahooks';
 export function useResizeEffect(effect, targetRef) {
   const fn = useMemoizedFn(effect);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const target = targetRef.current;
     if (!target) return;
 

package/2x/es/utils/use-tab-list-scroll.js

@@ -1,8 +1,7 @@
-import { useLayoutEffect } from 'react';
 import { useSpring } from '@react-spring/web';
 import { useMutationEffect } from './use-mutation-effect';
 import { bound } from './bound';
-import { useUpdateLayoutEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUpdateLayoutEffect } from 'ahooks';
 export const useTabListScroll = (targetRef, activeIndex) => {
   const [{
     scrollLeft
@@ -37,7 +36,7 @@ export const useTabListScroll = (targetRef, activeIndex) => {
     });
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     animate(true);
   }, []);
   useUpdateLayoutEffect(() => {

package/2x/package.json

@@ -1,11 +1,11 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.22",
+  "version": "5.0.0-rc.26",
   "dependencies": {
     "@react-spring/web": "^9.4.2",
-    "@types/resize-observer-browser": "^0.1.6",
-    "@use-gesture/react": "^10.2.4",
-    "ahooks": "^3.1.8",
+    "@types/resize-observer-browser": "^0.1.7",
+    "@use-gesture/react": "^10.2.5",
+    "ahooks": "^3.1.9",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.1",

package/README.md

@@ -1,12 +1,14 @@
-<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*1Ps5R4QVn28AAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
+<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*8HtNS4uMKkAAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
 
 ![npm (tag)](https://img.shields.io/npm/v/antd-mobile/next)
 ![GitHub (Pre-)Release Date](https://img.shields.io/github/release-date-pre/ant-design/ant-design-mobile)
-![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count)
+![npm](https://img.shields.io/npm/dw/antd-mobile)
+![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count?label=downloads%285.x%29)
 ![gzip size](https://img.badgesize.io/https:/unpkg.com/antd-mobile@next/umd/antd-mobile.js?label=gzip%20size&compression=gzip)
 [![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
@@ -20,17 +22,16 @@ $ yarn add antd-mobile@next
 - **Atomic**: The function of each component, neither more nor less, is exactly what you need.
 - **Fluent**: With smooth gestures and delicate animation, it helps the product create the ultimate experience.
 
-v5(Poplar) is the next major version of antd-mobile, we recommend using it instead of v2.
-
 You can also play with antd-mobile just in browser with [Codesandbox](https://codesandbox.io/s/antd-mobile-snrxr?file=/package.json). No need to prepare development environment.
 
 If you found bugs or would like to request some new features, please consider opening an [issue](https://github.com/ant-design/ant-design-mobile/issues/new).
 
 If you have some question about how to use ant-mobile, you can start a [discussion thread](https://github.com/ant-design/ant-design-mobile/discussions).
 
-Feel free to join our DingDing group:
+And we also have some community groups here. Feel free to join us:
 
-<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="250" />
+- [DingDing](https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ)
+- [Discord](https://discord.gg/jmNvw4WFYn)
 
 ---
 

package/cjs/components/badge/badge.css

@@ -3,23 +3,26 @@
   position: relative;
 }
 .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: 16px;
+  box-sizing: content-box;
   border-radius: 100px;
-  padding: 0 4px;
-  font-size: 9px;
-  line-height: 14px;
-  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: 8px;
+  padding: 1px 4px;
+  font-size: 9px;
+  line-height: 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  text-align: center;
+}
 .adm-badge-fixed {
   position: absolute;
   right: var(--right);
@@ -32,3 +35,6 @@
   height: 10px;
   border-radius: 5px;
 }
+.adm-badge-bordered {
+  border: solid 1px var(--adm-color-white);
+}

package/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/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/cjs/components/button/button.css

@@ -12,9 +12,9 @@
   display: inline-block;
   box-sizing: border-box;
   height: auto;
-  padding: 8px 12px;
+  padding: 7px 12px;
   margin: 0;
-  font-size: 15px;
+  font-size: 17px;
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
@@ -63,7 +63,7 @@
 .adm-button:not(.adm-button-default).adm-button-fill-none {
   --text-color: var(--color);
   --background-color: transparent;
-  --border-color: transparent;
+  --border-width: 0px;
 }
 .adm-button-primary {
   --color: var(--adm-color-primary);

package/cjs/components/calendar/calendar.js

@@ -23,6 +23,8 @@ var _configProvider = require("../config-provider");
 
 var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
 
+var _ahooks = require("ahooks");
+
 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); }
@@ -91,7 +93,7 @@ const Calendar = p => {
   }, [props.selectionMode, props.value, props.defaultValue]);
   const [begin, setBegin] = (0, _react.useState)(null);
   const [end, setEnd] = (0, _react.useState)(null);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
     setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
   }, [dateRange[0], dateRange[1]]);

package/cjs/components/cascade-picker-view/cascade-picker-view.d.ts

@@ -1,8 +1,7 @@
 import { FC } from 'react';
-import { NativeProps } from '../../utils/native-props';
 import type { PickerViewProps } from '../picker-view';
 import type { CascadePickerOption } from '../cascade-picker';
 export declare type CascadePickerViewProps = Omit<PickerViewProps, 'columns'> & {
     options: CascadePickerOption[];
-} & NativeProps<'--height'>;
+};
 export declare const CascadePickerView: FC<CascadePickerViewProps>;

package/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/cjs/components/checkbox/checkbox.css

@@ -16,16 +16,14 @@
   border: 1px 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 {
   display: flex;
@@ -52,12 +50,6 @@
   background-color: #ffffff;
   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/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/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>>;