@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/es/steps/style/index.js

@@ -1,5 +1,265 @@
-import "../../style/default.less";
-import "./index.less"; // style dependencies
-// deps-lint-skip: grid
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { genComponentStyleHook, mergeToken } from "../../theme/internal";
+import genStepsCustomIconStyle from "./custom-icon";
+import genStepsLabelPlacementStyle from "./label-placement";
+import genStepsNavStyle from "./nav";
+import genStepsProgressStyle from "./progress";
+import genStepsProgressDotStyle from "./progress-dot";
+import genStepsRTLStyle from "./rtl";
+import genStepsSmallStyle from "./small";
+import genStepsVerticalStyle from "./vertical";
+import genStepsInlineStyle from "./inline";
+import { resetComponent } from "../../style";
+var StepItemStatusEnum;
 
-import "../../progress/style";
+(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 = {}, _defineProperty(_ref4, prefix + "-" + status + " " + prefix + "-icon", _defineProperty({
+    backgroundColor: token[iconBgColorKey],
+    borderColor: token[iconBorderColorKey]
+  }, "> " + token.componentCls + "-icon", _defineProperty({
+    color: token[iconColorKey]
+  }, token.componentCls + "-icon-dot", {
+    background: token[dotColorKey]
+  }))), _defineProperty(_ref4, prefix + "-" + status + prefix + "-custom " + prefix + "-icon", _defineProperty({}, "> " + token.componentCls + "-icon", {
+    color: token[dotColorKey]
+  })), _defineProperty(_ref4, prefix + "-" + status + " > " + prefix + "-container > " + prefix + "-content > " + prefix + "-title", {
+    color: token[titleColorKey],
+    '&::after': {
+      backgroundColor: token[tailColorKey]
+    }
+  }), _defineProperty(_ref4, prefix + "-" + status + " > " + prefix + "-container > " + prefix + "-content > " + prefix + "-description", {
+    color: token[descriptionColorKey]
+  }), _defineProperty(_ref4, prefix + "-" + status + " > " + prefix + "-container > " + prefix + "-tail::after", {
+    backgroundColor: token[tailColorKey]
+  }), _ref4;
+};
+
+var genStepsItemStyle = function genStepsItemStyle(token) {
+  var _extends2, _extends4;
+
+  var componentCls = token.componentCls,
+      motionDurationSlow = token.motionDurationSlow;
+  var stepsItemCls = componentCls + "-item"; // .ant-steps-item
+
+  return _extends(_extends(_extends(_extends(_extends(_extends((_extends2 = {}, _defineProperty(_extends2, stepsItemCls, {
+    position: 'relative',
+    display: 'inline-block',
+    flex: 1,
+    overflow: 'hidden',
+    verticalAlign: 'top',
+    '&:last-child': _defineProperty({
+      flex: 'none'
+    }, "> " + stepsItemCls + "-container > " + stepsItemCls + "-tail, > " + stepsItemCls + "-container >  " + stepsItemCls + "-content > " + stepsItemCls + "-title::after", {
+      display: 'none'
+    })
+  }), _defineProperty(_extends2, stepsItemCls + "-container", {
+    outline: 'none'
+  }), _defineProperty(_extends2, stepsItemCls + "-icon, " + stepsItemCls + "-content", {
+    display: 'inline-block',
+    verticalAlign: 'top'
+  }), _defineProperty(_extends2, stepsItemCls + "-icon", _defineProperty({
+    width: token.stepsIconSize,
+    height: token.stepsIconSize,
+    marginTop: 0,
+    marginBottom: 0,
+    marginInlineStart: 0,
+    marginInlineEnd: token.marginXS,
+    fontSize: token.stepsIconFontSize,
+    fontFamily: token.fontFamily,
+    lineHeight: token.stepsIconSize + "px",
+    textAlign: 'center',
+    borderRadius: token.stepsIconSize,
+    border: token.lineWidth + "px " + token.lineType + " transparent",
+    transition: "background-color " + motionDurationSlow + ", border-color " + motionDurationSlow
+  }, componentCls + "-icon", {
+    position: 'relative',
+    top: token.stepsIconTop,
+    color: token.colorPrimary,
+    lineHeight: 1
+  })), _defineProperty(_extends2, stepsItemCls + "-tail", {
+    position: 'absolute',
+    top: token.stepsIconSize / 2 - token.paddingXXS,
+    insetInlineStart: 0,
+    width: '100%',
+    '&::after': {
+      display: 'inline-block',
+      width: '100%',
+      height: token.lineWidth,
+      background: token.colorSplit,
+      borderRadius: token.lineWidth,
+      transition: "background " + motionDurationSlow,
+      content: '""'
+    }
+  }), _defineProperty(_extends2, stepsItemCls + "-title", {
+    position: 'relative',
+    display: 'inline-block',
+    paddingInlineEnd: token.padding,
+    color: token.colorText,
+    fontSize: token.fontSizeLG,
+    lineHeight: token.stepsTitleLineHeight + "px",
+    '&::after': {
+      position: 'absolute',
+      top: token.stepsTitleLineHeight / 2,
+      insetInlineStart: '100%',
+      display: 'block',
+      width: 9999,
+      height: token.lineWidth,
+      background: token.processTailColor,
+      content: '""'
+    }
+  }), _defineProperty(_extends2, stepsItemCls + "-subtitle", {
+    display: 'inline',
+    marginInlineStart: token.marginXS,
+    color: token.colorTextDescription,
+    fontWeight: 'normal',
+    fontSize: token.fontSize
+  }), _defineProperty(_extends2, stepsItemCls + "-description", {
+    color: token.colorTextDescription,
+    fontSize: token.fontSize
+  }), _extends2), genStepsItemStatusStyle(StepItemStatusEnum.wait, token)), genStepsItemStatusStyle(StepItemStatusEnum.process, token)), _defineProperty({}, stepsItemCls + "-process > " + stepsItemCls + "-container > " + stepsItemCls + "-title", {
+    fontWeight: token.fontWeightStrong
+  })), genStepsItemStatusStyle(StepItemStatusEnum.finish, token)), genStepsItemStatusStyle(StepItemStatusEnum.error, token)), (_extends4 = {}, _defineProperty(_extends4, "" + stepsItemCls + componentCls + "-next-error > " + componentCls + "-item-title::after", {
+    background: token.colorError
+  }), _defineProperty(_extends4, stepsItemCls + "-disabled", {
+    cursor: 'not-allowed'
+  }), _extends4));
+}; // ============================= Clickable ===========================
+
+
+var genStepsClickableStyle = function genStepsClickableStyle(token) {
+  var _ref8, _ref11, _ref13, _ref15;
+
+  var componentCls = token.componentCls,
+      motionDurationSlow = token.motionDurationSlow;
+  return _ref15 = {}, _defineProperty(_ref15, "& " + componentCls + "-item", _defineProperty({}, "&:not(" + componentCls + "-item-active)", (_ref11 = {}, _defineProperty(_ref11, "& > " + componentCls + "-item-container[role='button']", (_ref8 = {
+    cursor: 'pointer'
+  }, _defineProperty(_ref8, componentCls + "-item", _defineProperty({}, "&-title, &-subtitle, &-description, &-icon " + componentCls + "-icon", {
+    transition: "color " + motionDurationSlow
+  })), _defineProperty(_ref8, '&:hover', _defineProperty({}, componentCls + "-item", _defineProperty({}, "&-title, &-subtitle, &-description", {
+    color: token.colorPrimary
+  }))), _ref8)), _defineProperty(_ref11, "&:not(" + componentCls + "-item-process)", _defineProperty({}, "& > " + componentCls + "-item-container[role='button']:hover", _defineProperty({}, componentCls + "-item", {
+    '&-icon': _defineProperty({
+      borderColor: token.colorPrimary
+    }, componentCls + "-icon", {
+      color: token.colorPrimary
+    })
+  }))), _ref11))), _defineProperty(_ref15, "&" + componentCls + "-horizontal:not(" + componentCls + "-label-vertical)", _defineProperty({}, componentCls + "-item", (_ref13 = {
+    paddingInlineStart: token.padding,
+    whiteSpace: 'nowrap',
+    '&:first-child': {
+      paddingInlineStart: 0
+    }
+  }, _defineProperty(_ref13, "&:last-child " + componentCls + "-item-title", {
+    paddingInlineEnd: 0
+  }), _defineProperty(_ref13, '&-tail', {
+    display: 'none'
+  }), _defineProperty(_ref13, '&-description', {
+    maxWidth: token.descriptionWidth,
+    whiteSpace: 'normal'
+  }), _ref13))), _ref15;
+};
+
+var genStepsStyle = function genStepsStyle(token) {
+  var componentCls = token.componentCls; // .ant-steps
+
+  return _defineProperty({}, componentCls, _extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), {
+    display: 'flex',
+    width: '100%',
+    fontSize: 0,
+    textAlign: 'initial'
+  }), genStepsItemStyle(token)), genStepsClickableStyle(token)), genStepsCustomIconStyle(token)), genStepsSmallStyle(token)), genStepsVerticalStyle(token)), genStepsLabelPlacementStyle(token)), genStepsProgressDotStyle(token)), genStepsNavStyle(token)), genStepsRTLStyle(token)), genStepsProgressStyle(token)), genStepsInlineStyle(token)));
+}; // ============================== Export ==============================
+
+
+export default 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;
+  var stepsToken = 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,
+    processDescriptionColor: colorText,
+    processIconBgColor: colorPrimary,
+    processIconBorderColor: colorPrimary,
+    processDotColor: colorPrimary,
+    waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
+    waitTitleColor: colorTextDescription,
+    waitDescriptionColor: colorTextDescription,
+    waitTailColor: processTailColor,
+    waitIconBgColor: wireframe ? colorBgContainer : colorFillContent,
+    waitIconBorderColor: wireframe ? colorTextDisabled : 'transparent',
+    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,
+    errorIconBgColor: colorError,
+    errorIconBorderColor: colorError,
+    errorDotColor: colorError,
+    stepsNavActiveColor: colorPrimary,
+    stepsProgressSize: controlHeightLG,
+    // Steps inline variable
+    inlineDotSize: 6,
+    inlineTitleColor: colorTextQuaternary,
+    inlineTailColor: colorBorderSecondary
+  });
+  return [genStepsStyle(stepsToken)];
+}, {
+  descriptionWidth: 140
+});

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

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

package/es/steps/style/inline.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var genStepsInlineStyle = function genStepsInlineStyle(token) {
+  var _icon, _extends3, _ref2;
+
+  var componentCls = token.componentCls,
+      inlineDotSize = token.inlineDotSize,
+      inlineTitleColor = token.inlineTitleColor,
+      inlineTailColor = token.inlineTailColor;
+  var containerPaddingTop = token.paddingXS + token.lineWidth;
+
+  var titleStyle = _defineProperty({}, componentCls + "-item-container " + componentCls + "-item-content " + componentCls + "-item-title", {
+    color: inlineTitleColor
+  });
+
+  return _defineProperty({}, "&" + componentCls + "-inline", _defineProperty({
+    width: 'auto',
+    display: 'inline-flex'
+  }, componentCls + "-item", (_ref2 = {
+    flex: 'none',
+    '&-container': _defineProperty({
+      padding: containerPaddingTop + "px " + token.paddingXXS + "px 0",
+      margin: "0 " + token.marginXXS / 2 + "px",
+      borderRadius: token.borderRadiusSM,
+      cursor: 'pointer',
+      transition: "background-color " + token.motionDurationMid,
+      '&:hover': {
+        background: token.controlItemBgHover
+      }
+    }, "&[role='button']:hover", {
+      opacity: 1
+    }),
+    '&-icon': (_icon = {
+      width: inlineDotSize,
+      height: inlineDotSize,
+      marginInlineStart: "calc(50% - " + inlineDotSize / 2 + "px)"
+    }, _defineProperty(_icon, "> " + componentCls + "-icon", {
+      top: 0
+    }), _defineProperty(_icon, componentCls + "-icon-dot", {
+      borderRadius: token.fontSizeSM / 4
+    }), _icon),
+    '&-content': {
+      width: 'auto',
+      marginTop: token.marginXS - token.lineWidth
+    },
+    '&-title': {
+      color: inlineTitleColor,
+      fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
+      fontWeight: 'normal',
+      marginBottom: token.marginXXS / 2
+    },
+    '&-description': {
+      display: 'none'
+    },
+    '&-tail': {
+      marginInlineStart: 0,
+      top: containerPaddingTop + inlineDotSize / 2,
+      transform: "translateY(-50%)",
+      '&:after': {
+        width: '100%',
+        height: token.lineWidth,
+        borderRadius: 0,
+        marginInlineStart: 0,
+        background: inlineTailColor
+      }
+    }
+  }, _defineProperty(_ref2, "&:first-child " + componentCls + "-item-tail", {
+    width: '50%',
+    marginInlineStart: '50%'
+  }), _defineProperty(_ref2, "&:last-child " + componentCls + "-item-tail", {
+    display: 'block',
+    width: '50%'
+  }), _defineProperty(_ref2, '&-wait', _extends(_defineProperty({}, componentCls + "-item-icon " + componentCls + "-icon " + componentCls + "-icon-dot", {
+    backgroundColor: token.colorBorderBg,
+    border: token.lineWidth + "px " + token.lineType + " " + inlineTailColor
+  }), titleStyle)), _defineProperty(_ref2, '&-finish', _extends((_extends3 = {}, _defineProperty(_extends3, componentCls + "-item-tail::after", {
+    backgroundColor: inlineTailColor
+  }), _defineProperty(_extends3, componentCls + "-item-icon " + componentCls + "-icon " + componentCls + "-icon-dot", {
+    backgroundColor: inlineTailColor,
+    border: token.lineWidth + "px " + token.lineType + " " + inlineTailColor
+  }), _extends3), titleStyle)), _defineProperty(_ref2, '&-error', titleStyle), _defineProperty(_ref2, '&-active, &-process', _extends(_defineProperty({}, componentCls + "-item-icon", {
+    width: inlineDotSize,
+    height: inlineDotSize,
+    marginInlineStart: "calc(50% - " + inlineDotSize / 2 + "px)",
+    top: 0
+  }), titleStyle)), _defineProperty(_ref2, "&:not(" + componentCls + "-item-active) > " + componentCls + "-item-container[role='button']:hover", _defineProperty({}, componentCls + "-item-title", {
+    color: inlineTitleColor
+  })), _ref2)));
+};
+
+export default genStepsInlineStyle;

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

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

package/es/steps/style/label-placement.js

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var genStepsLabelPlacementStyle = function genStepsLabelPlacementStyle(token) {
+  var _ref2;
+
+  var componentCls = token.componentCls,
+      stepsIconSize = token.stepsIconSize,
+      lineHeight = token.lineHeight,
+      stepsSmallIconSize = token.stepsSmallIconSize;
+  return _defineProperty({}, "&" + componentCls + "-label-vertical", (_ref2 = {}, _defineProperty(_ref2, componentCls + "-item", {
+    overflow: 'visible',
+    '&-tail': {
+      marginInlineStart: stepsIconSize / 2 + token.controlHeightLG,
+      padding: token.paddingXXS + "px " + token.paddingLG + "px"
+    },
+    '&-content': {
+      display: 'block',
+      width: (stepsIconSize / 2 + token.controlHeightLG) * 2,
+      marginTop: token.marginSM,
+      textAlign: 'center'
+    },
+    '&-icon': {
+      display: 'inline-block',
+      marginInlineStart: token.controlHeightLG
+    },
+    '&-title': {
+      paddingInlineEnd: 0,
+      paddingInlineStart: 0,
+      '&::after': {
+        display: 'none'
+      }
+    },
+    '&-subtitle': {
+      display: 'block',
+      marginBottom: token.marginXXS,
+      marginInlineStart: 0,
+      lineHeight: lineHeight
+    }
+  }), _defineProperty(_ref2, "&" + componentCls + "-small:not(" + componentCls + "-dot)", _defineProperty({}, componentCls + "-item", {
+    '&-icon': {
+      marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2
+    }
+  })), _ref2));
+};
+
+export default genStepsLabelPlacementStyle;

package/es/steps/style/nav.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject>;
+export default genStepsNavStyle;

package/es/steps/style/nav.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { textEllipsis } from "../../style";
+
+var genStepsNavStyle = function genStepsNavStyle(token) {
+  var _container, _ref3, _ref4, _ref5, _ref8;
+
+  var componentCls = token.componentCls,
+      stepsNavContentMaxWidth = token.stepsNavContentMaxWidth,
+      stepsNavArrowColor = token.stepsNavArrowColor,
+      stepsNavActiveColor = token.stepsNavActiveColor,
+      motionDurationSlow = token.motionDurationSlow;
+  return _ref8 = {}, _defineProperty(_ref8, "&" + componentCls + "-navigation", (_ref4 = {
+    paddingTop: token.paddingSM
+  }, _defineProperty(_ref4, "&" + componentCls + "-small", _defineProperty({}, componentCls + "-item", {
+    '&-container': {
+      marginInlineStart: -token.marginSM
+    }
+  })), _defineProperty(_ref4, componentCls + "-item", (_ref3 = {
+    overflow: 'visible',
+    textAlign: 'center',
+    '&-container': (_container = {
+      display: 'inline-block',
+      height: '100%',
+      marginInlineStart: -token.margin,
+      paddingBottom: token.paddingSM,
+      textAlign: 'start',
+      transition: "opacity " + motionDurationSlow
+    }, _defineProperty(_container, componentCls + "-item-content", {
+      maxWidth: stepsNavContentMaxWidth
+    }), _defineProperty(_container, componentCls + "-item-title", _extends(_extends({
+      maxWidth: '100%',
+      paddingInlineEnd: 0
+    }, textEllipsis), {
+      '&::after': {
+        display: 'none'
+      }
+    })), _container)
+  }, _defineProperty(_ref3, "&:not(" + componentCls + "-item-active)", _defineProperty({}, componentCls + "-item-container[role='button']", {
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: 0.85
+    }
+  })), _defineProperty(_ref3, '&:last-child', {
+    flex: 1,
+    '&::after': {
+      display: 'none'
+    }
+  }), _defineProperty(_ref3, '&::after', {
+    position: 'absolute',
+    top: "calc(50% - " + token.paddingSM / 2 + "px)",
+    insetInlineStart: '100%',
+    display: 'inline-block',
+    width: token.fontSizeIcon,
+    height: token.fontSizeIcon,
+    borderTop: token.lineWidth + "px " + token.lineType + " " + stepsNavArrowColor,
+    borderBottom: 'none',
+    borderInlineStart: 'none',
+    borderInlineEnd: token.lineWidth + "px " + token.lineType + " " + stepsNavArrowColor,
+    transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
+    content: '""'
+  }), _defineProperty(_ref3, '&::before', {
+    position: 'absolute',
+    bottom: 0,
+    insetInlineStart: '50%',
+    display: 'inline-block',
+    width: 0,
+    height: token.lineWidthBold,
+    backgroundColor: stepsNavActiveColor,
+    transition: "width " + motionDurationSlow + ", inset-inline-start " + motionDurationSlow,
+    transitionTimingFunction: 'ease-out',
+    content: '""'
+  }), _ref3)), _defineProperty(_ref4, componentCls + "-item" + componentCls + "-item-active::before", {
+    insetInlineStart: 0,
+    width: '100%'
+  }), _ref4)), _defineProperty(_ref8, "&" + componentCls + "-navigation" + componentCls + "-vertical", _defineProperty({}, "> " + componentCls + "-item", (_ref5 = {
+    marginInlineEnd: 0,
+    '&::before': {
+      display: 'none'
+    }
+  }, _defineProperty(_ref5, "&" + componentCls + "-item-active::before", {
+    top: 0,
+    insetInlineEnd: 0,
+    insetInlineStart: 'unset',
+    display: 'block',
+    width: token.lineWidth * 3,
+    height: "calc(100% - " + token.marginLG + "px)"
+  }), _defineProperty(_ref5, '&::after', {
+    position: 'relative',
+    insetInlineStart: '50%',
+    display: 'block',
+    width: token.controlHeight * 0.25,
+    height: token.controlHeight * 0.25,
+    marginBottom: token.marginXS,
+    textAlign: 'center',
+    transform: 'translateY(-50%) translateX(-50%) rotate(135deg)'
+  }), _defineProperty(_ref5, "> " + componentCls + "-item-container > " + componentCls + "-item-tail", {
+    visibility: 'hidden'
+  }), _ref5))), _defineProperty(_ref8, "&" + componentCls + "-navigation" + componentCls + "-horizontal", _defineProperty({}, "> " + componentCls + "-item > " + componentCls + "-item-container > " + componentCls + "-item-tail", {
+    visibility: 'hidden'
+  })), _ref8;
+};
+
+export default genStepsNavStyle;

package/es/steps/style/progress-dot.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject>;
+export default genStepsProgressDotStyle;

package/es/steps/style/progress-dot.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var genStepsProgressDotStyle = function genStepsProgressDotStyle(token) {
+  var _ref2, _ref4, _ref5, _ref6;
+
+  var componentCls = token.componentCls,
+      descriptionWidth = token.descriptionWidth,
+      lineHeight = token.lineHeight,
+      stepsCurrentDotSize = token.stepsCurrentDotSize,
+      stepsDotSize = token.stepsDotSize,
+      motionDurationSlow = token.motionDurationSlow;
+  return _ref6 = {}, _defineProperty(_ref6, "&" + componentCls + "-dot, &" + componentCls + "-dot" + componentCls + "-small", _defineProperty({}, componentCls + "-item", (_ref2 = {
+    '&-title': {
+      lineHeight: lineHeight
+    },
+    '&-tail': {
+      top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2),
+      width: '100%',
+      marginTop: 0,
+      marginBottom: 0,
+      marginInline: descriptionWidth / 2 + "px 0",
+      padding: 0,
+      '&::after': {
+        width: "calc(100% - " + token.marginSM * 2 + "px)",
+        height: token.lineWidth * 3,
+        marginInlineStart: token.marginSM
+      }
+    },
+    '&-icon': _defineProperty({
+      width: stepsDotSize,
+      height: stepsDotSize,
+      marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
+      paddingInlineEnd: 0,
+      lineHeight: stepsDotSize + "px",
+      background: 'transparent',
+      border: 0
+    }, componentCls + "-icon-dot", {
+      position: 'relative',
+      "float": 'left',
+      width: '100%',
+      height: '100%',
+      borderRadius: 100,
+      transition: "all " + motionDurationSlow,
+
+      /* expand hover area */
+      '&::after': {
+        position: 'absolute',
+        top: -token.marginSM,
+        insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
+        width: token.controlHeightLG * 1.5,
+        height: token.controlHeight,
+        background: 'transparent',
+        content: '""'
+      }
+    }),
+    '&-content': {
+      width: descriptionWidth
+    }
+  }, _defineProperty(_ref2, "&-process " + componentCls + "-item-icon", {
+    position: 'relative',
+    top: (stepsDotSize - stepsCurrentDotSize) / 2,
+    width: stepsCurrentDotSize,
+    height: stepsCurrentDotSize,
+    lineHeight: stepsCurrentDotSize + "px",
+    background: 'none',
+    marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2
+  }), _defineProperty(_ref2, "&-process " + componentCls + "-icon", _defineProperty({}, "&:first-child " + componentCls + "-icon-dot", {
+    insetInlineStart: 0
+  })), _ref2))), _defineProperty(_ref6, "&" + componentCls + "-vertical" + componentCls + "-dot", (_ref5 = {}, _defineProperty(_ref5, componentCls + "-item-icon", {
+    marginTop: (token.controlHeight - stepsDotSize) / 2,
+    marginInlineStart: 0,
+    background: 'none'
+  }), _defineProperty(_ref5, componentCls + "-item-process " + componentCls + "-item-icon", {
+    marginTop: (token.controlHeight - stepsCurrentDotSize) / 2,
+    top: 0,
+    insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2,
+    marginInlineStart: 0
+  }), _defineProperty(_ref5, componentCls + "-item > " + componentCls + "-item-container > " + componentCls + "-item-tail", {
+    top: (token.controlHeight - stepsDotSize) / 2,
+    insetInlineStart: 0,
+    margin: 0,
+    padding: stepsDotSize + token.paddingXS + "px 0 " + token.paddingXS + "px",
+    '&::after': {
+      marginInlineStart: (stepsDotSize - token.lineWidth) / 2
+    }
+  }), _defineProperty(_ref5, "&" + componentCls + "-small", (_ref4 = {}, _defineProperty(_ref4, componentCls + "-item-icon", {
+    marginTop: (token.controlHeightSM - stepsDotSize) / 2
+  }), _defineProperty(_ref4, componentCls + "-item-process " + componentCls + "-item-icon", {
+    marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2
+  }), _defineProperty(_ref4, componentCls + "-item > " + componentCls + "-item-container > " + componentCls + "-item-tail", {
+    top: (token.controlHeightSM - stepsDotSize) / 2
+  }), _ref4)), _defineProperty(_ref5, componentCls + "-item:first-child " + componentCls + "-icon-dot", {
+    insetInlineStart: 0
+  }), _defineProperty(_ref5, componentCls + "-item-content", {
+    width: 'inherit'
+  }), _ref5)), _ref6;
+};
+
+export default genStepsProgressDotStyle;

package/es/steps/style/progress.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject>;
+export default genStepsProgressStyle;