@para-ui/core 3.0.1 → 3.0.3

package/Selector/interface.d.ts

@@ -28,13 +28,13 @@ export interface SelectorAnyJson {
     /** 类型 */
     type?: string;
     /** 图片 */
-    img?: string;
+    img?: ReactNode;
     /** 主标题, 默认label */
-    mainTitle?: string;
+    mainTitle?: ReactNode;
     /** 辅助信息 */
-    subTitle?: string;
+    subTitle?: ReactNode;
     /** 标签 */
-    tag?: string;
+    tag?: ReactNode;
     /** 下级字段 */
     children?: SelectorAnyJson[];
     /** 禁用 */
@@ -84,6 +84,10 @@ export interface SelectorConstData {
     reqTimer: any;
     /** 页码 */
     page: number;
+    /** 搜索值 */
+    searchVal: string;
+    /** 搜索点了下级,记录搜索前的面包屑 null说明没有储存过 */
+    beforeSearchBreadcrumbs: BreadcrumbsListItem[] | null;
     [name: string]: any;
 }
 /** 字段配置,对应数据字段 */
@@ -173,6 +177,12 @@ export interface SelectorMainProps {
     breadcrumbsList?: BreadcrumbsListItem[];
     /** 搜索 */
     search?: boolean;
+    /** 搜索面包屑 */
+    searchBreadcrumbs?: ReactNode;
+    /** 搜索值 */
+    searchVal?: {
+        val: string;
+    };
     /** 搜索Placeholder */
     searchPlaceholder?: ReactNode;
     /** 搜索触发方式 */
@@ -208,7 +218,7 @@ export interface SelectorMainProps {
     /** 选择事件 */
     onSelect?: (item: SelectorAnyJson) => void;
     /** 点击下级 */
-    onLevel?: (item: SelectorAnyJson) => void;
+    onLevel?: (item: SelectorAnyJson, isSearch?: boolean) => void;
     /** 查看更多 */
     onLoad?: () => void;
     /** 点击全选 */
@@ -325,8 +335,8 @@ export interface SelectorProps {
     fieldConfig?: SelectorFieldConfigProps;
     /** 返回数据字段配置,对应数据字段 */
     backDataFieldConfig?: SelectorFieldConfigProps;
-    /** 处理节点信息 */
-    handNodeInfo?: (item: SelectorAnyJson) => SelectorAnyJson;
+    /** 处理节点信息 isSearch是否搜索 */
+    handNodeInfo?: (item: SelectorAnyJson, isSearch: boolean) => SelectorAnyJson;
     /** 处理选中数据的节点信息 */
     handSelectorNodeInfo?: (item: SelectorAnyJson) => SelectorAnyJson;
     /** 处理请求参数 */

package/Selector/lang/en_US.d.ts

@@ -4,5 +4,6 @@ declare const _default: {
     seeMore: string;
     selected: string;
     pleaseEnter: string;
+    searchResult: string;
 };
 export default _default;

package/Selector/lang/zh_CN.d.ts

@@ -4,5 +4,6 @@ declare const _default: {
     seeMore: string;
     selected: string;
     pleaseEnter: string;
+    searchResult: string;
 };
 export default _default;

package/SelectorPicker/index.d.ts

@@ -4,10 +4,11 @@
  * @description 选择器选择
  */
 import React from 'react';
+import { HelperTextDetailProps } from "../HelperText";
 import { LabelTooltipProps } from "../Label";
 import { SelectorProps } from "../Selector/interface";
 import './index.scss';
-export interface SelectorPickerProps {
+export interface SelectorPickerProps extends HelperTextDetailProps {
     /** className */
     className?: string;
     /** label */
@@ -16,10 +17,6 @@ export interface SelectorPickerProps {
     labelTooltip?: LabelTooltipProps;
     /** 是否必填 */
     required?: boolean;
-    /** 错误状态 */
-    error?: boolean;
-    /** 辅助文本 */
-    helperText?: React.ReactNode;
     /** 尺寸 */
     size?: 'large' | 'medium' | 'small';
     /** 是否禁用 */

package/SelectorPicker/index.js

@@ -12,6 +12,7 @@ import CloseCircle from '@para-ui/icons/CloseCircle';
 import Down from '@para-ui/icons/Down';
 import CloseIcon from '@para-ui/icons/Close';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import '../Help/index.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Tooltip/index.js';
@@ -43,7 +44,7 @@ import '@para-ui/icons/More';
 import '../Empty/index.js';
 import '@para-ui/icons/Refresh';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  min-height: 36px;\n  padding: 0 42px 0 12px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-selector-picker-wrapper:hover {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  right: 42px;\n  transform: translateY(-50%);\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.4);\n  white-space: nowrap;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-arrow {\n  position: absolute;\n  top: 7px;\n  right: 12px;\n  line-height: 0;\n  transition: 0.3s;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-arrow svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 20px;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-clear {\n  position: absolute;\n  top: 9px;\n  right: 12px;\n  opacity: 0;\n  line-height: 0;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-clear svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 16px;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-overflow {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex: auto;\n  flex-wrap: wrap;\n  padding-top: 5px;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-overflow-single {\n  padding-top: 0;\n  align-items: center;\n  overflow: hidden;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-overflow-single .paraui-selector-picker-single-content {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-overflow-item {\n  flex: none;\n  max-width: 100%;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-overflow-item .paraui-selector-picker-item {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 12px;\n  height: 24px;\n  margin: 0 8px 5px 0;\n  max-width: 100%;\n  color: rgb(46, 55, 67);\n  line-height: 24px;\n  background-color: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n  user-select: none;\n  transition: 0.3s;\n  cursor: default;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-overflow-item .paraui-selector-picker-item-content {\n  display: inline-block;\n  margin-right: 4px;\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-overflow-item .paraui-selector-picker-item .paraui-selector-picker-item-remove {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-selector-picker-wrapper .paraui-selector-picker-overflow-item .paraui-selector-picker-item .paraui-selector-picker-item-remove svg {\n  font-size: 16px;\n  color: inherit;\n}\n.paraui-selector-picker-focused .paraui-selector-picker-wrapper {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-selector-picker-focused .paraui-selector-picker-wrapper .paraui-selector-picker-arrow {\n  transform: rotate(180deg);\n  color: rgb(54, 102, 214);\n}\n.paraui-selector-picker-disabled {\n  cursor: not-allowed;\n}\n.paraui-selector-picker-disabled .paraui-selector-picker-wrapper {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n  pointer-events: none;\n}\n.paraui-selector-picker-error .paraui-selector-picker-wrapper {\n  border-color: rgb(235, 96, 84);\n}\n.paraui-selector-picker-error .paraui-selector-picker-wrapper:hover {\n  border-color: rgb(235, 96, 84);\n}\n.paraui-selector-picker-clear .paraui-selector-picker-wrapper:hover .paraui-selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-selector-picker-clear .paraui-selector-picker-wrapper:hover .paraui-selector-picker-clear {\n  opacity: 1;\n}\n.paraui-selector-picker-dropdown .paraui-selector {\n  border: 0;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  min-height: 36px;\n  padding: 0 42px 0 12px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  right: 42px;\n  transform: translateY(-50%);\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.4);\n  white-space: nowrap;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  top: 7px;\n  right: 12px;\n  line-height: 0;\n  transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 20px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  top: 9px;\n  right: 12px;\n  opacity: 0;\n  line-height: 0;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 16px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex: auto;\n  flex-wrap: wrap;\n  padding-top: 5px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow.selector-picker-overflow-single {\n  padding-top: 0;\n  align-items: center;\n  overflow: hidden;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow.selector-picker-overflow-single > .selector-picker-single-content {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item {\n  flex: none;\n  max-width: 100%;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 12px;\n  height: 24px;\n  margin: 0 8px 5px 0;\n  max-width: 100%;\n  color: rgb(46, 55, 67);\n  line-height: 24px;\n  background-color: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n  user-select: none;\n  transition: 0.3s;\n  cursor: default;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-item-content {\n  display: inline-block;\n  margin-right: 4px;\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-item-remove {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-item-remove svg {\n  font-size: 16px;\n  color: inherit;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow {\n  transform: rotate(180deg);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n  pointer-events: none;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper:hover {\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v3-selector-picker-dropdown .paraui-v3-selector {\n  border: 0;\n}";
 styleInject(css_248z);
 
 var SelectorPicker = function SelectorPicker(props) {
@@ -58,6 +59,7 @@ var SelectorPicker = function SelectorPicker(props) {
       labelTooltip = props.labelTooltip,
       _props$error = props.error,
       error = _props$error === void 0 ? false : _props$error,
+      hideErrorDom = props.hideErrorDom,
       helperText = props.helperText,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
@@ -89,7 +91,7 @@ var SelectorPicker = function SelectorPicker(props) {
       setOpen = _useState4[1]; // 显示下拉
 
 
-  var prefixCls = 'paraui-selector-picker';
+  var prefixCls = $prefixCls + '-selector-picker';
   /** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
 
   var onChangeCom = function onChangeCom(val, node, rowData) {
@@ -167,17 +169,17 @@ var SelectorPicker = function SelectorPicker(props) {
     var labelStr = selectorFieldConfigHand.mainTitle || '';
     var val = selectorFieldConfigHand.key || '';
     return jsx("div", Object.assign({
-      className: "".concat(prefixCls, "-overflow-item")
+      className: "selector-picker-overflow-item"
     }, {
       children: jsxs("span", Object.assign({
-        className: "".concat(prefixCls, "-item")
+        className: "selector-picker-item"
       }, {
         children: [jsx("span", Object.assign({
-          className: "".concat(prefixCls, "-item-content")
+          className: "selector-picker-item-content"
         }, {
           children: item[labelStr] || item[val]
         })), jsx("span", Object.assign({
-          className: "".concat(prefixCls, "-item-remove"),
+          className: "selector-picker-item-remove",
           onClick: function onClick(e) {
             return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
           }
@@ -198,7 +200,7 @@ var SelectorPicker = function SelectorPicker(props) {
     if (!multiple) {
       //单选
       return jsx("span", Object.assign({
-        className: "".concat(prefixCls, "-single-content")
+        className: "selector-picker-single-content"
       }, {
         children: (_a = list[0]) === null || _a === void 0 ? void 0 : _a.label
       }));
@@ -218,13 +220,13 @@ var SelectorPicker = function SelectorPicker(props) {
 
 
     var renderOverTag = (overList === null || overList === void 0 ? void 0 : overList.length) ? jsx("div", Object.assign({
-      className: "".concat(prefixCls, "-overflow-item")
+      className: "selector-picker-overflow-item"
     }, {
       children: jsx("span", Object.assign({
-        className: "".concat(prefixCls, "-item")
+        className: "selector-picker-item"
       }, {
         children: jsx("span", Object.assign({
-          className: "".concat(prefixCls, "-item-content")
+          className: "selector-picker-item-content"
         }, {
           children: "+".concat(overList === null || overList === void 0 ? void 0 : overList.length)
         }))
@@ -262,16 +264,16 @@ var SelectorPicker = function SelectorPicker(props) {
 
   var renderAnchor = function renderAnchor() {
     var list = handComVal();
-    var overflowCls = clsx("".concat(prefixCls, "-overflow"), !multiple && "".concat(prefixCls, "-overflow-single")); //清除图标
+    var overflowCls = clsx("selector-picker-overflow", !multiple && "selector-picker-overflow-single"); //清除图标
 
     var clearBtn = allowClear && list.length ? jsx("span", Object.assign({
-      className: "".concat(prefixCls, "-clear"),
+      className: "selector-picker-clear",
       onClick: handleAllClear
     }, {
       children: jsx(CloseCircle, {})
     })) : null;
     return jsxs("div", Object.assign({
-      className: "".concat(prefixCls, "-wrapper"),
+      className: "selector-picker-wrapper",
       onClick: openSelector
     }, {
       children: [jsx("div", Object.assign({
@@ -279,11 +281,11 @@ var SelectorPicker = function SelectorPicker(props) {
       }, {
         children: tagMemo()
       })), jsx("span", Object.assign({
-        className: "".concat(prefixCls, "-arrow")
+        className: "selector-picker-arrow"
       }, {
         children: jsx(Down, {})
       })), clearBtn, !list.length && jsx("span", Object.assign({
-        className: "".concat(prefixCls, "-placeholder")
+        className: "selector-picker-placeholder"
       }, {
         children: placeholder
       }))]
@@ -303,12 +305,13 @@ var SelectorPicker = function SelectorPicker(props) {
       onVisibleChange: function onVisibleChange(vis) {
         return setOpen(vis);
       },
-      overlayClassName: 'paraui-selector-picker-dropdown'
+      overlayClassName: $prefixCls + '-selector-picker-dropdown'
     }, {
       children: renderAnchor()
     })), jsx(HelperText, {
       error: error,
-      helperText: helperText
+      helperText: helperText,
+      hideErrorDom: hideErrorDom
     })]
   }));
 };

package/SingleBox/index.d.ts

@@ -5,8 +5,9 @@
  */
 import React, { FunctionComponent, ReactNode } from 'react';
 import { LabelTooltipProps } from "../Label";
+import { HelperTextDetailProps } from "../HelperText";
 import './index.scss';
-export interface SingleBoxProps {
+export interface SingleBoxProps extends HelperTextDetailProps {
     /** 样式class */
     className?: string;
     /** style */
@@ -25,10 +26,6 @@ export interface SingleBoxProps {
     disabled?: boolean;
     /** 是否必填 */
     required?: boolean;
-    /** 是否错误模式 */
-    error?: boolean;
-    /** 错误文本 */
-    helperText?: ReactNode;
     /** 默认值 不受控 */
     defaultValue?: string[];
     /** 默认值 多选时为数组 单选单值 受控 */

package/SingleBox/index.js

@@ -8,6 +8,7 @@ import Label from '../Label/index.js';
 import HelperText from '../HelperText/index.js';
 import Plus from '@para-ui/icons/Plus';
 import Delete from '@para-ui/icons/Delete';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '@paraview/lib';
@@ -28,7 +29,7 @@ import 'rc-dropdown';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-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-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-single-box > .single-box-content > .single-box-content-item {\n  padding-bottom: 15px;\n  display: flex;\n}\n.paraui-single-box > .single-box-content > .single-box-content-item > .text-field {\n  width: calc(100% - 30px);\n}\n.paraui-single-box > .single-box-content > .single-box-content-item > .text-field > .paraui-helper-text {\n  display: none;\n}\n.paraui-single-box > .single-box-content > .single-box-content-item > .single-box-content-item-svg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  cursor: pointer;\n}\n.paraui-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: rgb(255, 255, 255);\n}\n.paraui-single-box > .single-box-add > svg {\n  font-size: 24px;\n}\n.paraui-single-box > .single-box-add:hover {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-single-box.single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-single-box.single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-single-box.single-box-large > .single-box-add {\n  height: 36px;\n}\n.paraui-single-box.single-box-disabled > .single-box-content > .single-box-content-item > .single-box-content-item-svg {\n  cursor: not-allowed;\n}\n.paraui-single-box.single-box-disabled > .single-box-content > .single-box-content-item > .single-box-content-item-svg > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-single-box.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.7);\n}\n.paraui-single-box.single-box-disabled > .single-box-add > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-single-box.single-box-disabled > .single-box-add:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.7);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\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  padding-bottom: 15px;\n  display: flex;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .single-box-text-field {\n  width: calc(100% - 30px);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .single-box-content-item-svg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  cursor: pointer;\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: rgb(255, 255, 255);\n}\n.paraui-v3-single-box > .single-box-add > svg {\n  font-size: 24px;\n}\n.paraui-v3-single-box > .single-box-add:hover {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\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-add {\n  height: 32px;\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 > .single-box-content-item-svg {\n  cursor: not-allowed;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .single-box-content-item-svg > 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.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add > svg {\n  color: rgba(46, 55, 67, 0.7);\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.7);\n}";
 styleInject(css_248z);
 
 var SingleBox = function SingleBox(props) {
@@ -48,6 +49,7 @@ var SingleBox = function SingleBox(props) {
       required = _props$required === void 0 ? false : _props$required,
       _props$error = props.error,
       error = _props$error === void 0 ? false : _props$error,
+      hideErrorDom = props.hideErrorDom,
       _props$helperText = props.helperText,
       helperText = _props$helperText === void 0 ? '' : _props$helperText,
       value = props.value,
@@ -142,11 +144,11 @@ var SingleBox = function SingleBox(props) {
 
 
   var handClass = function handClass() {
-    var str = 'paraui-single-box single-box';
+    var str = $prefixCls + '-single-box';
     if (className) str += ' ' + className;
-    if (size) str += ' single-box-' + size;
-    if (error) str += ' single-box-error';
-    if (disabled) str += ' single-box-disabled';
+    if (size) str += " ".concat($prefixCls, "-single-box-").concat(size);
+    if (error) str += " ".concat($prefixCls, "-single-box-error");
+    if (disabled) str += " ".concat($prefixCls, "-single-box-disabled");
     return str;
   };
 
@@ -162,10 +164,12 @@ var SingleBox = function SingleBox(props) {
           className: "single-box-content-item"
         }, {
           children: [jsx(TextField, {
+            className: 'single-box-text-field',
             disabled: disabled,
             value: item,
             placeholder: placeholder,
             size: size,
+            hideErrorDom: true,
             onChange: changeInput(index),
             fetchSuggestions: fetchSuggestions,
             onSelect: selectValue(index)
@@ -186,7 +190,8 @@ var SingleBox = function SingleBox(props) {
     })), jsx(HelperText, {
       className: "single-box-error",
       error: error,
-      helperText: helperText
+      helperText: helperText,
+      hideErrorDom: hideErrorDom
     })]
   }));
 };

package/Slider/index.d.ts

@@ -1,8 +1,8 @@
 /**
-* @author Hanz
-* @date 2022/3/7 下午3:52
-* @description
-*/
+ * @author Hanz
+ * @date 2022/3/7 下午3:52
+ * @description
+ */
 import { FunctionComponent } from 'react';
 import { SliderSingleProps, SliderRangeProps } from './interface';
 import './index.scss';

package/Slider/index.js

@@ -5,18 +5,21 @@ 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-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.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-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-slider * {\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.paraui-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-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-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-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-slider-handle:focus {\n  outline: none;\n}\n.paraui-slider-handle-click-focused:focus {\n  border-color: rgb(54, 102, 214);\n  box-shadow: unset;\n}\n.paraui-slider-handle:hover {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-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-slider-mark {\n  position: absolute;\n  top: 18px;\n  left: 0;\n  width: 100%;\n  font-size: 12px;\n}\n.paraui-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-slider-mark-text-active {\n  color: #666;\n}\n.paraui-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 8px;\n  background: transparent;\n}\n.paraui-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-slider-dot-active {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-slider-dot-reverse {\n  margin-right: -4px;\n}\n.paraui-slider-disabled {\n  background-color: #e9e9e9;\n}\n.paraui-slider-disabled .paraui-slider-track {\n  background-color: #ccc;\n}\n.paraui-slider-disabled .paraui-slider-handle, .paraui-slider-disabled .paraui-slider-dot {\n  border-color: #ccc;\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n  cursor: not-allowed;\n}\n.paraui-slider-disabled .paraui-slider-mark-text, .paraui-slider-disabled .paraui-slider-dot {\n  cursor: not-allowed !important;\n}\n.paraui-slider-vertical {\n  width: 14px;\n  height: 100%;\n  padding: 0 5px;\n}\n.paraui-slider-vertical .paraui-slider-rail {\n  height: 100%;\n  width: 4px;\n}\n.paraui-slider-vertical .paraui-slider-track {\n  left: 5px;\n  bottom: 0;\n  width: 4px;\n}\n.paraui-slider-vertical .paraui-slider-handle {\n  margin-left: -6px;\n  touch-action: pan-y;\n}\n.paraui-slider-vertical .paraui-slider-mark {\n  top: 0;\n  left: 18px;\n  height: 100%;\n}\n.paraui-slider-vertical .paraui-slider-step {\n  height: 100%;\n  width: 4px;\n}\n.paraui-slider-vertical .paraui-slider-dot {\n  left: 0px;\n  margin-bottom: -4px;\n}\n.paraui-slider-vertical .paraui-slider-dot:first-child {\n  margin-bottom: -4px;\n}\n.paraui-slider-vertical .paraui-slider-dot:last-child {\n  margin-bottom: -4px;\n}\n.paraui-slider-tooltip-zoom-down-enter, .paraui-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.paraui-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.paraui-slider-tooltip-zoom-down-enter.paraui-slider-tooltip-zoom-down-enter-active, .paraui-slider-tooltip-zoom-down-appear.paraui-slider-tooltip-zoom-down-appear-active {\n  animation-name: rcSliderTooltipZoomDownIn;\n  animation-play-state: running;\n}\n.paraui-slider-tooltip-zoom-down-leave.paraui-slider-tooltip-zoom-down-leave-active {\n  animation-name: rcSliderTooltipZoomDownOut;\n  animation-play-state: running;\n}\n.paraui-slider-tooltip-zoom-down-enter, .paraui-slider-tooltip-zoom-down-appear {\n  transform: scale(0, 0);\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n.paraui-slider-tooltip-zoom-down-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n@keyframes rcSliderTooltipZoomDownIn {\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 rcSliderTooltipZoomDownOut {\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}\n.paraui-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.paraui-slider-tooltip * {\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.paraui-slider-tooltip-hidden {\n  display: none;\n}\n.paraui-slider-tooltip-inner {\n  min-width: 24px;\n  padding-bottom: 3px;\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.paraui-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.paraui-slider-tooltip-placement-top .paraui-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}";
+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/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\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: #e9e9e9;\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-track {\n  background-color: #ccc;\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  padding-bottom: 3px;\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}";
 styleInject(css_248z);
 
 var Slider = function Slider(props) {
   var range = props.range,
       step = props.step,
-      restProps = __rest(props, ["range", "step"]);
+      className = props.className,
+      restProps = __rest(props, ["range", "step", "className"]);
 
-  var prefixCls = 'paraui-slider';
-  var tooltipPrefixCls = 'paraui-slider-tooltip';
+  var prefixCls = "".concat($rcPrefixCls, "-slider");
+  var tooltipPrefixCls = "".concat($rcPrefixCls, "-slider-tooltip");
   var draggableTrack;
 
   if (_typeof(range) === 'object') {
@@ -97,6 +100,7 @@ var Slider = function Slider(props) {
   if (range) {
     //范围slider
     return jsx(Range, Object.assign({}, restProps, {
+      className: clsx("".concat($prefixCls, "-slider"), className),
       step: step,
       pushable: restProps.pushable,
       draggableTrack: draggableTrack,
@@ -111,6 +115,7 @@ var Slider = function Slider(props) {
   }
 
   return jsx(RcSlider, Object.assign({}, restProps, {
+    className: clsx("".concat($prefixCls, "-slider"), className),
     step: step,
     handle: function handle(info) {
       return handleWithTooltip({

package/Split/index.js

@@ -2,9 +2,10 @@ import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
 import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
-var css_248z = ".para-split {\n  display: flex;\n  min-height: 200px;\n  -webkit-user-select: none;\n  user-select: none;\n}\n.para-split-left {\n  background-color: #ffffff;\n  position: relative;\n  min-width: 201px;\n}\n.para-split-left .para-split-separator {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 6px;\n  height: 100%;\n  background-color: white;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);\n  cursor: col-resize;\n}\n.para-split-left .para-split-separator i {\n  display: inline-block;\n  height: 14px;\n  width: 1px;\n  background-color: #e9e9e9;\n  margin: 0 1px;\n}\n.para-split-left-content {\n  padding: 20px 34px 20px 20px;\n}\n.para-split .para-split-right {\n  background-color: #ffffff;\n  flex: 1;\n}\n.para-split .para-split-right-content {\n  padding: 20px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-split {\n  display: flex;\n  min-height: 200px;\n  -webkit-user-select: none;\n  user-select: none;\n}\n.paraui-v3-split .split-left {\n  background-color: #ffffff;\n  position: relative;\n  min-width: 201px;\n}\n.paraui-v3-split .split-left .split-separator {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 6px;\n  height: 100%;\n  background-color: white;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);\n  cursor: col-resize;\n}\n.paraui-v3-split .split-left .split-separator i {\n  display: inline-block;\n  height: 14px;\n  width: 1px;\n  background-color: #e9e9e9;\n  margin: 0 1px;\n}\n.paraui-v3-split .split-left .split-left-content {\n  padding: 20px 34px 20px 20px;\n}\n.paraui-v3-split .split-right {\n  background-color: #ffffff;\n  flex: 1;\n}\n.paraui-v3-split .split-right-content {\n  padding: 20px;\n}";
 styleInject(css_248z);
 
 var Split = function Split(props) {
@@ -102,28 +103,28 @@ var Split = function Split(props) {
     }
   }, [children]);
   return jsxs("div", Object.assign({
-    className: "para-split",
+    className: $prefixCls + '-split',
     ref: containerRef
   }, {
     children: [jsxs("div", Object.assign({
-      className: "para-split-left"
+      className: "split-left"
     }, {
       children: [jsx("div", Object.assign({
-        className: "para-split-left-content",
+        className: "split-left-content",
         ref: scalableRef
       }, {
         children: state.left
       })), jsxs("div", Object.assign({
-        className: "para-split-separator",
+        className: "split-separator",
         ref: separatorRef
       }, {
         children: [jsx("i", {}), jsx("i", {})]
       }))]
     })), jsx("div", Object.assign({
-      className: "para-split-right"
+      className: "split-right"
     }, {
       children: jsx("div", Object.assign({
-        className: "para-split-right-content"
+        className: "split-right-content"
       }, {
         children: state.right
       }))

package/Stepper/index.js

@@ -13,6 +13,8 @@ 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-bf34e6fa.js';
+import clsx from 'clsx';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
 var Icons = {
@@ -28,7 +30,7 @@ var Icons = {
   'done': jsx(Check, {})
 };
 
-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-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\n.paraui-stepper-item {\n  position: relative;\n  display: inline-block;\n  flex: 1;\n  vertical-align: top;\n}\n\n.paraui-stepper-item-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  outline: none;\n}\n\n.paraui-stepper-item:last-child > .paraui-stepper-item-container > .paraui-stepper-item-tail,\n.paraui-stepper-item:last-child > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  display: none;\n}\n\n.paraui-stepper-item-icon,\n.paraui-stepper-item-content {\n  display: block;\n  vertical-align: top;\n}\n\n.paraui-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\n.paraui-stepper-item-icon .paraui-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-stepper-item-icon .paraui-stepper-icon svg {\n  color: inherit;\n}\n\n.paraui-stepper-item-tail {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n}\n\n.paraui-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\n.paraui-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\n.paraui-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\n.paraui-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\n.paraui-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n\n.paraui-stepper-item-wait .paraui-stepper-item-icon {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n\n.paraui-stepper-item-wait .paraui-stepper-item-icon > .paraui-stepper-icon {\n  color: rgba(46, 55, 67, 0.7);\n}\n\n.paraui-stepper-item-wait .paraui-stepper-item-icon > .paraui-stepper-icon .paraui-stepper-icon-dot {\n  background: rgba(171, 176, 185, 0.4);\n}\n\n.paraui-stepper-item-wait > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title {\n  color: rgba(46, 55, 67, 0.7);\n}\n\n.paraui-stepper-item-wait > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  border-top: 1px dashed rgba(171, 176, 185, 0.4);\n  height: 0;\n  background: transparent;\n}\n\n.paraui-stepper-item-wait > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-wait > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  border-left: 1px dashed rgba(171, 176, 185, 0.4);\n}\n\n.paraui-stepper-item-process .paraui-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n}\n\n.paraui-stepper-item-process .paraui-stepper-item-icon > .paraui-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-process .paraui-stepper-item-icon > .paraui-stepper-icon .paraui-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  background: linear-gradient(90deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-icon .paraui-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-title {\n  font-weight: 400;\n}\n\n.paraui-stepper-item-finish .paraui-stepper-item-icon {\n  background-color: rgba(54, 102, 214, 0.8);\n}\n\n.paraui-stepper-item-finish .paraui-stepper-item-icon > .paraui-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n\n.paraui-stepper-item-finish .paraui-stepper-item-icon > .paraui-stepper-icon .paraui-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-finish > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title {\n  color: rgb(46, 55, 67);\n}\n\n.paraui-stepper-item-finish > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n\n.paraui-stepper-item-finish > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n\n.paraui-stepper-item-finish > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  border-left: 1px solid rgba(171, 176, 185, 0.4);\n}\n\n.paraui-stepper-item-error .paraui-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error .paraui-stepper-item-icon > .paraui-stepper-icon {\n  color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error .paraui-stepper-item-icon > .paraui-stepper-icon .paraui-stepper-icon-dot {\n  background: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title {\n  color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n\n.paraui-stepper-item-error > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n\n.paraui-stepper-item.paraui-stepper-next-error .paraui-stepper-item-title::after {\n  background: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-disabled {\n  cursor: not-allowed;\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] {\n  cursor: pointer;\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] .paraui-stepper-item-title,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] .paraui-stepper-item-subtitle,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] .paraui-stepper-item-description,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] .paraui-stepper-item-icon .paraui-stepper-icon {\n  transition: color 0.3s;\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-title,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-subtitle,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-description {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active):not(.paraui-stepper-item-process) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-icon {\n  border-color: rgb(54, 102, 214);\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active):not(.paraui-stepper-item-process) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-icon .paraui-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item {\n  white-space: nowrap;\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item:first-child {\n  padding-left: 0;\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item:last-child .paraui-stepper-item-title {\n  padding-right: 0;\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item-tail {\n  display: none;\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item-description {\n  max-width: 140px;\n  white-space: normal;\n}\n\n.paraui-stepper-item-custom > .paraui-stepper-item-container > .paraui-stepper-item-icon {\n  height: auto;\n  border: 0;\n}\n\n.paraui-stepper-item-custom > .paraui-stepper-item-container > .paraui-stepper-item-icon > .paraui-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\n.paraui-stepper-item-custom.paraui-stepper-item-process .paraui-stepper-item-icon > .paraui-stepper-icon {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper:not(.paraui-stepper-vertical) .paraui-stepper-item-custom .paraui-stepper-item-icon {\n  width: auto;\n  background: none;\n}\n\n.paraui-stepper:not(.paraui-stepper-vertical) .paraui-stepper-item-custom.paraui-stepper-item-process .paraui-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper:not(.paraui-stepper-vertical) .paraui-stepper-item-custom.paraui-stepper-item-finish .paraui-stepper-item-icon {\n  background: rgba(54, 102, 214, 0.8);\n}\n\n.paraui-stepper-small.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item {\n  padding-left: 12px;\n}\n\n.paraui-stepper-small.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item:first-child {\n  padding-left: 0;\n}\n\n.paraui-stepper-small .paraui-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\n.paraui-stepper-small .paraui-stepper-item-title {\n  padding-right: 12px;\n  font-size: 14px;\n  line-height: 24px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-title::after {\n  top: 12px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-tail {\n  top: 8px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-custom .paraui-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\n.paraui-stepper-small .paraui-stepper-item-custom .paraui-stepper-item-icon > .paraui-stepper-icon {\n  font-size: 24px;\n  line-height: 24px;\n  transform: none;\n}\n\n.paraui-stepper-vertical {\n  display: flex;\n  flex-direction: column;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item {\n  display: block;\n  flex: 1 0 auto;\n  padding-left: 0;\n  overflow: visible;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item .paraui-stepper-item-icon {\n  float: left;\n  margin-right: 16px;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item .paraui-stepper-item-content {\n  display: block;\n  min-height: 68px;\n  overflow: hidden;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item .paraui-stepper-item-title {\n  line-height: 32px;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item .paraui-stepper-item-description {\n  padding-bottom: 12px;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item > .paraui-stepper-item-container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item > .paraui-stepper-item-container > .paraui-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\n.paraui-stepper-vertical > .paraui-stepper-item > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  width: 1px;\n  height: 100%;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item:not(:last-child) > .paraui-stepper-item-container > .paraui-stepper-item-tail {\n  display: block;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  display: none;\n}\n\n.paraui-stepper-vertical.paraui-stepper-small .paraui-stepper-item-container .paraui-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 12px;\n  padding: 30px 0 6px;\n}\n\n.paraui-stepper-vertical.paraui-stepper-small .paraui-stepper-item-container .paraui-stepper-item-title {\n  line-height: 24px;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item {\n  overflow: visible;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-tail {\n  margin-left: 58px;\n  padding: 3.5px 24px;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-content {\n  display: block;\n  width: 116px;\n  margin-top: 8px;\n  text-align: center;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-icon {\n  display: inline-block;\n  margin-left: 42px;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-title {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-title::after {\n  display: none;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-subtitle {\n  display: block;\n  margin-bottom: 4px;\n  margin-left: 0;\n  line-height: 1.5715;\n}\n\n.paraui-stepper-label-vertical.paraui-stepper-small:not(.paraui-stepper-dot) .paraui-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 Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\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}";
 styleInject(css_248z);
 
 var Stepper = function Stepper(props) {
@@ -41,9 +43,10 @@ var Stepper = function Stepper(props) {
       _props$direction = props.direction,
       direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
       children = props.children,
-      restProps = __rest(props, ["current", "activeStep", "mode", "steps", "direction", "children"]);
+      className = props.className,
+      restProps = __rest(props, ["current", "activeStep", "mode", "steps", "direction", "children", "className"]);
 
-  var prefixCls = 'paraui-stepper'; //内置finish、error 图标
+  var prefixCls = "".concat($rcPrefixCls, "-stepper"); //内置finish、error 图标
 
   var icons = {
     finish: Icons['done'],
@@ -84,6 +87,7 @@ var Stepper = function Stepper(props) {
   };
 
   return jsx(RcSteps, Object.assign({}, restProps, {
+    className: clsx("".concat($prefixCls, "-stepper"), className),
     current: activeStep !== null && activeStep !== void 0 ? activeStep : current,
     icons: icons,
     direction: direction,