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

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

@@ -1,18 +1,22 @@
 import React from 'react';
 import './style/index.less';
-export type DrawerType = 'DrawerTypeHandler' | 'DrawerTypeCloseBtn';
+export type DrawerType = 'DrawerTypeHandler' | 'DrawerTypeCloseBtn' | 'DrawerTypeDefault';
 export declare const DrawerTypeEnum: Record<string, DrawerType>;
 export interface BottomDrawerProps {
+    showClose?: boolean;
+    prefix?: string;
+    className?: string;
     visible: boolean;
     onClose: () => void;
     children: React.ReactNode;
     height?: number | string;
     title?: string;
-    drawerType: DrawerType;
+    drawerType?: DrawerType;
     bottomBtnText?: string;
     bottomLinkText?: string;
     showBottomBorder?: boolean;
     showImage?: boolean;
+    showBottomShadow?: boolean;
     imageSrc?: string;
     onLinkClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onBottomBtnClick?: (e: React.MouseEvent<HTMLDivElement>) => void;

package/lib/components/Drawer/index.js

@@ -48,24 +48,32 @@ __export(Drawer_exports, {
 });
 module.exports = __toCommonJS(Drawer_exports);
 var import_react = __toESM(require("react"));
-var import_designTokens = __toESM(require("./designTokens"));
+var import_designTokens = require("./designTokens");
+var import_lodash = require("lodash");
+var import_cssinjs = require("@ant-design/cssinjs");
 var import__ = require("../index");
 var import_constants = require("../../constants");
+var import_theme = require("../../utils/theme");
 var import_style = require("./style/index.less");
 var DrawerTypeEnum = {
   DrawerTypeHandler: "DrawerTypeHandler",
-  DrawerTypeCloseBtn: "DrawerTypeCloseBtn"
+  DrawerTypeCloseBtn: "DrawerTypeCloseBtn",
+  DrawerTypeDefault: "DrawerTypeDefault"
 };
 var BottomDrawer = ({
+  prefix = `${import_constants.cssClasses.PREFIX}-drawer`,
+  showClose = true,
+  className = "",
   visible,
   onClose,
   children,
   height,
   title,
-  drawerType = DrawerTypeEnum.DrawerTypeHandler,
+  drawerType = DrawerTypeEnum.DrawerTypeDefault,
   bottomBtnText,
   bottomLinkText,
   showBottomBorder,
+  showBottomShadow,
   showImage,
   imageSrc,
   onLinkClick,
@@ -92,7 +100,7 @@ var BottomDrawer = ({
       return;
     }
     const timer = setTimeout(() => {
-      const footer = document.querySelector(`.${import_constants.cssClasses.PREFIX}-stickyFooter`);
+      const footer = document.querySelector(`.drawer-sticky`);
       if (footer) {
         const observer = new ResizeObserver((entries) => {
           const contentHeight = (entries == null ? void 0 : entries[0].contentRect.height) + 10;
@@ -105,6 +113,7 @@ var BottomDrawer = ({
     }, 100);
     return () => clearTimeout(timer);
   }, [visible]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
   const {
     colorDrawerBackgroundOverlay,
     colorDrawerBackgroundStandard,
@@ -119,71 +128,88 @@ var BottomDrawer = ({
     spacingDrawerListOptionHorizontalGap,
     spacingDrawerPaddingBottom,
     spacingDrawerPaddingTop
-  } = import_designTokens.default;
+  } = designTokens;
+  const useCustomButtonStyle = () => {
+    const hashId = (0, import_cssinjs.useStyleRegister)({
+      theme: import_theme.theme,
+      token: {},
+      path: [`${prefix}`]
+    }, () => `
+      .${prefix}-mask {
+        background: ${colorDrawerBackgroundOverlay};
+      }
+      .${prefix}-content {
+        background: ${colorDrawerBackgroundStandard};
+        border-top-left-radius: ${borderTopLeftRadius}px;
+        border-top-right-radius:${borderTopRightRadius}px;
+        height:${height}px;
+      }
+      .${prefix}-inner {
+        padding-left: ${spacingDrawerPaddingHorizontal}px;
+        padding-right: ${spacingDrawerPaddingHorizontal}px;
+        padding-bottom:${spacingDrawerPaddingBottom}px;
+      }
+      .${prefix}-header {
+        .${prefix}-header-text {
+          color: ${colorDrawerTextHeader};
+          margin-bottom: ${spacingDrawerListOptionHorizontalGap}px;
+          display: block;
+        }
+        &.center{
+          width: 100%;
+          text-align: center;
+        }
+      }
+      .${prefix}-handle-bar {
+          width:${sizingDrawerHandle || 0}px;
+          background: ${colorDrawerHandle};
+          margin-top: ${spacingDrawerHandlePaddingTop}px !important;
+          margin-bottom: ${spacingDrawerHandlePaddingBottom}px !important;     
+      }
+      .${prefix}-close-warp {
+        padding-top: ${spacingDrawerPaddingTop}px;
+        padding-left: ${spacingDrawerPaddingHorizontal}px;
+        padding-right: ${spacingDrawerPaddingHorizontal}px;
+      }
+    `);
+    return hashId;
+  };
+  useCustomButtonStyle();
   if (!isMounted)
     return null;
-  const borderStyle = showBottomBorder ? {} : { border: "none" };
-  const TitleCom = title ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-drawer-header` }, /* @__PURE__ */ import_react.default.createElement(
+  const borderStyle = showBottomBorder ? {} : showBottomShadow ? {
+    boxShadow: "0 -2px 10px 0 rgba(0, 0, 0, 0.06)",
+    border: "none"
+  } : { border: "none" };
+  const paddingStyle = paddingBottom > 0 ? { paddingBottom: `${paddingBottom}px` } : {};
+  const TitleCom = title ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-header ${drawerType === DrawerTypeEnum.DrawerTypeDefault ? "center" : ""}` }, /* @__PURE__ */ import_react.default.createElement(
     import__.Text,
     {
-      size: "TitleT21Bold",
-      style: { color: colorDrawerTextHeader, marginBottom: `${spacingDrawerListOptionHorizontalGap}px`, display: "block" }
+      className: `${prefix}-header-text`,
+      size: "TitleT21Bold"
     },
     title
-  )) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+  )) : /* @__PURE__ */ import_react.default.createElement("div", null);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: `${import_constants.cssClasses.PREFIX}-drawer-mask ${visible ? "visible" : ""}`,
-      style: { background: colorDrawerBackgroundOverlay },
+      className: `${prefix}-mask ${visible ? "visible" : ""} ${className || ""}`,
       onClick: onClose
     },
     /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: `${import_constants.cssClasses.PREFIX}-drawer-content ${visible ? "active" : ""}`,
-        style: {
-          height,
-          background: colorDrawerBackgroundStandard,
-          borderTopLeftRadius: `${borderTopLeftRadius}px`,
-          borderTopRightRadius: `${borderTopRightRadius}px`
-        },
+        className: `${prefix}-content ${visible ? "active" : ""}`,
         onClick: (e) => e.stopPropagation()
       },
+      drawerType !== DrawerTypeEnum.DrawerTypeHandler && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-close-warp` }, TitleCom, showClose && /* @__PURE__ */ import_react.default.createElement(import__.Icon, { className: `${prefix}-icon-close`, name: "icon-Close", onClick: onClose })),
       /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: `${import_constants.cssClasses.PREFIX}-drawer-inner`,
-          style: {
-            paddingLeft: `${spacingDrawerPaddingHorizontal}px`,
-            paddingRight: `${spacingDrawerPaddingHorizontal}px`,
-            paddingBottom: `${paddingBottom}px`
-          }
+          className: `${prefix}-inner`,
+          style: __spreadValues({}, paddingStyle)
         },
-        drawerType === DrawerTypeEnum.DrawerTypeHandler && /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: "handle-bar",
-            style: {
-              width: sizingDrawerHandle ? `${sizingDrawerHandle}px` : 0,
-              background: colorDrawerHandle,
-              marginTop: `${spacingDrawerHandlePaddingTop}px`,
-              marginBottom: `${spacingDrawerHandlePaddingBottom}px`
-            }
-          }
-        ),
-        drawerType === DrawerTypeEnum.DrawerTypeCloseBtn && /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: "close-warp",
-            style: {
-              paddingTop: `${spacingDrawerPaddingTop}px`
-              // paddingBottom: `${spacingDrawerListOptionHorizontalGap}px`,
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement("div", null, TitleCom),
-          /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: "icon-Close", onClick: onClose })
-        ),
+        drawerType === DrawerTypeEnum.DrawerTypeHandler && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-handle-bar` }),
         showImage && /* @__PURE__ */ import_react.default.createElement(
           import__.Image,
           {
@@ -193,12 +219,13 @@ var BottomDrawer = ({
             style: { marginBottom: `${spacingDrawerPaddingBottom}px` }
           }
         ),
-        drawerType !== DrawerTypeEnum.DrawerTypeCloseBtn && title && TitleCom,
+        drawerType === DrawerTypeEnum.DrawerTypeHandler && title && TitleCom,
         children
       ),
-      (!!bottomBtnText || !!bottomLinkText) && /* @__PURE__ */ import_react.default.createElement(
+      (!(0, import_lodash.isEmpty)(bottomBtnText) || !(0, import_lodash.isEmpty)(bottomLinkText)) && /* @__PURE__ */ import_react.default.createElement(
         import__.StickyFooter,
         {
+          className: "drawer-sticky",
           onClick: onBottomBtnClick,
           buttonText: bottomBtnText,
           style: __spreadValues({
@@ -206,7 +233,7 @@ var BottomDrawer = ({
             flexShrink: 0
           }, borderStyle)
         },
-        !!bottomLinkText && /* @__PURE__ */ import_react.default.createElement(
+        !(0, import_lodash.isEmpty)(bottomLinkText) && /* @__PURE__ */ import_react.default.createElement("div", { className: "drawer-link" }, /* @__PURE__ */ import_react.default.createElement(
           import__.Text,
           {
             onClick: (e) => {
@@ -221,7 +248,7 @@ var BottomDrawer = ({
             }
           },
           bottomLinkText
-        )
+        ))
       )
     )
   );

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

@@ -1,12 +1,13 @@
 @import './variables.less';
+@component: drawer;
 
 // 添加iOS惯性滚动限制
-.@{prefix}-drawer-content {
+.@{prefix}-@{component}-content {
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 }
 
-.@{prefix}-drawer-mask {
+.@{prefix}-@{component}-mask {
   touch-action: none; // 阻止移动端触摸事件
   position: fixed;
   top: 0;
@@ -23,7 +24,7 @@
   }
 }
 
-.@{prefix}-drawer-content {
+.@{prefix}-@{component}-content {
   .transition-properties();
   position: fixed;
   left: 0;
@@ -44,27 +45,32 @@
     bottom: 0;
   }
 
-  .handle-bar {
+  .@{prefix}-@{component}-handle-bar {
     height: 4px;
     margin: 0 auto;
     border-radius: 4px;
   }
 
-  .@{prefix}-drawer-inner {
+  .@{prefix}-@{component}-inner {
     overflow: auto;
     flex: 1;
     min-height: 0;
     padding-bottom: 20px;
     /* 防止底部遮挡 */
-
   }
 
-  .close-warp {
+  .@{prefix}-@{component}-close-warp {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
 
+  .drawer-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
 }
 
 // 混合 (Mixin)

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+interface GlobalTokenProviderProps {
+    children: ReactNode;
+    getToken?: (tokenName: string) => string | number | boolean | undefined;
+}
+/**
+ * 全局TokenProvider组件
+ * 用于在应用顶层提供TokenContext，避免在每个组件中重复创建TokenProvider
+ */
+declare const GlobalTokenProvider: React.FC<GlobalTokenProviderProps>;
+export default GlobalTokenProvider;

package/lib/components/GlobalTokenProvider/index.js

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/GlobalTokenProvider/index.tsx
+var GlobalTokenProvider_exports = {};
+__export(GlobalTokenProvider_exports, {
+  default: () => GlobalTokenProvider_default
+});
+module.exports = __toCommonJS(GlobalTokenProvider_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("../../utils");
+var GlobalTokenProvider = ({ children, getToken }) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_utils.TokenProvider, { getToken }, children);
+};
+var GlobalTokenProvider_default = GlobalTokenProvider;

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

@@ -1,6 +1,6 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorIconButtonNeutral: any;
     colorIconButtonInverse: any;
-    sizingButtonIcon: any;
+    sizingButtonIcon: number;
 };
-export default designTokens;
+export { useDesignTokens };

package/lib/components/Icon/designTokens.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,26 +14,22 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/Icon/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  default: () => designTokens_default
+  useDesignTokens: () => useDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenManager = __toESM(require("../../utils/tokenManager"));
-var designTokens = {
-  colorIconButtonNeutral: import_tokenManager.default.tokenKey("colorIconButtonNeutral"),
-  colorIconButtonInverse: import_tokenManager.default.tokenKey("colorIconButtonInverse"),
-  sizingButtonIcon: import_tokenManager.default.tokenKey("sizingButtonIcon")
+var import_utils = require("../../utils");
+var import_scaleTool = require("../../utils/scaleTool");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    colorIconButtonNeutral: getToken("colorIconButtonNeutral"),
+    colorIconButtonInverse: getToken("colorIconButtonInverse"),
+    sizingButtonIcon: (0, import_scaleTool.wSacle)(getToken("sizingButtonIcon"))
+  };
+  return designTokens;
 };
-var designTokens_default = designTokens;

package/lib/components/Icon/index.js

@@ -60,14 +60,15 @@ __export(Icon_exports, {
 module.exports = __toCommonJS(Icon_exports);
 var import_react = __toESM(require("react"));
 var import_Icon = __toESM(require("./Icon"));
-var import_designTokens = __toESM(require("./designTokens"));
+var import_designTokens = require("./designTokens");
 var Icon = (props) => {
-  const { colorIconButtonInverse, colorIconButtonNeutral, sizingButtonIcon } = import_designTokens.default;
-  const _a = props, { name, color, size = sizingButtonIcon, inverse = false, style } = _a, rest = __objRest(_a, ["name", "color", "size", "inverse", "style"]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const { colorIconButtonInverse, colorIconButtonNeutral, sizingButtonIcon } = designTokens;
+  const _a = props, { name, color, size = sizingButtonIcon, inverse = false, style, className = "" } = _a, rest = __objRest(_a, ["name", "color", "size", "inverse", "style", "className"]);
   const mergeStyle = __spreadValues({
     color: color || (inverse ? colorIconButtonInverse : colorIconButtonNeutral),
     fontSize: size ? `${size}px` : ""
   }, style);
-  return /* @__PURE__ */ import_react.default.createElement(import_Icon.default, __spreadValues({ type: name, style: mergeStyle }, rest));
+  return /* @__PURE__ */ import_react.default.createElement(import_Icon.default, __spreadValues({ className, type: name, style: mergeStyle }, rest));
 };
 var Icon_default = Icon;

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorIconButtonNeutral: any;
     colorIconButtonInverse: any;
     sizingIconButtonMedium: any;
@@ -14,8 +14,7 @@ declare const designTokens: {
     colorIconButtonActive: any;
     transitionIconButton: string;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     [x: string]: string;
 };
-export { designTokens, otherDesignTokens, };
-export default designTokens;
+export { useDesignTokens, useOtherDesignTokens, };

package/lib/components/IconButton/designTokens.js

@@ -19,43 +19,50 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/IconButton/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  default: () => designTokens_default,
-  designTokens: () => designTokens,
-  otherDesignTokens: () => otherDesignTokens
+  useDesignTokens: () => useDesignTokens,
+  useOtherDesignTokens: () => useOtherDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
+var import_utils = require("../../utils");
 var import_constants = require("../../constants");
 var prefixCls = import_constants.cssClasses.PREFIX + "-icon-button";
-var designTokens = {
-  // 图标按钮颜色
-  colorIconButtonNeutral: (0, import_tokenHelper.getToken)("colorIconButtonNeutral"),
-  colorIconButtonInverse: (0, import_tokenHelper.getToken)("colorIconButtonInverse"),
-  // 反色
-  // 图标按钮尺寸
-  sizingIconButtonMedium: (0, import_tokenHelper.getToken)("sizingIconButtonIconMedium"),
-  // Medium Icon: 24px x 24px
-  sizingIconButtonSmall: (0, import_tokenHelper.getToken)("sizingIconButtonIconSmall"),
-  // Small Icon: 16px x 16px
-  //  padding
-  spacingIconButtonPaddingVertical: (0, import_tokenHelper.getToken)("spacingIconButtonPaddingVertical"),
-  // Medium
-  spacingIconButtonPaddingVerticalSm: (0, import_tokenHelper.getToken)("spacingIconButtonPaddingVerticalSm"),
-  // Small
-  spacingIconButtonPaddingHorizontal: (0, import_tokenHelper.getToken)("spacingIconButtonPaddingHorizontal"),
-  spacingIconButtonPaddingHorizontalSm: (0, import_tokenHelper.getToken)("spacingIconButtonPaddingHorizontalSm"),
-  spacingIconButtonHorizontalGap: (0, import_tokenHelper.getToken)("spacingIconButtonHorizontalGap"),
-  spacingIconButtonHorizontalGapSm: (0, import_tokenHelper.getToken)("spacingIconButtonHorizontalGapSm"),
-  colorIconButtonDisabled: (0, import_tokenHelper.getToken)("colorIconButtonDisabled"),
-  colorIconButtonHover: (0, import_tokenHelper.getToken)("colorIconButtonHover"),
-  colorIconButtonActive: (0, import_tokenHelper.getToken)("colorIconButtonActive"),
-  // 过渡动画
-  transitionIconButton: "0.3s"
+var transitionIconButton = "0.3s";
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    // 图标按钮颜色
+    colorIconButtonNeutral: getToken("colorIconButtonNeutral"),
+    colorIconButtonInverse: getToken("colorIconButtonInverse"),
+    // 反色
+    // 图标按钮尺寸
+    sizingIconButtonMedium: getToken("sizingIconButtonIconMedium"),
+    // Medium Icon: 24px x 24px
+    sizingIconButtonSmall: getToken("sizingIconButtonIconSmall"),
+    // Small Icon: 16px x 16px
+    //  padding
+    spacingIconButtonPaddingVertical: getToken("spacingIconButtonPaddingVertical"),
+    // Medium
+    spacingIconButtonPaddingVerticalSm: getToken("spacingIconButtonPaddingVerticalSm"),
+    // Small
+    spacingIconButtonPaddingHorizontal: getToken("spacingIconButtonPaddingHorizontal"),
+    spacingIconButtonPaddingHorizontalSm: getToken("spacingIconButtonPaddingHorizontalSm"),
+    spacingIconButtonHorizontalGap: getToken("spacingIconButtonHorizontalGap"),
+    spacingIconButtonHorizontalGapSm: getToken("spacingIconButtonHorizontalGapSm"),
+    colorIconButtonDisabled: getToken("colorIconButtonDisabled"),
+    colorIconButtonHover: getToken("colorIconButtonHover"),
+    colorIconButtonActive: getToken("colorIconButtonActive"),
+    // 过渡动画
+    transitionIconButton
+  };
+  return designTokens;
 };
-var otherDesignTokens = {
-  [`--${prefixCls}-color`]: `${(0, import_tokenHelper.getToken)("colorIconButtonNeutral")}`,
-  [`--${prefixCls}-color-inverse`]: `${(0, import_tokenHelper.getToken)("colorIconButtonInverse")}`,
-  [`--${prefixCls}-color-disabled`]: `${(0, import_tokenHelper.getToken)("colorIconButtonDisabled")}`,
-  [`--${prefixCls}-transition`]: `all ${designTokens.transitionIconButton}`
+var useOtherDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const otherDesignTokens = {
+    [`--${prefixCls}-color`]: `${getToken("colorIconButtonNeutral")}`,
+    [`--${prefixCls}-color-inverse`]: `${getToken("colorIconButtonInverse")}`,
+    [`--${prefixCls}-color-disabled`]: `${getToken("colorIconButtonDisabled")}`,
+    [`--${prefixCls}-transition`]: `all ${transitionIconButton}`
+  };
+  return otherDesignTokens;
 };
-var designTokens_default = designTokens;

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

@@ -2,11 +2,11 @@ import React from 'react';
 import './style/index.less';
 export type Size = 'medium' | 'small';
 export interface IconButtonProps {
-    customeIconSize?: string | number;
     prefixCls?: string;
     name: string;
     color?: string;
     size?: Size | string | number;
+    customIconSize?: string | number;
     style?: React.CSSProperties;
     className?: string;
     inverse?: boolean;