@fle-ui/next 3.0.0-alpha.2 → 3.0.0-beta.1

package/lib/steps/style/index.js

@@ -1,124 +1,108 @@
 "use strict";
+"use client";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
+exports.prepareComponentToken = exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _style = require("../../style");
 var _internal = require("../../theme/internal");
-
 var _customIcon = _interopRequireDefault(require("./custom-icon"));
-
+var _inline = _interopRequireDefault(require("./inline"));
 var _labelPlacement = _interopRequireDefault(require("./label-placement"));
-
 var _nav = _interopRequireDefault(require("./nav"));
-
 var _progress = _interopRequireDefault(require("./progress"));
-
 var _progressDot = _interopRequireDefault(require("./progress-dot"));
-
 var _rtl = _interopRequireDefault(require("./rtl"));
-
 var _small = _interopRequireDefault(require("./small"));
-
 var _vertical = _interopRequireDefault(require("./vertical"));
-
-var _inline = _interopRequireDefault(require("./inline"));
-
-var _style = require("../../style");
-
 var StepItemStatusEnum;
-
 (function (StepItemStatusEnum) {
   StepItemStatusEnum["wait"] = "wait";
   StepItemStatusEnum["process"] = "process";
   StepItemStatusEnum["finish"] = "finish";
   StepItemStatusEnum["error"] = "error";
 })(StepItemStatusEnum || (StepItemStatusEnum = {}));
-
 var genStepsItemStatusStyle = function genStepsItemStatusStyle(status, token) {
-  var _ref4;
-
-  var prefix = token.componentCls + "-item";
-  var iconColorKey = status + "IconColor";
-  var titleColorKey = status + "TitleColor";
-  var descriptionColorKey = status + "DescriptionColor";
-  var tailColorKey = status + "TailColor";
-  var iconBgColorKey = status + "IconBgColor";
-  var iconBorderColorKey = status + "IconBorderColor";
-  var dotColorKey = status + "DotColor";
-  return _ref4 = {}, (0, _defineProperty2["default"])(_ref4, prefix + "-" + status + " " + prefix + "-icon", (0, _defineProperty2["default"])({
+  var _ref;
+  var prefix = "".concat(token.componentCls, "-item");
+  var iconColorKey = "".concat(status, "IconColor");
+  var titleColorKey = "".concat(status, "TitleColor");
+  var descriptionColorKey = "".concat(status, "DescriptionColor");
+  var tailColorKey = "".concat(status, "TailColor");
+  var iconBgColorKey = "".concat(status, "IconBgColor");
+  var iconBorderColorKey = "".concat(status, "IconBorderColor");
+  var dotColorKey = "".concat(status, "DotColor");
+  return _ref = {}, _defineProperty(_ref, "".concat(prefix, "-").concat(status, " ").concat(prefix, "-icon"), _defineProperty({
     backgroundColor: token[iconBgColorKey],
     borderColor: token[iconBorderColorKey]
-  }, "> " + token.componentCls + "-icon", (0, _defineProperty2["default"])({
+  }, "> ".concat(token.componentCls, "-icon"), _defineProperty({
     color: token[iconColorKey]
-  }, token.componentCls + "-icon-dot", {
+  }, "".concat(token.componentCls, "-icon-dot"), {
     background: token[dotColorKey]
-  }))), (0, _defineProperty2["default"])(_ref4, prefix + "-" + status + prefix + "-custom " + prefix + "-icon", (0, _defineProperty2["default"])({}, "> " + token.componentCls + "-icon", {
+  }))), _defineProperty(_ref, "".concat(prefix, "-").concat(status).concat(prefix, "-custom ").concat(prefix, "-icon"), _defineProperty({}, "> ".concat(token.componentCls, "-icon"), {
     color: token[dotColorKey]
-  })), (0, _defineProperty2["default"])(_ref4, prefix + "-" + status + " > " + prefix + "-container > " + prefix + "-content > " + prefix + "-title", {
+  })), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-content > ").concat(prefix, "-title"), {
     color: token[titleColorKey],
     '&::after': {
       backgroundColor: token[tailColorKey]
     }
-  }), (0, _defineProperty2["default"])(_ref4, prefix + "-" + status + " > " + prefix + "-container > " + prefix + "-content > " + prefix + "-description", {
+  }), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-content > ").concat(prefix, "-description"), {
     color: token[descriptionColorKey]
-  }), (0, _defineProperty2["default"])(_ref4, prefix + "-" + status + " > " + prefix + "-container > " + prefix + "-tail::after", {
+  }), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-tail::after"), {
     backgroundColor: token[tailColorKey]
-  }), _ref4;
+  }), _ref;
 };
-
 var genStepsItemStyle = function genStepsItemStyle(token) {
-  var _extends2, _extends4;
-
+  var _Object$assign, _Object$assign3;
   var componentCls = token.componentCls,
-      motionDurationSlow = token.motionDurationSlow;
-  var stepsItemCls = componentCls + "-item"; // .ant-steps-item
-
-  return (0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((_extends2 = {}, (0, _defineProperty2["default"])(_extends2, stepsItemCls, {
+    motionDurationSlow = token.motionDurationSlow;
+  var stepsItemCls = "".concat(componentCls, "-item"); // .ant-steps-item
+  var stepItemIconCls = "".concat(stepsItemCls, "-icon");
+  return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign((_Object$assign = {}, _defineProperty(_Object$assign, stepsItemCls, {
     position: 'relative',
     display: 'inline-block',
     flex: 1,
     overflow: 'hidden',
     verticalAlign: 'top',
-    '&:last-child': (0, _defineProperty2["default"])({
+    '&:last-child': _defineProperty({
       flex: 'none'
-    }, "> " + stepsItemCls + "-container > " + stepsItemCls + "-tail, > " + stepsItemCls + "-container >  " + stepsItemCls + "-content > " + stepsItemCls + "-title::after", {
+    }, "> ".concat(stepsItemCls, "-container > ").concat(stepsItemCls, "-tail, > ").concat(stepsItemCls, "-container >  ").concat(stepsItemCls, "-content > ").concat(stepsItemCls, "-title::after"), {
       display: 'none'
     })
-  }), (0, _defineProperty2["default"])(_extends2, stepsItemCls + "-container", {
+  }), _defineProperty(_Object$assign, "".concat(stepsItemCls, "-container"), _defineProperty({
     outline: 'none'
-  }), (0, _defineProperty2["default"])(_extends2, stepsItemCls + "-icon, " + stepsItemCls + "-content", {
+  }, "&:focus-visible", _defineProperty({}, stepItemIconCls, Object.assign({}, (0, _style.genFocusOutline)(token))))), _defineProperty(_Object$assign, "".concat(stepItemIconCls, ", ").concat(stepsItemCls, "-content"), {
     display: 'inline-block',
     verticalAlign: 'top'
-  }), (0, _defineProperty2["default"])(_extends2, stepsItemCls + "-icon", (0, _defineProperty2["default"])({
-    width: token.stepsIconSize,
-    height: token.stepsIconSize,
+  }), _defineProperty(_Object$assign, stepItemIconCls, _defineProperty({
+    width: token.iconSize,
+    height: token.iconSize,
     marginTop: 0,
     marginBottom: 0,
     marginInlineStart: 0,
     marginInlineEnd: token.marginXS,
-    fontSize: token.stepsIconFontSize,
+    fontSize: token.iconFontSize,
     fontFamily: token.fontFamily,
-    lineHeight: token.stepsIconSize + "px",
+    lineHeight: "".concat((0, _cssinjs.unit)(token.iconSize)),
     textAlign: 'center',
-    borderRadius: token.stepsIconSize,
-    border: token.lineWidth + "px " + token.lineType + " transparent",
-    transition: "background-color " + motionDurationSlow + ", border-color " + motionDurationSlow
-  }, componentCls + "-icon", {
+    borderRadius: token.iconSize,
+    border: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " transparent"),
+    transition: "background-color ".concat(motionDurationSlow, ", border-color ").concat(motionDurationSlow)
+  }, "".concat(componentCls, "-icon"), {
     position: 'relative',
-    top: token.stepsIconTop,
+    top: token.iconTop,
     color: token.colorPrimary,
     lineHeight: 1
-  })), (0, _defineProperty2["default"])(_extends2, stepsItemCls + "-tail", {
+  })), _defineProperty(_Object$assign, "".concat(stepsItemCls, "-tail"), {
     position: 'absolute',
-    top: token.stepsIconSize / 2 - token.paddingXXS,
+    top: token.calc(token.iconSize).div(2).sub(token.paddingXXS).equal(),
     insetInlineStart: 0,
     width: '100%',
     '&::after': {
@@ -127,19 +111,19 @@ var genStepsItemStyle = function genStepsItemStyle(token) {
       height: token.lineWidth,
       background: token.colorSplit,
       borderRadius: token.lineWidth,
-      transition: "background " + motionDurationSlow,
+      transition: "background ".concat(motionDurationSlow),
       content: '""'
     }
-  }), (0, _defineProperty2["default"])(_extends2, stepsItemCls + "-title", {
+  }), _defineProperty(_Object$assign, "".concat(stepsItemCls, "-title"), {
     position: 'relative',
     display: 'inline-block',
     paddingInlineEnd: token.padding,
     color: token.colorText,
     fontSize: token.fontSizeLG,
-    lineHeight: token.stepsTitleLineHeight + "px",
+    lineHeight: "".concat((0, _cssinjs.unit)(token.titleLineHeight)),
     '&::after': {
       position: 'absolute',
-      top: token.stepsTitleLineHeight / 2,
+      top: token.calc(token.titleLineHeight).div(2).equal(),
       insetInlineStart: '100%',
       display: 'block',
       width: 9999,
@@ -147,105 +131,101 @@ var genStepsItemStyle = function genStepsItemStyle(token) {
       background: token.processTailColor,
       content: '""'
     }
-  }), (0, _defineProperty2["default"])(_extends2, stepsItemCls + "-subtitle", {
+  }), _defineProperty(_Object$assign, "".concat(stepsItemCls, "-subtitle"), {
     display: 'inline',
     marginInlineStart: token.marginXS,
     color: token.colorTextDescription,
     fontWeight: 'normal',
     fontSize: token.fontSize
-  }), (0, _defineProperty2["default"])(_extends2, stepsItemCls + "-description", {
+  }), _defineProperty(_Object$assign, "".concat(stepsItemCls, "-description"), {
     color: token.colorTextDescription,
     fontSize: token.fontSize
-  }), _extends2), genStepsItemStatusStyle(StepItemStatusEnum.wait, token)), genStepsItemStatusStyle(StepItemStatusEnum.process, token)), (0, _defineProperty2["default"])({}, stepsItemCls + "-process > " + stepsItemCls + "-container > " + stepsItemCls + "-title", {
+  }), _Object$assign), genStepsItemStatusStyle(StepItemStatusEnum.wait, token)), genStepsItemStatusStyle(StepItemStatusEnum.process, token)), _defineProperty({}, "".concat(stepsItemCls, "-process > ").concat(stepsItemCls, "-container > ").concat(stepsItemCls, "-title"), {
     fontWeight: token.fontWeightStrong
-  })), genStepsItemStatusStyle(StepItemStatusEnum.finish, token)), genStepsItemStatusStyle(StepItemStatusEnum.error, token)), (_extends4 = {}, (0, _defineProperty2["default"])(_extends4, "" + stepsItemCls + componentCls + "-next-error > " + componentCls + "-item-title::after", {
+  })), genStepsItemStatusStyle(StepItemStatusEnum.finish, token)), genStepsItemStatusStyle(StepItemStatusEnum.error, token)), (_Object$assign3 = {}, _defineProperty(_Object$assign3, "".concat(stepsItemCls).concat(componentCls, "-next-error > ").concat(componentCls, "-item-title::after"), {
     background: token.colorError
-  }), (0, _defineProperty2["default"])(_extends4, stepsItemCls + "-disabled", {
+  }), _defineProperty(_Object$assign3, "".concat(stepsItemCls, "-disabled"), {
     cursor: 'not-allowed'
-  }), _extends4));
-}; // ============================= Clickable ===========================
-
-
+  }), _Object$assign3));
+};
+// ============================= Clickable ===========================
 var genStepsClickableStyle = function genStepsClickableStyle(token) {
-  var _ref8, _ref11, _ref13, _ref15;
-
+  var _$concat5, _not$concat2, _$concat8, _ref2;
   var componentCls = token.componentCls,
-      motionDurationSlow = token.motionDurationSlow;
-  return _ref15 = {}, (0, _defineProperty2["default"])(_ref15, "& " + componentCls + "-item", (0, _defineProperty2["default"])({}, "&:not(" + componentCls + "-item-active)", (_ref11 = {}, (0, _defineProperty2["default"])(_ref11, "& > " + componentCls + "-item-container[role='button']", (_ref8 = {
+    motionDurationSlow = token.motionDurationSlow;
+  return _ref2 = {}, _defineProperty(_ref2, "& ".concat(componentCls, "-item"), _defineProperty({}, "&:not(".concat(componentCls, "-item-active)"), (_not$concat2 = {}, _defineProperty(_not$concat2, "& > ".concat(componentCls, "-item-container[role='button']"), (_$concat5 = {
     cursor: 'pointer'
-  }, (0, _defineProperty2["default"])(_ref8, componentCls + "-item", (0, _defineProperty2["default"])({}, "&-title, &-subtitle, &-description, &-icon " + componentCls + "-icon", {
-    transition: "color " + motionDurationSlow
-  })), (0, _defineProperty2["default"])(_ref8, '&:hover', (0, _defineProperty2["default"])({}, componentCls + "-item", (0, _defineProperty2["default"])({}, "&-title, &-subtitle, &-description", {
+  }, _defineProperty(_$concat5, "".concat(componentCls, "-item"), _defineProperty({}, "&-title, &-subtitle, &-description, &-icon ".concat(componentCls, "-icon"), {
+    transition: "color ".concat(motionDurationSlow)
+  })), _defineProperty(_$concat5, '&:hover', _defineProperty({}, "".concat(componentCls, "-item"), _defineProperty({}, "&-title, &-subtitle, &-description", {
     color: token.colorPrimary
-  }))), _ref8)), (0, _defineProperty2["default"])(_ref11, "&:not(" + componentCls + "-item-process)", (0, _defineProperty2["default"])({}, "& > " + componentCls + "-item-container[role='button']:hover", (0, _defineProperty2["default"])({}, componentCls + "-item", {
-    '&-icon': (0, _defineProperty2["default"])({
+  }))), _$concat5)), _defineProperty(_not$concat2, "&:not(".concat(componentCls, "-item-process)"), _defineProperty({}, "& > ".concat(componentCls, "-item-container[role='button']:hover"), _defineProperty({}, "".concat(componentCls, "-item"), {
+    '&-icon': _defineProperty({
       borderColor: token.colorPrimary
-    }, componentCls + "-icon", {
+    }, "".concat(componentCls, "-icon"), {
       color: token.colorPrimary
     })
-  }))), _ref11))), (0, _defineProperty2["default"])(_ref15, "&" + componentCls + "-horizontal:not(" + componentCls + "-label-vertical)", (0, _defineProperty2["default"])({}, componentCls + "-item", (_ref13 = {
+  }))), _not$concat2))), _defineProperty(_ref2, "&".concat(componentCls, "-horizontal:not(").concat(componentCls, "-label-vertical)"), _defineProperty({}, "".concat(componentCls, "-item"), (_$concat8 = {
     paddingInlineStart: token.padding,
     whiteSpace: 'nowrap',
     '&:first-child': {
       paddingInlineStart: 0
     }
-  }, (0, _defineProperty2["default"])(_ref13, "&:last-child " + componentCls + "-item-title", {
+  }, _defineProperty(_$concat8, "&:last-child ".concat(componentCls, "-item-title"), {
     paddingInlineEnd: 0
-  }), (0, _defineProperty2["default"])(_ref13, '&-tail', {
+  }), _defineProperty(_$concat8, '&-tail', {
     display: 'none'
-  }), (0, _defineProperty2["default"])(_ref13, '&-description', {
-    maxWidth: token.descriptionWidth,
+  }), _defineProperty(_$concat8, '&-description', {
+    maxWidth: token.descriptionMaxWidth,
     whiteSpace: 'normal'
-  }), _ref13))), _ref15;
+  }), _$concat8))), _ref2;
 };
-
 var genStepsStyle = function genStepsStyle(token) {
   var componentCls = token.componentCls; // .ant-steps
-
-  return (0, _defineProperty2["default"])({}, componentCls, (0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])({}, (0, _style.resetComponent)(token)), {
+  return _defineProperty({}, componentCls, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
     display: 'flex',
     width: '100%',
     fontSize: 0,
     textAlign: 'initial'
-  }), genStepsItemStyle(token)), genStepsClickableStyle(token)), (0, _customIcon["default"])(token)), (0, _small["default"])(token)), (0, _vertical["default"])(token)), (0, _labelPlacement["default"])(token)), (0, _progressDot["default"])(token)), (0, _nav["default"])(token)), (0, _rtl["default"])(token)), (0, _progress["default"])(token)), (0, _inline["default"])(token)));
-}; // ============================== Export ==============================
-
-
-var _default = (0, _internal.genComponentStyleHook)('Steps', function (token) {
-  var wireframe = token.wireframe,
-      colorTextDisabled = token.colorTextDisabled,
-      fontSizeHeading3 = token.fontSizeHeading3,
-      fontSize = token.fontSize,
-      controlHeight = token.controlHeight,
-      controlHeightLG = token.controlHeightLG,
-      colorTextLightSolid = token.colorTextLightSolid,
-      colorText = token.colorText,
-      colorPrimary = token.colorPrimary,
-      colorTextLabel = token.colorTextLabel,
-      colorTextDescription = token.colorTextDescription,
-      colorTextQuaternary = token.colorTextQuaternary,
-      colorFillContent = token.colorFillContent,
-      controlItemBgActive = token.controlItemBgActive,
-      colorError = token.colorError,
-      colorBgContainer = token.colorBgContainer,
-      colorBorderSecondary = token.colorBorderSecondary;
-  var stepsIconSize = token.controlHeight;
-  var processTailColor = token.colorSplit;
+  }), genStepsItemStyle(token)), genStepsClickableStyle(token)), (0, _customIcon.default)(token)), (0, _small.default)(token)), (0, _vertical.default)(token)), (0, _labelPlacement.default)(token)), (0, _progressDot.default)(token)), (0, _nav.default)(token)), (0, _rtl.default)(token)), (0, _progress.default)(token)), (0, _inline.default)(token)));
+};
+// ============================== Export ==============================
+var prepareComponentToken = function prepareComponentToken(token) {
+  return {
+    titleLineHeight: token.controlHeight,
+    customIconSize: token.controlHeight,
+    customIconTop: 0,
+    customIconFontSize: token.controlHeightSM,
+    iconSize: token.controlHeight,
+    iconTop: -0.5,
+    // magic for ui experience
+    iconFontSize: token.fontSize,
+    iconSizeSM: token.fontSizeHeading3,
+    dotSize: token.controlHeight / 4,
+    dotCurrentSize: token.controlHeightLG / 4,
+    navArrowColor: token.colorTextDisabled,
+    navContentMaxWidth: 'auto',
+    descriptionMaxWidth: 140,
+    waitIconColor: token.wireframe ? token.colorTextDisabled : token.colorTextLabel,
+    waitIconBgColor: token.wireframe ? token.colorBgContainer : token.colorFillContent,
+    waitIconBorderColor: token.wireframe ? token.colorTextDisabled : 'transparent',
+    finishIconBgColor: token.wireframe ? token.colorBgContainer : token.controlItemBgActive,
+    finishIconBorderColor: token.wireframe ? token.colorPrimary : token.controlItemBgActive
+  };
+};
+exports.prepareComponentToken = prepareComponentToken;
+var _default = exports.default = (0, _internal.genStyleHooks)('Steps', function (token) {
+  var colorTextDisabled = token.colorTextDisabled,
+    controlHeightLG = token.controlHeightLG,
+    colorTextLightSolid = token.colorTextLightSolid,
+    colorText = token.colorText,
+    colorPrimary = token.colorPrimary,
+    colorTextDescription = token.colorTextDescription,
+    colorTextQuaternary = token.colorTextQuaternary,
+    colorError = token.colorError,
+    colorBorderSecondary = token.colorBorderSecondary,
+    colorSplit = token.colorSplit;
   var stepsToken = (0, _internal.mergeToken)(token, {
-    // Steps variable default.less
-    processTailColor: processTailColor,
-    stepsNavArrowColor: colorTextDisabled,
-    stepsIconSize: stepsIconSize,
-    stepsIconCustomSize: stepsIconSize,
-    stepsIconCustomTop: 0,
-    stepsIconCustomFontSize: controlHeightLG / 2,
-    stepsIconTop: -0.5,
-    stepsIconFontSize: fontSize,
-    stepsTitleLineHeight: controlHeight,
-    stepsSmallIconSize: fontSizeHeading3,
-    stepsDotSize: controlHeight / 4,
-    stepsCurrentDotSize: controlHeightLG / 4,
-    stepsNavContentMaxWidth: 'auto',
     // Steps component less variable
     processIconColor: colorTextLightSolid,
     processTitleColor: colorText,
@@ -253,24 +233,20 @@ var _default = (0, _internal.genComponentStyleHook)('Steps', function (token) {
     processIconBgColor: colorPrimary,
     processIconBorderColor: colorPrimary,
     processDotColor: colorPrimary,
-    waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
+    processTailColor: colorSplit,
     waitTitleColor: colorTextDescription,
     waitDescriptionColor: colorTextDescription,
-    waitTailColor: processTailColor,
-    waitIconBgColor: wireframe ? colorBgContainer : colorFillContent,
-    waitIconBorderColor: wireframe ? colorTextDisabled : 'transparent',
+    waitTailColor: colorSplit,
     waitDotColor: colorTextDisabled,
     finishIconColor: colorPrimary,
     finishTitleColor: colorText,
     finishDescriptionColor: colorTextDescription,
     finishTailColor: colorPrimary,
-    finishIconBgColor: wireframe ? colorBgContainer : controlItemBgActive,
-    finishIconBorderColor: wireframe ? colorPrimary : controlItemBgActive,
     finishDotColor: colorPrimary,
     errorIconColor: colorTextLightSolid,
     errorTitleColor: colorError,
     errorDescriptionColor: colorError,
-    errorTailColor: processTailColor,
+    errorTailColor: colorSplit,
     errorIconBgColor: colorError,
     errorIconBorderColor: colorError,
     errorDotColor: colorError,
@@ -282,8 +258,4 @@ var _default = (0, _internal.genComponentStyleHook)('Steps', function (token) {
     inlineTailColor: colorBorderSecondary
   });
   return [genStepsStyle(stepsToken)];
-}, {
-  descriptionWidth: 140
-});
-
-exports["default"] = _default;
+}, prepareComponentToken);

package/lib/steps/style/inline.d.ts

@@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 declare const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject>;

package/lib/steps/style/inline.js

@@ -1,38 +1,35 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
+exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
 var genStepsInlineStyle = function genStepsInlineStyle(token) {
-  var _icon, _extends3, _ref2;
-
+  var _icon, _Object$assign2, _$concat;
   var componentCls = token.componentCls,
-      inlineDotSize = token.inlineDotSize,
-      inlineTitleColor = token.inlineTitleColor,
-      inlineTailColor = token.inlineTailColor;
-  var containerPaddingTop = token.paddingXS + token.lineWidth;
-  var titleStyle = (0, _defineProperty2["default"])({}, componentCls + "-item-container " + componentCls + "-item-content " + componentCls + "-item-title", {
+    inlineDotSize = token.inlineDotSize,
+    inlineTitleColor = token.inlineTitleColor,
+    inlineTailColor = token.inlineTailColor;
+  var containerPaddingTop = token.calc(token.paddingXS).add(token.lineWidth).equal();
+  var titleStyle = _defineProperty({}, "".concat(componentCls, "-item-container ").concat(componentCls, "-item-content ").concat(componentCls, "-item-title"), {
     color: inlineTitleColor
   });
-  return (0, _defineProperty2["default"])({}, "&" + componentCls + "-inline", (0, _defineProperty2["default"])({
+  return _defineProperty({}, "&".concat(componentCls, "-inline"), _defineProperty({
     width: 'auto',
     display: 'inline-flex'
-  }, componentCls + "-item", (_ref2 = {
+  }, "".concat(componentCls, "-item"), (_$concat = {
     flex: 'none',
-    '&-container': (0, _defineProperty2["default"])({
-      padding: containerPaddingTop + "px " + token.paddingXXS + "px 0",
-      margin: "0 " + token.marginXXS / 2 + "px",
+    '&-container': _defineProperty({
+      padding: "".concat((0, _cssinjs.unit)(containerPaddingTop), " ").concat((0, _cssinjs.unit)(token.paddingXXS), " 0"),
+      margin: "0 ".concat((0, _cssinjs.unit)(token.calc(token.marginXXS).div(2).equal())),
       borderRadius: token.borderRadiusSM,
       cursor: 'pointer',
-      transition: "background-color " + token.motionDurationMid,
+      transition: "background-color ".concat(token.motionDurationMid),
       '&:hover': {
         background: token.controlItemBgHover
       }
@@ -42,29 +39,29 @@ var genStepsInlineStyle = function genStepsInlineStyle(token) {
     '&-icon': (_icon = {
       width: inlineDotSize,
       height: inlineDotSize,
-      marginInlineStart: "calc(50% - " + inlineDotSize / 2 + "px)"
-    }, (0, _defineProperty2["default"])(_icon, "> " + componentCls + "-icon", {
+      marginInlineStart: "calc(50% - ".concat((0, _cssinjs.unit)(token.calc(inlineDotSize).div(2).equal()), ")")
+    }, _defineProperty(_icon, "> ".concat(componentCls, "-icon"), {
       top: 0
-    }), (0, _defineProperty2["default"])(_icon, componentCls + "-icon-dot", {
-      borderRadius: token.fontSizeSM / 4
+    }), _defineProperty(_icon, "".concat(componentCls, "-icon-dot"), {
+      borderRadius: token.calc(token.fontSizeSM).div(4).equal()
     }), _icon),
     '&-content': {
       width: 'auto',
-      marginTop: token.marginXS - token.lineWidth
+      marginTop: token.calc(token.marginXS).sub(token.lineWidth).equal()
     },
     '&-title': {
       color: inlineTitleColor,
       fontSize: token.fontSizeSM,
       lineHeight: token.lineHeightSM,
       fontWeight: 'normal',
-      marginBottom: token.marginXXS / 2
+      marginBottom: token.calc(token.marginXXS).div(2).equal()
     },
     '&-description': {
       display: 'none'
     },
     '&-tail': {
       marginInlineStart: 0,
-      top: containerPaddingTop + inlineDotSize / 2,
+      top: token.calc(inlineDotSize).div(2).add(containerPaddingTop).equal(),
       transform: "translateY(-50%)",
       '&:after': {
         width: '100%',
@@ -74,29 +71,27 @@ var genStepsInlineStyle = function genStepsInlineStyle(token) {
         background: inlineTailColor
       }
     }
-  }, (0, _defineProperty2["default"])(_ref2, "&:first-child " + componentCls + "-item-tail", {
+  }, _defineProperty(_$concat, "&:first-child ".concat(componentCls, "-item-tail"), {
     width: '50%',
     marginInlineStart: '50%'
-  }), (0, _defineProperty2["default"])(_ref2, "&:last-child " + componentCls + "-item-tail", {
+  }), _defineProperty(_$concat, "&:last-child ".concat(componentCls, "-item-tail"), {
     display: 'block',
     width: '50%'
-  }), (0, _defineProperty2["default"])(_ref2, '&-wait', (0, _extends5["default"])((0, _defineProperty2["default"])({}, componentCls + "-item-icon " + componentCls + "-icon " + componentCls + "-icon-dot", {
+  }), _defineProperty(_$concat, '&-wait', Object.assign(_defineProperty({}, "".concat(componentCls, "-item-icon ").concat(componentCls, "-icon ").concat(componentCls, "-icon-dot"), {
     backgroundColor: token.colorBorderBg,
-    border: token.lineWidth + "px " + token.lineType + " " + inlineTailColor
-  }), titleStyle)), (0, _defineProperty2["default"])(_ref2, '&-finish', (0, _extends5["default"])((_extends3 = {}, (0, _defineProperty2["default"])(_extends3, componentCls + "-item-tail::after", {
+    border: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(inlineTailColor)
+  }), titleStyle)), _defineProperty(_$concat, '&-finish', Object.assign((_Object$assign2 = {}, _defineProperty(_Object$assign2, "".concat(componentCls, "-item-tail::after"), {
     backgroundColor: inlineTailColor
-  }), (0, _defineProperty2["default"])(_extends3, componentCls + "-item-icon " + componentCls + "-icon " + componentCls + "-icon-dot", {
+  }), _defineProperty(_Object$assign2, "".concat(componentCls, "-item-icon ").concat(componentCls, "-icon ").concat(componentCls, "-icon-dot"), {
     backgroundColor: inlineTailColor,
-    border: token.lineWidth + "px " + token.lineType + " " + inlineTailColor
-  }), _extends3), titleStyle)), (0, _defineProperty2["default"])(_ref2, '&-error', titleStyle), (0, _defineProperty2["default"])(_ref2, '&-active, &-process', (0, _extends5["default"])((0, _defineProperty2["default"])({}, componentCls + "-item-icon", {
+    border: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(inlineTailColor)
+  }), _Object$assign2), titleStyle)), _defineProperty(_$concat, '&-error', titleStyle), _defineProperty(_$concat, '&-active, &-process', Object.assign(_defineProperty({}, "".concat(componentCls, "-item-icon"), {
     width: inlineDotSize,
     height: inlineDotSize,
-    marginInlineStart: "calc(50% - " + inlineDotSize / 2 + "px)",
+    marginInlineStart: "calc(50% - ".concat((0, _cssinjs.unit)(token.calc(inlineDotSize).div(2).equal()), ")"),
     top: 0
-  }), titleStyle)), (0, _defineProperty2["default"])(_ref2, "&:not(" + componentCls + "-item-active) > " + componentCls + "-item-container[role='button']:hover", (0, _defineProperty2["default"])({}, componentCls + "-item-title", {
+  }), titleStyle)), _defineProperty(_$concat, "&:not(".concat(componentCls, "-item-active) > ").concat(componentCls, "-item-container[role='button']:hover"), _defineProperty({}, "".concat(componentCls, "-item-title"), {
     color: inlineTitleColor
-  })), _ref2)));
+  })), _$concat)));
 };
-
-var _default = genStepsInlineStyle;
-exports["default"] = _default;
+var _default = exports.default = genStepsInlineStyle;

package/lib/steps/style/label-placement.d.ts

@@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 declare const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject>;