@digitalc/dxp-ui 0.0.5-alpha.15 → 0.0.5-alpha.17

package/lib/components/Notification/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import './style/index.less';
+export interface NotificationProps {
+    type?: 'info';
+    className?: string;
+    title?: ReactNode;
+    content?: ReactNode;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+declare const Notification: (props: NotificationProps) => React.JSX.Element;
+export default Notification;

package/lib/components/Notification/index.js

@@ -0,0 +1,110 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Notification/index.tsx
+var Notification_exports = {};
+__export(Notification_exports, {
+  default: () => Notification_default
+});
+module.exports = __toCommonJS(Notification_exports);
+var import_react = __toESM(require("react"));
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_theme = require("../../utils/theme");
+var import_designTokens = require("./designTokens");
+var import_constants = require("../../constants");
+var import__ = require("../");
+var import_style = require("./style/index.less");
+var Notification = (props) => {
+  const _a = props, {
+    className = "",
+    prefixCls = import_constants.cssClasses.PREFIX + "-notification",
+    type = "info",
+    title,
+    content
+  } = _a, attr = __objRest(_a, [
+    "className",
+    "prefixCls",
+    "type",
+    "title",
+    "content"
+  ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const {
+    colorNotificationBackgroundInfo,
+    borderRadiusNotification,
+    spacingNotificationPaddingHorizontal,
+    spacingNotificationPaddingVertical,
+    colorNotificationTextTitle,
+    colorNotificationTextBody
+  } = designTokens;
+  const useCustomButtonStyle = () => {
+    const hashId = (0, import_cssinjs.useStyleRegister)({
+      theme: import_theme.theme,
+      token: {},
+      path: [prefixCls]
+    }, () => `
+      .${prefixCls} {
+        display: flex;
+        flex-flow: column;
+        padding: ${spacingNotificationPaddingVertical}px ${spacingNotificationPaddingHorizontal}px;
+        border-radius: ${borderRadiusNotification}px;
+        background: ${colorNotificationBackgroundInfo};
+      }
+    `);
+    return hashId;
+  };
+  useCustomButtonStyle();
+  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ className: `${prefixCls} ${prefixCls}-${type} ${className}` }, attr), /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "TitleT14Bold", color: colorNotificationTextTitle }, title), /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", color: colorNotificationTextBody }, content));
+};
+var Notification_default = Notification;

package/lib/components/Notification/style/index.less

@@ -0,0 +1,45 @@
+
+@import './variables.less';
+
+@components: card;
+.@{prefix}-@{components} {
+  background: #FFFFFF;
+  overflow: unset;
+}
+.@{prefix}-@{components}-whiteDivider,
+.@{prefix}-@{components}-grayDivider {
+  padding: 0;
+  .@{prefix}-@{components}-list {
+    background: #FFFFFF;
+    overflow: unset;
+    > div {
+      position: relative;
+    }
+    > div + div {
+      border-top: 1px dashed #D5D5D5;
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        height: 16px;
+        width: 8px;
+        position: absolute;
+        z-index: 99;
+        top: -8px;
+        border: 1px solid #d5d5d5;
+      }
+      &::before {
+        left: -1px;
+        border-top-right-radius: 16px;
+        border-bottom-right-radius: 16px;
+        border-left: 0;
+      }
+      &::after {
+        right: -1px;
+        border-top-left-radius: 16px;
+        border-bottom-left-radius: 16px;
+        border-right: 0;
+      }
+    }
+  }
+}

package/lib/components/Notification/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

package/lib/components/Search/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     spacingSearchInputIconPaddingRight: any;
     spacingSearchInputPaddingHorizontal: any;
     colorSearchInputIconStandard: any;
@@ -13,7 +13,7 @@ declare const otherDesignTokens: {
     spacingSearchInputResultListPaddingLeft: any;
     spacingSearchInputResultListPaddingRight: any;
 };
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadius: any;
     paddingBlock: number;
     paddingInline: any;
@@ -28,7 +28,7 @@ declare const designTokens: {
     fontSize: any;
     lineHeight: number;
 };
-declare const styleToken: {
+declare const useStyleToken: () => {
     [x: string]: any;
 };
-export { designTokens, otherDesignTokens, styleToken };
+export { useOtherDesignTokens, useDesignTokens, useStyleToken };

package/lib/components/Search/designTokens.js

@@ -19,59 +19,71 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Search/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  designTokens: () => designTokens,
-  otherDesignTokens: () => otherDesignTokens,
-  styleToken: () => styleToken
+  useDesignTokens: () => useDesignTokens,
+  useOtherDesignTokens: () => useOtherDesignTokens,
+  useStyleToken: () => useStyleToken
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
 var import_constants = require("../../constants");
+var import_utils = require("../../utils");
 var prefixCls = import_constants.cssClasses.PREFIX + "-input-outside";
-var otherDesignTokens = {
-  spacingSearchInputIconPaddingRight: (0, import_tokenHelper.getToken)("spacingSearchInputIconPaddingRight"),
-  spacingSearchInputPaddingHorizontal: (0, import_tokenHelper.getToken)("spacingSearchInputPaddingHorizontal"),
-  colorSearchInputIconStandard: (0, import_tokenHelper.getToken)("colorSearchInputIconStandard"),
-  // 搜索图标颜色
-  spacingSearchInputVerticalGap: (0, import_tokenHelper.getToken)("spacingSearchInputVerticalGap"),
-  colorSearchInputBackground: (0, import_tokenHelper.getToken)("colorSearchInputBackground"),
-  colorSearchInputBackgroundHover: (0, import_tokenHelper.getToken)("colorSearchInputBackgroundHover"),
-  colorSearchInputBorderStandard: (0, import_tokenHelper.getToken)("colorSearchInputBorderStandard"),
-  colorSearchInputTextPlaceholder: (0, import_tokenHelper.getToken)("colorSearchInputTextPlaceholder"),
-  colorSearchInputTextLabel: (0, import_tokenHelper.getToken)("colorSearchInputTextLabel"),
-  colorSearchInputTextResults: (0, import_tokenHelper.getToken)("colorSearchInputTextResults"),
-  spacingSearchInputResultPaddingVertical: (0, import_tokenHelper.getToken)("spacingSearchInputResultPaddingVertical"),
-  spacingSearchInputResultListPaddingLeft: (0, import_tokenHelper.getToken)("spacingSearchInputResultListPaddingLeft"),
-  spacingSearchInputResultListPaddingRight: (0, import_tokenHelper.getToken)("spacingSearchInputResultListPaddingRight")
+var useOtherDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const otherDesignTokens = {
+    spacingSearchInputIconPaddingRight: getToken("spacingSearchInputIconPaddingRight"),
+    spacingSearchInputPaddingHorizontal: getToken("spacingSearchInputPaddingHorizontal"),
+    colorSearchInputIconStandard: getToken("colorSearchInputIconStandard"),
+    // 搜索图标颜色
+    spacingSearchInputVerticalGap: getToken("spacingSearchInputVerticalGap"),
+    colorSearchInputBackground: getToken("colorSearchInputBackground"),
+    colorSearchInputBackgroundHover: getToken("colorSearchInputBackgroundHover"),
+    colorSearchInputBorderStandard: getToken("colorSearchInputBorderStandard"),
+    colorSearchInputTextPlaceholder: getToken("colorSearchInputTextPlaceholder"),
+    colorSearchInputTextLabel: getToken("colorSearchInputTextLabel"),
+    colorSearchInputTextResults: getToken("colorSearchInputTextResults"),
+    spacingSearchInputResultPaddingVertical: getToken("spacingSearchInputResultPaddingVertical"),
+    spacingSearchInputResultListPaddingLeft: getToken("spacingSearchInputResultListPaddingLeft"),
+    spacingSearchInputResultListPaddingRight: getToken("spacingSearchInputResultListPaddingRight")
+  };
+  return otherDesignTokens;
 };
-var designTokens = {
-  borderRadius: (0, import_tokenHelper.getToken)("borderRadiusInput"),
-  // 圆角
-  paddingBlock: 10,
-  // 纵向内边距
-  paddingInline: otherDesignTokens.spacingSearchInputPaddingHorizontal + 16 + otherDesignTokens.spacingSearchInputIconPaddingRight,
-  // 横向内边距
-  colorText: (0, import_tokenHelper.getToken)("colorInputTextActive"),
-  // 内容文本颜色
-  hoverBorderColor: (0, import_tokenHelper.getToken)("colorInputBorderActive"),
-  // hover边框颜色
-  activeBorderColor: (0, import_tokenHelper.getToken)("colorInputBorderActive"),
-  // active边框颜色
-  activeShadow: "none",
-  // activeShadow: '0px 0px 0px 2px #180C8E33', // 边框shadow颜色
-  colorBgContainer: (0, import_tokenHelper.getToken)("colorInputBackground"),
-  // 背景颜色
-  borderWidthInputStandard: (0, import_tokenHelper.getToken)("borderWidthInputStandard"),
-  // 标准边框宽度
-  colorBorder: (0, import_tokenHelper.getToken)("colorInputBorderStandard"),
-  // 标准边框颜色
-  colorInputTextPlaceholder: (0, import_tokenHelper.getToken)("colorInputTextPlaceholder"),
-  // placeholder文本颜色
-  fontSize: (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  // 字体大小
-  lineHeight: 1.5
-  // colorBgContainerDisabled: getToken('colorInputBackgroundHaze'), // 背景颜色
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    borderRadius: getToken("borderRadiusInput"),
+    // 圆角
+    paddingBlock: 10,
+    // 纵向内边距
+    paddingInline: getToken("spacingSearchInputPaddingHorizontal"),
+    // 横向内边距
+    colorText: getToken("colorInputTextActive"),
+    // 内容文本颜色
+    hoverBorderColor: getToken("colorInputBorderActive"),
+    // hover边框颜色
+    activeBorderColor: getToken("colorInputBorderActive"),
+    // active边框颜色
+    activeShadow: "none",
+    // activeShadow: '0px 0px 0px 2px #180C8E33', // 边框shadow颜色
+    colorBgContainer: getToken("colorInputBackground"),
+    // 背景颜色
+    borderWidthInputStandard: getToken("borderWidthInputStandard"),
+    // 标准边框宽度
+    colorBorder: getToken("colorInputBorderStandard"),
+    // 标准边框颜色
+    colorInputTextPlaceholder: getToken("colorInputTextPlaceholder"),
+    // placeholder文本颜色
+    fontSize: getToken("ContentC14Regular"),
+    // 字体大小
+    lineHeight: 1.5
+    // colorBgContainerDisabled: getToken('colorInputBackgroundHaze'), // 背景颜色
+  };
+  return designTokens;
 };
-var styleToken = {
-  [`--${prefixCls}-color-error-border-hover`]: (0, import_tokenHelper.getToken)("colorInputBorderError")
-  // error颜色
+var useStyleToken = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const styleToken = {
+    [`--${prefixCls}-color-error-border-hover`]: getToken("colorInputBorderError")
+    // error颜色
+  };
+  return styleToken;
 };

package/lib/components/Search/index.js

@@ -18,6 +18,18 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -55,13 +67,16 @@ var import_designTokens = require("./designTokens");
 var import_Icon = __toESM(require("../Icon"));
 var import_style = require("./style/index.less");
 var Search = (props) => {
-  const { placeholder, resultList, onSearch = () => {
+  const _a = props, { placeholder, resultList, onSearch = () => {
   }, onEnter = () => {
-  }, showResult } = props;
+  }, showResult, className = "" } = _a, attr = __objRest(_a, ["placeholder", "resultList", "onSearch", "onEnter", "showResult", "className"]);
   const prefix = `${import_constants.cssClasses.PREFIX}-search`;
+  const otherDesignTokens = (0, import_designTokens.useOtherDesignTokens)();
+  const designTokens = (0, import_designTokens.useDesignTokens)();
   const {
     colorSearchInputIconStandard,
     spacingSearchInputPaddingHorizontal,
+    spacingSearchInputIconPaddingRight,
     spacingSearchInputVerticalGap,
     colorSearchInputBackground,
     spacingSearchInputResultPaddingVertical,
@@ -71,24 +86,31 @@ var Search = (props) => {
     colorSearchInputBackgroundHover,
     colorSearchInputBorderStandard
     // colorSearchInputTextLabel: getToken('colorSearchInputTextLabel'),
-  } = import_designTokens.otherDesignTokens;
+  } = otherDesignTokens;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
-      token: { baseColor: "blue" },
+      token: {},
       path: [`${prefix}`]
     }, () => `
+      .${prefix} {
+        .${prefix}-input,
+        .${prefix}-input-affix-wrapper {
+          padding-left: ${spacingSearchInputPaddingHorizontal + 16 + spacingSearchInputIconPaddingRight}px;
+        }
+      }
       .${prefix}-icon {
         color: ${colorSearchInputIconStandard};
         top: 15px;
         left: ${spacingSearchInputPaddingHorizontal}px;
+        z-index: 2;
       }
       .${prefix}-result {
         margin-top: ${spacingSearchInputVerticalGap}px;
         padding: ${spacingSearchInputResultPaddingVertical}px 0;
         border: 1px solid ${colorSearchInputBorderStandard};
         background: ${colorSearchInputBackground};
-        border-radius: ${import_designTokens.designTokens.borderRadius}px;
+        border-radius: ${designTokens.borderRadius}px;
         color: ${colorSearchInputTextResults};
       }
       .${prefix}-result li {
@@ -112,15 +134,15 @@ var Search = (props) => {
       prefixCls: prefix,
       theme: {
         components: {
-          Input: __spreadValues({}, import_designTokens.designTokens)
+          Input: __spreadValues({}, designTokens)
         },
         cssVar: true,
         hashed: false
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: prefix }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix} ${className}` }, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Input,
-      {
+      __spreadValues({
         placeholder,
         onChange: (e) => {
           const val = e.target.value || "";
@@ -130,7 +152,7 @@ var Search = (props) => {
           const val = e.target.value || "";
           onEnter(val);
         }
-      }
+      }, attr)
     ), /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: `${prefix}-icon`, size: 16, name: "icon-Search" }), resultList && /* @__PURE__ */ import_react.default.createElement("div", { className: showResult ? `${prefix}-result ${prefix}-result-show` : `${prefix}-result` }, resultList))
   );
 };

package/lib/components/Stepper/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorText: any;
     colorTextDescription: any;
     colorTextLightSolid: any;
@@ -7,14 +7,14 @@ declare const designTokens: {
     colorBorderSecondary: any;
     colorSplit: any;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     [x: string]: string;
     '--ant-steps-icon-size': string;
     '--ant-steps-icon-size-sm': string;
     '--dxp-steps-icon-size': string;
     '--dxp-steps-icon-size-sm': string;
 };
-declare const mobileDesignTokens: {
+declare const useMobileDesignTokens: () => {
     colorStepperBackgroundActiveWeak: any;
     '--dxp-steps-color-neutral': any;
     '--dxp-steps-color-secondary': any;
@@ -22,5 +22,4 @@ declare const mobileDesignTokens: {
     '--dxp-steps-background-active': any;
     '--dxp-steps-background-activeWeak': any;
 };
-export { otherDesignTokens, mobileDesignTokens, };
-export default designTokens;
+export { useDesignTokens, useMobileDesignTokens, useOtherDesignTokens };

package/lib/components/Stepper/designTokens.js

@@ -19,72 +19,80 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Stepper/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  default: () => designTokens_default,
-  mobileDesignTokens: () => mobileDesignTokens,
-  otherDesignTokens: () => otherDesignTokens
+  useDesignTokens: () => useDesignTokens,
+  useMobileDesignTokens: () => useMobileDesignTokens,
+  useOtherDesignTokens: () => useOtherDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
 var import_constants = require("../../constants");
+var import_utils = require("../../utils");
 var prefixCls = import_constants.cssClasses.PREFIX + "-stepper";
-var designTokens = {
-  // 算法配置
-  // algorithm: true,
-  // 当前 高亮步骤 text描述|| 已完成步骤的 text 色都是它
-  colorText: (0, import_tokenHelper.getToken)("colorStepperTextInactive"),
-  // 深灰
-  // 未开始的步骤text色 \ text描述色
-  colorTextDescription: (0, import_tokenHelper.getToken)("colorStepperTextInactive"),
-  // 当前 高亮步骤 icon的 text 色
-  colorTextLightSolid: (0, import_tokenHelper.getToken)("colorStepperTextActive"),
-  // 白色
-  // 高亮步骤 background色
-  colorPrimary: (0, import_tokenHelper.getToken)("colorStepperBackgroundActive"),
-  // 蓝色
-  // 高亮步骤 分割线的颜色 此颜色和 colorPrimary 的颜色一致（自动的）
-  // 已完成 background 颜色  无此token 通过less 变量覆盖
-  // colorSuccess: getToken('colorStepperBackgroundSuccess'),
-  // 未开始 状态 background 颜色 无此token 通过less 变量覆盖
-  // processIconBgColor: getToken('colorStepperBackgroundInactive'),
-  //  进行中状态 线条颜色
-  colorBorderBg: (0, import_tokenHelper.getToken)("colorStepperBorderActive"),
-  colorBorderSecondary: (0, import_tokenHelper.getToken)("colorStepperConnectorInactive"),
-  // colorSplit 未开始 分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致
-  colorSplit: (0, import_tokenHelper.getToken)("colorStepperConnectorInactive")
-  // 灰色
-  // color.stepper.icon.success
-  // fontSize: '14px',
-  // fontSizeSM: '14px',
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  return {
+    // 算法配置
+    // algorithm: true,
+    // 当前 高亮步骤 text描述|| 已完成步骤的 text 色都是它
+    colorText: getToken("colorStepperTextInactive"),
+    // 深灰
+    // 未开始的步骤text色 \ text描述色
+    colorTextDescription: getToken("colorStepperTextInactive"),
+    // 当前 高亮步骤 icon的 text 色
+    colorTextLightSolid: getToken("colorStepperTextActive"),
+    // 白色
+    // 高亮步骤 background色
+    colorPrimary: getToken("colorStepperBackgroundActive"),
+    // 蓝色
+    // 高亮步骤 分割线的颜色 此颜色和 colorPrimary 的颜色一致（自动的）
+    // 已完成 background 颜色  无此token 通过less 变量覆盖
+    // colorSuccess: getToken('colorStepperBackgroundSuccess'),
+    // 未开始 状态 background 颜色 无此token 通过less 变量覆盖
+    // processIconBgColor: getToken('colorStepperBackgroundInactive'),
+    //  进行中状态 线条颜色
+    colorBorderBg: getToken("colorStepperBorderActive"),
+    colorBorderSecondary: getToken("colorStepperConnectorInactive"),
+    // colorSplit 未开始 分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致
+    colorSplit: getToken("colorStepperConnectorInactive")
+    // 灰色
+    // color.stepper.icon.success
+    // fontSize: '14px',
+    // fontSizeSM: '14px',
+  };
 };
-var otherDesignTokens = {
-  // 进行中 步骤条 圈的颜色
-  [`--${import_constants.cssClasses.PREFIX}-progress-default-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBorderActive")}`,
-  [`--${prefixCls}-progress-default-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBorderActive")}`,
-  [`--${prefixCls}-progress-border-width`]: `${(0, import_tokenHelper.getToken)("borderWidthStepperActive")}`,
-  [`--${prefixCls}-progress-border-connector`]: `${(0, import_tokenHelper.getToken)("borderWidthStepperConnector")}`,
-  // 已完成 步骤条 圈的颜色
-  [`--${prefixCls}-finish-icon-bg-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBackgroundSuccess")}`,
-  [`--${prefixCls}-finish-icon-border-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBackgroundSuccess")}`,
-  [`--${prefixCls}-finish-icon-success`]: `${(0, import_tokenHelper.getToken)("colorStepperIconSuccess")}`,
-  [`--${prefixCls}-finish-line-color`]: `${(0, import_tokenHelper.getToken)("colorStepperConnectorSuccess")}`,
-  // 未开始 步骤条 圈的颜色
-  [`--${prefixCls}-wait-icon-bg-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBackgroundInactive")}`,
-  [`--${prefixCls}-wait-icon-border-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBackgroundInactive")}`,
-  [`--${prefixCls}-wait-icon-color`]: `${(0, import_tokenHelper.getToken)("colorStepperTextLabel")}`,
-  // 进行中状态 线条颜色在上面的token 中
-  // colorStepperConnectorInactive
-  "--ant-steps-icon-size": (0, import_tokenHelper.getToken)("sizingStepperOuter") + "px",
-  "--ant-steps-icon-size-sm": (0, import_tokenHelper.getToken)("sizingStepperInner") + "px",
-  "--dxp-steps-icon-size": (0, import_tokenHelper.getToken)("sizingStepperOuter") + "px",
-  "--dxp-steps-icon-size-sm": (0, import_tokenHelper.getToken)("sizingStepperInner") + "px"
+var useOtherDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  return {
+    // 进行中 步骤条 圈的颜色
+    [`--${import_constants.cssClasses.PREFIX}-progress-default-color`]: `${getToken("colorStepperBorderActive")}`,
+    [`--${prefixCls}-progress-default-color`]: `${getToken("colorStepperBorderActive")}`,
+    [`--${prefixCls}-progress-border-width`]: `${getToken("borderWidthStepperActive")}`,
+    [`--${prefixCls}-progress-border-connector`]: `${getToken("borderWidthStepperConnector")}`,
+    // 已完成 步骤条 圈的颜色
+    [`--${prefixCls}-finish-icon-bg-color`]: `${getToken("colorStepperBackgroundSuccess")}`,
+    [`--${prefixCls}-finish-icon-border-color`]: `${getToken("colorStepperBackgroundSuccess")}`,
+    [`--${prefixCls}-finish-icon-success`]: `${getToken("colorStepperIconSuccess")}`,
+    [`--${prefixCls}-finish-line-color`]: `${getToken("colorStepperConnectorSuccess")}`,
+    // 未开始 步骤条 圈的颜色
+    [`--${prefixCls}-wait-icon-bg-color`]: `${getToken("colorStepperBackgroundInactive")}`,
+    [`--${prefixCls}-wait-icon-border-color`]: `${getToken("colorStepperBackgroundInactive")}`,
+    [`--${prefixCls}-wait-icon-color`]: `${getToken("colorStepperTextLabel")}`,
+    // 进行中状态 线条颜色在上面的token 中
+    // colorStepperConnectorInactive
+    "--ant-steps-icon-size": getToken("sizingStepperOuter") + "px",
+    "--ant-steps-icon-size-sm": getToken("sizingStepperInner") + "px",
+    "--dxp-steps-icon-size": getToken("sizingStepperOuter") + "px",
+    "--dxp-steps-icon-size-sm": getToken("sizingStepperInner") + "px"
+  };
 };
-var mobileDesignTokens = {
-  colorStepperBackgroundActiveWeak: (0, import_tokenHelper.getToken)("colorStepperBackgroundActiveWeak"),
-  // moblie
-  "--dxp-steps-color-neutral": (0, import_tokenHelper.getToken)("colorStepperTextNeutral"),
-  "--dxp-steps-color-secondary": (0, import_tokenHelper.getToken)("colorStepperTextLabel"),
-  "--dxp-steps-color-label2": (0, import_tokenHelper.getToken)("colorStepperTextLabel2"),
-  "--dxp-steps-background-active": (0, import_tokenHelper.getToken)("colorStepperBackgroundActive"),
-  "--dxp-steps-background-activeWeak": (0, import_tokenHelper.getToken)("colorStepperBackgroundActiveWeak")
+var useMobileDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  return {
+    colorStepperBackgroundActiveWeak: getToken("colorStepperBackgroundActiveWeak"),
+    // moblie
+    "--dxp-steps-color-neutral": getToken("colorStepperTextNeutral"),
+    "--dxp-steps-color-secondary": getToken("colorStepperTextLabel"),
+    "--dxp-steps-color-label2": getToken("colorStepperTextLabel2"),
+    "--dxp-steps-background-active": getToken("colorStepperBackgroundActive"),
+    "--dxp-steps-background-activeWeak": getToken("colorStepperBackgroundActiveWeak")
+  };
 };
-var designTokens_default = designTokens;

package/lib/components/Stepper/index.d.ts

@@ -1,22 +1,21 @@
 import { StepsProps } from 'antd';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import './style/index.less';
+export declare const stepperTypes: {
+    readonly default: "default";
+    readonly line: "line";
+};
+export type StepperType = typeof stepperTypes[keyof typeof stepperTypes];
 export interface StepperProps extends Omit<StepsProps, 'description'> {
     description?: string;
     prefixCls?: string;
     breakpoint?: 'desktop' | 'mobile';
+    stepperType?: StepperType;
     percent?: number;
     title?: string;
     labelPlacement?: 'horizontal' | 'vertical';
     nextStepText?: string;
     [key: string]: any;
 }
-export default class Stepper extends PureComponent<StepperProps> {
-    static defaultProps: {
-        prefixCls: string;
-        breakpoint: string;
-        labelPlacement: string;
-    };
-    descriptionText: (content: React.ReactNode) => React.JSX.Element;
-    render(): React.JSX.Element;
-}
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;