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

package/es/components/Stepper/index.js

@@ -5,149 +5,153 @@ import _Steps from "antd/es/steps";
 import "antd/es/progress/style";
 import _Progress from "antd/es/progress";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { PureComponent } from 'react';
-import { cssClasses } from "../../constants";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "className", "items", "children", "stepperType", "percent", "current", "nextStepText", "prefixCls", "labelPlacement"];
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { cssClasses, strings } from "../../constants";
 import Text from "../Text";
-import designTokens, { mobileDesignTokens, otherDesignTokens } from "./designTokens";
+import { useDesignTokens, useMobileDesignTokens, useOtherDesignTokens } from "./designTokens";
+// import { useBreakPoint } from '@/utils';
+
 import "./style/index.less";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var Stepper = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Stepper, _PureComponent);
-  var _super = _createSuper(Stepper);
-  function Stepper() {
-    var _this;
-    _classCallCheck(this, Stepper);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "descriptionText", function (content) {
-      return /*#__PURE__*/_jsx(Text, {
-        className: cssClasses.PREFIX + '-stepper-description',
-        size: "ContentC12Bold",
-        children: content
+export var stepperTypes = {
+  default: 'default',
+  // 默认web上的stepper
+  line: 'line' // 移动端上的stepper
+};
+var Stepper = function Stepper(_ref) {
+  var style = _ref.style,
+    className = _ref.className,
+    items = _ref.items,
+    children = _ref.children,
+    _ref$stepperType = _ref.stepperType,
+    stepperType = _ref$stepperType === void 0 ? stepperTypes.default : _ref$stepperType,
+    percent = _ref.percent,
+    current = _ref.current,
+    _ref$nextStepText = _ref.nextStepText,
+    nextStepText = _ref$nextStepText === void 0 ? 'Next Step:' : _ref$nextStepText,
+    _ref$prefixCls = _ref.prefixCls,
+    prefixCls = _ref$prefixCls === void 0 ? cssClasses.PREFIX + '-stepper' : _ref$prefixCls,
+    _ref$labelPlacement = _ref.labelPlacement,
+    labelPlacement = _ref$labelPlacement === void 0 ? 'vertical' : _ref$labelPlacement,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  // 使用hooks获取动态tokens
+  var designTokens = useDesignTokens();
+  var mobileDesignTokens = useMobileDesignTokens();
+  var otherDesignTokens = useOtherDesignTokens();
+
+  // 使用 Hook 获取设备类型，如果未指定 breakpoint，则根据设备类型自动选择
+  // const autoBreakPoint = useBreakPoint();
+  // const deviceType = breakpoint || autoBreakPoint;
+
+  var descriptionText = function descriptionText(content) {
+    return /*#__PURE__*/_jsx(Text, {
+      className: cssClasses.PREFIX + '-stepper-description',
+      size: "ContentC12Bold",
+      children: content
+    });
+  };
+
+  // 处理 items 方式
+  var processedItems = useMemo(function () {
+    return items === null || items === void 0 ? void 0 : items.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        description: descriptionText(item.description)
       });
     });
-    return _this;
-  }
-  _createClass(Stepper, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        style = _this$props.style,
-        items = _this$props.items,
-        children = _this$props.children,
-        breakpoint = _this$props.breakpoint,
-        percent = _this$props.percent,
-        current = _this$props.current,
-        _this$props$nextStepT = _this$props.nextStepText,
-        nextStepText = _this$props$nextStepT === void 0 ? 'Next Step:' : _this$props$nextStepT;
+  }, [items]);
 
-      // 处理 items 方式
-      var processedItems = items === null || items === void 0 ? void 0 : items.map(function (item) {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          description: _this2.descriptionText(item.description)
+  // 处理 children 方式
+  var processedChildren = useMemo(function () {
+    return children && React.Children.map(children, function (child) {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          description: descriptionText(child.props.description)
         });
-      });
+      }
+      return child;
+    });
+  }, [children]);
 
-      // 处理 children 方式
-      var processedChildren = children && React.Children.map(children, function (child) {
-        if ( /*#__PURE__*/React.isValidElement(child)) {
-          return /*#__PURE__*/React.cloneElement(child, {
-            description: _this2.descriptionText(child.props.description)
-          });
-        }
-        return child;
-      });
+  // 计算总步骤数
+  var totalSteps = useMemo(function () {
+    return (items === null || items === void 0 ? void 0 : items.length) || React.Children.count(children) || 0;
+  }, [items, children]);
 
-      // 计算总步骤数
-      var totalSteps = (items === null || items === void 0 ? void 0 : items.length) || React.Children.count(children) || 0;
-      // 优化获取步骤信息的逻辑
-      var getStepInfo = function getStepInfo(items, current) {
-        var _items$current, _items;
-        var hasNextStep = items && current !== undefined && current < items.length - 1;
-        return {
-          title: hasNextStep ? ((_items$current = items[current]) === null || _items$current === void 0 ? void 0 : _items$current.title) || '' : '',
-          nextStep: hasNextStep ? ((_items = items[current + 1]) === null || _items === void 0 ? void 0 : _items.title) || '' : ''
-        };
+  // 优化获取步骤信息的逻辑
+  var _useMemo = useMemo(function () {
+      var _items$current, _items;
+      var hasNextStep = items && current !== undefined && current < items.length - 1;
+      return {
+        title: hasNextStep ? ((_items$current = items[current]) === null || _items$current === void 0 ? void 0 : _items$current.title) || '' : '',
+        nextStep: hasNextStep ? ((_items = items[current + 1]) === null || _items === void 0 ? void 0 : _items.title) || '' : ''
       };
-
-      // 在 render 方法中使用
-      var _getStepInfo = getStepInfo(items, current),
-        title = _getStepInfo.title,
-        nextStep = _getStepInfo.nextStep;
-      return /*#__PURE__*/_jsx(_ConfigProvider, {
-        prefixCls: cssClasses.PREFIX,
-        theme: {
-          components: {
-            Steps: _objectSpread({}, designTokens)
-          },
-          cssVar: true,
-          hashed: false
-        },
-        children: breakpoint === 'mobile' ? /*#__PURE__*/_jsx("div", {
-          className: "".concat(cssClasses.PREFIX, "-stepper-m"),
-          style: _objectSpread(_objectSpread({}, mobileDesignTokens), style),
-          children: /*#__PURE__*/_jsxs("div", {
-            className: "".concat(cssClasses.PREFIX, "-stepper-m-header"),
-            children: [/*#__PURE__*/_jsxs("div", {
-              className: "".concat(cssClasses.PREFIX, "-stepper-m-count"),
-              children: [/*#__PURE__*/_jsx(Text, {
-                className: "".concat(cssClasses.PREFIX, "-stepper-m-neutral"),
-                breakpoint: "mobile",
-                size: "TitleT41Bold",
-                children: String(current !== undefined ? current + 1 : 1).padStart(2, '0')
-              }), /*#__PURE__*/_jsx(Text, {
-                breakpoint: "mobile",
-                size: "TitleT15Bold",
-                children: "/"
-              }), /*#__PURE__*/_jsx(Text, {
-                className: "".concat(cssClasses.PREFIX, "-stepper-m-secondary"),
-                breakpoint: "mobile",
-                size: "TitleT23Bold",
-                children: totalSteps
-              })]
-            }), /*#__PURE__*/_jsx(_Progress, {
-              percent: percent,
-              status: "active",
-              strokeColor: designTokens.colorPrimary,
-              trailColor: mobileDesignTokens.colorStepperBackgroundActiveWeak,
-              showInfo: false,
-              size: ['100%', 8]
-            }), title && /*#__PURE__*/_jsx(Text, {
-              className: "".concat(cssClasses.PREFIX, "-stepper-m-title"),
-              breakpoint: "mobile",
-              size: "TitleT15Bold",
-              children: title
-            }), nextStep && /*#__PURE__*/_jsx("div", {
-              className: "".concat(cssClasses.PREFIX, "-stepper-m-next"),
-              children: /*#__PURE__*/_jsxs(Text, {
-                type: "secondary",
-                size: "ContentC12Regular",
-                children: [nextStepText, " ", nextStep]
-              })
-            })]
+    }, [items, current]),
+    title = _useMemo.title,
+    nextStep = _useMemo.nextStep;
+  return /*#__PURE__*/_jsx(_ConfigProvider, {
+    prefixCls: cssClasses.PREFIX,
+    theme: {
+      components: {
+        Steps: _objectSpread({}, designTokens)
+      },
+      cssVar: true,
+      hashed: false
+    },
+    children: stepperType === stepperTypes.line ? /*#__PURE__*/_jsx("div", {
+      className: classNames("".concat(cssClasses.PREFIX, "-stepper-m"), className),
+      style: _objectSpread(_objectSpread({}, mobileDesignTokens), style),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-stepper-m-header"),
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "".concat(cssClasses.PREFIX, "-stepper-m-count"),
+          children: [/*#__PURE__*/_jsx(Text, {
+            className: "".concat(cssClasses.PREFIX, "-stepper-m-neutral"),
+            breakpoint: strings.breakpoint.MOBILE,
+            size: "TitleT41Bold",
+            children: String(current !== undefined ? current + 1 : 1).padStart(2, '0')
+          }), /*#__PURE__*/_jsx(Text, {
+            breakpoint: strings.breakpoint.MOBILE,
+            size: "TitleT15Bold",
+            children: "/"
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "".concat(cssClasses.PREFIX, "-stepper-m-secondary"),
+            breakpoint: strings.breakpoint.MOBILE,
+            size: "TitleT23Bold",
+            children: totalSteps
+          })]
+        }), /*#__PURE__*/_jsx(_Progress, {
+          percent: percent,
+          status: "active",
+          strokeColor: designTokens.colorPrimary,
+          trailColor: mobileDesignTokens.colorStepperBackgroundActiveWeak,
+          showInfo: false,
+          size: ['100%', 8]
+        }), title && /*#__PURE__*/_jsx(Text, {
+          className: "".concat(cssClasses.PREFIX, "-stepper-m-title"),
+          breakpoint: strings.breakpoint.MOBILE,
+          size: "TitleT15Bold",
+          children: title
+        }), nextStep && /*#__PURE__*/_jsx("div", {
+          className: "".concat(cssClasses.PREFIX, "-stepper-m-next"),
+          children: /*#__PURE__*/_jsxs(Text, {
+            type: "secondary",
+            size: "ContentC12Regular",
+            children: [nextStepText, " ", nextStep]
           })
-        }) : /*#__PURE__*/_jsx(_Steps, _objectSpread(_objectSpread({}, this.props), {}, {
-          items: processedItems,
-          style: _objectSpread(_objectSpread({}, otherDesignTokens), style),
-          children: processedChildren
-        }))
-      });
-    }
-  }]);
-  return Stepper;
-}(PureComponent);
-_defineProperty(Stepper, "defaultProps", {
-  prefixCls: cssClasses.PREFIX + '-stepper',
-  breakpoint: 'desktop',
-  labelPlacement: 'vertical'
-});
-export { Stepper as default };
+        })]
+      })
+    }) : /*#__PURE__*/_jsx(_Steps, _objectSpread(_objectSpread({}, restProps), {}, {
+      prefixCls: prefixCls,
+      style: _objectSpread(_objectSpread({}, otherDesignTokens), style),
+      className: className,
+      items: processedItems,
+      current: current,
+      labelPlacement: labelPlacement,
+      children: processedChildren
+    }))
+  });
+};
+export default Stepper;

package/es/components/Stepper/style/index.less

@@ -7,7 +7,7 @@
 .@{prefix}-@{components} {
   display: flex;
   width: 100%;
-  font-size:0;
+  font-size: 0;
   text-align: initial;
   min-width: 128px;
   padding-top: 8px;
@@ -72,18 +72,19 @@
 
 }
 
- // moblie
- @dxp-steps-color-neutral: ~"--dxp-steps-color-neutral";
- @dxp-steps-color-secondary: ~"--dxp-steps-color-secondary";
- @dxp-steps-color-label2: ~"--dxp-steps-color-label2";
- @dxp-steps-background-active: ~"--dxp-steps-background-active";
- @dxp-steps-background-activeWeak: ~"--dxp-steps-background-activeWeak";
+// moblie
+@dxp-steps-color-neutral: ~"--dxp-steps-color-neutral";
+@dxp-steps-color-secondary: ~"--dxp-steps-color-secondary";
+@dxp-steps-color-label2: ~"--dxp-steps-color-label2";
+@dxp-steps-background-active: ~"--dxp-steps-background-active";
+@dxp-steps-background-activeWeak: ~"--dxp-steps-background-activeWeak";
 
 
 @stepper-prefix-cls: stepper;
 
 .@{prefix}-@{stepper-prefix-cls} {
-  font-size:0;
+  font-size: 0;
+
   &-description {
     margin-top: 4px;
   }
@@ -97,10 +98,12 @@
       display: flex;
       flex-direction: column;
       gap: 0;
-      .@{prefix}-@{stepper-prefix-cls}-bg{
+
+      .@{prefix}-@{stepper-prefix-cls}-bg {
         background-color: var(@dxp-steps-background-active);
       }
-      .@{prefix}-@{stepper-prefix-cls}-inner{
+
+      .@{prefix}-@{stepper-prefix-cls}-inner {
         background-color: var(@dxp-steps-background-activeWeak);
       }
     }
@@ -127,7 +130,7 @@
 
     &-next {
       color: var(@dxp-steps-color-label2);
-      margin-top:0;
+      margin-top: 0;
       color: #858585;
     }
 
@@ -137,4 +140,16 @@
       margin: 4px 0;
     }
   }
-}
+}
+
+.dxp-progress .dxp-progress-bg::after {
+  content: ' ';
+  display: block;
+  width: 4px;
+  position: relative;
+  top: 2px;
+  left: calc(100% - 6px);
+  height: 4px;
+  border-radius: 50%;
+  background: #fff !important;
+}

package/es/components/StickyFooter/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     padding: string;
     borderTop: string;
     backgroundColor: any;
@@ -7,4 +7,4 @@ declare const designTokens: {
     textDiscontColor: any;
     colorStrikethrough: any;
 };
-export { designTokens };
+export { useDesignTokens };

package/es/components/StickyFooter/designTokens.js

@@ -1,17 +1,21 @@
-import { getToken } from "../../utils/tokenHelper";
-var designTokens = {
-  padding: "".concat(getToken('spacingStickyFooterPaddingTop'), "px ").concat(getToken('spacingStickyFooterPaddingHorizontal'), "px ").concat(getToken('spacingStickyFooterPaddingBottom'), "px"),
-  // 间距
-  borderTop: "1px solid ".concat(getToken('colorStickyFooterBorderTop')),
-  // 边框
-  backgroundColor: getToken('colorStickyFooterBackground'),
-  // 背景颜色
-  priceColor: getToken('colorStickyFooterPrice'),
-  // 金额颜色
-  textColor: getToken('colorStickyFooterText'),
-  // 文本颜色
-  textDiscontColor: getToken('colorStickyFooterText2'),
-  // 文本颜色
-  colorStrikethrough: getToken('colorStickyFooterPriceStrikethrough') // 划线价颜色
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    padding: "".concat(getToken('spacingStickyFooterPaddingTop'), "px ").concat(getToken('spacingStickyFooterPaddingHorizontal'), "px ").concat(getToken('spacingStickyFooterPaddingBottom'), "px"),
+    // 间距
+    borderTop: "1px solid ".concat(getToken('colorStickyFooterBorderTop')),
+    // 边框
+    backgroundColor: getToken('colorStickyFooterBackground'),
+    // 背景颜色
+    priceColor: getToken('colorStickyFooterPrice'),
+    // 金额颜色
+    textColor: getToken('colorStickyFooterText'),
+    // 文本颜色
+    textDiscontColor: getToken('colorStickyFooterText2'),
+    // 文本颜色
+    colorStrikethrough: getToken('colorStickyFooterPriceStrikethrough') // 划线价颜色
+  };
+  return designTokens;
 };
-export { designTokens };
+export { useDesignTokens };

package/es/components/StickyFooter/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import './style/index.less';
-export type type = 'default' | 'priceVariant1' | 'priceVariant2';
+export type type = 'default' | 'priceVariant';
 export interface StickyFooterProps {
     children?: React.ReactNode;
+    hideBorder?: boolean;
     className?: string;
     colorPrice?: string;
     type?: type;
@@ -10,7 +11,6 @@ export interface StickyFooterProps {
     style?: React.CSSProperties;
     [key: string]: any;
     onDropDownClick?: React.MouseEventHandler;
-    onRightBtnClick?: React.MouseEventHandler;
     onBtnClick?: React.MouseEventHandler;
 }
 declare const StickyFooter: (props: StickyFooterProps) => React.JSX.Element;

package/es/components/StickyFooter/index.js

@@ -1,16 +1,20 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "colorPrice", "price", "priceStrikethrough", "buttonText", "title", "position", "size", "children", "onDropDownClick", "onRightBtnClick", "onBtnClick", "showIcon", "iconType"];
+var _excluded = ["hideBorder", "prefix", "type", "colorPrice", "price", "priceStrikethrough", "buttonText", "title", "position", "size", "onDropDownClick", "onBtnClick", "showIcon", "iconType", "className", "extraContent", "btnDisabled", "btnLoading", "hideAmount", "hideBtn", "showCancel", "showPrevious", "showBackPage", "children"];
 import React from 'react';
 import { useStyleRegister } from '@ant-design/cssinjs';
+import { useBreakPoint } from "../../utils";
 import { theme } from "../../utils/theme";
-import { designTokens } from "./designTokens";
-import { cssClasses } from "../../constants";
+import { cssClasses, strings } from "../../constants";
+import { useDesignTokens } from "./designTokens";
 import { Amount, Button } from "../index";
 import "./style/index.less";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var StickyFooter = function StickyFooter(props) {
-  var _props$type = props.type,
+  var hideBorder = props.hideBorder,
+    _props$prefix = props.prefix,
+    prefix = _props$prefix === void 0 ? "".concat(cssClasses.PREFIX, "-stickyFooter") : _props$prefix,
+    _props$type = props.type,
     type = _props$type === void 0 ? 'default' : _props$type,
     colorPrice = props.colorPrice,
     price = props.price,
@@ -20,14 +24,28 @@ var StickyFooter = function StickyFooter(props) {
     title = props.title,
     position = props.position,
     size = props.size,
-    children = props.children,
     onDropDownClick = props.onDropDownClick,
-    onRightBtnClick = props.onRightBtnClick,
     onBtnClick = props.onBtnClick,
     _props$showIcon = props.showIcon,
     showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
     iconType = props.iconType,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    extraContent = props.extraContent,
+    btnDisabled = props.btnDisabled,
+    btnLoading = props.btnLoading,
+    hideAmount = props.hideAmount,
+    hideBtn = props.hideBtn,
+    showCancel = props.showCancel,
+    showPrevious = props.showPrevious,
+    showBackPage = props.showBackPage,
+    children = props.children,
     attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var _strings$breakpoint = strings.breakpoint,
+    DESKTOP = _strings$breakpoint.DESKTOP,
+    MOBILE = _strings$breakpoint.MOBILE;
+  var autoBreakPoint = useBreakPoint();
   var padding = designTokens.padding,
     borderTop = designTokens.borderTop,
     backgroundColor = designTokens.backgroundColor,
@@ -38,44 +56,55 @@ var StickyFooter = function StickyFooter(props) {
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
-      token: {
-        baseColor: 'blue'
-      },
-      path: ["".concat(cssClasses.PREFIX, "-stickyFooter")]
+      token: {},
+      path: ["".concat(prefix)]
     }, function () {
-      return "\n      .".concat(cssClasses.PREFIX, "-stickyFooter {\n        padding: ").concat(padding, ";\n        border-top: ").concat(borderTop, ";\n        background-color: ").concat(backgroundColor, ";\n      }\n    ");
+      return "\n      .".concat(prefix, " {\n        padding: ").concat(padding, ";\n        border-top: ").concat(borderTop, ";\n        background-color: ").concat(backgroundColor, ";\n        &.").concat(prefix, "-hideBorder {\n          border-top:none;\n          box-shadow: 0px -2px 10px 0px rgba(26, 24, 134, 0.1);\n        }\n      }\n    ");
     });
     return hashId;
   };
   useCustomButtonStyle();
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: "".concat(cssClasses.PREFIX, "-stickyFooter ").concat(cssClasses.PREFIX, "-stickyFooter-").concat(type),
-    onClick: props.onClick
-  }, attr), {}, {
-    children: [type === 'default' && /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(Button, {
-        type: "primary",
-        block: true,
-        onClick: onBtnClick,
-        children: buttonText
-      })
-    }), type === 'priceVariant1' && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Amount, {
-        priceStrikethrough: priceStrikethrough,
-        priceColor: colorPrice || priceColor,
-        textColor: title === 'discount' ? textDiscontColor : textColor,
-        colorStrikethrough: colorStrikethrough,
-        title: title,
-        position: position,
-        size: size,
-        showIcon: showIcon,
-        onDropDownClick: onDropDownClick,
-        iconType: iconType,
-        children: price
-      }), /*#__PURE__*/_jsx(Button, {
-        type: "primary",
-        onClick: onRightBtnClick,
-        children: buttonText
+  var hideBorderClass = hideBorder ? "".concat(prefix, "-hideBorder") : '';
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attr), {}, {
+    className: "".concat(prefix, " ").concat(prefix, "-").concat(type, " ").concat(hideBorderClass, " ").concat(className),
+    onClick: props.onClick,
+    children: [extraContent && extraContent, /*#__PURE__*/_jsxs("div", {
+      className: "".concat(prefix, "-wrap"),
+      children: [type === 'default' && /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          block: true,
+          onClick: onBtnClick,
+          children: buttonText
+        })
+      }), type === 'priceVariant' && !hideAmount && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Amount, {
+          priceStrikethrough: priceStrikethrough,
+          priceColor: colorPrice || priceColor,
+          textColor: title === 'discount' ? textDiscontColor : textColor,
+          strikethroughColor: colorStrikethrough,
+          title: title,
+          position: position,
+          size: size,
+          showIcon: showIcon,
+          onDropDownClick: onDropDownClick,
+          iconType: iconType,
+          children: price
+        }), autoBreakPoint === DESKTOP && !hideBtn && /*#__PURE__*/_jsxs("div", {
+          children: [showCancel, showPrevious, showBackPage, /*#__PURE__*/_jsx(Button, {
+            disabled: btnDisabled,
+            loading: btnLoading,
+            type: "primary",
+            onClick: onBtnClick,
+            children: buttonText
+          })]
+        }), autoBreakPoint === MOBILE && /*#__PURE__*/_jsx(Button, {
+          disabled: btnDisabled,
+          loading: btnLoading,
+          type: "primary",
+          onClick: onBtnClick,
+          children: buttonText
+        })]
       })]
     }), children]
   }));

package/es/components/StickyFooter/style/index.less

@@ -2,9 +2,6 @@
 @import './variables.less';
 @components: stickyFooter;
 .@{prefix}-@{components} {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   position: fixed;
   left: 0;
   bottom: 0;
@@ -15,4 +12,9 @@
   &.@{prefix}-@{components}-default {
     justify-content: center;
   }
+  .@{prefix}-@{components}-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }

package/es/components/Tabs/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const otherDesignToken: {
+declare const useOtherDesignTokens: () => {
     colorTabsTextSubtitleInverseInactive: any;
     colorTabsTextSubtitleInactive: any;
     colorTabsIconInactiveInverse: any;
@@ -7,9 +7,9 @@ declare const otherDesignToken: {
     colorTabsIconActive: any;
     colorTabsTextSubtitleInverse: any;
     colorTabsTextSubtitle: any;
-    sizingTabsIcon: any;
+    sizingTabsIcon: number;
 };
-declare const designTokens: {
+declare const useDesignTokens: () => {
     inkBarColor: any;
     itemSelectedColor: any;
     itemHoverColor: any;
@@ -19,7 +19,7 @@ declare const designTokens: {
     horizontalItemPadding: string;
     lineWidthBold: any;
 };
-declare const designFillTokens: {
+declare const useDesignFillTokens: () => {
     inkBarColor: string;
     itemSelectedColor: string;
     itemHoverColor: any;
@@ -31,7 +31,7 @@ declare const designFillTokens: {
     lineWidth: number;
     colorBgContainer: string;
 };
-declare const inverseDesignTokens: {
+declare const useInverseDesignTokens: () => {
     inkBarColor: any;
     itemSelectedColor: any;
     itemHoverColor: any;
@@ -41,4 +41,4 @@ declare const inverseDesignTokens: {
     horizontalItemPadding: string;
     lineWidthBold: any;
 };
-export { otherDesignToken, designTokens, inverseDesignTokens, designFillTokens };
+export { useOtherDesignTokens, useDesignTokens, useDesignFillTokens, useInverseDesignTokens };