@arco-design/mobile-react 2.22.0 → 2.22.3

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

@@ -528,9 +528,13 @@ var tokens = {
   "notify-font-size": "0.28rem",
   "notify-min-height": "0.72rem",
   "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-border-radius": "2PX",
+  "steps-tail-horizontal-gutter": "18PX",
+  "steps-tail-vertical-gutter": "14PX",
+  "steps-tail-horizontal-padding": "0 18PX",
+  "steps-tail-vertical-padding": "14PX 0",
+  "steps-tail-horizontal-left": "9PX",
+  "steps-tail-vertical-top": "9PX",
   "steps-tail-standard-size": "1PX",
   "steps-tail-standard-background": "#e5e6eb",
   "steps-tail-finish-background": "#165dff",

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

@@ -6527,6 +6527,18 @@
             "en": "Custom icon color of Steps in processing state"
         }
     },
+    "stepsTailBorderRadius": {
+        "cssKey": "steps-tail-border-radius",
+        "desc": "steps 分割线圆角值",
+        "override": "",
+        "value": "2PX",
+        "jsValue": "2PX",
+        "staticValue": "2PX",
+        "localeDesc": {
+            "ch": "steps 分割线圆角值",
+            "en": "Border radius of steps dividing"
+        }
+    },
     "stepsTailFinishBackground": {
         "cssKey": "steps-tail-finish-background",
         "desc": "steps 步骤分割线完成态颜色",
@@ -6539,13 +6551,37 @@
             "en": "Steps dividing line color in finish state"
         }
     },
+    "stepsTailHorizontalGutter": {
+        "cssKey": "steps-tail-horizontal-gutter",
+        "desc": "steps 水平分割线与图标中心点的距离",
+        "override": "",
+        "value": "18PX",
+        "jsValue": "18PX",
+        "staticValue": "18PX",
+        "localeDesc": {
+            "ch": "steps 水平分割线与图标中心点的距离",
+            "en": "The distance between the horizontal dividing line and the center point of the icon"
+        }
+    },
+    "stepsTailHorizontalLeft": {
+        "cssKey": "steps-tail-horizontal-left",
+        "desc": "steps 水平分割线的向右偏移距离，一般是 stepsIconHeight 值的一半",
+        "override": "",
+        "value": "9PX",
+        "jsValue": "9PX",
+        "staticValue": "9PX",
+        "localeDesc": {
+            "ch": "steps 水平分割线的向右偏移距离，一般是 stepsIconHeight 值的一半",
+            "en": "The offset distance to the right of the horizontal dividing line of steps, generally half the value of stepsIconHeight"
+        }
+    },
     "stepsTailHorizontalPadding": {
         "cssKey": "steps-tail-horizontal-padding",
         "desc": "steps 水平分割线左右间距",
         "override": "",
-        "value": "0 ~`pxtorem(18)`",
-        "jsValue": "0 @getRem@18",
-        "staticValue": "0 0.36rem",
+        "value": "0 @steps-tail-horizontal-gutter",
+        "jsValue": "0 @global@stepsTailHorizontalGutter",
+        "staticValue": "0 18PX",
         "localeDesc": {
             "ch": "steps 水平分割线左右间距",
             "en": "Left and right spacing of the horizontal dividing line of Steps"
@@ -6575,13 +6611,25 @@
             "en": "Steps dividing line thickness"
         }
     },
+    "stepsTailVerticalGutter": {
+        "cssKey": "steps-tail-vertical-gutter",
+        "desc": "steps 垂直分割线与图标中心点的距离",
+        "override": "",
+        "value": "14PX",
+        "jsValue": "14PX",
+        "staticValue": "14PX",
+        "localeDesc": {
+            "ch": "steps 垂直分割线与图标中心点的距离",
+            "en": "The distance between the vertical dividing line and the center point of the icon"
+        }
+    },
     "stepsTailVerticalPadding": {
         "cssKey": "steps-tail-vertical-padding",
         "desc": "steps 垂直分割线上下间距",
         "override": "",
-        "value": "~`pxtorem(14)` 0",
-        "jsValue": "@getRem@14 0",
-        "staticValue": "0.28rem 0",
+        "value": "@steps-tail-vertical-gutter 0",
+        "jsValue": "@global@stepsTailVerticalGutter 0",
+        "staticValue": "14PX 0",
         "localeDesc": {
             "ch": "steps 垂直分割线上下间距",
             "en": "Left and right spacing of the vertical dividing line of Steps"
@@ -6591,12 +6639,12 @@
         "cssKey": "steps-tail-vertical-top",
         "desc": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
         "override": "",
-        "value": "~`pxtorem(9)`",
-        "jsValue": "@getRem@9",
-        "staticValue": "0.18rem",
+        "value": "9PX",
+        "jsValue": "9PX",
+        "staticValue": "9PX",
         "localeDesc": {
             "ch": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
-            "en": "Left and right spacing of the vertical dividing line of Steps"
+            "en": "The offset distance to the bottom of the vertical dividing line of steps, generally half the value of stepsIconHeight"
         }
     },
     "stepsTitleFontSize": {

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

@@ -516,9 +516,13 @@
 @notify-font-size: ~`pxtorem(14)`;
 @notify-min-height: ~`pxtorem(36)`;
 @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-border-radius: 2PX;
+@steps-tail-horizontal-gutter: 18PX;
+@steps-tail-vertical-gutter: 14PX;
+@steps-tail-horizontal-padding: 0 @steps-tail-horizontal-gutter;
+@steps-tail-vertical-padding: @steps-tail-vertical-gutter 0;
+@steps-tail-horizontal-left: 9PX;
+@steps-tail-vertical-top: 9PX;
 @steps-tail-standard-size: 1PX;
 @steps-tail-standard-background: @line-color;
 @steps-tail-finish-background: @primary-color;

package/tokens/mixin/index.less

@@ -38,7 +38,7 @@
     }
 }
 
-.text-medium-var(@color, @stroke: 0.3PX) {
+.text-medium-var(@color: currentColor, @stroke: 0.3PX) {
     .text-medium(@@color, @stroke);
     & when (@use-css-vars = 1) {
         .text-medium(var(~"--@{color}", @@color), @stroke);

package/tools/flexible.js

@@ -1,82 +1,101 @@
-"use strict";
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(["exports"], factory);
+    } else if (typeof exports !== "undefined") {
+        factory(exports);
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory(mod.exports);
+        global.setRootPixel = mod.exports.default;
+    }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+
+    "use strict";
 
-function setRootPixel(base, sketch, max) {
-    var baseFontSize = base || 50;
-    var sketchWidth = sketch || 375;
-    var maxFontSize = max || 64;
-    var defaultFontSize = 0;
+    _exports.__esModule = true;
+    _exports.default = void 0;
 
-    function getDefaultFontSize() {
-        if (defaultFontSize) {
+    function setRootPixel(base, sketch, max) {
+        var baseFontSize = base || 50;
+        var sketchWidth = sketch || 375;
+        var maxFontSize = max || 64;
+        var defaultFontSize = 0;
+
+        function getDefaultFontSize() {
+            if (defaultFontSize) {
+                return defaultFontSize;
+            }
+
+            document.documentElement.style.fontSize = '';
+            var temp = document.createElement('div');
+            temp.style.cssText = 'width:1rem;display:none';
+            document.head.appendChild(temp);
+            defaultFontSize = +window.getComputedStyle(temp, null).getPropertyValue('width').replace('px', '') || 16;
+            document.head.removeChild(temp);
             return defaultFontSize;
         }
 
-        document.documentElement.style.fontSize = '';
-        var temp = document.createElement('div');
-        temp.style.cssText = 'width:1rem;display:none';
-        document.head.appendChild(temp);
-        defaultFontSize = +window.getComputedStyle(temp, null).getPropertyValue('width').replace('px', '') || 16;
-        document.head.removeChild(temp);
-        return defaultFontSize;
-    }
+        function getQuery(name) {
+            return (new RegExp("[?&]".concat(name, "=([^&#\\b]+)")).exec(location.search || '') || [])[1];
+        }
 
-    function getQuery(name) {
-        return (new RegExp("[?&]".concat(name, "=([^&#\\b]+)")).exec(location.search || '') || [])[1];
-    }
+        function setRootFontSize() {
+            var widthQueryKey = '';
+            var rem2px = baseFontSize;
+            var clientWidth;
 
-    function setRootFontSize() {
-        var widthQueryKey = '';
-        var rem2px = baseFontSize;
-        var clientWidth;
-
-        if (widthQueryKey && +getQuery(widthQueryKey)) {
-            clientWidth = +getQuery(widthQueryKey);
-        } else {
-            clientWidth = window.innerWidth && document.documentElement.clientWidth
-                ? Math.min(window.innerWidth, document.documentElement.clientWidth)
-                : window.innerWidth
-                    || document.documentElement.clientWidth
-                    || document.body && document.body.clientWidth
-                    || sketchWidth;
+            if (widthQueryKey && +getQuery(widthQueryKey)) {
+                clientWidth = +getQuery(widthQueryKey);
+            } else {
+                clientWidth = window.innerWidth && document.documentElement.clientWidth
+                    ? Math.min(window.innerWidth, document.documentElement.clientWidth)
+                    : window.innerWidth
+                        || document.documentElement.clientWidth
+                        || document.body && document.body.clientWidth
+                        || sketchWidth;
+            }
+            var htmlFontSizePx = clientWidth / sketchWidth * rem2px;
+            htmlFontSizePx = Math.min(htmlFontSizePx, maxFontSize);
+            window.ROOT_FONT_SIZE = htmlFontSizePx;
+            document.documentElement.style.fontSize = "".concat(htmlFontSizePx / getDefaultFontSize() * 100, "%");
         }
-        var htmlFontSizePx = clientWidth / sketchWidth * rem2px;
-        htmlFontSizePx = Math.min(htmlFontSizePx, maxFontSize);
-        window.ROOT_FONT_SIZE = htmlFontSizePx;
-        document.documentElement.style.fontSize = "".concat(htmlFontSizePx / getDefaultFontSize() * 100, "%");
-    }
 
-    function adjust(immediate) {
-        if (immediate) {
-            setRootFontSize();
-            return;
+        function adjust(immediate) {
+            if (immediate) {
+                setRootFontSize();
+                return;
+            }
+
+            setTimeout(setRootFontSize, 30);
         }
 
-        setTimeout(setRootFontSize, 30);
-    }
+        function removeRootPixel() {
+            document.documentElement.style.fontSize = '';
+            window.removeEventListener('resize', adjust, false);
+            if ('onorientationchange' in window) {
+                window.removeEventListener('orientationchange', adjust, false);
+            }
+        }
 
-    function removeRootPixel() {
-        document.documentElement.style.fontSize = '';
-        window.removeEventListener('resize', adjust, false);
-        if ('onorientationchange' in window) {
-            window.removeEventListener('orientationchange', adjust, false);
+        if (window.isResponsive === false) {
+            document.documentElement.style.fontSize = "".concat(baseFontSize, "px");
+            return function () {
+                document.documentElement.style.fontSize = '';
+            };
         }
-    }
 
-    if (window.isResponsive === false) {
-        document.documentElement.style.fontSize = "".concat(baseFontSize, "px");
-        return function () {
-            document.documentElement.style.fontSize = '';
-        };
-    }
+        adjust(true);
+        window.addEventListener('resize', adjust, false);
 
-    adjust(true);
-    window.addEventListener('resize', adjust, false);
+        if ('onorientationchange' in window) {
+            window.addEventListener('orientationchange', adjust, false);
+        }
 
-    if ('onorientationchange' in window) {
-        window.addEventListener('orientationchange', adjust, false);
+        return removeRootPixel;
     }
 
-    return removeRootPixel;
-}
+    _exports.default = setRootPixel;
 
-module.exports = setRootPixel;
+});

package/umd/action-sheet/style/css/index.css

@@ -46,8 +46,8 @@
 .arco-action-sheet-title.android,
 .arco-action-sheet-title.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #1d2129;
-  text-stroke: 0.3PX #1d2129;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-action-sheet-sub-title {
   color:  #86909c ;

package/umd/action-sheet/style/index.less

@@ -11,7 +11,7 @@
 
     &-title {
         .use-var(font-size, action-sheet-title-font-size);
-        .text-medium-var(font-color);
+        .text-medium();
     }
 
     &-sub-title {

package/umd/carousel/index.d.ts

@@ -66,6 +66,12 @@ export interface CarouselProps {
      * @default true
      */
     autoPlay?: boolean;
+    /**
+     * 自动播放方向
+     * @en Direction when playing auto
+     * @default "normal"
+     */
+    autoPlayDirection?: 'normal' | 'reverse';
     /**
      * 是否响应手势滑动
      * @en Whether to respond to gesture swipe

package/umd/carousel/index.js

@@ -47,6 +47,8 @@
         loop = _props$loop === void 0 ? true : _props$loop,
         _props$autoPlay = props.autoPlay,
         autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
+        _props$autoPlayDirect = props.autoPlayDirection,
+        autoPlayDirection = _props$autoPlayDirect === void 0 ? 'normal' : _props$autoPlayDirect,
         _props$swipeable = props.swipeable,
         swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
         _props$stayDuration = props.stayDuration,
@@ -169,7 +171,7 @@
         transformsRef = _useRefState4[1],
         setTransforms = _useRefState4[2];
 
-    var _useRefState5 = (0, _helpers.useRefState)('left'),
+    var _useRefState5 = (0, _helpers.useRefState)(autoPlayDirection === 'reverse' && autoPlay ? 'right' : 'left'),
         direction = _useRefState5[0],
         directionRef = _useRefState5[1],
         setStateDirection = _useRefState5[2];
@@ -406,7 +408,7 @@
       return function () {
         clear();
       };
-    }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval]);
+    }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval, autoPlayDirection]);
     (0, _helpers.useUpdateEffect)(function () {
       if (currentIndex !== void 0) {
         jumpTo(currentIndex);
@@ -546,7 +548,7 @@
       var changedIndex = newIndex !== oldIndex ? getShownIndex(newIndex) : -1;
 
       if (autoJump) {
-        setDirection('left');
+        setDirection(autoPlayDirection === 'reverse' ? 'right' : 'left');
       } else if (newIndex === indexRef.current) {
         setDirection(distanceRef.current > 0 ? 'right' : 'left');
       } else {
@@ -600,7 +602,7 @@
       }
 
       timerRef.current = delayTimeout(function () {
-        jumpTo(indexRef.current + 1);
+        jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
       }, stayDuration);
     }
 

package/umd/dialog/style/css/index.css

@@ -126,8 +126,8 @@
 .arco-dialog-header.ios.android,
 .arco-dialog-header.ios.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #1d2129;
-  text-stroke: 0.3PX #1d2129;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-dialog-header.ios.only-title {
   padding-bottom:  0.4rem ;

package/umd/dialog/style/index.less

@@ -105,7 +105,7 @@
             .use-var(padding-right, dialog-ios-horizontal-padding);
             .use-var(font-size, dialog-header-ios-font-size);
             .use-var(line-height, dialog-header-ios-line-height);
-            .text-medium-var(dialog-header-ios-color);
+            .text-medium();
 
             &.only-title {
                 .use-var(padding-bottom, dialog-ios-vertical-padding);

package/umd/pull-refresh/android-pull-refresh.js

@@ -37,6 +37,7 @@
         locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale;
 
     var className = props.className,
+        style = props.style,
         children = props.children,
         _props$loosingText = props.loosingText,
         loosingText = _props$loosingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
@@ -273,6 +274,7 @@
       className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh all-border-box is-android", className, {
         'is-disabled': (disabled || !touching && useHideAsNestedScroll) && status !== _model.PullRefreshStatus.Loading
       }),
+      style: style,
       ref: domRef
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-place"),

package/umd/pull-refresh/ios-pull-refresh.js

@@ -35,6 +35,7 @@
 
     var animationRef = (0, _react.useRef)(0);
     var className = props.className,
+        style = props.style,
         children = props.children,
         _props$loadingText = props.loadingText,
         loadingText = _props$loadingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
@@ -214,9 +215,9 @@
         'is-disabled': disabled || !touching && useHideAsNestedScroll
       }),
       ref: domRef,
-      style: contentHeight > 0 ? {
+      style: contentHeight > 0 ? (0, _extends2.default)({
         height: contentHeight
-      } : {}
+      }, style || {}) : style
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-content-wrapper")
     }, /*#__PURE__*/_react.default.createElement("div", {

package/umd/pull-refresh/model.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM
@@ -32,9 +32,13 @@ export interface PullRefreshBasicProps {
     /**
      * 样式类名
      * @en Custom classname
-     * @default ""
      */
     className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
     /**
      * 是否禁用
      * @en Whether to be disabled

package/umd/steps/demo/style/css/mobile.css

@@ -30,7 +30,10 @@
 #demo-steps #demo-order-7 .process-title-color-with-config {
   color: #FFB400;
 }
-#demo-steps #demo-order-7 .finish-tail-color-with-config:after {
+#demo-steps #demo-order-7 .finish-tail-color-with-config::before,
+#demo-steps #demo-order-7 .finish-tail-color-with-config::after,
+#demo-steps #demo-order-7 .process-tail-color-with-config::before,
+#demo-steps #demo-order-7 .error-tail-color-with-config::before {
   background: #FFB400;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
@@ -57,7 +60,10 @@
 #demo-steps #demo-order-8 .demo-svg .process-title-color-with-config {
   color: #165DFF;
 }
-#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config:after {
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::before,
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::after,
+#demo-steps #demo-order-8 .demo-svg .process-tail-color-with-config::before,
+#demo-steps #demo-order-8 .demo-svg .error-tail-color-with-config::before {
   background: #165DFF;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {

package/umd/steps/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "iconType"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "align" | "iconType"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;

package/umd/steps/index.js

@@ -45,6 +45,7 @@
         children = props.children,
         _props$direction = props.direction,
         direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+        userSetAlign = props.align,
         _props$iconType = props.iconType,
         iconType = _props$iconType === void 0 ? 'number' : _props$iconType,
         current = props.current,
@@ -55,6 +56,8 @@
         items = props.items,
         onClick = props.onClick,
         onChange = props.onChange;
+    var defaultAlign = direction === 'vertical' ? 'start' : 'center';
+    var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
 
     var _useState = (0, _react.useState)(Number(defaultIndex)),
         innerIndex = _useState[0],
@@ -90,11 +93,12 @@
           direction: direction,
           index: index,
           status: activeIndex === index ? status : void 0,
+          align: align,
           changeIndex: changeIndex
         },
         key: index
       }, child);
-    }, [iconType, activeIndex, direction]);
+    }, [iconType, activeIndex, direction, align]);
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement("div", {

package/umd/steps/step.js

@@ -33,9 +33,11 @@
         _useContext$index = _useContext.index,
         index = _useContext$index === void 0 ? 0 : _useContext$index,
         contextStatus = _useContext.status,
+        contextAlign = _useContext.align,
         changeIndex = _useContext.changeIndex;
 
     var status = props.status || contextStatus;
+    var align = props.align || contextAlign;
     var domRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
@@ -74,12 +76,12 @@
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: domRef,
-        className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", currentStatus, direction, iconType),
+        className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", prefixCls + "-steps-item-align-" + align, currentStatus, direction, iconType),
         onClick: function onClick() {
           return changeIndex(index);
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
+        className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", prefixCls + "-steps-item-tail-status-" + currentStatus, prefixCls + "-steps-item-tail-align-" + align, currentStatus + "-tail-color-with-config")
       }), icon ? /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
       }, icon) : /*#__PURE__*/_react.default.createElement("div", {
@@ -87,7 +89,7 @@
       }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-icon-dot")
       })), title || description ? /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content")
+        className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
       }, title ? /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
       }, title) : null, description ? /*#__PURE__*/_react.default.createElement("div", {