import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import RcSteps from 'rc-steps';
import One from '@iam-com/icons/One';
import Two from '@iam-com/icons/Two';
import Three from '@iam-com/icons/Three';
import Four from '@iam-com/icons/Four';
import Five from '@iam-com/icons/Five';
import Six from '@iam-com/icons/Six';
import Seven from '@iam-com/icons/Seven';
import Eight from '@iam-com/icons/Eight';
import Nine from '@iam-com/icons/Nine';
import Check from '@iam-com/icons/Check';
import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-66aa48a1.js';
import clsx from 'clsx';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';

//默认图标
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, {})
};

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}";
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,
    steps = props.steps,
    _props$direction = 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"]);
  var prefixCls = "".concat($rcPrefixCls, "-stepper");
  //内置finish、error 图标
  var icons = {
    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']);
    }
    return node;
  };
  //渲染Step
  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 icon = null;
      if (mode === 'number') {
        label = item;
        icon = Icons[index + 1];
      } else if (_typeof(item) === 'object') {
        label = item.label;
        icon = item.icon;
      }
      return jsx(Stepper.Step, {
        title: label,
        icon: icon
      }, index);
    });
  };
  return jsx(RcSteps, Object.assign({}, restProps, {
    className: clsx("".concat($prefixCls, "-stepper"), className),
    current: activeStep !== null && activeStep !== void 0 ? activeStep : current,
    icons: icons,
    direction: direction,
    stepIcon: stepIconRender,
    prefixCls: prefixCls
  }, {
    children: renderStep()
  }));
};
Stepper.Step = RcSteps.Step;

export { Stepper, Stepper as default };
