@aloudata/aloudata-design 3.0.20 → 3.0.22

package/README.md

@@ -4,6 +4,22 @@
 
 本文档用于介绍组件库开发相关的规范以及组件库开发过程中的注意事项。
 
+## Color Governance Documentation
+
+Color System Governance 的唯一入口：`docs/color-system/README.md`
+
+## Business Project CSS Consumption
+
+Business Project 应通过正式 CSS Consumer Entry 消费 ALD 的 CSS Variables Public Web Surface：
+
+```css
+@import '@aloudata/aloudata-design/css';
+```
+
+该入口只提供已交付的 CSS Variables Public Web Surface；不提供 Dynamic Brand API、Runtime API、`createTheme()` 或 `initAldTheme()`。不要依赖 `dist` 内部路径或其他未声明 package subpath。
+
+Component consumption and CSS Variables consumption are independent public delivery surfaces. Using one does not grant access to the other.
+
 ## 环境配置
 
 组件库开发过程中，需要满足以下条件：
@@ -36,7 +52,7 @@ Node version >= 16.0.0
 ```
 
 #### 组件测试
-  
+
 ```bash
   yarn run test //单元测试
 ```
@@ -47,7 +63,7 @@ Node version >= 16.0.0
   yarn run build //打包
 ```
 
-#### 组件本地link
+#### 组件本地 link
 
 ```bash
   npm link //将组件库link到本地npm
@@ -67,7 +83,7 @@ Node version >= 16.0.0
 ├── dist --> 组件打包生成的组件目录
 ├── src --> 组件目录
 ├── tsconfig.json --> tsconfig ts配置文件
-├── .editorconfig 
+├── .editorconfig
 ├── .eslintrc.js  --> eslint ts等校验规则配置
 ├── .fatherrc.ts  ---> father组件打包配置
 ├── .prettierrc.js ---> prettier 代码格式化配置
@@ -83,33 +99,33 @@ Node version >= 16.0.0
 
 ### 3 代码风格
 
-我们使用eslint+stylelint+prettier 来统一代码风格，同时**需要对vscode做一定的配置**，具体[配置参考](https://docs.dingtalk.com/i/nodes/mM3zoYAw1Rr8D5Nong2XWnZ07y9NpXxD?dontjump=true&iframeQuery=utm_source%3Dportal%26utm_medium%3Dportal_space_file_tree&navQuery=spaceId%3Da0gX104nML97WzeJ&nav=spaces)
+我们使用 eslint+stylelint+prettier 来统一代码风格，同时**需要对 vscode 做一定的配置**，具体[配置参考](https://docs.dingtalk.com/i/nodes/mM3zoYAw1Rr8D5Nong2XWnZ07y9NpXxD?dontjump=true&iframeQuery=utm_source%3Dportal%26utm_medium%3Dportal_space_file_tree&navQuery=spaceId%3Da0gX104nML97WzeJ&nav=spaces)
 
-ts文件使用 *eslint* 校验， 配置文件 .eslintrc.js [查看规则](https://cn.eslint.org/docs/rules/)
-less文件使用 *stylelint* 校验， 配置文件 .stylelintrc.json [查看规则](https://stylelint.bootcss.com/user-guide/rules/list)
-使用 *prettier* 格式化代码，配置文件 .prettierrc.js  
+ts 文件使用 _eslint_ 校验， 配置文件 .eslintrc.js [查看规则](https://cn.eslint.org/docs/rules/)
+less 文件使用 _stylelint_ 校验， 配置文件 .stylelintrc.json [查看规则](https://stylelint.bootcss.com/user-guide/rules/list)
+使用 _prettier_ 格式化代码，配置文件 .prettierrc.js
 
 ## 组件开发指南（必读）
 
 ### 了解组件分类
 
 1. 毛坯组件
-   原始的未做任何修改的antd组件
+   原始的未做任何修改的 antd 组件
 2. 简装组件
    是指在毛坯组件的基础上，只简单了修改了一些颜色、样式等的组件
 3. 精装组件
-   所谓精装组件，是指设计师精心设计过组件应用场景和UI的组件，可能基于antd，也可以完全自定义
+   所谓精装组件，是指设计师精心设计过组件应用场景和 UI 的组件，可能基于 antd，也可以完全自定义
 
 ### 单元测试
 
-组件开发过程中需要写单测的，建议先写单测，然后进行开发。[了解TDD](https://baike.baidu.com/item/TDD/9064369)
+组件开发过程中需要写单测的，建议先写单测，然后进行开发。[了解 TDD](https://baike.baidu.com/item/TDD/9064369)
 
 哪些情况需要写单元测试：
 
-1. 如果是基于antd的组件，但凡组件有api接口变动，必须要写单元测试
-2. 非基于antd的组件，必须要写单元测试
-3. 单元测试需要覆盖组件每一个api接口的各个状态
-4. 单元测试文件以 *.test.tsx* 结尾
+1. 如果是基于 antd 的组件，但凡组件有 api 接口变动，必须要写单元测试
+2. 非基于 antd 的组件，必须要写单元测试
+3. 单元测试需要覆盖组件每一个 api 接口的各个状态
+4. 单元测试文件以 _.test.tsx_ 结尾
 
 单元测试参考资料：
 
@@ -118,28 +134,28 @@ less文件使用 *stylelint* 校验， 配置文件 .stylelintrc.json [查看规
 
 ### 组件开发注意事项
 
-组件开发支持两种模式，基于antd开发和其它自定义开发。
+组件开发支持两种模式，基于 antd 开发和其它自定义开发。
 
-**基于antd开发:** 在业务满足的情况下，建议基于antd开发或者rc组件开发。方式是把antd组件引用过来，然后做升级修改之后，再作为ald组件暴露出去
+**基于 antd 开发:** 在业务满足的情况下，建议基于 antd 开发或者 rc 组件开发。方式是把 antd 组件引用过来，然后做升级修改之后，再作为 ald 组件暴露出去
 
-**自定义开发：** 当antd组件不满足业务的时候，可以自定义开发，允许引用其它基础组件进行二次开发或者完全自定义组件进行开发。通常是精装组件。
+**自定义开发：** 当 antd 组件不满足业务的时候，可以自定义开发，允许引用其它基础组件进行二次开发或者完全自定义组件进行开发。通常是精装组件。
 
 组件开发有以下几个**必须要注意**的点
 
-1. 组件样式要和组件类进行分离，即在组件开发的过程中，不允许引用css、less等样式组件。样式单独写在style文件夹下。
-2. 组件文档内的api接口展示，是获取组件属性props的接口interface定义来实现的（自定义md表格除外）。组件库脚手架对于组件接口interface有处理，即凡是接口来自于外部库引入的部分，不会被文档api识别，即无法展示。interface接口的每一个想要暴露的属性，都必须要写注释，主要包括类型、描述、默认值等。
-3. 组件简装及以上，必须要写demo样例，用于展示已经支持的样式及功能
-4. 精装组件必须要写单元测试。每一个组件的属性，都要在测例中进行测试，保证在组件的的维护修改过程中，不会出现bug。
-5. 组件由ts编写，必须对外暴露所有可能在业务使用过程中需要的ts类型。
-6. 组件库不使用css-module，请考虑权重问题，禁止出现 **!important** 这样的样式
+1. 组件样式要和组件类进行分离，即在组件开发的过程中，不允许引用 css、less 等样式组件。样式单独写在 style 文件夹下。
+2. 组件文档内的 api 接口展示，是获取组件属性 props 的接口 interface 定义来实现的（自定义 md 表格除外）。组件库脚手架对于组件接口 interface 有处理，即凡是接口来自于外部库引入的部分，不会被文档 api 识别，即无法展示。interface 接口的每一个想要暴露的属性，都必须要写注释，主要包括类型、描述、默认值等。
+3. 组件简装及以上，必须要写 demo 样例，用于展示已经支持的样式及功能
+4. 精装组件必须要写单元测试。每一个组件的属性，都要在测例中进行测试，保证在组件的的维护修改过程中，不会出现 bug。
+5. 组件由 ts 编写，必须对外暴露所有可能在业务使用过程中需要的 ts 类型。
+6. 组件库不使用 css-module，请考虑权重问题，禁止出现 **!important** 这样的样式
 
 ### 组件库文档编写注意事项
 
-#### 文档前文frontMatter编写
+#### 文档前文 frontMatter 编写
 
 在组件库官网展示的时候，会根据文档头部的信息，对文档进行分类，我们当前的计划是分成三类：设计、文档、组件；
 
-在文档头部，使用YAML预发进行编写，用于描述组件的文档的信息，如：
+在文档头部，使用 YAML 预发进行编写，用于描述组件的文档的信息，如：
 
 ```yaml
 ---
@@ -154,39 +170,39 @@ group:
 
 具体参考：[FrontMatter](https://d.umijs.org/zh-CN/config/frontmatter)
 
-#### 组件场景用例demo展示
+#### 组件场景用例 demo 展示
 
-每个简装以上组件都需要展示场景用例，写在src/**/demos/文件夹下
-demo项目中，像在业务中使用aloudata-design一样，脚手架会自动关联项目到node-modules下。(建议先build一下，然后再进行demo展示)
-在组件的md文档中使用code引入用例，在文档中展示用例，如：
-  
-  ```jsx
-  <code src="./demos/single/index.tsx" title="单项选择"/>
-  ```
+每个简装以上组件都需要展示场景用例，写在 src/\*\*/demos/文件夹下
+demo 项目中，像在业务中使用 aloudata-design 一样，脚手架会自动关联项目到 node-modules 下。(建议先 build 一下，然后再进行 demo 展示)
+在组件的 md 文档中使用 code 引入用例，在文档中展示用例，如：
+
+```jsx
+<code src="./demos/single/index.tsx" title="单项选择" />
+```
 
-关于demo的配置，即code的用法，请参考[demo配置](https://d.umijs.org/zh-CN/config/frontmatter#demo-%E9%85%8D%E7%BD%AE%E9%A1%B9)
+关于 demo 的配置，即 code 的用法，请参考[demo 配置](https://d.umijs.org/zh-CN/config/frontmatter#demo-%E9%85%8D%E7%BD%AE%E9%A1%B9)
 
-#### 组件api展示
+#### 组件 api 展示
 
-api展示为表格形势，可以使用**API**标签，如：
+api 展示为表格形势，可以使用**API**标签，如：
 
 ```jsx
-  <API src="/path/to/your/component.tsx" hideTitle></API>
+<API src="/path/to/your/component.tsx" hideTitle></API>
 ```
 
 参考文档：[API](https://d.umijs.org/zh-CN/guide/advanced#%E5%9C%A8%E6%96%87%E6%A1%A3%E4%B8%AD%E5%B1%95%E7%A4%BA-api)
 
-也可以自己使用md语法写表格
-  
-  ```md
-  | 属性 | 描述 | 类型 | 默认值 |
-  | ---- | ---- | ---- | ---- |
-  | value | 某个值 | string | 当前选中的值 |
-  ```
+也可以自己使用 md 语法写表格
+
+```md
+| 属性  | 描述   | 类型   | 默认值       |
+| ----- | ------ | ------ | ------------ |
+| value | 某个值 | string | 当前选中的值 |
+```
 
 ### 关于组件模板创建
 
-使用 *npm run cmt* 创建的组件模板只是做一个参考，需要自己根据实际需求进行修改
+使用 _npm run cmt_ 创建的组件模板只是做一个参考，需要自己根据实际需求进行修改
 
 ## 关于组件库打包
 
@@ -196,8 +212,8 @@ api展示为表格形势，可以使用**API**标签，如：
   npm run build
 ```
 
-组件打包的入口在src/index.tsx，必须在文件总暴露出来，组件才会被打包。
-组件打包使用umi框架的 [falter](https://github.com/umijs/father) 打包工具, 具体配置在 .fatherrc.ts中。打包后会生成lib目录，es目录。
+组件打包的入口在 src/index.tsx，必须在文件总暴露出来，组件才会被打包。
+组件打包使用 umi 框架的 [falter](https://github.com/umijs/father) 打包工具, 具体配置在 .fatherrc.ts 中。打包后会生成 lib 目录，es 目录。
 
 ### 二、官方网站打包
 
@@ -205,24 +221,94 @@ api展示为表格形势，可以使用**API**标签，如：
   npm run docs:build
 ```
 
-官网打包我们默认使用dumi站点模式，会分为设计、文档、组件三个版块，其中设计和文档版块的内容在docs目录下，组件版块的内容在src/**/*.test.md文件中。
+官网打包我们默认使用 dumi 站点模式，会分为设计、文档、组件三个版块，其中设计和文档版块的内容在 docs 目录下，组件版块的内容在 src/\*_/_.test.md 文件中。
 
 1. 设计部分用于描述组件的设计理念，内容由设计师提供，可以是链接，也可以是资料等。
 2. 文档用于描述组件库开发的一些信息等。
-3. 组件用于展示组件的使用场景用例，组件的一些信息，组件的api接口等
+3. 组件用于展示组件的使用场景用例，组件的一些信息，组件的 api 接口等
+
+## CSS Variables 与组件消费边界
+
+CSS Variables Public Web Surface 与组件按需引用属于不同 Consumer Entry。
+
+### Component Consumption
+
+组件消费用于：
+
+- React Component API。
+- Component style assets。
+- Component-level usage。
+
+组件消费继续遵循组件按需引用规范。
+
+### CSS Variables Consumption
+
+CSS Variables Consumption 用于：
+
+- Design System Color Foundation Public Web Surface。
+
+Business Project 应通过正式 CSS Consumer Entry 消费已交付 CSS Variables：
+
+```css
+@import '@aloudata/aloudata-design/css';
+```
+
+该入口不提供：
+
+- Component API。
+- Dynamic Brand API。
+- Runtime API。
+- `createTheme()`。
+- `initAldTheme()`。
+
+### Boundary
+
+Business Project 不应：
+
+- 通过组件 Less / style 文件消费 CSS Variables Public Web Surface。
+- 依赖 `dist` 内部路径。
+- 使用未声明 package subpath。
+- 直接访问 Runtime、Generator 或 Token Output Contract。
+
+CSS Entry 解决如何消费已交付 CSS output；它不解决如何生成 Dynamic Brand output。它不会开放 `createTheme()`、`initAldTheme()` 或任何 Brand runtime capability。
+
+## Component On-demand Import
+
+以下配置仅用于 React Component 按需引用。该消费方式属于 Component Consumption，不属于 CSS Variables Public Web Surface Consumption。
+
+组件按需引用用于：
+
+- React Component API。
+- Component style assets。
+- Component-level usage。
+
+CSS Variables Public Web Surface 应使用：
+
+```css
+@import '@aloudata/aloudata-design/css';
+```
+
+不要通过以下方式消费 CSS Variables Public Web Surface：
+
+- Component style import。
+- Less 文件。
+- `babel-plugin-import` style path。
+- `dist` 内部文件路径。
+
+Component API 与 CSS Variables Public Surface 是两个独立的 Public Delivery Surface。
 
 ## 按需引用
 
 ```js
 [
-    'import',
-    {
-      libraryName: '@aloudata/aloudata-design',
-      libraryDirectory: 'dist',
-      style:(name)=>{
-        return `${name}/style/index.less`
-      },
-      camel2DashComponentName: false,
+  'import',
+  {
+    libraryName: '@aloudata/aloudata-design',
+    libraryDirectory: 'dist',
+    style: (name) => {
+      return `${name}/style/index.less`;
     },
-]
-```
+    camel2DashComponentName: false,
+  },
+];
+```

package/dist/Alert/index.js

@@ -85,7 +85,7 @@ function Alert(props) {
 			}),
 			closable && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-transparent tw-p-0 tw-pt-0.5",
+				className: "ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-p-0 tw-pt-0.5",
 				onClick: (e) => {
 					setClosed(true);
 					onClose?.(e);

package/dist/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  AttentionTriangleFill,\n  CheckCircleFill,\n  CloseCircleFill,\n  CloseLightLine,\n  InformationCircleFill,\n} from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface AlertProps {\n  type?: 'success' | 'info' | 'warning' | 'error' | 'none';\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  closable?: boolean;\n  onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  afterClose?: () => void;\n  showIcon?: boolean;\n  icon?: React.ReactNode;\n  banner?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst typeConfig: Record<\n  string,\n  { bg: string; border: string; icon: React.ReactNode; titleColor: string }\n> = {\n  success: {\n    bg: 'tw-bg-[var(--background-positive-subtle)]',\n    border: 'tw-border-[var(--border-positive-subtle)]',\n    titleColor: 'tw-text-[var(--content-positive-primary)]',\n    icon: (\n      <CheckCircleFill size={16} color=\"var(--content-positive-secondary)\" />\n    ),\n  },\n  info: {\n    bg: 'tw-bg-[var(--background-informative-subtle)]',\n    border: 'tw-border-[var(--border-informative-subtle)]',\n    titleColor: 'tw-text-[var(--content-informative-primary)]',\n    icon: (\n      <InformationCircleFill\n        size={16}\n        color=\"var(--content-informative-secondary)\"\n      />\n    ),\n  },\n  warning: {\n    bg: 'tw-bg-[var(--background-warning-subtle)]',\n    border: 'tw-border-[var(--border-warning-subtle)]',\n    titleColor: 'tw-text-[var(--content-warning-primary)]',\n    icon: (\n      <AttentionTriangleFill\n        size={16}\n        color=\"var(--content-warning-secondary)\"\n      />\n    ),\n  },\n  error: {\n    bg: 'tw-bg-[var(--background-negative-subtle)]',\n    border: 'tw-border-[var(--border-negative-subtle)]',\n    titleColor: 'tw-text-[var(--content-negative-primary)]',\n    icon: (\n      <CloseCircleFill size={16} color=\"var(--content-negative-secondary)\" />\n    ),\n  },\n  none: {\n    bg: 'tw-bg-[var(--background-neutral-subtle)]',\n    border: 'tw-border-[var(--border-neutral-subtle)]',\n    titleColor: 'tw-text-[var(--content-primary)]',\n    icon: <InformationCircleFill size={16} color=\"var(--content-secondary)\" />,\n  },\n};\n\nfunction Alert(props: AlertProps) {\n  const {\n    type = 'info',\n    message,\n    description,\n    closable,\n    onClose,\n    afterClose,\n    showIcon = true,\n    icon,\n    banner,\n    action,\n    className,\n    style,\n  } = props;\n\n  const [closed, setClosed] = useState(false);\n\n  if (closed) return null;\n\n  const config = typeConfig[type] || typeConfig.info;\n\n  return (\n    <div\n      className={cn(\n        'ald-alert tw-flex tw-items-start tw-gap-2 tw-rounded-r-75 tw-border tw-border-solid tw-p-3',\n        banner && 'ald-alert-banner !tw-rounded-none',\n        config.bg,\n        config.border,\n        className,\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      {showIcon && (\n        <span className=\"ald-alert-icon tw-flex tw-items-center tw-pt-0.5\">\n          {icon || config.icon}\n        </span>\n      )}\n      <div className=\"ald-alert-content tw-min-w-0 tw-flex-1\">\n        {message && (\n          <div\n            className={cn(\n              'ald-alert-message tw-text-sm tw-font-medium tw-leading-5',\n              config.titleColor,\n            )}\n          >\n            {message}\n          </div>\n        )}\n        {description && (\n          <div\n            className=\"ald-alert-description tw-mt-1 tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]\"\n            style={{ fontFeatureSettings: \"'liga' off, 'clig' off\" }}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n      {action && <div className=\"ald-alert-action\">{action}</div>}\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-transparent tw-p-0 tw-pt-0.5\"\n          onClick={(e) => {\n            setClosed(true);\n            onClose?.(e);\n            afterClose?.();\n          }}\n        >\n          <CloseLightLine size={16} color=\"var(--content-secondary)\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport default Alert;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAGF;CACF,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAsC,CAAA;EAE1E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,MAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,OAAO;EACL,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAsC,CAAA;EAE1E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MAAM,oBAAC,QAAD;GAAuB,MAAM;GAAI,OAAM;GAA6B,CAAA;EAC3E;CACF;AAED,SAAS,MAAM,OAAmB;CAChC,MAAM,EACJ,OAAO,QACP,SACA,aACA,UACA,SACA,YACA,WAAW,MACX,MACA,QACA,QACA,WACA,UACE;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;AAE3C,KAAI,OAAQ,QAAO;CAEnB,MAAM,SAAS,WAAW,SAAS,WAAW;AAE9C,QACE,qBAAC,OAAD;EACE,WAAW,GACT,8FACA,UAAU,qCACV,OAAO,IACP,OAAO,QACP,UACD;EACM;EACP,MAAK;YATP;GAWG,YACC,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ,OAAO;IACX,CAAA;GAET,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,WACC,oBAAC,OAAD;KACE,WAAW,GACT,4DACA,OAAO,WACR;eAEA;KACG,CAAA,EAEP,eACC,oBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,qBAAqB,0BAA0B;eAEvD;KACG,CAAA,CAEJ;;GACL,UAAU,oBAAC,OAAD;IAAK,WAAU;cAAoB;IAAa,CAAA;GAC1D,YACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,MAAM;AACd,eAAU,KAAK;AACf,eAAU,EAAE;AACZ,mBAAc;;cAGhB,oBAAC,QAAD;KAAgB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACtD,CAAA;GAEP"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  AttentionTriangleFill,\n  CheckCircleFill,\n  CloseCircleFill,\n  CloseLightLine,\n  InformationCircleFill,\n} from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface AlertProps {\n  type?: 'success' | 'info' | 'warning' | 'error' | 'none';\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  closable?: boolean;\n  onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  afterClose?: () => void;\n  showIcon?: boolean;\n  icon?: React.ReactNode;\n  banner?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst typeConfig: Record<\n  string,\n  { bg: string; border: string; icon: React.ReactNode; titleColor: string }\n> = {\n  success: {\n    bg: 'tw-bg-[var(--background-positive-subtle)]',\n    border: 'tw-border-[var(--border-positive-subtle)]',\n    titleColor: 'tw-text-[var(--content-positive-primary)]',\n    icon: (\n      <CheckCircleFill size={16} color=\"var(--content-positive-secondary)\" />\n    ),\n  },\n  info: {\n    bg: 'tw-bg-[var(--background-informative-subtle)]',\n    border: 'tw-border-[var(--border-informative-subtle)]',\n    titleColor: 'tw-text-[var(--content-informative-primary)]',\n    icon: (\n      <InformationCircleFill\n        size={16}\n        color=\"var(--content-informative-secondary)\"\n      />\n    ),\n  },\n  warning: {\n    bg: 'tw-bg-[var(--background-warning-subtle)]',\n    border: 'tw-border-[var(--border-warning-subtle)]',\n    titleColor: 'tw-text-[var(--content-warning-primary)]',\n    icon: (\n      <AttentionTriangleFill\n        size={16}\n        color=\"var(--content-warning-secondary)\"\n      />\n    ),\n  },\n  error: {\n    bg: 'tw-bg-[var(--background-negative-subtle)]',\n    border: 'tw-border-[var(--border-negative-subtle)]',\n    titleColor: 'tw-text-[var(--content-negative-primary)]',\n    icon: (\n      <CloseCircleFill size={16} color=\"var(--content-negative-secondary)\" />\n    ),\n  },\n  none: {\n    bg: 'tw-bg-[var(--background-neutral-subtle)]',\n    border: 'tw-border-[var(--border-neutral-subtle)]',\n    titleColor: 'tw-text-[var(--content-primary)]',\n    icon: <InformationCircleFill size={16} color=\"var(--content-secondary)\" />,\n  },\n};\n\nfunction Alert(props: AlertProps) {\n  const {\n    type = 'info',\n    message,\n    description,\n    closable,\n    onClose,\n    afterClose,\n    showIcon = true,\n    icon,\n    banner,\n    action,\n    className,\n    style,\n  } = props;\n\n  const [closed, setClosed] = useState(false);\n\n  if (closed) return null;\n\n  const config = typeConfig[type] || typeConfig.info;\n\n  return (\n    <div\n      className={cn(\n        'ald-alert tw-flex tw-items-start tw-gap-2 tw-rounded-r-75 tw-border tw-border-solid tw-p-3',\n        banner && 'ald-alert-banner !tw-rounded-none',\n        config.bg,\n        config.border,\n        className,\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      {showIcon && (\n        <span className=\"ald-alert-icon tw-flex tw-items-center tw-pt-0.5\">\n          {icon || config.icon}\n        </span>\n      )}\n      <div className=\"ald-alert-content tw-min-w-0 tw-flex-1\">\n        {message && (\n          <div\n            className={cn(\n              'ald-alert-message tw-text-sm tw-font-medium tw-leading-5',\n              config.titleColor,\n            )}\n          >\n            {message}\n          </div>\n        )}\n        {description && (\n          <div\n            className=\"ald-alert-description tw-mt-1 tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]\"\n            style={{ fontFeatureSettings: \"'liga' off, 'clig' off\" }}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n      {action && <div className=\"ald-alert-action\">{action}</div>}\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-p-0 tw-pt-0.5\"\n          onClick={(e) => {\n            setClosed(true);\n            onClose?.(e);\n            afterClose?.();\n          }}\n        >\n          <CloseLightLine size={16} color=\"var(--content-secondary)\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport default Alert;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAGF;CACF,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAsC,CAAA;EAE1E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,MAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,OAAO;EACL,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAsC,CAAA;EAE1E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MAAM,oBAAC,QAAD;GAAuB,MAAM;GAAI,OAAM;GAA6B,CAAA;EAC3E;CACF;AAED,SAAS,MAAM,OAAmB;CAChC,MAAM,EACJ,OAAO,QACP,SACA,aACA,UACA,SACA,YACA,WAAW,MACX,MACA,QACA,QACA,WACA,UACE;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;AAE3C,KAAI,OAAQ,QAAO;CAEnB,MAAM,SAAS,WAAW,SAAS,WAAW;AAE9C,QACE,qBAAC,OAAD;EACE,WAAW,GACT,8FACA,UAAU,qCACV,OAAO,IACP,OAAO,QACP,UACD;EACM;EACP,MAAK;YATP;GAWG,YACC,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ,OAAO;IACX,CAAA;GAET,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,WACC,oBAAC,OAAD;KACE,WAAW,GACT,4DACA,OAAO,WACR;eAEA;KACG,CAAA,EAEP,eACC,oBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,qBAAqB,0BAA0B;eAEvD;KACG,CAAA,CAEJ;;GACL,UAAU,oBAAC,OAAD;IAAK,WAAU;cAAoB;IAAa,CAAA;GAC1D,YACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,MAAM;AACd,eAAU,KAAK;AACf,eAAU,EAAE;AACZ,mBAAc;;cAGhB,oBAAC,QAAD;KAAgB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACtD,CAAA;GAEP"}

package/dist/App/index.d.ts

@@ -3,6 +3,9 @@ interface AppProps {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    /** z-index used by the global message and notification containers. */
+    overlayZIndex?: number;
 }
+export declare const DEFAULT_OVERLAY_Z_INDEX = 11000;
 declare const AldApp: React.FC<AppProps>;
 export default AldApp;

package/dist/App/index.js

@@ -4,22 +4,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { ToastContainer } from "react-toastify";
 //#region src/App/index.tsx
-var BodyPortal = ({ children }) => {
+var DEFAULT_OVERLAY_Z_INDEX = 11e3;
+var OverlayPortal = ({ children }) => {
 	if (typeof document === "undefined") return null;
 	return createPortal(children, document.body);
 };
-var AldApp = ({ children, className, ...restProps }) => {
+var AldApp = ({ children, className, style, overlayZIndex = DEFAULT_OVERLAY_Z_INDEX, ...restProps }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("ald-app", className),
+		style,
 		...restProps,
-		children: [
-			/* @__PURE__ */ jsx(ToastContainer, {
-				containerId: "message-container",
-				limit: 1
-			}),
-			/* @__PURE__ */ jsx(BodyPortal, { children: /* @__PURE__ */ jsx(ToastContainer, { containerId: "notification-container" }) }),
-			children
-		]
+		children: [/* @__PURE__ */ jsxs(OverlayPortal, { children: [/* @__PURE__ */ jsx(ToastContainer, {
+			containerId: "message-container",
+			limit: 1,
+			style: { zIndex: overlayZIndex }
+		}), /* @__PURE__ */ jsx(ToastContainer, {
+			containerId: "notification-container",
+			style: { zIndex: overlayZIndex }
+		})] }), children]
 	});
 };
 //#endregion

package/dist/App/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/App/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastContainer } from 'react-toastify';\nimport { cn } from '../lib/utils';\n\ninterface AppProps {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst BodyPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  if (typeof document === 'undefined') return null;\n  return createPortal(children, document.body);\n};\n\nconst AldApp: React.FC<AppProps> = ({ children, className, ...restProps }) => {\n  return (\n    <div className={cn('ald-app', className)} {...restProps}>\n      <ToastContainer containerId={'message-container'} limit={1} />\n      <BodyPortal>\n        <ToastContainer containerId={'notification-container'} />\n      </BodyPortal>\n      {children}\n    </div>\n  );\n};\n\nexport default AldApp;\n"],"mappings":";;;;;;AAWA,IAAM,cAAuD,EAAE,eAAe;AAC5E,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAO,aAAa,UAAU,SAAS,KAAK;;AAG9C,IAAM,UAA8B,EAAE,UAAU,WAAW,GAAG,gBAAgB;AAC5E,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,UAAU;EAAE,GAAI;YAA9C;GACE,oBAAC,gBAAD;IAAgB,aAAa;IAAqB,OAAO;IAAK,CAAA;GAC9D,oBAAC,YAAD,EAAA,UACE,oBAAC,gBAAD,EAAgB,aAAa,0BAA4B,CAAA,EAC9C,CAAA;GACZ;GACG"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/App/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastContainer } from 'react-toastify';\nimport { cn } from '../lib/utils';\n\ninterface AppProps {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  /** z-index used by the global message and notification containers. */\n  overlayZIndex?: number;\n}\n\nexport const DEFAULT_OVERLAY_Z_INDEX = 11000;\n\nconst OverlayPortal: React.FC<{ children: React.ReactNode }> = ({\n  children,\n}) => {\n  if (typeof document === 'undefined') return null;\n  return createPortal(children, document.body);\n};\n\nconst AldApp: React.FC<AppProps> = ({\n  children,\n  className,\n  style,\n  overlayZIndex = DEFAULT_OVERLAY_Z_INDEX,\n  ...restProps\n}) => {\n  return (\n    <div className={cn('ald-app', className)} style={style} {...restProps}>\n      <OverlayPortal>\n        <ToastContainer\n          containerId={'message-container'}\n          limit={1}\n          style={{ zIndex: overlayZIndex }}\n        />\n        <ToastContainer\n          containerId={'notification-container'}\n          style={{ zIndex: overlayZIndex }}\n        />\n      </OverlayPortal>\n      {children}\n    </div>\n  );\n};\n\nexport default AldApp;\n"],"mappings":";;;;;;AAaA,IAAa,0BAA0B;AAEvC,IAAM,iBAA0D,EAC9D,eACI;AACJ,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAO,aAAa,UAAU,SAAS,KAAK;;AAG9C,IAAM,UAA8B,EAClC,UACA,WACA,OACA,gBAAgB,yBAChB,GAAG,gBACC;AACJ,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,UAAU;EAAS;EAAO,GAAI;YAA5D,CACE,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;GACE,aAAa;GACb,OAAO;GACP,OAAO,EAAE,QAAQ,eAAe;GAChC,CAAA,EACF,oBAAC,gBAAD;GACE,aAAa;GACb,OAAO,EAAE,QAAQ,eAAe;GAChC,CAAA,CACY,EAAA,CAAA,EACf,SACG"}

package/dist/Avatar/component/Avatar/index.js

@@ -60,13 +60,13 @@ var Avatar = (props) => {
 		shape
 	]);
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0", type === "team" ? "tw-text-[var(--non-semantic-content-green-primary)]" : "tw-text-[var(--non-semantic-content-blue-primary)]", shape === "circle" ? "tw-rounded-full" : "tw-rounded-r-50", !icon && _.isEmpty(children) && "ald-avatar-default", className),
+		className: cn("ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0", type === "team" ? "tw-text-[var(--content-positive-primary)]" : "tw-text-[var(--content-informative-primary)]", shape === "circle" ? "tw-rounded-full" : "tw-rounded-r-50", !icon && _.isEmpty(children) && "ald-avatar-default", className),
 		style: {
 			width: sizeVal,
 			height: sizeVal,
 			fontSize: sizeVal * .4,
 			lineHeight: `${sizeVal}px`,
-			backgroundColor: !icon && _.isEmpty(children) && (!src || imgError) ? "white" : AVATAR_TYPE_TO_BG_COLOR[type] || "var(--non-semantic-background-blue-muted)",
+			backgroundColor: !icon && _.isEmpty(children) && (!src || imgError) ? "var(--background-default)" : AVATAR_TYPE_TO_BG_COLOR[type] || "var(--background-informative-muted)",
 			...style
 		},
 		onClick,

package/dist/Avatar/component/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { User } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { getFontSize } from './helper';\nimport { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR, TAvatarSize } from './type';\n\nexport interface IAvatarProps {\n  shape?: 'circle' | 'square';\n  gap?: number;\n  src?: React.ReactNode;\n  srcSet?: string;\n  draggable?: boolean;\n  icon?: React.ReactNode;\n  alt?: string;\n  crossOrigin?: '' | 'anonymous' | 'use-credentials';\n  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n  onError?: () => boolean;\n  size?: TAvatarSize;\n  type?: 'user' | 'team' | 'count';\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nconst ZERO = 0;\n\nconst Avatar = (props: IAvatarProps) => {\n  const {\n    size = 'middle',\n    children,\n    src,\n    srcSet,\n    draggable,\n    icon,\n    shape = 'circle',\n    alt,\n    crossOrigin,\n    type = 'user',\n    onClick,\n    onError,\n    className,\n    style,\n  } = props;\n\n  const [imgError, setImgError] = useState(false);\n\n  const getSize = useCallback(() => {\n    if (typeof size === 'number') return size;\n    return AVATAR_SIZE_MAP[size] || 32;\n  }, [size]);\n\n  const getChildren = useCallback(() => {\n    if (_.isEmpty(children)) return null;\n    if (typeof children === 'string') return children[ZERO].toLocaleUpperCase();\n    return children;\n  }, [children]);\n\n  const sizeVal = getSize();\n\n  const innerContent = useMemo(() => {\n    if (src && !imgError) {\n      if (typeof src === 'string') {\n        return (\n          <img\n            src={src}\n            srcSet={srcSet}\n            draggable={draggable}\n            crossOrigin={crossOrigin}\n            alt={alt}\n            className=\"tw-size-full tw-object-cover\"\n            style={shape === 'circle' ? { borderRadius: '50%' } : undefined}\n            onError={() => {\n              const result = onError?.();\n              if (result !== false) setImgError(true);\n            }}\n          />\n        );\n      }\n      return src;\n    }\n\n    if (icon) return icon;\n\n    if (!_.isEmpty(children)) {\n      return (\n        <div className=\"tw-flex tw-size-full tw-items-center tw-justify-center\">\n          <span style={getFontSize(sizeVal)}>{getChildren()}</span>\n        </div>\n      );\n    }\n\n    return <User size={sizeVal} />;\n  }, [\n    src,\n    icon,\n    children,\n    sizeVal,\n    getChildren,\n    imgError,\n    alt,\n    srcSet,\n    draggable,\n    crossOrigin,\n    onError,\n    shape,\n  ]);\n\n  return (\n    <span\n      className={cn(\n        'ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0',\n        type === 'team'\n          ? 'tw-text-[var(--non-semantic-content-green-primary)]'\n          : 'tw-text-[var(--non-semantic-content-blue-primary)]',\n        shape === 'circle' ? 'tw-rounded-full' : 'tw-rounded-r-50',\n        !icon && _.isEmpty(children) && 'ald-avatar-default',\n        className,\n      )}\n      style={{\n        width: sizeVal,\n        height: sizeVal,\n        fontSize: sizeVal * 0.4,\n        lineHeight: `${sizeVal}px`,\n        backgroundColor:\n          !icon && _.isEmpty(children) && (!src || imgError)\n            ? 'white'\n            : AVATAR_TYPE_TO_BG_COLOR[type] ||\n              'var(--non-semantic-background-blue-muted)',\n        ...style,\n      }}\n      onClick={onClick}\n    >\n      {innerContent}\n    </span>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AA0BA,IAAM,OAAO;AAEb,IAAM,UAAU,UAAwB;CACtC,MAAM,EACJ,OAAO,UACP,UACA,KACA,QACA,WACA,MACA,QAAQ,UACR,KACA,aACA,OAAO,QACP,SACA,SACA,WACA,UACE;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,UAAU,kBAAkB;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,SAAO,gBAAgB,SAAS;IAC/B,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,kBAAkB;AACpC,MAAI,EAAE,QAAQ,SAAS,CAAE,QAAO;AAChC,MAAI,OAAO,aAAa,SAAU,QAAO,SAAS,MAAM,mBAAmB;AAC3E,SAAO;IACN,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,SAAS;CAEzB,MAAM,eAAe,cAAc;AACjC,MAAI,OAAO,CAAC,UAAU;AACpB,OAAI,OAAO,QAAQ,SACjB,QACE,oBAAC,OAAD;IACO;IACG;IACG;IACE;IACR;IACL,WAAU;IACV,OAAO,UAAU,WAAW,EAAE,cAAc,OAAO,GAAG;IACtD,eAAe;AAEb,SADe,WAAW,KACX,MAAO,aAAY,KAAK;;IAEzC,CAAA;AAGN,UAAO;;AAGT,MAAI,KAAM,QAAO;AAEjB,MAAI,CAAC,EAAE,QAAQ,SAAS,CACtB,QACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,QAAD;IAAM,OAAO,YAAY,QAAQ;cAAG,aAAa;IAAQ,CAAA;GACrD,CAAA;AAIV,SAAO,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IAC7B;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,QAAD;EACE,WAAW,GACT,8FACA,SAAS,SACL,wDACA,sDACJ,UAAU,WAAW,oBAAoB,mBACzC,CAAC,QAAQ,EAAE,QAAQ,SAAS,IAAI,sBAChC,UACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,UAAU,UAAU;GACpB,YAAY,GAAG,QAAQ;GACvB,iBACE,CAAC,QAAQ,EAAE,QAAQ,SAAS,KAAK,CAAC,OAAO,YACrC,UACA,wBAAwB,SACxB;GACN,GAAG;GACJ;EACQ;YAER;EACI,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { User } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { getFontSize } from './helper';\nimport { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR, TAvatarSize } from './type';\n\nexport interface IAvatarProps {\n  shape?: 'circle' | 'square';\n  gap?: number;\n  src?: React.ReactNode;\n  srcSet?: string;\n  draggable?: boolean;\n  icon?: React.ReactNode;\n  alt?: string;\n  crossOrigin?: '' | 'anonymous' | 'use-credentials';\n  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n  onError?: () => boolean;\n  size?: TAvatarSize;\n  type?: 'user' | 'team' | 'count';\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nconst ZERO = 0;\n\nconst Avatar = (props: IAvatarProps) => {\n  const {\n    size = 'middle',\n    children,\n    src,\n    srcSet,\n    draggable,\n    icon,\n    shape = 'circle',\n    alt,\n    crossOrigin,\n    type = 'user',\n    onClick,\n    onError,\n    className,\n    style,\n  } = props;\n\n  const [imgError, setImgError] = useState(false);\n\n  const getSize = useCallback(() => {\n    if (typeof size === 'number') return size;\n    return AVATAR_SIZE_MAP[size] || 32;\n  }, [size]);\n\n  const getChildren = useCallback(() => {\n    if (_.isEmpty(children)) return null;\n    if (typeof children === 'string') return children[ZERO].toLocaleUpperCase();\n    return children;\n  }, [children]);\n\n  const sizeVal = getSize();\n\n  const innerContent = useMemo(() => {\n    if (src && !imgError) {\n      if (typeof src === 'string') {\n        return (\n          <img\n            src={src}\n            srcSet={srcSet}\n            draggable={draggable}\n            crossOrigin={crossOrigin}\n            alt={alt}\n            className=\"tw-size-full tw-object-cover\"\n            style={shape === 'circle' ? { borderRadius: '50%' } : undefined}\n            onError={() => {\n              const result = onError?.();\n              if (result !== false) setImgError(true);\n            }}\n          />\n        );\n      }\n      return src;\n    }\n\n    if (icon) return icon;\n\n    if (!_.isEmpty(children)) {\n      return (\n        <div className=\"tw-flex tw-size-full tw-items-center tw-justify-center\">\n          <span style={getFontSize(sizeVal)}>{getChildren()}</span>\n        </div>\n      );\n    }\n\n    return <User size={sizeVal} />;\n  }, [\n    src,\n    icon,\n    children,\n    sizeVal,\n    getChildren,\n    imgError,\n    alt,\n    srcSet,\n    draggable,\n    crossOrigin,\n    onError,\n    shape,\n  ]);\n\n  return (\n    <span\n      className={cn(\n        'ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0',\n        type === 'team'\n          ? 'tw-text-[var(--content-positive-primary)]'\n          : 'tw-text-[var(--content-informative-primary)]',\n        shape === 'circle' ? 'tw-rounded-full' : 'tw-rounded-r-50',\n        !icon && _.isEmpty(children) && 'ald-avatar-default',\n        className,\n      )}\n      style={{\n        width: sizeVal,\n        height: sizeVal,\n        fontSize: sizeVal * 0.4,\n        lineHeight: `${sizeVal}px`,\n        backgroundColor:\n          !icon && _.isEmpty(children) && (!src || imgError)\n            ? 'var(--background-default)'\n            : AVATAR_TYPE_TO_BG_COLOR[type] ||\n              'var(--background-informative-muted)',\n        ...style,\n      }}\n      onClick={onClick}\n    >\n      {innerContent}\n    </span>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AA0BA,IAAM,OAAO;AAEb,IAAM,UAAU,UAAwB;CACtC,MAAM,EACJ,OAAO,UACP,UACA,KACA,QACA,WACA,MACA,QAAQ,UACR,KACA,aACA,OAAO,QACP,SACA,SACA,WACA,UACE;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,UAAU,kBAAkB;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,SAAO,gBAAgB,SAAS;IAC/B,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,kBAAkB;AACpC,MAAI,EAAE,QAAQ,SAAS,CAAE,QAAO;AAChC,MAAI,OAAO,aAAa,SAAU,QAAO,SAAS,MAAM,mBAAmB;AAC3E,SAAO;IACN,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,SAAS;CAEzB,MAAM,eAAe,cAAc;AACjC,MAAI,OAAO,CAAC,UAAU;AACpB,OAAI,OAAO,QAAQ,SACjB,QACE,oBAAC,OAAD;IACO;IACG;IACG;IACE;IACR;IACL,WAAU;IACV,OAAO,UAAU,WAAW,EAAE,cAAc,OAAO,GAAG;IACtD,eAAe;AAEb,SADe,WAAW,KACX,MAAO,aAAY,KAAK;;IAEzC,CAAA;AAGN,UAAO;;AAGT,MAAI,KAAM,QAAO;AAEjB,MAAI,CAAC,EAAE,QAAQ,SAAS,CACtB,QACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,QAAD;IAAM,OAAO,YAAY,QAAQ;cAAG,aAAa;IAAQ,CAAA;GACrD,CAAA;AAIV,SAAO,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IAC7B;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,QAAD;EACE,WAAW,GACT,8FACA,SAAS,SACL,8CACA,gDACJ,UAAU,WAAW,oBAAoB,mBACzC,CAAC,QAAQ,EAAE,QAAQ,SAAS,IAAI,sBAChC,UACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,UAAU,UAAU;GACpB,YAAY,GAAG,QAAQ;GACvB,iBACE,CAAC,QAAQ,EAAE,QAAQ,SAAS,KAAK,CAAC,OAAO,YACrC,8BACA,wBAAwB,SACxB;GACN,GAAG;GACJ;EACQ;YAER;EACI,CAAA"}

package/dist/Avatar/component/Avatar/type.js

@@ -15,9 +15,9 @@ var AVATAR_SIZE_TO_FONT_SIZE = {
 	[64]: 24
 };
 var AVATAR_TYPE_TO_BG_COLOR = {
-	user: "var(--non-semantic-background-blue-muted)",
-	team: "var(--non-semantic-background-green-muted)",
-	count: "var(--non-semantic-background-grey-muted)"
+	user: "var(--background-informative-muted)",
+	team: "var(--background-positive-muted)",
+	count: "var(--background-neutral-muted)"
 };
 //#endregion
 export { AVATAR_SIZE_MAP, AVATAR_SIZE_TO_FONT_SIZE, AVATAR_TYPE_TO_BG_COLOR };

package/dist/Avatar/component/Avatar/type.js.map

@@ -1 +1 @@
-{"version":3,"file":"type.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/type.ts"],"sourcesContent":["export type TAvatarSize = 'large' | 'middle' | 'small' | number;\n\nexport interface GroupProps {\n  maxCount?: number;\n  maxStyle?: React.CSSProperties;\n  maxPopoverPlacement?: 'top' | 'bottom';\n  size?: TAvatarSize;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\nexport const AVATAR_SIZE_MAP = {\n  large: 40,\n  middle: 32,\n  small: 28,\n};\n\nexport const AVATAR_SIZE_TO_FONT_SIZE = {\n  [16]: 8,\n  [20]: 10,\n  [24]: 10,\n  [28]: 12,\n  [32]: 12,\n  [40]: 14,\n  [48]: 16,\n  [64]: 24,\n};\n\nexport const AVATAR_TYPE_TO_BG_COLOR = {\n  user: 'var(--non-semantic-background-blue-muted)',\n  team: 'var(--non-semantic-background-green-muted)',\n  count: 'var(--non-semantic-background-grey-muted)',\n};\n"],"mappings":";AAWA,IAAa,kBAAkB;CAC7B,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,2BAA2B;EACrC,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;AAED,IAAa,0BAA0B;CACrC,MAAM;CACN,MAAM;CACN,OAAO;CACR"}
+{"version":3,"file":"type.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/type.ts"],"sourcesContent":["export type TAvatarSize = 'large' | 'middle' | 'small' | number;\n\nexport interface GroupProps {\n  maxCount?: number;\n  maxStyle?: React.CSSProperties;\n  maxPopoverPlacement?: 'top' | 'bottom';\n  size?: TAvatarSize;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\nexport const AVATAR_SIZE_MAP = {\n  large: 40,\n  middle: 32,\n  small: 28,\n};\n\nexport const AVATAR_SIZE_TO_FONT_SIZE = {\n  [16]: 8,\n  [20]: 10,\n  [24]: 10,\n  [28]: 12,\n  [32]: 12,\n  [40]: 14,\n  [48]: 16,\n  [64]: 24,\n};\n\nexport const AVATAR_TYPE_TO_BG_COLOR = {\n  user: 'var(--background-informative-muted)',\n  team: 'var(--background-positive-muted)',\n  count: 'var(--background-neutral-muted)',\n};\n"],"mappings":";AAWA,IAAa,kBAAkB;CAC7B,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,2BAA2B;EACrC,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;AAED,IAAa,0BAA0B;CACrC,MAAM;CACN,MAAM;CACN,OAAO;CACR"}

package/dist/Badge/index.js

@@ -17,11 +17,11 @@ var badgeVariants = cva("ald-badge tw-inline-flex tw-cursor-default tw-items-cen
 			large: "ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5"
 		},
 		status: {
-			default: "ald-badge-default tw-bg-[var(--non-semantic-background-grey-muted)] tw-text-[var(--non-semantic-content-grey-primary)]",
-			success: "ald-badge-success tw-bg-[var(--non-semantic-background-green-muted)] tw-text-[var(--non-semantic-content-green-primary)]",
-			error: "ald-badge-error tw-bg-[var(--non-semantic-background-red-muted)] tw-text-[var(--non-semantic-content-red-primary)]",
-			info: "ald-badge-info tw-bg-[var(--non-semantic-background-blue-muted)] tw-text-[var(--non-semantic-content-blue-primary)]",
-			warning: "ald-badge-warning tw-bg-[var(--non-semantic-background-orange-muted)] tw-text-[var(--non-semantic-content-orange-primary)]"
+			default: "ald-badge-default tw-bg-[var(--background-neutral-muted)] tw-text-[var(--content-primary)]",
+			success: "ald-badge-success tw-bg-[var(--background-positive-muted)] tw-text-[var(--content-positive-primary)]",
+			error: "ald-badge-error tw-bg-[var(--background-negative-muted)] tw-text-[var(--content-negative-primary)]",
+			info: "ald-badge-info tw-bg-[var(--background-informative-muted)] tw-text-[var(--content-informative-primary)]",
+			warning: "ald-badge-warning tw-bg-[var(--background-warning-muted)] tw-text-[var(--content-warning-primary)]"
 		},
 		clickable: {
 			true: "ald-badge-clickable tw-cursor-pointer",

package/dist/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface BadgeProps {\n  /**\n   * 展示的文本内容\n   */\n  count: string | number;\n  /**\n   * 状态\n   */\n  status?: 'success' | 'error' | 'default' | 'info' | 'warning';\n  /**\n   * 大小\n   */\n  size?: 'default' | 'large';\n  className?: string;\n  style?: React.CSSProperties;\n  onClick?: React.MouseEventHandler;\n}\n\nconst STATUS_DOT_COLORS: Record<string, string> = {\n  default: 'tw-bg-[var(--content-secondary)]',\n  success: 'tw-bg-[var(--content-positive-secondary)]',\n  error: 'tw-bg-[var(--content-negative-secondary)]',\n  info: 'tw-bg-[var(--content-informative-secondary)]',\n  warning: 'tw-bg-[var(--content-warning-secondary)]',\n};\n\nconst badgeVariants = cva(\n  'ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]',\n  {\n    variants: {\n      size: {\n        default:\n          'tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-xs)] tw-text-xs tw-font-normal tw-leading-4',\n        large:\n          'ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5',\n      },\n      status: {\n        default:\n          'ald-badge-default tw-bg-[var(--non-semantic-background-grey-muted)] tw-text-[var(--non-semantic-content-grey-primary)]',\n        success:\n          'ald-badge-success tw-bg-[var(--non-semantic-background-green-muted)] tw-text-[var(--non-semantic-content-green-primary)]',\n        error:\n          'ald-badge-error tw-bg-[var(--non-semantic-background-red-muted)] tw-text-[var(--non-semantic-content-red-primary)]',\n        info: 'ald-badge-info tw-bg-[var(--non-semantic-background-blue-muted)] tw-text-[var(--non-semantic-content-blue-primary)]',\n        warning:\n          'ald-badge-warning tw-bg-[var(--non-semantic-background-orange-muted)] tw-text-[var(--non-semantic-content-orange-primary)]',\n      },\n      clickable: {\n        true: 'ald-badge-clickable tw-cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      status: 'default',\n      clickable: false,\n    },\n  },\n);\n\nexport default function Badge(props: BadgeProps) {\n  const {\n    count,\n    status = 'default',\n    size,\n    className,\n    style,\n    onClick,\n    ...rest\n  } = props;\n\n  const isDot = count === '' || count === undefined;\n\n  if (isDot) {\n    return (\n      <div\n        {...rest}\n        className={cn(\n          'ald-badge ald-badge-dot tw-flex tw-aspect-square tw-items-start tw-rounded-full',\n          STATUS_DOT_COLORS[status],\n          typeof onClick === 'function' && 'tw-cursor-pointer',\n          className,\n        )}\n        style={{ width: 8, height: 8, gap: 8, ...style }}\n        onClick={onClick}\n      />\n    );\n  }\n\n  const isNumeric =\n    typeof count === 'number' ||\n    (typeof count === 'string' && /^[+-]?\\d+$/.test(count.trim()));\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        badgeVariants({\n          size: size || 'default',\n          status,\n          clickable: typeof onClick === 'function',\n        }),\n        className,\n      )}\n      style={isNumeric ? { fontFamily: 'monospace', ...style } : style}\n      onClick={onClick}\n    >\n      {count}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAsBA,IAAM,oBAA4C;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV;AAED,IAAM,gBAAgB,IACpB,kGACA;CACE,UAAU;EACR,MAAM;GACJ,SACE;GACF,OACE;GACH;EACD,QAAQ;GACN,SACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;GACH;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACF,CACF;AAED,SAAwB,MAAM,OAAmB;CAC/C,MAAM,EACJ,OACA,SAAS,WACT,MACA,WACA,OACA,SACA,GAAG,SACD;AAIJ,KAFc,UAAU,MAAM,UAAU,OAGtC,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,mFACA,kBAAkB,SAClB,OAAO,YAAY,cAAc,qBACjC,UACD;EACD,OAAO;GAAE,OAAO;GAAG,QAAQ;GAAG,KAAK;GAAG,GAAG;GAAO;EACvC;EACT,CAAA;CAIN,MAAM,YACJ,OAAO,UAAU,YAChB,OAAO,UAAU,YAAY,aAAa,KAAK,MAAM,MAAM,CAAC;AAE/D,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,cAAc;GACZ,MAAM,QAAQ;GACd;GACA,WAAW,OAAO,YAAY;GAC/B,CAAC,EACF,UACD;EACD,OAAO,YAAY;GAAE,YAAY;GAAa,GAAG;GAAO,GAAG;EAClD;YAER;EACG,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface BadgeProps {\n  /**\n   * 展示的文本内容\n   */\n  count: string | number;\n  /**\n   * 状态\n   */\n  status?: 'success' | 'error' | 'default' | 'info' | 'warning';\n  /**\n   * 大小\n   */\n  size?: 'default' | 'large';\n  className?: string;\n  style?: React.CSSProperties;\n  onClick?: React.MouseEventHandler;\n}\n\nconst STATUS_DOT_COLORS: Record<string, string> = {\n  default: 'tw-bg-[var(--content-secondary)]',\n  success: 'tw-bg-[var(--content-positive-secondary)]',\n  error: 'tw-bg-[var(--content-negative-secondary)]',\n  info: 'tw-bg-[var(--content-informative-secondary)]',\n  warning: 'tw-bg-[var(--content-warning-secondary)]',\n};\n\nconst badgeVariants = cva(\n  'ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]',\n  {\n    variants: {\n      size: {\n        default:\n          'tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-xs)] tw-text-xs tw-font-normal tw-leading-4',\n        large:\n          'ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5',\n      },\n      status: {\n        default:\n          'ald-badge-default tw-bg-[var(--background-neutral-muted)] tw-text-[var(--content-primary)]',\n        success:\n          'ald-badge-success tw-bg-[var(--background-positive-muted)] tw-text-[var(--content-positive-primary)]',\n        error:\n          'ald-badge-error tw-bg-[var(--background-negative-muted)] tw-text-[var(--content-negative-primary)]',\n        info: 'ald-badge-info tw-bg-[var(--background-informative-muted)] tw-text-[var(--content-informative-primary)]',\n        warning:\n          'ald-badge-warning tw-bg-[var(--background-warning-muted)] tw-text-[var(--content-warning-primary)]',\n      },\n      clickable: {\n        true: 'ald-badge-clickable tw-cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      status: 'default',\n      clickable: false,\n    },\n  },\n);\n\nexport default function Badge(props: BadgeProps) {\n  const {\n    count,\n    status = 'default',\n    size,\n    className,\n    style,\n    onClick,\n    ...rest\n  } = props;\n\n  const isDot = count === '' || count === undefined;\n\n  if (isDot) {\n    return (\n      <div\n        {...rest}\n        className={cn(\n          'ald-badge ald-badge-dot tw-flex tw-aspect-square tw-items-start tw-rounded-full',\n          STATUS_DOT_COLORS[status],\n          typeof onClick === 'function' && 'tw-cursor-pointer',\n          className,\n        )}\n        style={{ width: 8, height: 8, gap: 8, ...style }}\n        onClick={onClick}\n      />\n    );\n  }\n\n  const isNumeric =\n    typeof count === 'number' ||\n    (typeof count === 'string' && /^[+-]?\\d+$/.test(count.trim()));\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        badgeVariants({\n          size: size || 'default',\n          status,\n          clickable: typeof onClick === 'function',\n        }),\n        className,\n      )}\n      style={isNumeric ? { fontFamily: 'monospace', ...style } : style}\n      onClick={onClick}\n    >\n      {count}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAsBA,IAAM,oBAA4C;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV;AAED,IAAM,gBAAgB,IACpB,kGACA;CACE,UAAU;EACR,MAAM;GACJ,SACE;GACF,OACE;GACH;EACD,QAAQ;GACN,SACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;GACH;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACF,CACF;AAED,SAAwB,MAAM,OAAmB;CAC/C,MAAM,EACJ,OACA,SAAS,WACT,MACA,WACA,OACA,SACA,GAAG,SACD;AAIJ,KAFc,UAAU,MAAM,UAAU,OAGtC,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,mFACA,kBAAkB,SAClB,OAAO,YAAY,cAAc,qBACjC,UACD;EACD,OAAO;GAAE,OAAO;GAAG,QAAQ;GAAG,KAAK;GAAG,GAAG;GAAO;EACvC;EACT,CAAA;CAIN,MAAM,YACJ,OAAO,UAAU,YAChB,OAAO,UAAU,YAAY,aAAa,KAAK,MAAM,MAAM,CAAC;AAE/D,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,cAAc;GACZ,MAAM,QAAQ;GACd;GACA,WAAW,OAAO,YAAY;GAC/B,CAAC,EACF,UACD;EACD,OAAO,YAAY;GAAE,YAAY;GAAa,GAAG;GAAO,GAAG;EAClD;YAER;EACG,CAAA"}

package/dist/Breadcrumb/index.js

@@ -25,9 +25,9 @@ var Breadcrumb = (props) => {
 		if (items) return items.map((item, index) => {
 			const isLast = index === items.length - 1;
 			return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]", isLast ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", item.className),
+				className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a:hover]:tw-text-[var(--content-brand-primary)] [&_a]:tw-text-[var(--content-brand-secondary)]", isLast ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", item.className),
 				children: item.href ? /* @__PURE__ */ jsx("a", {
-					className: "ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]",
+					className: "ald-breadcrumb-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]",
 					href: item.href,
 					onClick: item.onClick,
 					children: item.title
@@ -58,10 +58,10 @@ var Breadcrumb = (props) => {
 var BreadcrumbItem = (props) => {
 	const { className, children, href, onClick, ...rest } = props;
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]", rest["data-last"] === "true" ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", className),
+		className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a:hover]:tw-text-[var(--content-brand-primary)] [&_a]:tw-text-[var(--content-brand-secondary)]", rest["data-last"] === "true" ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", className),
 		onClick,
 		children: href ? /* @__PURE__ */ jsx("a", {
-			className: "ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]",
+			className: "ald-breadcrumb-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]",
 			href,
 			children
 		}) : children

package/dist/Breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nconst DefaultSeparator = () => (\n  <span className=\"default-separator tw-mx-1 tw-inline-flex tw-items-center tw-text-[var(--content-tertiary)]\">\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 3.5L10.5 8L6 12.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  </span>\n);\n\nexport interface BreadcrumbProps {\n  className?: string;\n  style?: React.CSSProperties;\n  separator?: React.ReactNode;\n  items?: Array<{\n    title: React.ReactNode;\n    href?: string;\n    onClick?: (e: React.MouseEvent) => void;\n    className?: string;\n  }>;\n  children?: React.ReactNode;\n}\n\nexport interface BreadcrumbItemProps {\n  className?: string;\n  children?: React.ReactNode;\n  href?: string;\n  onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {\n  __ANT_BREADCRUMB_ITEM: boolean;\n}\n\nconst Breadcrumb = (props: BreadcrumbProps) => {\n  const {\n    className,\n    style,\n    separator = <DefaultSeparator />,\n    items,\n    children,\n  } = props;\n\n  const renderItems = () => {\n    if (items) {\n      return items.map((item, index) => {\n        const isLast = index === items.length - 1;\n        return (\n          <React.Fragment key={index}>\n            <span\n              className={cn(\n                'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]',\n                isLast\n                  ? 'tw-text-[var(--content-primary)]'\n                  : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n                item.className,\n              )}\n            >\n              {item.href ? (\n                <a\n                  className=\"ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]\"\n                  href={item.href}\n                  onClick={item.onClick}\n                >\n                  {item.title}\n                </a>\n              ) : (\n                <span onClick={item.onClick}>{item.title}</span>\n              )}\n            </span>\n            {separator !== null && !isLast && (\n              <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n                {separator}\n              </span>\n            )}\n          </React.Fragment>\n        );\n      });\n    }\n\n    const childArray = React.Children.toArray(children);\n    return childArray.map((child, index) => {\n      const isLast = index === childArray.length - 1;\n      return (\n        <React.Fragment key={index}>\n          {React.isValidElement(child)\n            ? React.cloneElement(child as React.ReactElement, {\n                'data-last': isLast ? 'true' : undefined,\n              })\n            : child}\n          {separator !== null && !isLast && (\n            <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n              {separator}\n            </span>\n          )}\n        </React.Fragment>\n      );\n    });\n  };\n\n  return (\n    <nav\n      className={cn(\n        'ald-breadcrumb tw-flex tw-items-center tw-text-sm',\n        className,\n      )}\n      style={style}\n    >\n      {renderItems()}\n    </nav>\n  );\n};\n\nconst BreadcrumbItem: IBreadcrumbItemInterface = (\n  props: BreadcrumbItemProps & { 'data-last'?: string },\n) => {\n  const { className, children, href, onClick, ...rest } = props;\n  const isLast = rest['data-last'] === 'true';\n  return (\n    <span\n      className={cn(\n        'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]',\n        isLast\n          ? 'tw-text-[var(--content-primary)]'\n          : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n        className,\n      )}\n      onClick={onClick}\n    >\n      {href ? (\n        <a\n          className=\"ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]\"\n          href={href}\n        >\n          {children}\n        </a>\n      ) : (\n        children\n      )}\n    </span>\n  );\n};\n\nBreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n"],"mappings":";;;;AAGA,IAAM,yBACJ,oBAAC,QAAD;CAAM,WAAU;WACd,oBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;YAEN,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,CAAA;EACE,CAAA;CACD,CAAA;AA2BT,IAAM,cAAc,UAA2B;CAC7C,MAAM,EACJ,WACA,OACA,YAAY,oBAAC,kBAAD,EAAoB,CAAA,EAChC,OACA,aACE;CAEJ,MAAM,oBAAoB;AACxB,MAAI,MACF,QAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GACT,0JACA,SACI,qCACA,4EACJ,KAAK,UACN;cAEA,KAAK,OACJ,oBAAC,KAAD;KACE,WAAU;KACV,MAAM,KAAK;KACX,SAAS,KAAK;eAEb,KAAK;KACJ,CAAA,GAEJ,oBAAC,QAAD;KAAM,SAAS,KAAK;eAAU,KAAK;KAAa,CAAA;IAE7C,CAAA,EACN,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EA3BI,MA2BJ;IAEnB;EAGJ,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;AACnD,SAAO,WAAW,KAAK,OAAO,UAAU;GACtC,MAAM,SAAS,UAAU,WAAW,SAAS;AAC7C,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,MAAM,eAAe,MAAM,GACxB,MAAM,aAAa,OAA6B,EAC9C,aAAa,SAAS,SAAS,QAChC,CAAC,GACF,OACH,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EAXI,MAWJ;IAEnB;;AAGJ,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,UACD;EACM;YAEN,aAAa;EACV,CAAA;;AAIV,IAAM,kBACJ,UACG;CACH,MAAM,EAAE,WAAW,UAAU,MAAM,SAAS,GAAG,SAAS;AAExD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,0JAJS,KAAK,iBAAiB,SAM3B,qCACA,4EACJ,UACD;EACQ;YAER,OACC,oBAAC,KAAD;GACE,WAAU;GACJ;GAEL;GACC,CAAA,GAEJ;EAEG,CAAA;;AAIX,eAAe,wBAAwB;AAEvC,WAAW,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nconst DefaultSeparator = () => (\n  <span className=\"default-separator tw-mx-1 tw-inline-flex tw-items-center tw-text-[var(--content-tertiary)]\">\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 3.5L10.5 8L6 12.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  </span>\n);\n\nexport interface BreadcrumbProps {\n  className?: string;\n  style?: React.CSSProperties;\n  separator?: React.ReactNode;\n  items?: Array<{\n    title: React.ReactNode;\n    href?: string;\n    onClick?: (e: React.MouseEvent) => void;\n    className?: string;\n  }>;\n  children?: React.ReactNode;\n}\n\nexport interface BreadcrumbItemProps {\n  className?: string;\n  children?: React.ReactNode;\n  href?: string;\n  onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {\n  __ANT_BREADCRUMB_ITEM: boolean;\n}\n\nconst Breadcrumb = (props: BreadcrumbProps) => {\n  const {\n    className,\n    style,\n    separator = <DefaultSeparator />,\n    items,\n    children,\n  } = props;\n\n  const renderItems = () => {\n    if (items) {\n      return items.map((item, index) => {\n        const isLast = index === items.length - 1;\n        return (\n          <React.Fragment key={index}>\n            <span\n              className={cn(\n                'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a:hover]:tw-text-[var(--content-brand-primary)] [&_a]:tw-text-[var(--content-brand-secondary)]',\n                isLast\n                  ? 'tw-text-[var(--content-primary)]'\n                  : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n                item.className,\n              )}\n            >\n              {item.href ? (\n                <a\n                  className=\"ald-breadcrumb-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]\"\n                  href={item.href}\n                  onClick={item.onClick}\n                >\n                  {item.title}\n                </a>\n              ) : (\n                <span onClick={item.onClick}>{item.title}</span>\n              )}\n            </span>\n            {separator !== null && !isLast && (\n              <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n                {separator}\n              </span>\n            )}\n          </React.Fragment>\n        );\n      });\n    }\n\n    const childArray = React.Children.toArray(children);\n    return childArray.map((child, index) => {\n      const isLast = index === childArray.length - 1;\n      return (\n        <React.Fragment key={index}>\n          {React.isValidElement(child)\n            ? React.cloneElement(child as React.ReactElement, {\n                'data-last': isLast ? 'true' : undefined,\n              })\n            : child}\n          {separator !== null && !isLast && (\n            <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n              {separator}\n            </span>\n          )}\n        </React.Fragment>\n      );\n    });\n  };\n\n  return (\n    <nav\n      className={cn(\n        'ald-breadcrumb tw-flex tw-items-center tw-text-sm',\n        className,\n      )}\n      style={style}\n    >\n      {renderItems()}\n    </nav>\n  );\n};\n\nconst BreadcrumbItem: IBreadcrumbItemInterface = (\n  props: BreadcrumbItemProps & { 'data-last'?: string },\n) => {\n  const { className, children, href, onClick, ...rest } = props;\n  const isLast = rest['data-last'] === 'true';\n  return (\n    <span\n      className={cn(\n        'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a:hover]:tw-text-[var(--content-brand-primary)] [&_a]:tw-text-[var(--content-brand-secondary)]',\n        isLast\n          ? 'tw-text-[var(--content-primary)]'\n          : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n        className,\n      )}\n      onClick={onClick}\n    >\n      {href ? (\n        <a\n          className=\"ald-breadcrumb-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]\"\n          href={href}\n        >\n          {children}\n        </a>\n      ) : (\n        children\n      )}\n    </span>\n  );\n};\n\nBreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n"],"mappings":";;;;AAGA,IAAM,yBACJ,oBAAC,QAAD;CAAM,WAAU;WACd,oBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;YAEN,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,CAAA;EACE,CAAA;CACD,CAAA;AA2BT,IAAM,cAAc,UAA2B;CAC7C,MAAM,EACJ,WACA,OACA,YAAY,oBAAC,kBAAD,EAAoB,CAAA,EAChC,OACA,aACE;CAEJ,MAAM,oBAAoB;AACxB,MAAI,MACF,QAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GACT,sJACA,SACI,qCACA,4EACJ,KAAK,UACN;cAEA,KAAK,OACJ,oBAAC,KAAD;KACE,WAAU;KACV,MAAM,KAAK;KACX,SAAS,KAAK;eAEb,KAAK;KACJ,CAAA,GAEJ,oBAAC,QAAD;KAAM,SAAS,KAAK;eAAU,KAAK;KAAa,CAAA;IAE7C,CAAA,EACN,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EA3BI,MA2BJ;IAEnB;EAGJ,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;AACnD,SAAO,WAAW,KAAK,OAAO,UAAU;GACtC,MAAM,SAAS,UAAU,WAAW,SAAS;AAC7C,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,MAAM,eAAe,MAAM,GACxB,MAAM,aAAa,OAA6B,EAC9C,aAAa,SAAS,SAAS,QAChC,CAAC,GACF,OACH,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EAXI,MAWJ;IAEnB;;AAGJ,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,UACD;EACM;YAEN,aAAa;EACV,CAAA;;AAIV,IAAM,kBACJ,UACG;CACH,MAAM,EAAE,WAAW,UAAU,MAAM,SAAS,GAAG,SAAS;AAExD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,sJAJS,KAAK,iBAAiB,SAM3B,qCACA,4EACJ,UACD;EACQ;YAER,OACC,oBAAC,KAAD;GACE,WAAU;GACJ;GAEL;GACC,CAAA,GAEJ;EAEG,CAAA;;AAIX,eAAe,wBAAwB;AAEvC,WAAW,OAAO"}