@para-ui/core 3.0.86 → 4.0.0-beta

package/SingleBox/index.js

@@ -1,6 +1,6 @@
-import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { TextField } from '../TextField/index.js';
@@ -8,7 +8,7 @@ import Label from '../Label/index.js';
 import HelperText from '../HelperText/index.js';
 import PlusCircleF from '@para-ui/icons/PlusCircleF';
 import Delete from '@para-ui/icons/Delete';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
@@ -16,17 +16,18 @@ import '../_verture/tslib.es6-55ed4bd2.js';
 import '@paraview/lib';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';
-import '@para-ui/icons/CloseCircle';
+import '@para-ui/icons/CloseCircleF';
 import '../AutoTips/index.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
+import '@para-ui/icons/Forbid';
 import '../Loading/index.js';
 import '@para-ui/icons/LoadingF';
 import '../_verture/useGlobalProps-1b846a65.js';
 import '@para-ui/core/GlobalContext';
-import '../_verture/index-77f9e0fb.js';
+import '../_verture/index-e9007d6a.js';
 import 'rc-dropdown';
 import '../_verture/usePopupContainer-87febeb9.js';
 import 'dayjs';
@@ -46,7 +47,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-single-box {\n  display: inline-block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item {\n  display: flex;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item .content-box {\n  flex: 1;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item .content-box .single-box-text-field .paraui-v3-helper-text {\n  min-height: 12px;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 12px;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box > .single-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-v3-single-box > .single-box-add > svg {\n  font-size: 16px;\n  color: rgb(54, 102, 214);\n  margin-right: 8px;\n}\n.paraui-v3-single-box > .single-box-add:hover {\n  border-color: rgba(54, 102, 214, 0.4);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-content > .single-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-content > .single-box-content-item > .opera-box {\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 36px;\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-add {\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add {\n  border-color: rgba(171, 176, 185, 0.4);\n  cursor: not-allowed;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add > svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.4);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-single-box {\n  display: inline-block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v4-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item {\n  display: flex;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item .content-box {\n  flex: 1;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item .content-box .single-box-text-field .paraui-v4-helper-text {\n  min-height: 10px;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box > .single-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgb(212, 218, 227);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgb(247, 248, 250);\n  color: rgb(46, 101, 230);\n  font-size: 14px;\n}\n.paraui-v4-single-box > .single-box-add > svg {\n  font-size: 16px;\n  color: rgb(46, 101, 230);\n  margin-right: 10px;\n}\n.paraui-v4-single-box > .single-box-add:hover {\n  border-color: rgb(87, 131, 235);\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add {\n  border-color: rgb(212, 218, 227);\n  cursor: not-allowed;\n  background-color: rgb(247, 248, 250);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add > svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add:hover {\n  border-color: rgb(212, 218, 227);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-content > .single-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-add {\n  height: 32px;\n}";
 styleInject(css_248z);
 
 var SingleBox = function SingleBox(props) {

package/Slider/index.js

@@ -1,16 +1,16 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
-import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
+import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
+import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
 import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import RcSlider, { Range, SliderTooltip, Handle } from 'rc-slider';
 import clsx from 'clsx';
-import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-0d9802f7.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/4 下午2:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-slider {\n  position: relative;\n  height: 8px;\n  padding: 0;\n  width: 100%;\n  border-radius: 4px;\n  touch-action: none;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.paraui-v3-slider .component-slider-rail {\n  position: absolute;\n  width: 100%;\n  background-color: rgba(171, 176, 185, 0.2);\n  height: 8px;\n  border-radius: 4px;\n}\n.paraui-v3-slider .component-slider-track {\n  position: absolute;\n  left: 0;\n  height: 8px;\n  border-radius: 4px;\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-handle {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  margin-top: -4px;\n  border-radius: 50%;\n  border: solid 2px rgb(54, 102, 214);\n  background-color: rgb(255, 255, 255);\n  touch-action: pan-x;\n}\n.paraui-v3-slider .component-slider-handle-dragging {\n  border-color: rgb(54, 102, 214);\n  box-shadow: 0 0 5px rgba(54, 102, 214, 0.2);\n  outline: 2px solid rgba(54, 102, 214, 0.2);\n}\n.paraui-v3-slider .component-slider-handle:focus {\n  outline: none;\n}\n.paraui-v3-slider .component-slider-handle-click-focused:focus {\n  border-color: rgb(54, 102, 214);\n  box-shadow: unset;\n}\n.paraui-v3-slider .component-slider-handle:hover {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-handle:active {\n  border-color: rgb(54, 102, 214);\n  box-shadow: 0 0 5px rgba(54, 102, 214, 0.2);\n  outline: 2px solid rgba(54, 102, 214, 0.2);\n  cursor: grabbing;\n}\n.paraui-v3-slider .component-slider-mark {\n  position: absolute;\n  top: 18px;\n  left: 0;\n  width: 100%;\n  font-size: 12px;\n}\n.paraui-v3-slider .component-slider-mark-text {\n  position: absolute;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  cursor: pointer;\n  color: #999;\n}\n.paraui-v3-slider .component-slider-mark-text-active {\n  color: #666;\n}\n.paraui-v3-slider .component-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 8px;\n  background: transparent;\n}\n.paraui-v3-slider .component-slider-dot {\n  position: absolute;\n  bottom: -2px;\n  margin-left: -4px;\n  width: 12px;\n  height: 12px;\n  border: solid 2px rgba(171, 176, 185, 0.4);\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n.paraui-v3-slider .component-slider-dot-active {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-dot-reverse {\n  margin-right: -4px;\n}\n.paraui-v3-slider.component-slider-disabled {\n  background-color: rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-track {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-handle, .paraui-v3-slider.component-slider-disabled .component-slider-dot {\n  border-color: #ccc;\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n  cursor: not-allowed;\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-mark-text, .paraui-v3-slider.component-slider-disabled .component-slider-dot {\n  cursor: not-allowed !important;\n}\n.paraui-v3-slider.component-slider-vertical {\n  width: 14px;\n  height: 100%;\n  padding: 0 5px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-rail {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-track {\n  left: 5px;\n  bottom: 0;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-handle {\n  margin-left: -6px;\n  touch-action: pan-y;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-mark {\n  top: 0;\n  left: 18px;\n  height: 100%;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-step {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot {\n  left: 0px;\n  margin-bottom: -4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot:first-child {\n  margin-bottom: -4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot:last-child {\n  margin-bottom: -4px;\n}\n\n.component-slider-tooltip {\n  position: absolute;\n  display: block;\n  left: -9999px;\n  top: -9999px;\n  max-width: 250px;\n  z-index: 1500;\n  visibility: visible;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.component-slider-tooltip-hidden {\n  display: none;\n}\n.component-slider-tooltip-inner {\n  min-width: 24px;\n  font-size: 14px;\n  line-height: 1;\n  color: rgba(46, 55, 67, 0.7);\n  text-align: center;\n  text-decoration: none;\n  background-color: transparent;\n  border-radius: 6px;\n  white-space: nowrap;\n  box-shadow: none;\n}\n.component-slider-tooltip-arrow {\n  display: none;\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-color: transparent;\n  border-style: solid;\n}\n.component-slider-tooltip-placement-top .component-slider-tooltip-arrow {\n  bottom: 4px;\n  left: 50%;\n  margin-left: -4px;\n  border-width: 4px 4px 0;\n  border-top-color: #6c6c6c;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-enter.component-slider-tooltip-zoom-down-enter-active, .component-slider-tooltip-zoom-down-appear.component-slider-tooltip-zoom-down-appear-active {\n  animation-name: sliderTooltipZoomDownIn;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-leave.component-slider-tooltip-zoom-down-leave-active {\n  animation-name: sliderTooltipZoomDownOut;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  transform: scale(0, 0);\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n@keyframes sliderTooltipZoomDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n  100% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n}\n@keyframes sliderTooltipZoomDownOut {\n  0% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/4 下午2:58\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-slider {\n  position: relative;\n  height: 2px;\n  padding: 0;\n  width: 100%;\n  border-radius: 4px;\n  touch-action: none;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.paraui-v4-slider .component-slider-rail {\n  position: absolute;\n  width: 100%;\n  background-color: rgb(234, 236, 241);\n  height: 2px;\n  border-radius: 4px;\n}\n.paraui-v4-slider .component-slider-track {\n  position: absolute;\n  left: 0;\n  height: 2px;\n  border-radius: 4px;\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-slider .component-slider-handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  cursor: pointer;\n  margin-top: -5px;\n  border-radius: 50%;\n  border: solid 2px rgb(46, 101, 230);\n  background-color: rgb(255, 255, 255);\n  touch-action: pan-x;\n}\n.paraui-v4-slider .component-slider-handle-dragging {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n}\n.paraui-v4-slider .component-slider-handle:focus {\n  outline: none;\n}\n.paraui-v4-slider .component-slider-handle-click-focused:focus {\n  border-color: rgb(46, 101, 230);\n  box-shadow: unset;\n}\n.paraui-v4-slider .component-slider-handle:hover {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n}\n.paraui-v4-slider .component-slider-handle:active {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n  cursor: grabbing;\n}\n.paraui-v4-slider .component-slider-mark {\n  position: absolute;\n  top: 8px;\n  left: 0;\n  width: 100%;\n  font-size: 12px;\n}\n.paraui-v4-slider .component-slider-mark-text {\n  position: absolute;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  cursor: pointer;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-slider .component-slider-mark-text-active {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-slider .component-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 2px;\n  background: transparent;\n}\n.paraui-v4-slider .component-slider-dot {\n  position: absolute;\n  bottom: -3px;\n  margin-left: -4px;\n  width: 8px;\n  height: 8px;\n  border: solid 2px rgb(234, 236, 241);\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n.paraui-v4-slider .component-slider-dot-active {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-slider .component-slider-dot-reverse {\n  margin-right: -4px;\n}\n.paraui-v4-slider.component-slider-disabled {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-handle {\n  box-shadow: none !important;\n  outline: none !important;\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-track {\n  background-color: rgb(161, 168, 179);\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-handle, .paraui-v4-slider.component-slider-disabled .component-slider-dot {\n  border-color: rgb(161, 168, 179);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n  cursor: not-allowed;\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-mark-text, .paraui-v4-slider.component-slider-disabled .component-slider-dot {\n  cursor: not-allowed !important;\n}\n.paraui-v4-slider.component-slider-vertical {\n  width: 14px;\n  height: 100%;\n  padding: 0 5px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-rail {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-track {\n  left: 5px;\n  bottom: 0;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-handle {\n  margin-left: -4px;\n  touch-action: pan-y;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-mark {\n  top: 0;\n  left: 18px;\n  height: 100%;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-step {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot {\n  left: 0px;\n  margin-bottom: -4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot:first-child {\n  margin-bottom: -4px;\n  margin-left: -2px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot:last-child {\n  margin-bottom: -4px;\n  margin-left: -2px;\n}\n\n.component-slider {\n  /*&-tooltip-arrow {\n    display: none;\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &-tooltip-placement-top &-tooltip-arrow {\n    bottom: 4px;\n    left: 50%;\n    margin-left: -4px;\n    border-width: 4px 4px 0;\n    border-top-color: #6c6c6c;\n  }*/\n}\n.component-slider-tooltip {\n  position: absolute;\n  display: block;\n  left: -9999px;\n  top: -9999px;\n  max-width: 250px;\n  z-index: 1500;\n  visibility: visible;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.component-slider-tooltip-hidden {\n  display: none;\n}\n.component-slider-tooltip-inner {\n  min-width: 24px;\n  font-size: 14px;\n  line-height: 1;\n  color: rgb(92, 101, 115);\n  text-align: center;\n  text-decoration: none;\n  background-color: transparent;\n  border-radius: 6px;\n  white-space: nowrap;\n  box-shadow: none;\n}\n.component-slider-tooltip-placement-top {\n  top: -18px !important;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-enter.component-slider-tooltip-zoom-down-enter-active, .component-slider-tooltip-zoom-down-appear.component-slider-tooltip-zoom-down-appear-active {\n  animation-name: sliderTooltipZoomDownIn;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-leave.component-slider-tooltip-zoom-down-leave-active {\n  animation-name: sliderTooltipZoomDownOut;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  transform: scale(0, 0);\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n@keyframes sliderTooltipZoomDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n  100% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n}\n@keyframes sliderTooltipZoomDownOut {\n  0% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n}";
 styleInject(css_248z);
 
 //slider 滑块

package/Status/index.d.ts

@@ -3,15 +3,16 @@
  * @date 2022/11/8 5:53 PM
  * @description 状态组件
  */
-import React, { FC, ReactNode } from 'react';
-import './index.scss';
+import React, { FC, ReactNode } from "react";
+import "./index.scss";
+type iconType = "success" | "error";
 export interface StatusProps {
     /** 文本 **/
-    text: ReactNode;
+    text?: ReactNode;
     /** 状态 */
-    status?: 'info' | 'success' | 'warning' | 'error' | 'completed';
+    status?: "info" | "success" | "warning" | "error" | "completed";
     /** 自定义状态图标 **/
-    icon?: ReactNode;
+    icon?: ReactNode | iconType;
     /** cls */
     className?: string;
     /** style */

package/Status/index.js

@@ -1,21 +1,44 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import CloseCircleF from '@para-ui/icons/CloseCircleF';
+import CompleteIcon from '@para-ui/icons/CheckCircleF';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/11/8 6:32 PM\n* @description 状态\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-status {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-status .status-ink {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n}\n.paraui-v3-status .status-ink:before {\n  content: \" \";\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n}\n.paraui-v3-status .status-icon {\n  display: inline-flex;\n  font-size: 16px;\n}\n.paraui-v3-status .status-icon svg {\n  font-size: 16px;\n}\n.paraui-v3-status .status-text {\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-status-info .status-ink {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-status-info .status-ink:before {\n  background-color: #3666d6;\n}\n.paraui-v3-status-success .status-ink {\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-v3-status-success .status-ink:before {\n  background-color: #53c31b;\n}\n.paraui-v3-status-warning .status-ink {\n  background-color: rgba(255, 161, 80, 0.05);\n}\n.paraui-v3-status-warning .status-ink:before {\n  background-color: #ffa150;\n}\n.paraui-v3-status-error .status-ink {\n  background-color: rgba(235, 96, 84, 0.05);\n}\n.paraui-v3-status-error .status-ink:before {\n  background-color: #eb6054;\n}\n.paraui-v3-status-completed .status-ink {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-status-completed .status-ink:before {\n  background-color: rgba(46, 55, 67, 0.4);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/11/8 6:32 PM\n* @description 状态\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-status {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v4-status .status-ink {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  width: 10px;\n  height: 10px;\n}\n.paraui-v4-status .status-ink:before {\n  content: \" \";\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n}\n.paraui-v4-status .status-icon {\n  display: inline-flex;\n  font-size: 500;\n}\n.paraui-v4-status .status-icon svg {\n  font-size: 500;\n}\n.paraui-v4-status .status-icon .status-icon-success {\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-status .status-icon .status-icon-error {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-status .status-text {\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-status-info .status-ink {\n  background: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-status-info .status-ink:before {\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-status-success .status-ink {\n  background-color: rgba(19, 191, 76, 0.1);\n}\n.paraui-v4-status-success .status-ink:before {\n  background-color: rgb(19, 191, 76);\n}\n.paraui-v4-status-warning .status-ink {\n  background-color: rgba(255, 147, 38, 0.1);\n}\n.paraui-v4-status-warning .status-ink:before {\n  background-color: rgb(255, 147, 38);\n}\n.paraui-v4-status-error .status-ink {\n  background-color: rgba(244, 66, 66, 0.1);\n}\n.paraui-v4-status-error .status-ink:before {\n  background-color: rgb(244, 66, 66);\n}\n.paraui-v4-status-completed .status-ink {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-status-completed .status-ink:before {\n  background-color: rgb(161, 168, 179);\n}";
 styleInject(css_248z);
 
 //状态
 var Status = function Status(props) {
   var text = props.text,
     _props$status = props.status,
-    status = _props$status === void 0 ? 'info' : _props$status,
+    status = _props$status === void 0 ? "info" : _props$status,
     icon = props.icon,
     className = props.className,
     style = props.style;
   //cls
   var makeCls = clsx("".concat($prefixCls, "-status"), className, status && !icon && "".concat($prefixCls, "-status-").concat(status));
+  // render Icon
+  var renderIcon = function renderIcon() {
+    if (icon) {
+      if (typeof icon === "string") {
+        switch (icon) {
+          case "success":
+            return jsx(CompleteIcon, {
+              className: "status-icon-".concat(icon)
+            });
+          case "error":
+            return jsx(CloseCircleF, {
+              className: "status-icon-".concat(icon)
+            });
+          default:
+            return null;
+        }
+      } else {
+        return icon;
+      }
+    }
+  };
   return jsxs("span", Object.assign({
     className: makeCls,
     style: style
@@ -23,7 +46,7 @@ var Status = function Status(props) {
     children: [icon ? jsx("span", Object.assign({
       className: "status-icon"
     }, {
-      children: icon
+      children: renderIcon()
     })) : jsx("span", {
       className: "status-ink"
     }), jsx("span", Object.assign({

package/Stepper/index.d.ts

@@ -3,26 +3,25 @@
  * @date 2022/6/7 下午4:02
  * @description stepper
  */
-import React from 'react';
-import RcSteps from 'rc-steps';
-import './index.scss';
+import React from "react";
+import RcSteps from "rc-steps";
+import "./index.scss";
 type StepItem = string | {
     label?: React.ReactNode;
     icon?: React.ReactNode;
-    [name: string]: any;
+    description?: React.ReactNode;
+    [name: string]: any /** 步骤状态 */;
 };
 export interface StepperProps {
     /** cls */
     className?: string;
     /** 当前步骤 */
     current?: number;
+    /** 发生err的步骤 */
+    errorStep?: number;
     /** 指定步骤条方向 */
-    direction?: 'horizontal' | 'vertical';
+    direction?: "horizontal" | "vertical";
     style?: React.CSSProperties;
-    /** 数字或图标 */
-    mode?: 'number' | 'icon';
-    /** 当前步骤 */
-    activeStep?: number;
     /**
      * 步骤条数据
      * number : Array<string>
@@ -41,7 +40,7 @@ export interface StepProps {
     /** 点击步骤时触发 */
     onClick?: React.MouseEventHandler<HTMLElement>;
     /** 步骤状态 */
-    status?: 'wait' | 'process' | 'finish' | 'error';
+    status?: "wait" | "process" | "finish" | "error";
     /** 禁用点击 */
     disabled?: boolean;
     /** 标题 */

package/Stepper/index.js

@@ -1,4 +1,4 @@
-import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
+import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
 import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
@@ -13,52 +13,79 @@ import Seven from '@para-ui/icons/Seven';
 import Eight from '@para-ui/icons/Eight';
 import Nine from '@para-ui/icons/Nine';
 import Check from '@para-ui/icons/Check';
-import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-0d9802f7.js';
 import clsx from 'clsx';
+import AutoTips from '../AutoTips/index.js';
+import CloseIcon from '@para-ui/icons/Close';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/slicedToArray-a8206399.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Forbid';
+import '@paraview/lib';
 
 //默认图标
 var Icons = {
-  1: jsx(One, {}),
-  2: jsx(Two, {}),
-  3: jsx(Three, {}),
-  4: jsx(Four, {}),
-  5: jsx(Five, {}),
-  6: jsx(Six, {}),
-  7: jsx(Seven, {}),
-  8: jsx(Eight, {}),
-  9: jsx(Nine, {}),
-  'done': jsx(Check, {})
+  1: jsx(One, {
+    size: 'medium'
+  }),
+  2: jsx(Two, {
+    size: 'medium'
+  }),
+  3: jsx(Three, {
+    size: 'medium'
+  }),
+  4: jsx(Four, {
+    size: 'medium'
+  }),
+  5: jsx(Five, {
+    size: 'medium'
+  }),
+  6: jsx(Six, {
+    size: 'medium'
+  }),
+  7: jsx(Seven, {
+    size: 'medium'
+  }),
+  8: jsx(Eight, {
+    size: 'medium'
+  }),
+  9: jsx(Nine, {
+    size: 'medium'
+  }),
+  'done': jsx(Check, {
+    size: 'medium'
+  })
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-stepper {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: flex;\n  width: 100%;\n  text-align: initial;\n}\n.paraui-v3-stepper .component-stepper-item {\n  position: relative;\n  display: inline-block;\n  flex: 1;\n  vertical-align: top;\n}\n.paraui-v3-stepper .component-stepper-item-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  outline: none;\n}\n.paraui-v3-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-tail,\n.paraui-v3-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper .component-stepper-item-icon,\n.paraui-v3-stepper .component-stepper-item-content {\n  display: block;\n  vertical-align: top;\n}\n.paraui-v3-stepper .component-stepper-item-icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  font-size: 16px;\n  line-height: 30px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgba(171, 176, 185, 0.12);\n  transition: background-color 0.3s, border-color 0.3s;\n}\n.paraui-v3-stepper .component-stepper-item-icon .component-stepper-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: rgba(46, 55, 67, 0.7);\n  vertical-align: middle;\n}\n.paraui-v3-stepper .component-stepper-item-icon .component-stepper-icon svg {\n  color: inherit;\n}\n.paraui-v3-stepper .component-stepper-item-tail {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n}\n.paraui-v3-stepper .component-stepper-item-tail::after {\n  display: inline-block;\n  width: 100%;\n  height: 1px;\n  border-radius: 1px;\n  transition: background 0.3s;\n  content: \"\";\n}\n.paraui-v3-stepper .component-stepper-item-title {\n  display: inline-block;\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 30px;\n}\n.paraui-v3-stepper .component-stepper-item-title::after {\n  position: absolute;\n  display: block;\n  height: 1px;\n  content: \"\";\n  top: 15px;\n  left: calc(50% + 30px);\n  right: calc(-50% + 30px);\n}\n.paraui-v3-stepper .component-stepper-item-subtitle {\n  display: inline;\n  margin-left: 8px;\n  color: rgb(46, 55, 67);\n  font-weight: normal;\n  font-size: 14px;\n}\n.paraui-v3-stepper .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  border-top: 1px dashed rgba(171, 176, 185, 0.4);\n  height: 0;\n  background: transparent;\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px dashed rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background: linear-gradient(90deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-title {\n  font-weight: 400;\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon {\n  background-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item.component-stepper-next-error .component-stepper-item-title::after {\n  background: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] {\n  cursor: pointer;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-title,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-subtitle,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-description,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-icon .component-stepper-icon {\n  transition: color 0.3s;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-title,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-subtitle,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-description {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon {\n  height: auto;\n  border: 0;\n}\n.paraui-v3-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon > .component-stepper-icon {\n  top: 0;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  background-color: rgba(171, 176, 185, 0.12);\n  border-radius: 50%;\n}\n.paraui-v3-stepper .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  white-space: nowrap;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:last-child .component-stepper-item-title {\n  padding-right: 0;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-tail {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-description {\n  max-width: 140px;\n  white-space: normal;\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom .component-stepper-item-icon {\n  width: auto;\n  background: none;\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-finish .component-stepper-item-icon {\n  background: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  padding-left: 12px;\n}\n.paraui-v3-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-icon {\n  width: 24px;\n  height: 24px;\n  margin: 0 8px 0 0;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  border-radius: 24px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-title {\n  padding-right: 12px;\n  font-size: 14px;\n  line-height: 24px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-title::after {\n  top: 12px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-tail {\n  top: 8px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  background: none;\n  border: 0;\n  border-radius: 0;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon > .component-stepper-icon {\n  font-size: 24px;\n  line-height: 24px;\n  transform: none;\n}\n.paraui-v3-stepper.component-stepper-vertical {\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item {\n  display: block;\n  flex: 1 0 auto;\n  padding-left: 0;\n  overflow: visible;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-icon {\n  float: left;\n  margin-right: 16px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-content {\n  display: block;\n  min-height: 68px;\n  overflow: hidden;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-title {\n  line-height: 32px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-description {\n  padding-bottom: 12px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 15px;\n  width: 1px;\n  height: 100%;\n  padding: 36px 0 6px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail::after {\n  width: 1px;\n  height: 100%;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item:not(:last-child) > .component-stepper-item-container > .component-stepper-item-tail {\n  display: block;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 12px;\n  padding: 30px 0 6px;\n}\n.paraui-v3-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-title {\n  line-height: 24px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item {\n  overflow: visible;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-tail {\n  margin-left: 58px;\n  padding: 3.5px 24px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-content {\n  display: block;\n  width: 116px;\n  margin-top: 8px;\n  text-align: center;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-icon {\n  display: inline-block;\n  margin-left: 42px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-title {\n  padding-right: 0;\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-subtitle {\n  display: block;\n  margin-bottom: 4px;\n  margin-left: 0;\n  line-height: 1.5715;\n}\n.paraui-v3-stepper.component-stepper-label-vertical.component-stepper-small:not(.component-stepper-dot) .component-stepper-item-icon {\n  margin-left: 46px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-stepper {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: flex;\n  width: 100%;\n  text-align: initial;\n  overflow: auto;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item {\n  min-width: 140px;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-icon,\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-content {\n  width: calc(100% - 40px);\n  line-height: normal;\n}\n.paraui-v4-stepper .component-stepper-item {\n  position: relative;\n  display: inline-block;\n  flex: 1;\n  vertical-align: top;\n  overflow: hidden;\n  margin-inline-start: 10px;\n}\n.paraui-v4-stepper .component-stepper-item-container {\n  outline: none;\n}\n.paraui-v4-stepper .component-stepper-item-container .component-stepper-item-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 10px;\n}\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-tail,\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper .component-stepper-item-icon,\n.paraui-v4-stepper .component-stepper-item-content {\n  display: inline-block;\n  vertical-align: top;\n}\n.paraui-v4-stepper .component-stepper-item-icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  font-size: 500;\n  line-height: 30px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgb(234, 236, 241);\n  transition: background-color 0.3s, border-color 0.3s;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(92, 101, 115);\n  vertical-align: middle;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon svg {\n  color: inherit;\n}\n.paraui-v4-stepper .component-stepper-item-tail {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n}\n.paraui-v4-stepper .component-stepper-item-tail::after {\n  display: inline-block;\n  width: 100%;\n  height: 1px;\n  border-radius: 1px;\n  transition: background 0.3s;\n  content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-title {\n  display: inline-block;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  padding-inline-end: 10px;\n  font-weight: 700;\n  line-height: 30px;\n  position: relative;\n  max-width: 140px;\n  min-width: 50px;\n}\n.paraui-v4-stepper .component-stepper-item-title::after {\n  position: absolute;\n  top: 16px;\n  inset-inline-start: 100%;\n  display: block;\n  width: 9999px;\n  height: 1px;\n  background: rgba(5, 5, 5, 0.06);\n  content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-subtitle {\n  display: inline;\n  margin-left: 8px;\n  color: rgb(92, 101, 115);\n  font-weight: normal;\n  font-size: 14px;\n}\n.paraui-v4-stepper .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n  font-size: 12px;\n  line-height: 17px;\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n  background: rgb(246, 103, 103);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(92, 101, 115);\n  background: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  border-top: 1px dashed rgb(212, 218, 227);\n  height: 0;\n  background: transparent;\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px dashed rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background: rgb(46, 101, 230);\n}\n@media (min-width: 1200px) and (max-width: 2000px) {\n  .paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n    background: linear-gradient(63deg, #2e65e6 1%, #ffffff 83%);\n    background-position: 400px 0;\n    background-size: 400px 100%;\n  }\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-title {\n  font-weight: 400;\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon {\n  background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n  background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n  border-color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item.component-stepper-next-error .component-stepper-item-title::after {\n  background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] {\n  cursor: pointer;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-description,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-icon .component-stepper-icon {\n  transition: color 0.3s;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon {\n  border-color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon {\n  height: auto;\n  border: 0;\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon > .component-stepper-icon {\n  top: 0;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n}\n.paraui-v4-stepper .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  white-space: nowrap;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  margin-left: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:last-child .component-stepper-item-title {\n  padding-right: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-tail {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-description {\n  white-space: normal;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom .component-stepper-item-icon {\n  width: auto;\n  background: none;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon {\n  background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-finish .component-stepper-item-icon {\n  background: rgb(87, 131, 235);\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  padding-left: 12px;\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-icon {\n  width: 24px;\n  height: 24px;\n  margin: 0 8px 0 0;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  border-radius: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title {\n  padding-right: 12px;\n  font-size: 14px;\n  line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title::after {\n  top: 12px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-description {\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-tail {\n  top: 8px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  background: none;\n  border: 0;\n  border-radius: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon > .component-stepper-icon {\n  font-size: 24px;\n  line-height: 24px;\n  transform: none;\n}\n.paraui-v4-stepper.component-stepper-vertical {\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item {\n  display: block;\n  flex: 1 0 auto;\n  padding-left: 0;\n  overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-icon {\n  float: left;\n  margin-right: 16px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-content {\n  display: block;\n  min-height: 68px;\n  overflow: hidden;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-title {\n  line-height: 32px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-description {\n  padding-bottom: 12px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 15px;\n  width: 1px;\n  height: 100%;\n  padding: 36px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail::after {\n  width: 1px;\n  height: 100%;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item:not(:last-child) > .component-stepper-item-container > .component-stepper-item-tail {\n  display: block;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 12px;\n  padding: 30px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-title {\n  line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item {\n  overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-tail {\n  margin-left: 58px;\n  padding: 3.5px 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-content {\n  display: block;\n  width: 116px;\n  margin-top: 8px;\n  text-align: center;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-icon {\n  display: inline-block;\n  margin-left: 42px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title {\n  padding-right: 0;\n  padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-subtitle {\n  display: block;\n  margin-bottom: 4px;\n  margin-left: 0;\n  line-height: 1.5715;\n}\n.paraui-v4-stepper.component-stepper-label-vertical.component-stepper-small:not(.component-stepper-dot) .component-stepper-item-icon {\n  margin-left: 46px;\n}";
 styleInject(css_248z);
 
 //steps
 var Stepper = function Stepper(props) {
   var _props$current = props.current,
     current = _props$current === void 0 ? 0 : _props$current,
-    activeStep = props.activeStep,
-    _props$mode = props.mode,
-    mode = _props$mode === void 0 ? 'number' : _props$mode,
+    errorStep = props.errorStep,
     steps = props.steps,
     _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    direction = _props$direction === void 0 ? "horizontal" : _props$direction,
     children = props.children,
     className = props.className,
-    restProps = __rest(props, ["current", "activeStep", "mode", "steps", "direction", "children", "className"]);
+    restProps = __rest(props, ["current", "errorStep", "steps", "direction", "children", "className"]);
   var prefixCls = "".concat($rcPrefixCls, "-stepper");
   //内置finish、error 图标
   var icons = {
-    finish: Icons['done'],
-    error: Icons['done']
+    finish: Icons["done"],
+    error: Icons["done"]
   };
   //步骤图标渲染
   var stepIconRender = function stepIconRender(_ref) {
     var node = _ref.node,
       status = _ref.status;
-    if (status === 'finish') {
-      return /*#__PURE__*/React__default.cloneElement(node, {}, Icons['done']);
+    if (status === "finish") {
+      return /*#__PURE__*/React__default.cloneElement(node, {}, Icons["done"]);
     }
     return node;
   };
@@ -66,24 +93,37 @@ var Stepper = function Stepper(props) {
   var renderStep = function renderStep() {
     if (!(steps === null || steps === void 0 ? void 0 : steps.length)) return children;
     return steps.map(function (item, index) {
-      var label = '';
+      var label = "";
+      var description = "";
       var icon = null;
-      if (mode === 'number') {
+      var isErr = index === errorStep;
+      if (typeof item === "string") {
         label = item;
-        icon = Icons[index + 1];
-      } else if (_typeof(item) === 'object') {
+        icon = isErr ? jsx(CloseIcon, {
+          size: 'medium'
+        }) : Icons[index + 1];
+      } else if (_typeof(item) === "object") {
         label = item.label;
-        icon = item.icon;
+        description = item.description;
+        icon = isErr ? jsx(CloseIcon, {
+          size: 'medium'
+        }) : item.icon || Icons[index + 1];
       }
       return jsx(Stepper.Step, {
-        title: label,
+        description: jsx(AutoTips, {
+          children: description
+        }),
+        title: jsx(AutoTips, {
+          children: label
+        }),
+        status: index === errorStep ? "error" : undefined,
         icon: icon
       }, index);
     });
   };
   return jsx(RcSteps, Object.assign({}, restProps, {
     className: clsx("".concat($prefixCls, "-stepper"), className),
-    current: activeStep !== null && activeStep !== void 0 ? activeStep : current,
+    current: current,
     icons: icons,
     direction: direction,
     stepIcon: stepIconRender,

package/Styles/index.scss

@@ -35,3 +35,7 @@ button,
 textarea {
   outline: none;
 }
+
+svg {
+  overflow: hidden;
+}