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

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

@@ -5,7 +5,7 @@
 
 // 使用字符串拼接
 .@{prefix}-@{components} {
-  min-width: 128px;
+  min-width: 110px;
   padding-top: 8px;
   padding-bottom: 8px;
 

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

@@ -0,0 +1,9 @@
+declare const useDesignTokens: () => {
+    borderColor: any;
+    spacingCardPaddingVertical: any;
+    spacingCardPaddingHorizontal: any;
+    borderRadius: string;
+    colorBackgroundSubtle2: any;
+    colorTextAmount: any;
+};
+export { useDesignTokens };

package/lib/components/Card/designTokens.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Card/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  useDesignTokens: () => useDesignTokens
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    borderColor: getToken("colorDividerHorizontal"),
+    spacingCardPaddingVertical: getToken("spacingCardPaddingVertical"),
+    spacingCardPaddingHorizontal: getToken("spacingCardPaddingHorizontal"),
+    borderRadius: `${getToken("borderRadiusCardMd")}px`,
+    colorBackgroundSubtle2: getToken("colorBackgroundSubtle2"),
+    colorTextAmount: getToken("colorTextAmount")
+  };
+  return designTokens;
+};

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import './style/index.less';
+export interface CardProps {
+    type?: 'default' | 'whiteDivider' | 'grayDivider';
+    className?: string;
+    children?: ReactNode;
+    list?: {
+        key: number;
+        content: ReactNode;
+    }[];
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+declare const Card: (props: CardProps) => React.JSX.Element;
+export default Card;

package/lib/components/Card/index.js

@@ -0,0 +1,156 @@
+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/Card/index.tsx
+var Card_exports = {};
+__export(Card_exports, {
+  default: () => Card_default
+});
+module.exports = __toCommonJS(Card_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 Card = (props) => {
+  const _a = props, {
+    className = "",
+    prefixCls = import_constants.cssClasses.PREFIX + "-card",
+    type = "default",
+    children,
+    extraTop,
+    extraBottom,
+    amountLabel,
+    amountValue
+  } = _a, attr = __objRest(_a, [
+    "className",
+    "prefixCls",
+    "type",
+    "children",
+    "extraTop",
+    "extraBottom",
+    "amountLabel",
+    "amountValue"
+  ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const {
+    borderColor,
+    spacingCardPaddingVertical,
+    spacingCardPaddingHorizontal,
+    borderRadius,
+    colorBackgroundSubtle2,
+    colorTextAmount
+  } = designTokens;
+  const useCustomButtonStyle = () => {
+    const hashId = (0, import_cssinjs.useStyleRegister)({
+      theme: import_theme.theme,
+      token: {},
+      path: [prefixCls]
+    }, () => `
+      .${prefixCls} {
+        padding: ${spacingCardPaddingVertical}px ${spacingCardPaddingHorizontal}px;
+        border: 1px solid ${borderColor};
+        border-radius: ${borderRadius};
+        .${prefixCls}-amount {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: ${spacingCardPaddingVertical}px ${spacingCardPaddingHorizontal}px;
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+          border-bottom-left-radius: ${borderRadius};
+          border-bottom-right-radius: ${borderRadius};
+          background: ${colorBackgroundSubtle2};
+        }
+      }
+      .${prefixCls}-whiteDivider,
+      .${prefixCls}-grayDivider {
+        .${prefixCls}-list {
+          border-radius: ${borderRadius};
+          > div {
+            padding: ${spacingCardPaddingVertical / 2}px ${spacingCardPaddingHorizontal}px;
+            &.${prefixCls}-hideTopPadding:first-child {
+              padding-top: 0;
+            }
+            &.${prefixCls}-hideBottomPadding:last-child {
+              padding-bottom: 0;
+            }
+          }
+        }}
+      .${prefixCls}-whiteDivider .${prefixCls}-list {
+        >div + div {
+          &::before,
+          &::after {
+            background: #fff;
+          }
+        }
+      }
+      .${prefixCls}-grayDivider .${prefixCls}-list {
+        >div + div {
+          &::before,
+          &::after {
+            background: ${borderColor};
+          }
+        }
+      }
+    `);
+    return hashId;
+  };
+  useCustomButtonStyle();
+  const getAmount = () => amountValue ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-amount` }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC15Bold" }, amountLabel), /* @__PURE__ */ import_react.default.createElement(import__.Amount, { showIcon: false, title: "", priceColor: colorTextAmount }, amountValue)) : extraBottom;
+  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ className: `${prefixCls} ${prefixCls}-${type} ${className}` }, attr), extraTop, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-list` }, children), getAmount());
+};
+var Card_default = Card;

package/lib/components/Card/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/Card/style/variables.less

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

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadiusChip: any;
     colorChipBackgroundStandard: any;
     colorChipBorderStandard: any;
@@ -12,4 +12,4 @@ declare const designTokens: {
     colorChipTextActive: any;
     sizingChipIconClose: any;
 };
-export { designTokens };
+export { useDesignTokens };

package/lib/components/Chip/designTokens.js

@@ -19,27 +19,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Chip/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 = {
-  borderRadiusChip: (0, import_tokenHelper.getToken)("borderRadiusChip"),
-  // 选中的边框颜色
-  colorChipBackgroundStandard: (0, import_tokenHelper.getToken)("colorChipBackgroundStandard"),
-  // 选中的label颜色
-  colorChipBorderStandard: (0, import_tokenHelper.getToken)("colorChipBorderStandard"),
-  // hover label颜色
-  borderWidthChip: (0, import_tokenHelper.getToken)("borderWidthChip"),
-  // active label颜色
-  spacingChipPaddingHorizontal: (0, import_tokenHelper.getToken)("spacingChipPaddingHorizontal"),
-  // 默认label颜色
-  spacingChipPaddingVertical: (0, import_tokenHelper.getToken)("spacingChipPaddingVertical"),
-  // 未选中的边框
-  colorChipBackgroundHover: (0, import_tokenHelper.getToken)("colorChipBackgroundHover"),
-  colorChipTextInactive: (0, import_tokenHelper.getToken)("colorChipTextInactive"),
-  colorChipBackgroundActive: (0, import_tokenHelper.getToken)("colorChipBackgroundActive"),
-  colorChipBorderActive: (0, import_tokenHelper.getToken)("colorChipBorderActive"),
-  colorChipTextActive: (0, import_tokenHelper.getToken)("colorChipTextActive"),
-  sizingChipIconClose: (0, import_tokenHelper.getToken)("sizingChipIconClose")
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    borderRadiusChip: getToken("borderRadiusChip"),
+    // 选中的边框颜色
+    colorChipBackgroundStandard: getToken("colorChipBackgroundStandard"),
+    // 选中的label颜色
+    colorChipBorderStandard: getToken("colorChipBorderStandard"),
+    // hover label颜色
+    borderWidthChip: getToken("borderWidthChip"),
+    // active label颜色
+    spacingChipPaddingHorizontal: getToken("spacingChipPaddingHorizontal"),
+    // 默认label颜色
+    spacingChipPaddingVertical: getToken("spacingChipPaddingVertical"),
+    // 未选中的边框
+    colorChipBackgroundHover: getToken("colorChipBackgroundHover"),
+    colorChipTextInactive: getToken("colorChipTextInactive"),
+    colorChipBackgroundActive: getToken("colorChipBackgroundActive"),
+    colorChipBorderActive: getToken("colorChipBorderActive"),
+    colorChipTextActive: getToken("colorChipTextActive"),
+    sizingChipIconClose: getToken("sizingChipIconClose")
+  };
+  return designTokens;
 };

package/lib/components/Chip/index.js

@@ -70,12 +70,13 @@ var Chip = (props) => {
   const _a = props, {
     types = "textOnly",
     children,
-    prefixCls = "tag",
+    prefixCls = `${import_constants.BASE_CLASS_PREFIX}-tag`,
     checked,
     onChange = () => {
     },
     onClose = () => {
     },
+    className = "",
     style
   } = _a, attr = __objRest(_a, [
     "types",
@@ -84,8 +85,10 @@ var Chip = (props) => {
     "checked",
     "onChange",
     "onClose",
+    "className",
     "style"
   ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
   const {
     borderRadiusChip,
     colorChipBackgroundStandard,
@@ -101,11 +104,11 @@ var Chip = (props) => {
     sizingChipIconClose
     // spacingChipTextLinkPaddingVertical,
     // spacingChipTextLinkPaddingHorizontal,
-  } = import_designTokens.designTokens;
+  } = designTokens;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
-      token: { baseColor: "blue" },
+      token: {},
       path: ["tag-textonly"]
     }, () => `
       .tag-textonly {
@@ -156,7 +159,7 @@ var Chip = (props) => {
     types === "textOnly" ? /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
-        className: `${import_constants.BASE_CLASS_PREFIX}-${prefixCls}-${types} tag-textonly ${checked ? "tag-active" : ""}`,
+        className: `${prefixCls}-${types} tag-textonly ${checked ? "tag-active" : ""} ${className}`,
         onClick: () => onChange(),
         style
       },
@@ -164,7 +167,7 @@ var Chip = (props) => {
     ) : /* @__PURE__ */ import_react.default.createElement(
       import_antd.Tag,
       __spreadValues({
-        className: `${import_constants.BASE_CLASS_PREFIX}-${prefixCls}-${types}`,
+        className: `${prefixCls}-${types} ${className}`,
         style: __spreadValues({ padding: `${spacingChipPaddingVertical}px ${spacingChipPaddingHorizontal}px` }, style),
         onClose: (e) => {
           e.preventDefault();

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

@@ -0,0 +1,4 @@
+declare const useDesignTokens: () => {
+    borderColor: any;
+};
+export { useDesignTokens };

package/lib/components/Divider/designTokens.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Divider/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  useDesignTokens: () => useDesignTokens
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    borderColor: getToken("colorDivider10Horizontal")
+  };
+  return designTokens;
+};

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import './style/index.less';
 export interface DividerProps {
     type?: 'solid' | 'dashed' | 'eight' | 'whiteBg' | 'grayBg' | 'vertical';
@@ -7,10 +7,5 @@ export interface DividerProps {
     style?: React.CSSProperties;
     [key: string]: any;
 }
-export default class Divider extends PureComponent<DividerProps> {
-    static defaultProps: {
-        type: string;
-        prefixCls: string;
-    };
-    render(): React.JSX.Element;
-}
+declare const Divider: (props: DividerProps) => React.JSX.Element;
+export default Divider;

package/lib/components/Divider/index.js

@@ -58,54 +58,52 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Divider/index.tsx
 var Divider_exports = {};
 __export(Divider_exports, {
-  default: () => Divider
+  default: () => Divider_default
 });
 module.exports = __toCommonJS(Divider_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var import_tokenManager = __toESM(require("../../utils/tokenManager"));
+var import_designTokens = require("./designTokens");
 var import_constants = require("../../constants");
 var import_style = require("./style/index.less");
-var Divider = class extends import_react.PureComponent {
-  render() {
-    const _a = this.props, {
-      children,
-      className,
+var Divider = (props) => {
+  const _a = props, {
+    children,
+    className = "",
+    type = "solid",
+    prefixCls = `${import_constants.cssClasses.PREFIX}-divider`,
+    style,
+    height
+  } = _a, attr = __objRest(_a, [
+    "children",
+    "className",
+    "type",
+    "prefixCls",
+    "style",
+    "height"
+  ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const {
+    borderColor
+  } = designTokens;
+  const baseProps = {
+    className: (0, import_classnames.default)(
       prefixCls,
-      type,
-      style,
-      height
-    } = _a, attr = __objRest(_a, [
-      "children",
-      "className",
-      "prefixCls",
-      "type",
-      "style",
-      "height"
-    ]);
-    const baseProps = {
-      className: (0, import_classnames.default)(
-        prefixCls,
-        {
-          [`${prefixCls}-type-${type}`]: type
-        },
-        className
-      )
-    };
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      __spreadProps(__spreadValues(__spreadValues({}, baseProps), attr), {
-        style: __spreadProps(__spreadValues({
-          height
-        }, style), {
-          borderColor: import_tokenManager.default.tokenKey("colorDivider10Horizontal")
-        })
-      }),
-      /* @__PURE__ */ import_react.default.createElement("div", null, children)
-    );
-  }
-};
-Divider.defaultProps = {
-  type: "solid",
-  prefixCls: import_constants.cssClasses.PREFIX + "-divider"
+      {
+        [`${prefixCls}-type-${type}`]: type
+      },
+      className
+    )
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({}, baseProps), attr), {
+      style: __spreadValues({
+        height,
+        borderColor
+      }, style)
+    }),
+    /* @__PURE__ */ import_react.default.createElement("div", null, children)
+  );
 };
+var Divider_default = Divider;

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorDrawerBackgroundOverlay: any;
     colorDrawerBackgroundStandard: any;
     borderTopLeftRadius: any;
@@ -13,4 +13,4 @@ declare const designTokens: {
     colorDrawerTextHeader: any;
     spacingDrawerListOptionHorizontalGap: any;
 };
-export default designTokens;
+export { useDesignTokens };

package/lib/components/Drawer/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,47 +14,42 @@ 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/Drawer/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 = {
-  colorDrawerBackgroundOverlay: import_tokenManager.default.tokenKey("colorDrawerBackgroundOverlay") || "rgba(0, 0, 0, 0.60)",
-  // 遮罩层背景色
-  colorDrawerBackgroundStandard: import_tokenManager.default.tokenKey("colorDrawerBackgroundStandard") || "#FFF",
-  // 内容的底色
-  borderTopLeftRadius: import_tokenManager.default.tokenKey("borderRadiusDrawerTopLeft"),
-  // 弹出窗上左上圆角
-  borderTopRightRadius: import_tokenManager.default.tokenKey("borderRadiusDrawerTopRight"),
-  // 弹出窗上右上圆角
-  spacingDrawerPaddingHorizontal: import_tokenManager.default.tokenKey("spacingDrawerPaddingHorizontal"),
-  // 内部横padding
-  spacingDrawerPaddingBottom: import_tokenManager.default.tokenKey("spacingDrawerPaddingBottom"),
-  spacingDrawerPaddingTop: import_tokenManager.default.tokenKey("spacingDrawerPaddingTop"),
-  sizingDrawerHandle: import_tokenManager.default.tokenKey("sizingDrawerHandle"),
-  // 上部 小滑块的宽
-  colorDrawerHandle: import_tokenManager.default.tokenKey("colorDrawerHandle"),
-  // 上部 小滑块的背景色
-  spacingDrawerHandlePaddingTop: import_tokenManager.default.tokenKey("spacingDrawerHandlePaddingTop"),
-  // 上部 小滑块
-  spacingDrawerHandlePaddingBottom: import_tokenManager.default.tokenKey("spacingDrawerHandlePaddingBottom"),
-  // 上部 小滑块
-  colorDrawerTextHeader: import_tokenManager.default.tokenKey("colorDrawerTextHeader"),
-  // title的颜色
-  spacingDrawerListOptionHorizontalGap: import_tokenManager.default.tokenKey("spacingDrawerListOptionHorizontalGap")
-  // 间距
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    colorDrawerBackgroundOverlay: getToken("colorDrawerBackgroundOverlay") || "rgba(0, 0, 0, 0.60)",
+    // 遮罩层背景色
+    colorDrawerBackgroundStandard: getToken("colorDrawerBackgroundStandard") || "#FFF",
+    // 内容的底色
+    borderTopLeftRadius: getToken("borderRadiusDrawerTopLeft"),
+    // 弹出窗上左上圆角
+    borderTopRightRadius: getToken("borderRadiusDrawerTopRight"),
+    // 弹出窗上右上圆角
+    spacingDrawerPaddingHorizontal: getToken("spacingDrawerPaddingHorizontal"),
+    // 内部横padding
+    spacingDrawerPaddingBottom: getToken("spacingDrawerPaddingBottom"),
+    spacingDrawerPaddingTop: getToken("spacingDrawerPaddingTop"),
+    sizingDrawerHandle: getToken("sizingDrawerHandle"),
+    // 上部 小滑块的宽
+    colorDrawerHandle: getToken("colorDrawerHandle"),
+    // 上部 小滑块的背景色
+    spacingDrawerHandlePaddingTop: getToken("spacingDrawerHandlePaddingTop"),
+    // 上部 小滑块
+    spacingDrawerHandlePaddingBottom: getToken("spacingDrawerHandlePaddingBottom"),
+    // 上部 小滑块
+    colorDrawerTextHeader: getToken("colorDrawerTextHeader"),
+    // title的颜色
+    spacingDrawerListOptionHorizontalGap: getToken("spacingDrawerListOptionHorizontalGap")
+    // 间距
+  };
+  return designTokens;
 };
-var designTokens_default = designTokens;