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

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadius: any;
     paddingInline: any;
     colorText: any;
@@ -10,7 +10,7 @@ declare const designTokens: {
     colorBgContainer: any;
     colorBgContainerDisabled: any;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     hoverBorderColor: any;
     activeBorderColor: any;
     paddingBlock: any;
@@ -26,13 +26,4 @@ declare const otherDesignTokens: {
     colorErrorBorder: any;
     colorInputBackgroundHaze: any;
 };
-declare const commonToken: {
-    [x: string]: string | number;
-};
-declare const styleToken: {
-    [x: string]: string;
-};
-declare const stickyStyleToken: {
-    [x: string]: string;
-};
-export { designTokens, otherDesignTokens, styleToken, stickyStyleToken, commonToken };
+export { useDesignTokens, useOtherDesignTokens };

package/lib/components/TextInputInside/designTokens.js

@@ -19,82 +19,69 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/TextInputInside/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  commonToken: () => commonToken,
-  designTokens: () => designTokens,
-  otherDesignTokens: () => otherDesignTokens,
-  stickyStyleToken: () => stickyStyleToken,
-  styleToken: () => styleToken
+  useDesignTokens: () => useDesignTokens,
+  useOtherDesignTokens: () => useOtherDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
-var import_constants = require("../../constants");
-var prefixCls = import_constants.cssClasses.PREFIX + "-modal";
-var designTokens = {
-  borderRadius: (0, import_tokenHelper.getToken)("borderRadiusInput"),
-  // 圆角
-  // paddingBlock: getToken('spacingInputPaddingVertical'), // 纵向内边距
-  paddingInline: (0, import_tokenHelper.getToken)("spacingInputPaddingHorizontal"),
-  // 横向内边距
-  colorText: (0, import_tokenHelper.getToken)("colorInputTextActive"),
-  // 内容文本颜色
-  colorBorder: "transparent",
-  // 边框颜色
-  hoverBorderColor: "transparent",
-  // 边框颜色
-  activeBorderColor: "transparent",
-  // 边框颜色
-  activeShadow: "",
-  // 边框shadow颜色
-  colorError: "transparent",
-  // 错误边框颜色
-  colorBgContainer: (0, import_tokenHelper.getToken)("colorInputBackground"),
-  // 背景颜色
-  colorBgContainerDisabled: (0, import_tokenHelper.getToken)("colorInputBackgroundHaze")
-  // 背景颜色
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    borderRadius: getToken("borderRadiusInput"),
+    // 圆角
+    // paddingBlock: getToken('spacingInputPaddingVertical'), // 纵向内边距
+    paddingInline: getToken("spacingInputPaddingHorizontal"),
+    // 横向内边距
+    colorText: getToken("colorInputTextActive"),
+    // 内容文本颜色
+    colorBorder: "transparent",
+    // 边框颜色
+    hoverBorderColor: "transparent",
+    // 边框颜色
+    activeBorderColor: "transparent",
+    // 边框颜色
+    activeShadow: "",
+    // 边框shadow颜色
+    colorError: "transparent",
+    // 错误边框颜色
+    colorBgContainer: getToken("colorInputBackground"),
+    // 背景颜色
+    colorBgContainerDisabled: getToken("colorInputBackgroundHaze")
+    // 背景颜色
+  };
+  return designTokens;
 };
-var otherDesignTokens = {
-  hoverBorderColor: (0, import_tokenHelper.getToken)("colorInputBorderActive"),
-  // hover边框颜色
-  activeBorderColor: (0, import_tokenHelper.getToken)("colorInputBorderActive"),
-  // active边框颜色
-  paddingBlock: (0, import_tokenHelper.getToken)("spacingInputPaddingVerticalLg"),
-  // 纵向内边距
-  colorLabelActive: (0, import_tokenHelper.getToken)("colorInputTextLabelActive"),
-  // label激活状态的颜色
-  colorLabel: (0, import_tokenHelper.getToken)("colorInputTextLabel"),
-  // label文本颜色
-  width: `calc(100vw - ${(0, import_tokenHelper.getToken)("spacingModalPaddingHorizontal")}px - ${(0, import_tokenHelper.getToken)("spacingModalPaddingHorizontal")}px)`,
-  // 宽度
-  colorError: (0, import_tokenHelper.getToken)("colorInputTextError"),
-  // 错误信息文本颜色
-  iconPaddingLeft: (0, import_tokenHelper.getToken)("spacingInputIconPaddingLeft"),
-  // 错误信息文本颜色
-  colorInputIconStandard: (0, import_tokenHelper.getToken)("colorInputIconStandard"),
-  // 标准icon颜色
-  spacingInputTextHintMessagePaddingTop: (0, import_tokenHelper.getToken)("spacingInputTextHintMessagePaddingTop"),
-  // 错误信息文本颜色
-  colorInputTextHintMessage: (0, import_tokenHelper.getToken)("colorInputTextHintMessage"),
-  // 信息文本颜色
-  colorInputTextCounter: (0, import_tokenHelper.getToken)("colorInputTextCounter"),
-  // 字数统计文本颜色
-  colorErrorBorder: (0, import_tokenHelper.getToken)("colorInputBorderError"),
-  // error颜色
-  colorInputBackgroundHaze: (0, import_tokenHelper.getToken)("colorInputBackgroundHaze")
-  // 背景颜色
-};
-var commonToken = {
-  [`--${prefixCls}-header-margin-bottom`]: 0,
-  [`--${prefixCls}-footer-margin-top`]: 0,
-  [`--${prefixCls}-footer-padding`]: `${(0, import_tokenHelper.getToken)("spacingModalButtonPaddingTop")}px 0 0`,
-  [`--${prefixCls}-body-padding`]: `${(0, import_tokenHelper.getToken)("spacingModalCardVerticalGap")}px 0`
-};
-var styleToken = {
-  [`--${prefixCls}-content-padding`]: `${(0, import_tokenHelper.getToken)("spacingModalCardPaddingTop")}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingHorizontal")}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingBottom")}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingHorizontal")}px`,
-  [`--${prefixCls}-footer-border-top`]: "none",
-  [`--${prefixCls}-footer-padding`]: "0px"
-};
-var stickyStyleToken = {
-  [`--${prefixCls}-content-padding`]: `${(0, import_tokenHelper.getToken)("spacingModalCardPaddingTop")}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingHorizontal")}px ${40 + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingVertical") + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingHorizontal")}px`,
-  [`--${prefixCls}-footer-padding`]: `${(0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingVertical")}px ${(0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px`,
-  [`--${prefixCls}-footer-border-top`]: "1px solid #E1E1E1"
+var useOtherDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const otherDesignTokens = {
+    hoverBorderColor: getToken("colorInputBorderActive"),
+    // hover边框颜色
+    activeBorderColor: getToken("colorInputBorderActive"),
+    // active边框颜色
+    paddingBlock: getToken("spacingInputPaddingVerticalLg"),
+    // 纵向内边距
+    colorLabelActive: getToken("colorInputTextLabelActive"),
+    // label激活状态的颜色
+    colorLabel: getToken("colorInputTextLabel"),
+    // label文本颜色
+    width: `calc(100vw - ${getToken("spacingModalPaddingHorizontal")}px - ${getToken("spacingModalPaddingHorizontal")}px)`,
+    // 宽度
+    colorError: getToken("colorInputTextError"),
+    // 错误信息文本颜色
+    iconPaddingLeft: getToken("spacingInputIconPaddingLeft"),
+    // 错误信息文本颜色
+    colorInputIconStandard: getToken("colorInputIconStandard"),
+    // 标准icon颜色
+    spacingInputTextHintMessagePaddingTop: getToken("spacingInputTextHintMessagePaddingTop"),
+    // 错误信息文本颜色
+    colorInputTextHintMessage: getToken("colorInputTextHintMessage"),
+    // 信息文本颜色
+    colorInputTextCounter: getToken("colorInputTextCounter"),
+    // 字数统计文本颜色
+    colorErrorBorder: getToken("colorInputBorderError"),
+    // error颜色
+    colorInputBackgroundHaze: getToken("colorInputBackgroundHaze")
+    // 背景颜色
+  };
+  return otherDesignTokens;
 };

package/lib/components/TextInputInside/index.js

@@ -69,12 +69,14 @@ var import_Icon = __toESM(require("../Icon"));
 var import_style = require("./style/index.less");
 var import_lodash = require("lodash");
 var TextInputInside = (props) => {
-  const _a = props, { label, message, status, type, image, count, value, disabled } = _a, attr = __objRest(_a, ["label", "message", "status", "type", "image", "count", "value", "disabled"]);
+  const _a = props, { label, message, status, type, image, count, value, disabled, className = "" } = _a, attr = __objRest(_a, ["label", "message", "status", "type", "image", "count", "value", "disabled", "className"]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const otherDesignTokens = (0, import_designTokens.useOtherDesignTokens)();
   const {
     paddingInline,
     colorBgContainer,
     borderRadius
-  } = import_designTokens.designTokens;
+  } = designTokens;
   const {
     paddingBlock,
     colorLabel,
@@ -89,7 +91,7 @@ var TextInputInside = (props) => {
     colorInputTextHintMessage,
     colorInputTextCounter,
     colorInputBackgroundHaze
-  } = import_designTokens.otherDesignTokens;
+  } = otherDesignTokens;
   const inputRef = (0, import_react.useRef)(null);
   const [focus, setFocus] = (0, import_react.useState)(false);
   const [val, setVal] = (0, import_react.useState)("");
@@ -97,7 +99,7 @@ var TextInputInside = (props) => {
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
-      token: { baseColor: "blue" },
+      token: {},
       path: [`${prefix}`]
     }, () => `
       .${prefix} {
@@ -169,6 +171,7 @@ var TextInputInside = (props) => {
   const error = status === "error" ? `${prefix}-error` : "";
   const disabledStyle = disabled ? `${prefix}-disabled` : "";
   const focusStyle = focus || value ? `${prefix}-focus` : "";
+  const searchClass = (0, import_lodash.isEmpty)(type) ? "" : `${prefix}-has-search`;
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     import_antd.ConfigProvider,
     {
@@ -176,7 +179,7 @@ var TextInputInside = (props) => {
       prefixCls: prefix,
       theme: {
         components: {
-          Input: __spreadValues({}, import_designTokens.designTokens)
+          Input: __spreadValues({}, designTokens)
         },
         cssVar: true,
         hashed: false
@@ -185,7 +188,7 @@ var TextInputInside = (props) => {
     /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: `${prefix} ${focusStyle} ${error} ${disabledStyle}`
+        className: `${prefix} ${focusStyle} ${error} ${disabledStyle} ${className}`
       },
       /* @__PURE__ */ import_react.default.createElement(
         "span",
@@ -203,7 +206,7 @@ var TextInputInside = (props) => {
       /* @__PURE__ */ import_react.default.createElement(
         import_antd.Input,
         __spreadValues({
-          className: (0, import_lodash.isEmpty)(type) ? "" : `${prefix}-has-search`,
+          className: searchClass,
           onFocus: () => {
             setFocus(true);
           },

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadius: any;
     paddingBlock: any;
     paddingInline: any;
@@ -14,7 +14,7 @@ declare const designTokens: {
     fontSize: any;
     colorBgContainerDisabled: any;
 };
-declare const designFormTokens: {
+declare const useDesignFormTokens: () => {
     labelRequiredMarkColor: any;
     colorError: any;
     lineHeight: number;
@@ -24,7 +24,7 @@ declare const designFormTokens: {
     fontSize: any;
     itemMarginBottom: number;
 };
-declare const designFormHorizontalTokens: {
+declare const useDesignFormHorizontalTokens: () => {
     verticalLabelPadding: string;
     labelRequiredMarkColor: any;
     colorError: any;
@@ -35,7 +35,7 @@ declare const designFormHorizontalTokens: {
     fontSize: any;
     itemMarginBottom: number;
 };
-declare const styleToken: {
+declare const useStyleToken: () => {
     [x: string]: any;
 };
-export { designTokens, designFormTokens, designFormHorizontalTokens, styleToken };
+export { useDesignTokens, useDesignFormTokens, useDesignFormHorizontalTokens, useStyleToken };

package/lib/components/TextInputOutside/designTokens.js

@@ -19,77 +19,93 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/TextInputOutside/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  designFormHorizontalTokens: () => designFormHorizontalTokens,
-  designFormTokens: () => designFormTokens,
-  designTokens: () => designTokens,
-  styleToken: () => styleToken
+  useDesignFormHorizontalTokens: () => useDesignFormHorizontalTokens,
+  useDesignFormTokens: () => useDesignFormTokens,
+  useDesignTokens: () => useDesignTokens,
+  useStyleToken: () => useStyleToken
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
 var import_constants = require("../../constants");
+var import_utils = require("../../utils");
 var prefixCls = import_constants.cssClasses.PREFIX + "-input-outside";
-var designTokens = {
-  borderRadius: (0, import_tokenHelper.getToken)("borderRadiusInput"),
-  // 圆角
-  paddingBlock: (0, import_tokenHelper.getToken)("spacinginputpaddingVerticalM"),
-  // 纵向内边距
-  paddingInline: (0, import_tokenHelper.getToken)("spacingInputPaddingHorizontal"),
-  // 横向内边距
-  colorText: (0, import_tokenHelper.getToken)("colorInputTextActive"),
-  // 内容文本颜色
-  hoverBorderColor: (0, import_tokenHelper.getToken)("colorInputBorderActive"),
-  // hover边框颜色
-  activeBorderColor: (0, import_tokenHelper.getToken)("colorInputBorderActive"),
-  // active边框颜色
-  activeShadow: "0px 0px 0px 2px #180C8E33",
-  // 边框shadow颜色
-  colorError: (0, import_tokenHelper.getToken)("colorInputTextError"),
-  // 错误信息文本颜色
-  colorBgContainer: (0, import_tokenHelper.getToken)("colorInputBackground"),
-  // 背景颜色
-  borderWidthInputStandard: (0, import_tokenHelper.getToken)("borderWidthInputStandard"),
-  // 标准边框宽度
-  colorBorder: (0, import_tokenHelper.getToken)("colorInputBorderStandard"),
-  // 标准边框颜色
-  colorInputTextPlaceholder: (0, import_tokenHelper.getToken)("colorInputTextPlaceholder"),
-  // placeholder文本颜色
-  fontSize: (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  // 字体大小
-  colorBgContainerDisabled: (0, import_tokenHelper.getToken)("colorInputBackgroundHaze")
-  // 背景颜色
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    borderRadius: getToken("borderRadiusInput"),
+    // 圆角
+    paddingBlock: getToken("spacinginputpaddingVerticalM"),
+    // 纵向内边距
+    paddingInline: getToken("spacingInputPaddingHorizontal"),
+    // 横向内边距
+    colorText: getToken("colorInputTextActive"),
+    // 内容文本颜色
+    hoverBorderColor: getToken("colorInputBorderActive"),
+    // hover边框颜色
+    activeBorderColor: getToken("colorInputBorderActive"),
+    // active边框颜色
+    activeShadow: "0px 0px 0px 2px #180C8E33",
+    // 边框shadow颜色
+    colorError: getToken("colorInputTextError"),
+    // 错误信息文本颜色
+    colorBgContainer: getToken("colorInputBackground"),
+    // 背景颜色
+    borderWidthInputStandard: getToken("borderWidthInputStandard"),
+    // 标准边框宽度
+    colorBorder: getToken("colorInputBorderStandard"),
+    // 标准边框颜色
+    colorInputTextPlaceholder: getToken("colorInputTextPlaceholder"),
+    // placeholder文本颜色
+    fontSize: getToken("ContentC14Regular"),
+    // 字体大小
+    colorBgContainerDisabled: getToken("colorInputBackgroundHaze")
+    // 背景颜色
+  };
+  return designTokens;
 };
-var designFormTokens = {
-  labelRequiredMarkColor: (0, import_tokenHelper.getToken)("colorInputTextError"),
-  colorError: (0, import_tokenHelper.getToken)("colorInputTextError"),
-  // 错误信息文本颜色
-  lineHeight: 24 / (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  // 行高
-  labelHeight: 24 / (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  // 行高
-  labelColor: (0, import_tokenHelper.getToken)("colorInputTextLabel"),
-  // label文本颜色
-  labelFontSize: (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  fontSize: (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  // 字体大小
-  itemMarginBottom: 28
+var useDesignFormTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designFormTokens = {
+    labelRequiredMarkColor: getToken("colorInputTextError"),
+    colorError: getToken("colorInputTextError"),
+    // 错误信息文本颜色
+    lineHeight: 24 / getToken("ContentC14Regular"),
+    // 行高
+    labelHeight: 24 / getToken("ContentC14Regular"),
+    // 行高
+    labelColor: getToken("colorInputTextLabel"),
+    // label文本颜色
+    labelFontSize: getToken("ContentC14Regular"),
+    fontSize: getToken("ContentC14Regular"),
+    // 字体大小
+    itemMarginBottom: 28
+  };
+  return designFormTokens;
 };
-var designFormHorizontalTokens = {
-  verticalLabelPadding: "0 0 8px",
-  labelRequiredMarkColor: (0, import_tokenHelper.getToken)("colorInputTextError"),
-  colorError: (0, import_tokenHelper.getToken)("colorInputTextError"),
-  // 错误信息文本颜色
-  labelHeight: `${(0, import_tokenHelper.getToken)("spacinginputpaddingVerticalM") * 2 + 24}px`,
-  // label高
-  labelColor: (0, import_tokenHelper.getToken)("colorInputTextLabel"),
-  // label文本颜色
-  lineHeight: 24 / (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  // 行高
-  labelFontSize: (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  fontSize: (0, import_tokenHelper.getToken)("ContentC14Regular"),
-  // 字体大小
-  itemMarginBottom: 28
+var useDesignFormHorizontalTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designFormHorizontalTokens = {
+    verticalLabelPadding: "0 0 8px",
+    labelRequiredMarkColor: getToken("colorInputTextError"),
+    colorError: getToken("colorInputTextError"),
+    // 错误信息文本颜色
+    labelHeight: `${getToken("spacinginputpaddingVerticalM") * 2 + 24}px`,
+    // label高
+    labelColor: getToken("colorInputTextLabel"),
+    // label文本颜色
+    lineHeight: 24 / getToken("ContentC14Regular"),
+    // 行高
+    labelFontSize: getToken("ContentC14Regular"),
+    fontSize: getToken("ContentC14Regular"),
+    // 字体大小
+    itemMarginBottom: 28
+  };
+  return designFormHorizontalTokens;
 };
-var styleToken = {
-  [`--${prefixCls}-color-error-border-hover`]: (0, import_tokenHelper.getToken)("colorInputBorderError")
-  // error颜色
+var useStyleToken = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const styleToken = {
+    [`--${prefixCls}-color-error-border-hover`]: getToken("colorInputBorderError")
+    // error颜色
+  };
+  return styleToken;
 };

package/lib/components/TextInputOutside/index.js

@@ -66,23 +66,27 @@ var import_constants = require("../../constants");
 var import_designTokens = require("./designTokens");
 var import_style = require("./style/index.less");
 var TextInputOutside = (props) => {
-  const _a = props, { layout = "horizontal", placeholder, disabled } = _a, attr = __objRest(_a, ["layout", "placeholder", "disabled"]);
+  const _a = props, { layout = "horizontal", placeholder, disabled, style, className = "" } = _a, attr = __objRest(_a, ["layout", "placeholder", "disabled", "style", "className"]);
   const prefix = `${import_constants.cssClasses.PREFIX}-inputOutside`;
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const designFormTokens = (0, import_designTokens.useDesignFormTokens)();
+  const designFormHorizontalTokens = (0, import_designTokens.useDesignFormHorizontalTokens)();
+  const styleToken = (0, import_designTokens.useStyleToken)();
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
-      token: { baseColor: "blue" },
+      token: {},
       path: [`${prefix}`]
     }, () => `
       .${prefix}-input {
-        height: ${import_designTokens.designTokens.paddingBlock * 2 + 24}px;;
+        height: ${designTokens.paddingBlock * 2 + 24}px;;
       }
     `);
     return hashId;
   };
   useCustomButtonStyle();
-  const customStyle = import_designTokens.styleToken;
-  const formDesign = layout === "vertical" ? import_designTokens.designFormTokens : import_designTokens.designFormHorizontalTokens;
+  const customStyle = styleToken;
+  const formDesign = layout === "vertical" ? designFormTokens : designFormHorizontalTokens;
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     import_antd.ConfigProvider,
     {
@@ -90,7 +94,7 @@ var TextInputOutside = (props) => {
       prefixCls: prefix,
       theme: {
         components: {
-          Input: __spreadValues({}, import_designTokens.designTokens),
+          Input: __spreadValues({}, designTokens),
           Form: __spreadValues({}, formDesign)
         },
         cssVar: true,
@@ -101,9 +105,9 @@ var TextInputOutside = (props) => {
       import_antd.Form.Item,
       __spreadValues({
         layout,
-        className: prefix
+        className: `${prefix} ${className}`
       }, attr),
-      /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { placeholder, disabled, style: __spreadValues({}, customStyle) })
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { placeholder, disabled, style: __spreadValues(__spreadValues({}, customStyle), style) })
     )
   ));
 };

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     spacingTextLinkHorizontalGap: any;
     sizingTextLinkIconLeft: any;
     sizingTextLinkIconRight: any;
@@ -7,4 +7,4 @@ declare const designTokens: {
     colorTextLinkIconInverse: any;
     colorTextLinkIcon: any;
 };
-export default designTokens;
+export { useDesignTokens };

package/lib/components/TextLink/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,30 +14,25 @@ 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/TextLink/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 = {
-  spacingTextLinkHorizontalGap: import_tokenManager.default.tokenKey("spacingTextLinkHorizontalGap"),
-  sizingTextLinkIconLeft: import_tokenManager.default.tokenKey("sizingTextLinkIconLeft"),
-  sizingTextLinkIconRight: import_tokenManager.default.tokenKey("sizingTextLinkIconRight"),
-  colorTextLinkTextInverse: import_tokenManager.default.tokenKey("colorTextLinkTextInverse"),
-  colorTextLinkText: import_tokenManager.default.tokenKey("colorTextLinkText"),
-  colorTextLinkIconInverse: import_tokenManager.default.tokenKey("colorTextLinkIconInverse"),
-  colorTextLinkIcon: import_tokenManager.default.tokenKey("colorTextLinkIcon")
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    spacingTextLinkHorizontalGap: getToken("spacingTextLinkHorizontalGap"),
+    sizingTextLinkIconLeft: getToken("sizingTextLinkIconLeft"),
+    sizingTextLinkIconRight: getToken("sizingTextLinkIconRight"),
+    colorTextLinkTextInverse: getToken("colorTextLinkTextInverse"),
+    colorTextLinkText: getToken("colorTextLinkText"),
+    colorTextLinkIconInverse: getToken("colorTextLinkIconInverse"),
+    colorTextLinkIcon: getToken("colorTextLinkIcon")
+  };
+  return designTokens;
 };
-var designTokens_default = designTokens;

package/lib/components/TextLink/index.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(TextLink_exports);
 var import_react = __toESM(require("react"));
 var import_Text = __toESM(require("../Text"));
 var import_Icon = __toESM(require("../Icon"));
-var import_designTokens = __toESM(require("./designTokens"));
+var import_designTokens = require("./designTokens");
 var TextLinkEnum = {
   default: "default",
   withLeftIcon: "withLeftIcon",
@@ -71,7 +71,8 @@ var TextLinkEnum = {
 };
 var TextLink = (props) => {
   const _a = props, { text, style, iconName, iconSize, type = TextLinkEnum.default, inverse = false, onClick, className } = _a, restProps = __objRest(_a, ["text", "style", "iconName", "iconSize", "type", "inverse", "onClick", "className"]);
-  const { spacingTextLinkHorizontalGap, sizingTextLinkIconLeft, sizingTextLinkIconRight, colorTextLinkTextInverse, colorTextLinkText, colorTextLinkIconInverse, colorTextLinkIcon } = import_designTokens.default;
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const { spacingTextLinkHorizontalGap, sizingTextLinkIconLeft, sizingTextLinkIconRight, colorTextLinkTextInverse, colorTextLinkText, colorTextLinkIconInverse, colorTextLinkIcon } = designTokens;
   const colorTextLinkText_ = inverse ? colorTextLinkTextInverse : colorTextLinkText;
   const colorTextLinkIcon_ = inverse ? colorTextLinkIconInverse : colorTextLinkIcon;
   let sizingTextLinkIcon = iconSize || 0;

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorText: any;
     contentBg: any;
     borderRadiusLG: any;
@@ -10,4 +10,4 @@ declare const designTokens: {
     colorLinkText: any;
     sizingToastIcon: any;
 };
-export { designTokens };
+export { useDesignTokens };