antd-mobile 5.21.0 → 5.23.0

package/cjs/locales/zh-CN.js

@@ -109,7 +109,7 @@ const zhCN = (0, _mergeLocale.mergeLocale)(_base.base, {
     clear: '清除'
   },
   Mask: {
-    name: '遮罩层'
+    name: '背景蒙层'
   },
   Modal: {
     ok: '我知道了'

package/cjs/utils/measure-css-length.js

@@ -12,7 +12,7 @@ var _devLog = require("./dev-log");
 function measureCSSLength(raw) {
   if (raw === null || raw === undefined || raw === '') {
     if (_isDev.isDev) {
-      (0, _devLog.devError)('Global', 'Seems like the you will encounter a style messed problem. Please check the browser environment to make sure it supports CSS variables.');
+      (0, _devLog.devError)('Global', 'Something went wrong when calculating CSS length. Please report an issue at https://github.com/ant-design/ant-design-mobile/issues/new/choose');
     }
 
     return 0;

package/es/components/action-sheet/action-sheet.css

@@ -39,13 +39,16 @@
   font-size: var(--adm-font-size-10);
 }
 .adm-action-sheet-button-item-description {
-  font-size: var(--adm-font-size-4);
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-weak);
-  padding-top: 2px;
+  padding-top: 4px;
 }
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);
 }
+.adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name {
+  font-weight: bold;
+}
 .adm-action-sheet-cancel {
   background-color: var(--adm-color-box);
   padding-top: 8px;

package/es/components/action-sheet/action-sheet.d.ts

@@ -7,6 +7,7 @@ export declare type Action = {
     disabled?: boolean;
     description?: ReactNode;
     danger?: boolean;
+    bold?: boolean;
     onClick?: () => void;
 };
 export declare type ActionSheetProps = {

package/es/components/action-sheet/action-sheet.js

@@ -47,7 +47,8 @@ export const ActionSheet = p => {
   }, React.createElement("a", {
     className: classNames('adm-plain-anchor', `${classPrefix}-button-item`, {
       [`${classPrefix}-button-item-danger`]: action.danger,
-      [`${classPrefix}-button-item-disabled`]: action.disabled
+      [`${classPrefix}-button-item-disabled`]: action.disabled,
+      [`${classPrefix}-button-item-bold`]: action.bold
     }),
     onClick: () => {
       var _a, _b, _c;

package/es/components/avatar/avatar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { Image } from '../../index';
+import Image from '../image';
 import { mergeProps } from '../../utils/with-default-props';
 import { Fallback } from './fallback';
 const classPrefix = 'adm-avatar';

package/es/components/check-list/check-list.css

@@ -1,5 +1,5 @@
 .adm-check-list-item-extra {
-  font-size: var(--adm-font-size-8);
+  font-size: var(--adm-font-size-10);
   line-height: 1;
   color: var(--adm-color-primary);
 }

package/es/components/dialog/dialog-action-button.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;
-    text: string;
+    text: ReactNode;
     disabled?: boolean;
     danger?: boolean;
     bold?: boolean;

package/es/components/ellipsis/ellipsis.js

@@ -23,6 +23,7 @@ export const Ellipsis = p => {
   function calcEllipsised() {
     const root = rootRef.current;
     if (!root) return;
+    if (!root.offsetParent) return;
     const originStyle = window.getComputedStyle(root);
     const container = document.createElement('div');
     const styleNames = Array.prototype.slice.apply(originStyle);

package/es/components/empty/empty.d.ts

@@ -5,4 +5,5 @@ export declare type EmptyProps = {
     imageStyle?: React.CSSProperties;
     description?: ReactNode;
 } & NativeProps;
+/** @deprecated Empty has been deprecated and will be removed in the next major version. */
 export declare const Empty: React.FC<EmptyProps>;

package/es/components/empty/empty.js

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { EmptyIcon } from './empty-icon';
 const classPrefix = `adm-empty`;
+/** @deprecated Empty has been deprecated and will be removed in the next major version. */
+
 export const Empty = props => {
   function renderImageNode() {
     const {

package/es/components/floating-panel/floating-panel.js

@@ -113,8 +113,8 @@ export const FloatingPanel = forwardRef((p, ref) => {
     ref: elementRef,
     className: 'adm-floating-panel',
     style: {
-      height: maxHeight,
-      translateY: y.to(y => `calc(100% + (${y}px))`)
+      height: Math.round(maxHeight),
+      translateY: y.to(y => `calc(100% + (${Math.round(y)}px))`)
     }
   }, React.createElement("div", {
     className: 'adm-floating-panel-mask',

package/es/components/footer/footer.css

@@ -0,0 +1,51 @@
+.adm-footer {
+  --background-color: var(--adm-color-background);
+  color: var(--adm-color-text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--background-color);
+}
+.adm-footer-label {
+  width: 100%;
+}
+.adm-footer-label .adm-divider.adm-divider {
+  color: var(--adm-color-light);
+}
+.adm-footer-links {
+  margin: 8px 0;
+  color: var(--adm-color-primary);
+  white-space: nowrap;
+}
+.adm-footer-links a {
+  text-decoration: none;
+}
+.adm-footer-content {
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+  color: var(--adm-color-light);
+}
+.adm-footer-chips {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin: 8px 0;
+}
+.adm-footer-chip {
+  white-space: nowrap;
+  margin-right: 20px;
+  font-size: 12px;
+  background-color: var(--adm-color-box);
+  color: var(--adm-color-weak);
+  padding: 4px 12px;
+  border-radius: 100px;
+}
+.adm-footer-chip-link {
+  cursor: pointer;
+  background-color: #e7f1ff;
+  color: var(--adm-color-primary);
+}
+.adm-footer-chip:last-child {
+  margin-right: 0;
+}

package/es/components/footer/footer.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type LinkItem = {
+    text: string;
+    href: string;
+};
+export declare type ChipItem = {
+    text: ReactNode;
+    type?: 'plain' | 'link';
+};
+export declare type FooterProps = {
+    label?: ReactNode;
+    links?: LinkItem[];
+    content?: ReactNode;
+    chips?: ChipItem[];
+    onChipClick?: (item: ChipItem, index: number) => void;
+    onLinkClick?: (item: LinkItem, index: number) => void;
+} & NativeProps<'--background-color'>;
+export declare const Footer: FC<FooterProps>;

package/es/components/footer/footer.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { Divider } from '../divider/divider';
+const classPrefix = `adm-footer`;
+const defaultProps = {
+  label: '',
+  links: [],
+  content: '',
+  chips: []
+};
+export const Footer = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    label,
+    links,
+    content,
+    chips,
+    onChipClick,
+    onLinkClick
+  } = props;
+
+  const clickChipItem = (item, index) => {
+    if ((chips === null || chips === void 0 ? void 0 : chips.length) && item.type === 'link') {
+      onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(item, index);
+    }
+  };
+
+  const clickLinkItem = (item, index, e) => {
+    if (onLinkClick) {
+      e.preventDefault();
+      onLinkClick(item, index);
+    }
+  };
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix)
+  }, label && React.createElement("div", {
+    className: `${classPrefix}-label`
+  }, React.createElement(Divider, null, label)), links && links.length > 0 && React.createElement("div", {
+    className: `${classPrefix}-links`
+  }, links.map((link, index) => {
+    return React.createElement(React.Fragment, {
+      key: index
+    }, React.createElement("a", {
+      href: link.href,
+      rel: 'noopener noreferrer',
+      onClick: event => clickLinkItem(link, index, event)
+    }, link.text), index !== links.length - 1 && React.createElement(Divider, {
+      direction: 'vertical'
+    }));
+  })), content && React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, content), chips && chips.length > 0 && React.createElement("div", {
+    className: `${classPrefix}-chips`
+  }, chips.map((chip, index) => {
+    return React.createElement("div", {
+      key: index,
+      onClick: () => clickChipItem(chip, index),
+      className: classNames(`${classPrefix}-chip`, {
+        [`${classPrefix}-chip-link`]: chip.type === 'link'
+      })
+    }, chip.text);
+  }))));
+};

package/es/components/footer/index.d.ts

@@ -0,0 +1,4 @@
+import './footer.less';
+import { Footer } from './footer';
+export type { FooterProps, ChipItem, LinkItem } from './footer';
+export default Footer;

package/es/components/footer/index.js

@@ -0,0 +1,3 @@
+import "./footer.css";
+import { Footer } from './footer';
+export default Footer;

package/es/components/image-uploader/image-uploader.d.ts

@@ -1,17 +1,25 @@
 import React, { FC, InputHTMLAttributes } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { ImageProps } from '../image';
-export declare type TaskStatus = 'pending' | 'fail';
+export declare type TaskStatus = 'pending' | 'fail' | 'success';
 export interface ImageUploadItem {
     key?: string | number;
     url: string;
     thumbnailUrl?: string;
     extra?: any;
 }
+declare type Task = {
+    id: number;
+    url?: string;
+    file: File;
+    status: TaskStatus;
+};
+export declare type UploadTask = Pick<Task, 'id' | 'status'>;
 export declare type ImageUploaderProps = {
     defaultValue?: ImageUploadItem[];
     value?: ImageUploadItem[];
     onChange?: (items: ImageUploadItem[]) => void;
+    onUploadQueueChange?: (tasks: UploadTask[]) => void;
     accept?: string;
     multiple?: boolean;
     maxCount?: number;
@@ -28,5 +36,7 @@ export declare type ImageUploaderProps = {
     showFailed?: boolean;
     imageFit?: ImageProps['fit'];
     children?: React.ReactNode;
+    renderItem?: (originNode: React.ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => React.ReactNode;
 } & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;
+export {};

package/es/components/image-uploader/image-uploader.js

@@ -35,10 +35,19 @@ export const ImageUploader = p => {
       return !value.some(fileItem => fileItem.url === task.url);
     }));
   }, [value]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+
+    (_a = props.onUploadQueueChange) === null || _a === void 0 ? void 0 : _a.call(props, tasks.map(item => ({
+      id: item.id,
+      status: item.status
+    })));
+  }, [tasks]);
   const idCountRef = useRef(0);
   const {
     maxCount,
-    onPreview
+    onPreview,
+    renderItem
   } = props;
 
   function processFile(file, fileList) {
@@ -99,6 +108,7 @@ export const ImageUploader = p => {
             return prev.map(task => {
               if (task.id === currentTask.id) {
                 return Object.assign(Object.assign({}, task), {
+                  status: 'success',
                   url: result.url
                 });
               }
@@ -146,36 +156,42 @@ export const ImageUploader = p => {
     (_a = imageViewerHandlerRef.current) === null || _a === void 0 ? void 0 : _a.close();
   });
   const showUpload = props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount);
+
+  const renderImages = () => {
+    return value.map((fileItem, index) => {
+      var _a, _b;
+
+      const originNode = React.createElement(PreviewItem, {
+        key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
+        url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
+        deletable: props.deletable,
+        imageFit: props.imageFit,
+        onClick: () => {
+          if (props.preview) {
+            previewImage(index);
+          }
+
+          onPreview && onPreview(index, fileItem);
+        },
+        onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
+          var _c;
+
+          const canDelete = yield (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
+          if (canDelete === false) return;
+          setValue(value.filter((x, i) => i !== index));
+        })
+      });
+      return renderItem ? renderItem(originNode, fileItem, value) : originNode;
+    });
+  };
+
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, React.createElement(Space, {
     className: `${classPrefix}-space`,
     wrap: true,
     block: true
-  }, value.map((fileItem, index) => {
-    var _a, _b;
-
-    return React.createElement(PreviewItem, {
-      key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
-      url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
-      deletable: props.deletable,
-      imageFit: props.imageFit,
-      onClick: () => {
-        if (props.preview) {
-          previewImage(index);
-        }
-
-        onPreview && onPreview(index, fileItem);
-      },
-      onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
-
-        const canDelete = yield (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
-        if (canDelete === false) return;
-        setValue(value.filter((x, i) => i !== index));
-      })
-    });
-  }), tasks.map(task => {
+  }, renderImages(), tasks.map(task => {
     if (!props.showFailed && task.status === 'fail') {
       return null;
     }

package/es/components/image-uploader/index.d.ts

@@ -1,4 +1,4 @@
 import { ImageUploader } from './image-uploader';
 import './image-uploader.less';
-export type { ImageUploadItem, ImageUploaderProps } from './image-uploader';
+export type { ImageUploadItem, ImageUploaderProps, UploadTask, } from './image-uploader';
 export default ImageUploader;

package/es/components/image-uploader/preview-item.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useLayoutEffect, useMemo } from 'react';
 import { CloseOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
 import Image from '../image';
@@ -28,6 +28,11 @@ const PreviewItem = props => {
 
     return '';
   }, [url, file]);
+  useLayoutEffect(() => {
+    return () => {
+      URL.revokeObjectURL(src);
+    };
+  }, [src]);
 
   function renderLoading() {
     return props.status === 'pending' && React.createElement("div", {

package/es/components/image-viewer/image-viewer.js

@@ -19,7 +19,8 @@ export const ImageViewer = p => {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.image && React.createElement(Slide, {
@@ -64,7 +65,8 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && React.createElement(Slides, {

package/es/components/image-viewer/slides.js

@@ -75,8 +75,8 @@ export const Slides = forwardRef((props, ref) => {
     style: {
       x: x.to(x => -x)
     }
-  }, props.images.map(image => React.createElement(Slide, {
-    key: image,
+  }, props.images.map((image, index) => React.createElement(Slide, {
+    key: index,
     image: image,
     onTap: props.onTap,
     maxZoom: props.maxZoom,

package/es/components/index-bar/index-bar.css

@@ -40,7 +40,7 @@
 .adm-index-bar-sidebar-bubble {
   position: absolute;
   top: 50%;
-  right: 42px;
+  right: 60px;
   width: 47px;
   height: 47px;
   color: var(--adm-color-white);

package/es/components/page-indicator/page-indicator.css

@@ -1,7 +1,7 @@
 .adm-page-indicator {
   display: flex;
   width: auto;
-  --dot-color: rgba(0, 0, 0, 0.2);
+  --dot-color: #dddddd;
   --active-dot-color: var(--adm-color-primary);
   --dot-size: 3px;
   --active-dot-size: 13px;
@@ -24,6 +24,7 @@
   background: var(--active-dot-color);
 }
 .adm-page-indicator-color-white {
+  --dot-color: rgba(255, 255, 255, 0.5);
   --active-dot-color: var(--adm-color-white);
 }
 .adm-page-indicator-horizontal {

package/es/components/picker/index.d.ts

@@ -24,7 +24,7 @@ declare const _default: import("react").NamedExoticComponent<{
     popupStyle?: import("react").CSSProperties | undefined;
 } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>> & {
     readonly type: import("react").ForwardRefExoticComponent<{
@@ -49,7 +49,7 @@ declare const _default: import("react").NamedExoticComponent<{
         popupStyle?: import("react").CSSProperties | undefined;
     } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
         className?: string | undefined;
-        style?: (import("react").CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
         tabIndex?: number | undefined;
     } & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>>;
 } & {

package/es/components/picker/picker.d.ts

@@ -51,6 +51,6 @@ export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticCom
     popupStyle?: React.CSSProperties | undefined;
 } & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & React.RefAttributes<PickerActions>>>;

package/es/components/picker-view/picker-view.css

@@ -118,3 +118,11 @@
   justify-content: center;
   align-items: center;
 }
+.adm-picker-view-item-height-measure {
+  position: relative;
+  left: 0;
+  top: 0;
+  height: var(--item-height);
+  width: 0;
+  pointer-events: none;
+}

package/es/components/picker-view/wheel.js

@@ -32,11 +32,12 @@ export const Wheel = memo(props => {
   }));
   const draggingRef = useRef(false);
   const rootRef = useRef(null);
+  const itemHeightMeasureRef = useRef(null);
   const itemHeight = useRef(34);
   useIsomorphicLayoutEffect(() => {
-    const root = rootRef.current;
-    if (!root) return;
-    itemHeight.current = measureCSSLength(window.getComputedStyle(root).getPropertyValue('--item-height'));
+    const itemHeightMeasure = itemHeightMeasureRef.current;
+    if (!itemHeightMeasure) return;
+    itemHeight.current = measureCSSLength(window.getComputedStyle(itemHeightMeasure).getPropertyValue('height'));
   });
   useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
@@ -153,7 +154,10 @@ export const Wheel = memo(props => {
 
   return React.createElement("div", {
     className: `${classPrefix}-column`
-  }, React.createElement(animated.div, {
+  }, React.createElement("div", {
+    className: `${classPrefix}-item-height-measure`,
+    ref: itemHeightMeasureRef
+  }), React.createElement(animated.div, {
     ref: rootRef,
     style: {
       translateY: y

package/es/components/rate/rate.css

@@ -1,7 +1,8 @@
 .adm-rate {
   --star-size: 24px;
   --active-color: #ffd21e;
-  --inactive-color: var(--adm-color-border);
+  --inactive-color: #e5e5e5;
+  --inactive-color-half: #dbdbdb;
   display: inline-flex;
   touch-action: pan-y;
   -webkit-user-select: none;
@@ -34,3 +35,6 @@
 .adm-rate-star-readonly {
   cursor: unset;
 }
+.adm-rate.adm-rate-half .adm-rate-star-half:not(.adm-rate-star-active) {
+  color: var(--inactive-color-half);
+}

package/es/components/rate/rate.js

@@ -63,7 +63,9 @@ export const Rate = p => {
     filterTaps: true
   });
   return withNativeProps(props, React.createElement("div", Object.assign({
-    className: classPrefix,
+    className: classNames(classPrefix, {
+      [`${classPrefix}-half`]: props.allowHalf
+    }),
     role: 'radiogroup',
     "aria-readonly": props.readOnly,
     ref: containerRef

package/es/components/selector/selector.css

@@ -7,6 +7,10 @@
   --checked-border: none;
   --border-radius: 2px;
   --padding: 8px 16px;
+  --gap: 8px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
   overflow: hidden;
   font-size: var(--adm-font-size-7);
   line-height: 1.4;
@@ -14,6 +18,11 @@
 .adm-selector .adm-space.adm-space {
   --gap: 12px;
 }
+.adm-selector .adm-grid {
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
+}
 .adm-selector-item {
   padding: var(--padding);
   position: relative;

package/es/components/selector/selector.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { GridProps } from '../grid';
 declare type SelectorValue = string | number;
 export interface SelectorOption<V> {
     label: ReactNode;
@@ -9,7 +10,7 @@ export interface SelectorOption<V> {
 }
 export declare type SelectorProps<V> = {
     options: SelectorOption<V>[];
-    columns?: number;
+    columns?: GridProps['columns'];
     multiple?: boolean;
     disabled?: boolean;
     defaultValue?: V[];
@@ -18,6 +19,6 @@ export declare type SelectorProps<V> = {
         items: SelectorOption<V>[];
     }) => void;
     showCheckMark?: boolean;
-} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

package/es/components/selector/selector.js

@@ -4,7 +4,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import Space from '../space';
 import Grid from '../grid';
-import { convertPx } from '../../utils/convert-px';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CheckMark } from './check-mark';
 const classPrefix = `adm-selector`;
@@ -65,7 +64,6 @@ export const Selector = p => {
   }, !props.columns && React.createElement(Space, {
     wrap: true
   }, items), props.columns && React.createElement(Grid, {
-    columns: props.columns,
-    gap: convertPx(8)
+    columns: props.columns
   }, items)));
 };