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

package/lib/components/Stepper/index.js

@@ -21,6 +21,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 });
@@ -46,73 +58,112 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Stepper/index.tsx
 var Stepper_exports = {};
 __export(Stepper_exports, {
-  default: () => Stepper
+  default: () => Stepper_default,
+  stepperTypes: () => stepperTypes
 });
 module.exports = __toCommonJS(Stepper_exports);
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
 var import_constants = require("../../constants");
 var import_Text = __toESM(require("../Text"));
-var import_designTokens = __toESM(require("./designTokens"));
+var import_designTokens = require("./designTokens");
 var import_style = require("./style/index.less");
-var Stepper = class extends import_react.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.descriptionText = (content) => {
-      return /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: import_constants.cssClasses.PREFIX + "-stepper-description", size: "ContentC12Bold" }, content);
-    };
-  }
-  render() {
-    const { style, items, children, breakpoint, percent, current, nextStepText = "Next Step:" } = this.props;
-    const processedItems = items == null ? void 0 : items.map((item) => __spreadProps(__spreadValues({}, item), {
-      description: this.descriptionText(item.description)
+var stepperTypes = {
+  default: "default",
+  // 默认web上的stepper
+  line: "line"
+  // 移动端上的stepper
+};
+var Stepper = (_a) => {
+  var _b = _a, {
+    style,
+    className,
+    items,
+    children,
+    stepperType: stepperType = stepperTypes.default,
+    percent,
+    current,
+    nextStepText = "Next Step:",
+    prefixCls = import_constants.cssClasses.PREFIX + "-stepper",
+    labelPlacement = "vertical"
+  } = _b, restProps = __objRest(_b, [
+    "style",
+    "className",
+    "items",
+    "children",
+    // breakpoint,
+    "stepperType",
+    "percent",
+    "current",
+    "nextStepText",
+    "prefixCls",
+    "labelPlacement"
+  ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const mobileDesignTokens = (0, import_designTokens.useMobileDesignTokens)();
+  const otherDesignTokens = (0, import_designTokens.useOtherDesignTokens)();
+  const descriptionText = (content) => {
+    return /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: import_constants.cssClasses.PREFIX + "-stepper-description", size: "ContentC12Bold" }, content);
+  };
+  const processedItems = (0, import_react.useMemo)(() => {
+    return items == null ? void 0 : items.map((item) => __spreadProps(__spreadValues({}, item), {
+      description: descriptionText(item.description)
     }));
-    const processedChildren = children && import_react.default.Children.map(children, (child) => {
+  }, [items]);
+  const processedChildren = (0, import_react.useMemo)(() => {
+    return children && import_react.default.Children.map(children, (child) => {
       if (import_react.default.isValidElement(child)) {
         return import_react.default.cloneElement(child, {
-          description: this.descriptionText(child.props.description)
+          description: descriptionText(child.props.description)
         });
       }
       return child;
     });
-    const totalSteps = (items == null ? void 0 : items.length) || import_react.default.Children.count(children) || 0;
-    const getStepInfo = (items2, current2) => {
-      var _a, _b;
-      const hasNextStep = items2 && current2 !== void 0 && current2 < items2.length - 1;
-      return {
-        title: hasNextStep ? ((_a = items2[current2]) == null ? void 0 : _a.title) || "" : "",
-        nextStep: hasNextStep ? ((_b = items2[current2 + 1]) == null ? void 0 : _b.title) || "" : ""
-      };
+  }, [children]);
+  const totalSteps = (0, import_react.useMemo)(() => (items == null ? void 0 : items.length) || import_react.default.Children.count(children) || 0, [items, children]);
+  const { title, nextStep } = (0, import_react.useMemo)(() => {
+    var _a2, _b2;
+    const hasNextStep = items && current !== void 0 && current < items.length - 1;
+    return {
+      title: hasNextStep ? ((_a2 = items[current]) == null ? void 0 : _a2.title) || "" : "",
+      nextStep: hasNextStep ? ((_b2 = items[current + 1]) == null ? void 0 : _b2.title) || "" : ""
     };
-    const { title, nextStep } = getStepInfo(items, current);
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_antd.ConfigProvider,
+  }, [items, current]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.ConfigProvider,
+    {
+      prefixCls: import_constants.cssClasses.PREFIX,
+      theme: {
+        components: {
+          Steps: __spreadValues({}, designTokens)
+        },
+        cssVar: true,
+        hashed: false
+      }
+    },
+    stepperType === stepperTypes.line ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${import_constants.cssClasses.PREFIX}-stepper-m`, className), style: __spreadValues(__spreadValues({}, mobileDesignTokens), style) }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-stepper-m-header` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-stepper-m-count` }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: `${import_constants.cssClasses.PREFIX}-stepper-m-neutral`, breakpoint: import_constants.strings.breakpoint.MOBILE, size: "TitleT41Bold" }, String(current !== void 0 ? current + 1 : 1).padStart(2, "0")), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { breakpoint: import_constants.strings.breakpoint.MOBILE, size: "TitleT15Bold" }, "/"), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: `${import_constants.cssClasses.PREFIX}-stepper-m-secondary`, breakpoint: import_constants.strings.breakpoint.MOBILE, size: "TitleT23Bold" }, totalSteps)), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Progress,
       {
-        prefixCls: import_constants.cssClasses.PREFIX,
-        theme: {
-          components: {
-            Steps: __spreadValues({}, import_designTokens.default)
-          },
-          cssVar: true,
-          hashed: false
-        }
-      },
-      breakpoint === "mobile" ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-stepper-m`, style: __spreadValues(__spreadValues({}, import_designTokens.mobileDesignTokens), style) }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-stepper-m-header` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-stepper-m-count` }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: `${import_constants.cssClasses.PREFIX}-stepper-m-neutral`, breakpoint: "mobile", size: "TitleT41Bold" }, String(current !== void 0 ? current + 1 : 1).padStart(2, "0")), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { breakpoint: "mobile", size: "TitleT15Bold" }, "/"), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: `${import_constants.cssClasses.PREFIX}-stepper-m-secondary`, breakpoint: "mobile", size: "TitleT23Bold" }, totalSteps)), /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Progress,
-        {
-          percent,
-          status: "active",
-          strokeColor: import_designTokens.default.colorPrimary,
-          trailColor: import_designTokens.mobileDesignTokens.colorStepperBackgroundActiveWeak,
-          showInfo: false,
-          size: ["100%", 8]
-        }
-      ), title && /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: `${import_constants.cssClasses.PREFIX}-stepper-m-title`, breakpoint: "mobile", size: "TitleT15Bold" }, title), nextStep && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-stepper-m-next` }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { type: "secondary", size: "ContentC12Regular" }, nextStepText, " ", nextStep)))) : /* @__PURE__ */ import_react.default.createElement(import_antd.Steps, __spreadProps(__spreadValues({}, this.props), { items: processedItems, style: __spreadValues(__spreadValues({}, import_designTokens.otherDesignTokens), style) }), processedChildren)
-    );
-  }
-};
-Stepper.defaultProps = {
-  prefixCls: import_constants.cssClasses.PREFIX + "-stepper",
-  breakpoint: "desktop",
-  labelPlacement: "vertical"
+        percent,
+        status: "active",
+        strokeColor: designTokens.colorPrimary,
+        trailColor: mobileDesignTokens.colorStepperBackgroundActiveWeak,
+        showInfo: false,
+        size: ["100%", 8]
+      }
+    ), title && /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: `${import_constants.cssClasses.PREFIX}-stepper-m-title`, breakpoint: import_constants.strings.breakpoint.MOBILE, size: "TitleT15Bold" }, title), nextStep && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-stepper-m-next` }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { type: "secondary", size: "ContentC12Regular" }, nextStepText, " ", nextStep)))) : /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Steps,
+      __spreadProps(__spreadValues({}, restProps), {
+        prefixCls,
+        style: __spreadValues(__spreadValues({}, otherDesignTokens), style),
+        className,
+        items: processedItems,
+        current,
+        labelPlacement
+      }),
+      processedChildren
+    )
+  );
 };
+var Stepper_default = Stepper;

package/lib/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/lib/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/lib/components/StickyFooter/designTokens.js

@@ -19,23 +19,27 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/StickyFooter/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  designTokens: () => designTokens
+  useDesignTokens: () => useDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
-var designTokens = {
-  padding: `${(0, import_tokenHelper.getToken)("spacingStickyFooterPaddingTop")}px ${(0, import_tokenHelper.getToken)("spacingStickyFooterPaddingHorizontal")}px ${(0, import_tokenHelper.getToken)("spacingStickyFooterPaddingBottom")}px`,
-  // 间距
-  borderTop: `1px solid ${(0, import_tokenHelper.getToken)("colorStickyFooterBorderTop")}`,
-  // 边框
-  backgroundColor: (0, import_tokenHelper.getToken)("colorStickyFooterBackground"),
-  // 背景颜色
-  priceColor: (0, import_tokenHelper.getToken)("colorStickyFooterPrice"),
-  // 金额颜色
-  textColor: (0, import_tokenHelper.getToken)("colorStickyFooterText"),
-  // 文本颜色
-  textDiscontColor: (0, import_tokenHelper.getToken)("colorStickyFooterText2"),
-  // 文本颜色
-  colorStrikethrough: (0, import_tokenHelper.getToken)("colorStickyFooterPriceStrikethrough")
-  // 划线价颜色
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    padding: `${getToken("spacingStickyFooterPaddingTop")}px ${getToken("spacingStickyFooterPaddingHorizontal")}px ${getToken("spacingStickyFooterPaddingBottom")}px`,
+    // 间距
+    borderTop: `1px solid ${getToken("colorStickyFooterBorderTop")}`,
+    // 边框
+    backgroundColor: getToken("colorStickyFooterBackground"),
+    // 背景颜色
+    priceColor: getToken("colorStickyFooterPrice"),
+    // 金额颜色
+    textColor: getToken("colorStickyFooterText"),
+    // 文本颜色
+    textDiscontColor: getToken("colorStickyFooterText2"),
+    // 文本颜色
+    colorStrikethrough: getToken("colorStickyFooterPriceStrikethrough")
+    // 划线价颜色
+  };
+  return designTokens;
 };

package/lib/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/lib/components/StickyFooter/index.js

@@ -1,6 +1,8 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -60,13 +63,16 @@ __export(StickyFooter_exports, {
 module.exports = __toCommonJS(StickyFooter_exports);
 var import_react = __toESM(require("react"));
 var import_cssinjs = require("@ant-design/cssinjs");
+var import_utils = require("../../utils");
 var import_theme = require("../../utils/theme");
-var import_designTokens = require("./designTokens");
 var import_constants = require("../../constants");
+var import_designTokens = require("./designTokens");
 var import__ = require("../index");
 var import_style = require("./style/index.less");
 var StickyFooter = (props) => {
   const _a = props, {
+    hideBorder,
+    prefix = `${import_constants.cssClasses.PREFIX}-stickyFooter`,
     type = "default",
     colorPrice,
     price,
@@ -75,13 +81,23 @@ var StickyFooter = (props) => {
     title,
     position,
     size,
-    children,
     onDropDownClick,
-    onRightBtnClick,
     onBtnClick,
     showIcon = true,
-    iconType
+    iconType,
+    className = "",
+    extraContent,
+    btnDisabled,
+    btnLoading,
+    hideAmount,
+    hideBtn,
+    showCancel,
+    showPrevious,
+    showBackPage,
+    children
   } = _a, attr = __objRest(_a, [
+    "hideBorder",
+    "prefix",
     "type",
     "colorPrice",
     "price",
@@ -90,13 +106,24 @@ var StickyFooter = (props) => {
     "title",
     "position",
     "size",
-    "children",
     "onDropDownClick",
-    "onRightBtnClick",
     "onBtnClick",
     "showIcon",
-    "iconType"
+    "iconType",
+    "className",
+    "extraContent",
+    "btnDisabled",
+    "btnLoading",
+    "hideAmount",
+    "hideBtn",
+    "showCancel",
+    "showPrevious",
+    "showBackPage",
+    "children"
   ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const { DESKTOP, MOBILE } = import_constants.strings.breakpoint;
+  const autoBreakPoint = (0, import_utils.useBreakPoint)();
   const {
     padding,
     borderTop,
@@ -105,36 +132,41 @@ var StickyFooter = (props) => {
     textColor,
     textDiscontColor,
     colorStrikethrough
-  } = import_designTokens.designTokens;
+  } = designTokens;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
-      token: { baseColor: "blue" },
-      path: [`${import_constants.cssClasses.PREFIX}-stickyFooter`]
+      token: {},
+      path: [`${prefix}`]
     }, () => `
-      .${import_constants.cssClasses.PREFIX}-stickyFooter {
+      .${prefix} {
         padding: ${padding};
         border-top: ${borderTop};
         background-color: ${backgroundColor};
+        &.${prefix}-hideBorder {
+          border-top:none;
+          box-shadow: 0px -2px 10px 0px rgba(26, 24, 134, 0.1);
+        }
       }
     `);
     return hashId;
   };
   useCustomButtonStyle();
+  const hideBorderClass = hideBorder ? `${prefix}-hideBorder` : "";
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
-    __spreadValues({
-      className: `${import_constants.cssClasses.PREFIX}-stickyFooter ${import_constants.cssClasses.PREFIX}-stickyFooter-${type}`,
+    __spreadProps(__spreadValues({}, attr), {
+      className: `${prefix} ${prefix}-${type} ${hideBorderClass} ${className}`,
       onClick: props.onClick
-    }, attr),
-    type === "default" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import__.Button, { type: "primary", block: true, onClick: onBtnClick }, buttonText)),
-    type === "priceVariant1" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    }),
+    extraContent && extraContent,
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-wrap` }, type === "default" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import__.Button, { type: "primary", block: true, onClick: onBtnClick }, buttonText)), type === "priceVariant" && !hideAmount && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       import__.Amount,
       {
         priceStrikethrough,
         priceColor: colorPrice || priceColor,
         textColor: title === "discount" ? textDiscontColor : textColor,
-        colorStrikethrough,
+        strikethroughColor: colorStrikethrough,
         title,
         position,
         size,
@@ -143,7 +175,7 @@ var StickyFooter = (props) => {
         iconType
       },
       price
-    ), /* @__PURE__ */ import_react.default.createElement(import__.Button, { type: "primary", onClick: onRightBtnClick }, buttonText)),
+    ), autoBreakPoint === DESKTOP && !hideBtn && /* @__PURE__ */ import_react.default.createElement("div", null, showCancel, showPrevious, showBackPage, /* @__PURE__ */ import_react.default.createElement(import__.Button, { disabled: btnDisabled, loading: btnLoading, type: "primary", onClick: onBtnClick }, buttonText)), autoBreakPoint === MOBILE && /* @__PURE__ */ import_react.default.createElement(import__.Button, { disabled: btnDisabled, loading: btnLoading, type: "primary", onClick: onBtnClick }, buttonText))),
     children
   );
 };

package/lib/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/lib/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 };