@arco-design/mobile-react 2.19.1-7cada34.0 → 2.19.1-941e02b.7

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.19.1-7cada34.0+7cada34",
+    "version": "2.19.1-941e02b.7+941e02b",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
     "scripts": {
         "prebuild": "node ../../scripts/build/pre-build.js",
-        "build": "rm -rf esm/* umd/* cjs/* && gulp build && npm run dist",
-        "dist": "rm -rf dist/* && cd ../../ && node packages/arcodesign/rollup.lib.js",
+        "build": "rimraf esm/* umd/* cjs/* && gulp build && npm run dist",
+        "dist": "rimraf dist/* && cd ../../ && node packages/arcodesign/rollup.lib.js",
         "prepublishOnly": "npm run build",
         "build:bd": "npm run build",
         "test": "jest"
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "^2.10.1-7cada34.0+7cada34",
+        "@arco-design/mobile-utils": "^2.10.1-941e02b.7+941e02b",
         "@arco-design/transformable": "^1.0.0",
         "es6-promise": "^4.2.8",
         "lodash.throttle": "^4.1.1",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "7cada341079660793528e947a0c5555f96ce40bb"
+    "gitHead": "941e02ba8f305b84634211b1a65cb7254c6c617d"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -518,6 +518,7 @@
     --steps-padding: ~`pxtorem(16)` 0;
     --steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
     --steps-tail-vertical-padding: ~`pxtorem(14)` 0;
+    --steps-tail-vertical-top: ~`pxtorem(9)`;
     --steps-tail-standard-size: 1PX;
     --steps-tail-standard-background: var(--line-color);
     --steps-tail-finish-background: var(--primary-color);
@@ -544,8 +545,6 @@
     --steps-wait-description-color: var(--sub-info-font-color);
     --steps-icon-width: 18PX;
     --steps-icon-height: 18PX;
-    --steps-custom-icon-width: 20PX;
-    --steps-custom-icon-height: 20PX;
     --steps-dot-width: 8PX;
     --steps-dot-height: 8PX;
     --steps-dot-border-width: 1.5PX;
@@ -647,4 +646,20 @@
     --action-sheet-header-padding: ~`pxtorem(16)`;
     --action-sheet-title-font-size: ~`pxtorem(16)`;
     --action-sheet-sub-title-font-size: ~`pxtorem(14)`;
+    --image-picker-font-size: ~`pxtorem(14)`;
+    --image-picker-disabled-opacity: 0.7;
+    --image-picker-border-radius: ~`pxtorem(2)`;
+    --image-picker-add-background: #f7f8fa;
+    --image-picker-add-icon-font-size: ~`pxtorem(30)`;
+    --image-picker-add-icon-color: #d8d8d8;
+    --image-picker-add-text-font-size: ~`pxtorem(12)`;
+    --image-picker-add-text-color: var(--sub-info-font-color);
+    --image-picker-error-color: #ffffff;
+    --image-picker-error-background: rgba(0, 0, 0, 0.5);
+    --image-picker-close-color: #ffffff;
+    --image-picker-close-font-size: ~`pxtorem(12)`;
+    --image-picker-close-width: ~`pxtorem(18)`;
+    --image-picker-close-height: ~`pxtorem(18)`;
+    --image-picker-close-background: rgba(0, 0, 0, 0.3);
+    --image-picker-close-border-radius: 0 ~`pxtorem(2)`;
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -517,6 +517,7 @@ export interface ArcodesignToken extends Record<string, string> {
     'steps-padding': string;
     'steps-tail-horizontal-padding': string;
     'steps-tail-vertical-padding': string;
+    'steps-tail-vertical-top': string;
     'steps-tail-standard-size': string;
     'steps-tail-standard-background': string;
     'steps-tail-finish-background': string;
@@ -543,8 +544,6 @@ export interface ArcodesignToken extends Record<string, string> {
     'steps-wait-description-color': string;
     'steps-icon-width': string;
     'steps-icon-height': string;
-    'steps-custom-icon-width': string;
-    'steps-custom-icon-height': string;
     'steps-dot-width': string;
     'steps-dot-height': string;
     'steps-dot-border-width': string;
@@ -646,6 +645,22 @@ export interface ArcodesignToken extends Record<string, string> {
     'action-sheet-header-padding': string;
     'action-sheet-title-font-size': string;
     'action-sheet-sub-title-font-size': string;
+    'image-picker-font-size': string;
+    'image-picker-disabled-opacity': string;
+    'image-picker-border-radius': string;
+    'image-picker-add-background': string;
+    'image-picker-add-icon-font-size': string;
+    'image-picker-add-icon-color': string;
+    'image-picker-add-text-font-size': string;
+    'image-picker-add-text-color': string;
+    'image-picker-error-color': string;
+    'image-picker-error-background': string;
+    'image-picker-close-color': string;
+    'image-picker-close-font-size': string;
+    'image-picker-close-width': string;
+    'image-picker-close-height': string;
+    'image-picker-close-background': string;
+    'image-picker-close-border-radius': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

package/tokens/app/arcodesign/default/index.js

@@ -529,6 +529,7 @@ var tokens = {
   "steps-padding": "0.32rem 0",
   "steps-tail-horizontal-padding": "0 0.36rem",
   "steps-tail-vertical-padding": "0.28rem 0",
+  "steps-tail-vertical-top": "0.18rem",
   "steps-tail-standard-size": "1PX",
   "steps-tail-standard-background": "#e5e6eb",
   "steps-tail-finish-background": "#165dff",
@@ -555,8 +556,6 @@ var tokens = {
   "steps-wait-description-color": "#86909c",
   "steps-icon-width": "18PX",
   "steps-icon-height": "18PX",
-  "steps-custom-icon-width": "20PX",
-  "steps-custom-icon-height": "20PX",
   "steps-dot-width": "8PX",
   "steps-dot-height": "8PX",
   "steps-dot-border-width": "1.5PX",
@@ -657,7 +656,23 @@ var tokens = {
   "action-sheet-cancel-border-width": "0.16rem",
   "action-sheet-header-padding": "0.32rem",
   "action-sheet-title-font-size": "0.32rem",
-  "action-sheet-sub-title-font-size": "0.28rem"
+  "action-sheet-sub-title-font-size": "0.28rem",
+  "image-picker-font-size": "0.28rem",
+  "image-picker-disabled-opacity": "0.7",
+  "image-picker-border-radius": "0.04rem",
+  "image-picker-add-background": "#f7f8fa",
+  "image-picker-add-icon-font-size": "0.6rem",
+  "image-picker-add-icon-color": "#d8d8d8",
+  "image-picker-add-text-font-size": "0.24rem",
+  "image-picker-add-text-color": "#86909c",
+  "image-picker-error-color": "#ffffff",
+  "image-picker-error-background": "rgba(0, 0, 0, 0.5)",
+  "image-picker-close-color": "#ffffff",
+  "image-picker-close-font-size": "0.24rem",
+  "image-picker-close-width": "0.36rem",
+  "image-picker-close-height": "0.36rem",
+  "image-picker-close-background": "rgba(0, 0, 0, 0.3)",
+  "image-picker-close-border-radius": "0 0.04rem"
 };
 var _default = tokens;
 exports["default"] = _default;

package/tokens/app/arcodesign/default/index.json

@@ -3359,6 +3359,134 @@
             "en": "Default mask background color when image loads or retries"
         }
     },
+    "imagePickerAddBackground": {
+        "cssKey": "image-picker-add-background",
+        "desc": "",
+        "override": "",
+        "value": "#f7f8fa",
+        "jsValue": "#f7f8fa",
+        "staticValue": "#f7f8fa"
+    },
+    "imagePickerAddIconColor": {
+        "cssKey": "image-picker-add-icon-color",
+        "desc": "",
+        "override": "",
+        "value": "#d8d8d8",
+        "jsValue": "#d8d8d8",
+        "staticValue": "#d8d8d8"
+    },
+    "imagePickerAddIconFontSize": {
+        "cssKey": "image-picker-add-icon-font-size",
+        "desc": "",
+        "override": "",
+        "value": "~`pxtorem(30)`",
+        "jsValue": "@getRem@30",
+        "staticValue": "0.6rem"
+    },
+    "imagePickerAddTextColor": {
+        "cssKey": "image-picker-add-text-color",
+        "desc": "",
+        "override": "",
+        "value": "@sub-info-font-color",
+        "jsValue": "@global@subInfoFontColor",
+        "staticValue": "#86909c"
+    },
+    "imagePickerAddTextFontSize": {
+        "cssKey": "image-picker-add-text-font-size",
+        "desc": "",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem"
+    },
+    "imagePickerBorderRadius": {
+        "cssKey": "image-picker-border-radius",
+        "desc": "",
+        "override": "",
+        "value": "~`pxtorem(2)`",
+        "jsValue": "@getRem@2",
+        "staticValue": "0.04rem"
+    },
+    "imagePickerCloseBackground": {
+        "cssKey": "image-picker-close-background",
+        "desc": "",
+        "override": "",
+        "value": "rgba(0, 0, 0, 0.3)",
+        "jsValue": "rgba(0, 0, 0, 0.3)",
+        "staticValue": "rgba(0, 0, 0, 0.3)"
+    },
+    "imagePickerCloseBorderRadius": {
+        "cssKey": "image-picker-close-border-radius",
+        "desc": "",
+        "override": "",
+        "value": "0 ~`pxtorem(2)`",
+        "jsValue": "0 @getRem@2",
+        "staticValue": "0 0.04rem"
+    },
+    "imagePickerCloseColor": {
+        "cssKey": "image-picker-close-color",
+        "desc": "",
+        "override": "",
+        "value": "#ffffff",
+        "jsValue": "#ffffff",
+        "staticValue": "#ffffff"
+    },
+    "imagePickerCloseFontSize": {
+        "cssKey": "image-picker-close-font-size",
+        "desc": "",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem"
+    },
+    "imagePickerCloseHeight": {
+        "cssKey": "image-picker-close-height",
+        "desc": "",
+        "override": "",
+        "value": "~`pxtorem(18)`",
+        "jsValue": "@getRem@18",
+        "staticValue": "0.36rem"
+    },
+    "imagePickerCloseWidth": {
+        "cssKey": "image-picker-close-width",
+        "desc": "",
+        "override": "",
+        "value": "~`pxtorem(18)`",
+        "jsValue": "@getRem@18",
+        "staticValue": "0.36rem"
+    },
+    "imagePickerDisabledOpacity": {
+        "cssKey": "image-picker-disabled-opacity",
+        "desc": "",
+        "override": "",
+        "value": "0.7",
+        "jsValue": "0.7",
+        "staticValue": "0.7"
+    },
+    "imagePickerErrorBackground": {
+        "cssKey": "image-picker-error-background",
+        "desc": "",
+        "override": "",
+        "value": "rgba(0, 0, 0, 0.5)",
+        "jsValue": "rgba(0, 0, 0, 0.5)",
+        "staticValue": "rgba(0, 0, 0, 0.5)"
+    },
+    "imagePickerErrorColor": {
+        "cssKey": "image-picker-error-color",
+        "desc": "",
+        "override": "",
+        "value": "#ffffff",
+        "jsValue": "#ffffff",
+        "staticValue": "#ffffff"
+    },
+    "imagePickerFontSize": {
+        "cssKey": "image-picker-font-size",
+        "desc": "",
+        "override": "",
+        "value": "~`pxtorem(14)`",
+        "jsValue": "@getRem@14",
+        "staticValue": "0.28rem"
+    },
     "imagePlaceholderBackground": {
         "cssKey": "image-placeholder-background",
         "desc": "图片 placeholder 背景色",
@@ -5699,30 +5827,6 @@
             "en": "Label distance  of horizoverticalntal slider from the right of the mark"
         }
     },
-    "stepsCustomIconHeight": {
-        "cssKey": "steps-custom-icon-height",
-        "desc": "steps 步骤自定义图标高度",
-        "override": "",
-        "value": "20PX",
-        "jsValue": "20PX",
-        "staticValue": "20PX",
-        "localeDesc": {
-            "ch": "steps 步骤自定义图标高度",
-            "en": "Steps custom icon height"
-        }
-    },
-    "stepsCustomIconWidth": {
-        "cssKey": "steps-custom-icon-width",
-        "desc": "steps 步骤自定义图标宽度",
-        "override": "",
-        "value": "20PX",
-        "jsValue": "20PX",
-        "staticValue": "20PX",
-        "localeDesc": {
-            "ch": "steps 步骤自定义图标宽度",
-            "en": "Steps custom icon width"
-        }
-    },
     "stepsDescriptionColor": {
         "cssKey": "steps-description-color",
         "desc": "steps 步骤默认描述文字颜色",
@@ -6119,6 +6223,18 @@
             "en": "Left and right spacing of the vertical dividing line of Steps"
         }
     },
+    "stepsTailVerticalTop": {
+        "cssKey": "steps-tail-vertical-top",
+        "desc": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
+        "override": "",
+        "value": "~`pxtorem(9)`",
+        "jsValue": "@getRem@9",
+        "staticValue": "0.18rem",
+        "localeDesc": {
+            "ch": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
+            "en": "Left and right spacing of the vertical dividing line of Steps"
+        }
+    },
     "stepsTitleFontSize": {
         "cssKey": "steps-title-font-size",
         "desc": "steps 标题文字大小",

package/tokens/app/arcodesign/default/index.less

@@ -517,6 +517,7 @@
 @steps-padding: ~`pxtorem(16)` 0;
 @steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
 @steps-tail-vertical-padding: ~`pxtorem(14)` 0;
+@steps-tail-vertical-top: ~`pxtorem(9)`;
 @steps-tail-standard-size: 1PX;
 @steps-tail-standard-background: @line-color;
 @steps-tail-finish-background: @primary-color;
@@ -543,8 +544,6 @@
 @steps-wait-description-color: @sub-info-font-color;
 @steps-icon-width: 18PX;
 @steps-icon-height: 18PX;
-@steps-custom-icon-width: 20PX;
-@steps-custom-icon-height: 20PX;
 @steps-dot-width: 8PX;
 @steps-dot-height: 8PX;
 @steps-dot-border-width: 1.5PX;
@@ -646,4 +645,20 @@
 @action-sheet-header-padding: ~`pxtorem(16)`;
 @action-sheet-title-font-size: ~`pxtorem(16)`;
 @action-sheet-sub-title-font-size: ~`pxtorem(14)`;
+@image-picker-font-size: ~`pxtorem(14)`;
+@image-picker-disabled-opacity: 0.7;
+@image-picker-border-radius: ~`pxtorem(2)`;
+@image-picker-add-background: #f7f8fa;
+@image-picker-add-icon-font-size: ~`pxtorem(30)`;
+@image-picker-add-icon-color: #d8d8d8;
+@image-picker-add-text-font-size: ~`pxtorem(12)`;
+@image-picker-add-text-color: @sub-info-font-color;
+@image-picker-error-color: #ffffff;
+@image-picker-error-background: rgba(0, 0, 0, 0.5);
+@image-picker-close-color: #ffffff;
+@image-picker-close-font-size: ~`pxtorem(12)`;
+@image-picker-close-width: ~`pxtorem(18)`;
+@image-picker-close-height: ~`pxtorem(18)`;
+@image-picker-close-background: rgba(0, 0, 0, 0.3);
+@image-picker-close-border-radius: 0 ~`pxtorem(2)`;
 

package/umd/circle-progress/index.js

@@ -94,11 +94,13 @@
       if (isRenderNormal) {
         if (progressColorStart) {
           return progressColorStart;
-        } else if (progressColorEnd) {
+        }
+
+        if (progressColorEnd) {
           return progressColorEnd;
-        } else {
-          return progressColor;
         }
+
+        return progressColor;
       }
     }, [progressColorStart, progressColorEnd, progressColor]);
 

package/umd/collapse/collapse.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../context-provider", "@arco-design/mobile-utils", "../_helpers", "../icon/IconArrowDown", "./utils"], factory);
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers", "../icon/IconArrowDown", "./utils"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../context-provider"), require("@arco-design/mobile-utils"), require("../_helpers"), require("../icon/IconArrowDown"), require("./utils"));
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"), require("../icon/IconArrowDown"), require("./utils"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.contextProvider, global.mobileUtils, global._helpers, global.IconArrowDown, global.utils);
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global._helpers, global.IconArrowDown, global.utils);
     global.collapse = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _contextProvider, _mobileUtils, _helpers, _IconArrowDown, _utils) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _helpers, _IconArrowDown, _utils) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/umd/grid/index.js

@@ -57,14 +57,21 @@
     });
 
     var getRows = function getRows(prefix, rowsData, rows, row) {
-      var fakeGrids = new Array(!isSliding && columns && rowsData.length % columns ? columns - rowsData.length % columns : 0).fill('');
-      var widthStyle = {
-        minWidth: 1 / columns * 100 + "%"
-      };
+      var placeholders = !isSliding && rowsData.length % columns;
+      var renderData = rowsData;
+
+      if (placeholders) {
+        var fakeGrids = new Array(columns - placeholders).fill({
+          img: null,
+          title: ''
+        });
+        renderData = rowsData.concat(fakeGrids);
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefix + "-rows",
         key: row
-      }, rowsData.map(function (item, index) {
+      }, renderData.map(function (item, index) {
         var img = item.img,
             title = item.title,
             content = item.content,
@@ -78,7 +85,7 @@
         }
 
         var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.y) || 0;
-        var rowLen = rowsData.length;
+        var rowLen = renderData.length;
         var marginRight = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.x) || 0;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: index,
@@ -107,12 +114,6 @@
         }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/_react.default.createElement("i", {
           className: "horizontal-border"
         }) : null);
-      }), fakeGrids.map(function (_, i) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _mobileUtils.cls)(prefix + "-rows-item fake-col"),
-          key: i,
-          style: widthStyle
-        });
       }));
     };
 

package/umd/image/index.d.ts

@@ -14,7 +14,6 @@ export interface ImageProps {
     /**
      * 指定图片状态，staticLabel=false时有效
      * @en The specified image state, valid when staticLabel=false
-     * @default "init"
      */
     status?: ImageStatus;
     /**

package/umd/image/index.js

@@ -59,8 +59,7 @@
     var loadingImageRef = (0, _react.useRef)(null);
     var style = props.style,
         className = props.className,
-        _props$status = props.status,
-        status = _props$status === void 0 ? 'init' : _props$status,
+        status = props.status,
         src = props.src,
         width = props.width,
         height = props.height,
@@ -100,6 +99,7 @@
     var isPreview = Boolean(fit.indexOf('preview') >= 0);
     var actualBoxWidth = boxWidth || windowWidth;
     var actualBoxHeight = boxHeight || windowHeight;
+    var validStatus = status === undefined ? imageStatus : status;
     var attrs = (0, _react.useMemo)(function () {
       var imageStyle = {};
 
@@ -275,7 +275,9 @@
     }
 
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
-      var prefixCls = _ref.prefixCls;
+      var prefixCls = _ref.prefixCls,
+          _ref$locale = _ref.locale,
+          locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-image all-border-box", {
           preview: isPreview
@@ -290,7 +292,7 @@
       }, bottomOverlap || /*#__PURE__*/_react.default.createElement("div", {
         className: "image-placeholder"
       })) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)('image-container', imageStatus, {
+        className: (0, _mobileUtils.cls)('image-container', validStatus, {
           animate: Boolean(animateDuration),
           'static-label': staticLabel
         }),
@@ -305,7 +307,7 @@
           return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
         },
         onError: handleStaticImageError
-      })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/_react.default.createElement("div", {
+      })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-loading-container",
         style: {
           borderRadius: radius
@@ -317,7 +319,7 @@
         className: "loading-icon",
         radius: 8.5,
         stroke: 3
-      }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/_react.default.createElement("div", {
+      }))) : null, showError && validStatus === 'error' ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-error-container",
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -328,7 +330,7 @@
         }
       }, errorArea || /*#__PURE__*/_react.default.createElement("div", {
         className: "image-retry-load"
-      }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/_react.default.createElement("div", {
+      }, locale.Image.loadError)) : null, topOverlap ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-top-overlap",
         style: {
           borderRadius: radius

package/umd/image-picker/add-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AddIcon(): JSX.Element;

package/umd/image-picker/add-icon.js

@@ -0,0 +1,35 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.addIcon = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = AddIcon;
+  _react = _interopRequireDefault(_react);
+
+  function AddIcon() {
+    return /*#__PURE__*/_react.default.createElement("svg", {
+      width: "30",
+      height: "30",
+      viewBox: "0 0 30 30",
+      fill: "none"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.5 0C14.2239 0 14 0.223857 14 0.5V14H0.5C0.223858 14 0 14.2239 0 14.5V15.5C0 15.7761 0.223857 16 0.5 16H14V29.5C14 29.7761 14.2239 30 14.5 30H15.5C15.7761 30 16 29.7761 16 29.5V16H29.5C29.7761 16 30 15.7761 30 15.5V14.5C30 14.2239 29.7761 14 29.5 14H16V0.5C16 0.223858 15.7761 0 15.5 0H14.5Z",
+      fill: "#C9CDD4"
+    }));
+  }
+});

package/umd/image-picker/demo/style/css/mobile.css

@@ -0,0 +1,40 @@
+#demo-image-picker .demo-space {
+  font-size: 14px;
+  line-height: 1;
+  margin: 8px 0;
+}
+#demo-image-picker #demo-order-5 .custom-delete {
+  top: 4px;
+  right: 4px;
+  font-size: 18px;
+  position: absolute;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  line-height: 16px;
+  text-align: center;
+}
+#demo-image-picker #demo-order-5 .custom-delete-bg {
+  background-color: #0000004d;
+}
+#demo-image-picker #demo-order-6 .loading,
+#demo-image-picker #demo-order-6 .loading1,
+#demo-image-picker #demo-order-6 .load-error,
+#demo-image-picker #demo-order-6 .load-error1 {
+  background: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  line-height: 1.5;
+  font-size: 14px;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+}

package/umd/image-picker/demo/style/mobile.less

@@ -0,0 +1,42 @@
+@import '../../../../style/mixin.less';
+
+#demo-image-picker {
+    .demo-space{
+        font-size: 14px;
+        line-height: 1;
+        margin: 8px 0;
+    }
+    #demo-order-5 {
+        .custom-delete {
+            top: 4px;
+            right: 4px;
+            font-size: 18px;
+            position: absolute;
+            border-radius: 50%;
+            width: 18px;
+            height: 18px;
+            line-height: 16px;
+            text-align: center;
+        }
+        .custom-delete-bg {
+            background-color: #0000004d;
+        }
+    }
+    #demo-order-6 {
+        .loading,
+        .loading1,
+        .load-error,
+        .load-error1 {
+            background: rgba(0, 0, 0, 0.5);
+            text-align: center;
+            line-height: 1.5;
+            font-size: 14px;
+            color: #fff;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}