From 667fd2f6846a9a86258a293e6b16dc75704915c1 Mon Sep 17 00:00:00 2001
From: NeverEllipsis <chengkang.zhu@qq.com>
Date: Wed, 20 Nov 2024 17:51:43 +0800
Subject: [PATCH 01/15] fix: Toast onClose trigger twice and fix css var

---
 packages/bui-core/src/Toast/FunctionalToast.tsx | 10 ++++++++--
 packages/bui-core/src/Toast/Toast.less          |  5 ++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/bui-core/src/Toast/FunctionalToast.tsx b/packages/bui-core/src/Toast/FunctionalToast.tsx
index fec35c47..1991adb8 100644
--- a/packages/bui-core/src/Toast/FunctionalToast.tsx
+++ b/packages/bui-core/src/Toast/FunctionalToast.tsx
@@ -9,7 +9,7 @@ import {
   ToastReturnType,
 } from './Toast.types';
 
-const toastCloses = [];
+let toastCloses = [];
 
 /**
  * 参数格式化，支持直接传文案
@@ -88,7 +88,13 @@ const functionalToast = (props: ToastProps | string) => {
       toastCloses.push(close);
 
       if (duration !== 0 && typeof duration === 'number') {
-        timer = setTimeout(close, duration);
+        timer = setTimeout(() => {
+          close();
+          // 不允许共存的场景下，当前Toast关闭后，应清空toastCloses
+          if (!allowMultiple) {
+            toastCloses = [];
+          }
+        }, duration);
       }
 
       return () => {
diff --git a/packages/bui-core/src/Toast/Toast.less b/packages/bui-core/src/Toast/Toast.less
index 277dc5c8..cc3f637e 100644
--- a/packages/bui-core/src/Toast/Toast.less
+++ b/packages/bui-core/src/Toast/Toast.less
@@ -8,7 +8,10 @@
   --position-top: var(--bui-toast-position-top, 15%);
   --position-bottom: var(--bui-toast-position-bottom, 85%);
   --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
-  --border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
+  --border-radius: var(
+    --bui-toast-border-radius,
+    var(--bui-shape-radius-default)
+  );
   --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
   --icon-font-size: var(--bui-toast-icon-font-size, 30px);
 

From 11b39011e2fb5276d3d258fc50a3dced88c7ee17 Mon Sep 17 00:00:00 2001
From: NeverEllipsis <chengkang.zhu@qq.com>
Date: Wed, 20 Nov 2024 19:27:08 +0800
Subject: [PATCH 02/15] fix: input placeholder style

---
 packages/bui-core/src/Input/Input.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/bui-core/src/Input/Input.less b/packages/bui-core/src/Input/Input.less
index babaadb9..dc9b7283 100644
--- a/packages/bui-core/src/Input/Input.less
+++ b/packages/bui-core/src/Input/Input.less
@@ -50,6 +50,7 @@
     outline: none;
     background-color: var(--background-color);
     font-size: var(--bui-text-size-2);
+    .ellipsis();
 
     &::placeholder {
       color: var(--bui-color-fg-subtle);

From bf00441c4b5278b7967c4f5ceb8bef07097587c4 Mon Sep 17 00:00:00 2001
From: NeverEllipsis <chengkang.zhu@qq.com>
Date: Wed, 20 Nov 2024 21:29:43 +0800
Subject: [PATCH 03/15] fix: Toast style

---
 packages/bui-core/src/Toast/Toast.less     |  7 +++---
 packages/bui-core/src/Toast/index.en-US.md | 27 +++++++++++-----------
 packages/bui-core/src/Toast/index.zh-CN.md | 25 ++++++++++----------
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/bui-core/src/Toast/Toast.less b/packages/bui-core/src/Toast/Toast.less
index cc3f637e..c0cb93ae 100644
--- a/packages/bui-core/src/Toast/Toast.less
+++ b/packages/bui-core/src/Toast/Toast.less
@@ -3,6 +3,7 @@
 .bui-toast {
   --min-width: var(--bui-toast-min-width, 86px);
   --max-width: var(--bui-toast-max-width, 80%);
+  --text-align: var(--bui-toast-text-align, center);
   --flex-direction: var(--bui-toast-flex-direction, column);
   --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
   --position-top: var(--bui-toast-position-top, 15%);
@@ -12,7 +13,7 @@
     --bui-toast-border-radius,
     var(--bui-shape-radius-default)
   );
-  --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
+  --icon-margin: var(--bui-toast-icon-margin, 0 0 8px);
   --icon-font-size: var(--bui-toast-icon-font-size, 30px);
 
   &.bui-toast-allow-click {
@@ -34,7 +35,7 @@
   word-break: break-all;
   white-space: pre-wrap;
   background-color: var(--background-color);
-  text-align: center;
+  text-align: var(--text-align);
   font-family: var(--bui-font-family);
 
   &-center {
@@ -58,7 +59,7 @@
     align-items: center;
 
     .bui-svg-icon {
-      margin: 0 0 var(--icon-margin);
+      margin: var(--icon-margin);
       font-size: var(--icon-font-size);
     }
   }
diff --git a/packages/bui-core/src/Toast/index.en-US.md b/packages/bui-core/src/Toast/index.en-US.md
index 0df00d43..ff3b924e 100644
--- a/packages/bui-core/src/Toast/index.en-US.md
+++ b/packages/bui-core/src/Toast/index.en-US.md
@@ -589,16 +589,17 @@ export default () => {
 
 ### Style variables
 
-| attribute          | explain                                                  | Default value              | global variable                |
-| ------------------ | -------------------------------------------------------- | -------------------------- | ------------------------------ |
-| --min-width        | Minimum width                                            | 86px                       | --bui-toast-min-width          |
-| --max-width        | Maximum width                                            | 80%                        | --bui-toast-max-width          |
-| --flex-direction   | Icon and copywriting arrangement direction               | column                     | --bui-toast-flex-direction     |
-| --padding          | padding                                                  | --bui-spacing-xl           | --bui-toast-padding            |
-| --position-top     | When displaying at the top, the distance from the top    | 15%                        | --bui-toast-position-top       |
-| --position-bottom  | When displaying at the bottom, the distance from the top | 85%                        | --bui-toast-position-bottom    |
-| --background-color | background color                                         | rgba(0, 0, 0, 0.8)         | --bui-toast-bg-color           |
-| --border-radius    | fillet                                                   | --bui-shape-radius-default | --bui-toast-border-radius      |
-| --icon-margin      | Icon margin                                              | 8px                        | --bui-toast-icon-margin-bottom |
-| --icon-font-size   | Icon font size                                           | 30px                       | --bui-toast-icon-font-size     |
-| --text-align       | Text position                                            | center                     | -                              |
+| attribute          | explain                                                  | Default value              | global variable             |
+| ------------------ | -------------------------------------------------------- | -------------------------- | --------------------------- |
+| --min-width        | Minimum width                                            | 86px                       | --bui-toast-min-width       |
+| --max-width        | Maximum width                                            | 80%                        | --bui-toast-max-width       |
+| --text-align       | text arrangement                                         | center                     | --bui-toast-text-align      |
+| --flex-direction   | Icon and copywriting arrangement direction               | column                     | --bui-toast-flex-direction  |
+| --padding          | padding                                                  | --bui-spacing-xl           | --bui-toast-padding         |
+| --position-top     | When displaying at the top, the distance from the top    | 15%                        | --bui-toast-position-top    |
+| --position-bottom  | When displaying at the bottom, the distance from the top | 85%                        | --bui-toast-position-bottom |
+| --background-color | background color                                         | rgba(0, 0, 0, 0.8)         | --bui-toast-bg-color        |
+| --border-radius    | fillet                                                   | --bui-shape-radius-default | --bui-toast-border-radius   |
+| --icon-margin      | Icon margin                                              | 0 0 8px                    | --bui-toast-icon-margin     |
+| --icon-font-size   | Icon font size                                           | 30px                       | --bui-toast-icon-font-size  |
+| --text-align       | Text position                                            | center                     | -                           |
diff --git a/packages/bui-core/src/Toast/index.zh-CN.md b/packages/bui-core/src/Toast/index.zh-CN.md
index 29809830..dfcfeec0 100644
--- a/packages/bui-core/src/Toast/index.zh-CN.md
+++ b/packages/bui-core/src/Toast/index.zh-CN.md
@@ -589,15 +589,16 @@ export default () => {
 
 ### 样式变量
 
-| 属性               | 说明                     | 默认值                     | 全局变量                       |
-| ------------------ | ------------------------ | -------------------------- | ------------------------------ |
-| --min-width        | 最小宽度                 | 86px                       | --bui-toast-min-width          |
-| --max-width        | 最大宽度                 | 80%                        | --bui-toast-max-width          |
-| --flex-direction   | icon跟文案排列方向       | column                     | --bui-toast-flex-direction     |
-| --padding          | 内边距                   | --bui-spacing-xl           | --bui-toast-padding            |
-| --position-top     | 顶部展示时，距离顶部距离 | 15%                        | --bui-toast-position-top       |
-| --position-bottom  | 底部展示时，距离顶部距离 | 85%                        | --bui-toast-position-bottom    |
-| --background-color | 背景颜色                 | rgba(0, 0, 0, 0.8)         | --bui-toast-bg-color           |
-| --border-radius    | 圆角                     | --bui-shape-radius-default | --bui-toast-border-radius      |
-| --icon-margin      | 图标边距                 | 8px                        | --bui-toast-icon-margin-bottom |
-| --icon-font-size   | 图标字体大小             | 30px                       | --bui-toast-icon-font-size     |
+| 属性               | 说明                     | 默认值                     | 全局变量                    |
+| ------------------ | ------------------------ | -------------------------- | --------------------------- |
+| --min-width        | 最小宽度                 | 86px                       | --bui-toast-min-width       |
+| --max-width        | 最大宽度                 | 80%                        | --bui-toast-max-width       |
+| --text-align       | 文字排列方式             | center                     | --bui-toast-text-align      |
+| --flex-direction   | icon跟文案排列方向       | column                     | --bui-toast-flex-direction  |
+| --padding          | 内边距                   | --bui-spacing-xl           | --bui-toast-padding         |
+| --position-top     | 顶部展示时，距离顶部距离 | 15%                        | --bui-toast-position-top    |
+| --position-bottom  | 底部展示时，距离顶部距离 | 85%                        | --bui-toast-position-bottom |
+| --background-color | 背景颜色                 | rgba(0, 0, 0, 0.8)         | --bui-toast-bg-color        |
+| --border-radius    | 圆角                     | --bui-shape-radius-default | --bui-toast-border-radius   |
+| --icon-margin      | 图标边距                 | 0 0 8px                    | --bui-toast-icon-margin     |
+| --icon-font-size   | 图标字体大小             | 30px                       | --bui-toast-icon-font-size  |

From a1b089cf2cacd4ef18a104f5566cbfd5cc879a84 Mon Sep 17 00:00:00 2001
From: NeverEllipsis <chengkang.zhu@qq.com>
Date: Thu, 21 Nov 2024 11:42:23 +0800
Subject: [PATCH 04/15] test: generate test reports on terminal

---
 jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jest.config.js b/jest.config.js
index 66070ad6..c9024d3e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,9 +16,9 @@ module.exports = {
       },
     ],
   },
+  collectCoverage: true,
   coveragePathIgnorePatterns: ['<rootDir>/scripts/', 'tests/'],
   coverageDirectory: './.ci/',
-  coverageReporters: ['json', 'html'],
   moduleNameMapper: {
     '^@bifrostui/(styles.*)$': '<rootDir>/tests/mocks/styleMock.js',
     '^@bifrostui/react$': '<rootDir>/packages/bui-core/src',

From 9daf80a5fdf99cbc6ee051117a56afb77a29afe8 Mon Sep 17 00:00:00 2001
From: xiexiejie <zhangjie891124@126.com>
Date: Thu, 21 Nov 2024 15:03:42 +0800
Subject: [PATCH 05/15] feat: Tooltip and Popover Component Upgrade and
 Optimization

---
 packages/bui-core/src/Popover/Popover.tsx     | 40 ++++----
 .../bui-core/src/Popover/Popover.types.ts     |  5 -
 .../src/Popover/__tests__/Popover.test.tsx    |  1 -
 packages/bui-core/src/Popover/index.en-US.md  | 91 +++++++++++++++----
 packages/bui-core/src/Popover/index.zh-CN.md  | 91 +++++++++++++++----
 packages/bui-core/src/Popover/md.css          |  3 +
 packages/bui-core/src/Tooltip/Tooltip.tsx     | 40 ++++----
 .../bui-core/src/Tooltip/Tooltip.types.ts     |  5 -
 .../src/Tooltip/__tests__/Tooltip.test.tsx    |  2 -
 packages/bui-core/src/Tooltip/index.en-US.md  |  1 -
 packages/bui-core/src/Tooltip/index.zh-CN.md  |  1 -
 11 files changed, 195 insertions(+), 85 deletions(-)
 create mode 100644 packages/bui-core/src/Popover/md.css

diff --git a/packages/bui-core/src/Popover/Popover.tsx b/packages/bui-core/src/Popover/Popover.tsx
index 1549eea1..c18f79be 100644
--- a/packages/bui-core/src/Popover/Popover.tsx
+++ b/packages/bui-core/src/Popover/Popover.tsx
@@ -4,6 +4,7 @@ import {
   getStylesAndLocation,
   triggerEventTransform,
   useUniqueId,
+  throttle,
 } from '@bifrostui/utils';
 import Portal from '../Portal';
 import './Popover.less';
@@ -24,7 +25,6 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
     onOpenChange,
     open,
     hideArrow,
-    PortalProps,
     ...others
   } = props;
 
@@ -81,16 +81,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
     hidePopover(event);
   };
 
-  useEffect(() => {
-    if (controlByUser) return;
-    document.addEventListener('click', clickEventHandler);
-    // eslint-disable-next-line
-    return () => {
-      document.removeEventListener('click', clickEventHandler);
-    };
-  }, []);
-
-  const onRootElementMouted = () => {
+  const onRootElementMouted = throttle(() => {
     const result = getStylesAndLocation({
       childrenRef,
       arrowDirection,
@@ -107,8 +98,29 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
       setArrowLocation(newArrowLocation);
     }
     setTooltyles(styles);
+  }, 100);
+
+  const bindEvent = () => {
+    if (!controlByUser) {
+      document.addEventListener('click', clickEventHandler);
+    }
+    window.addEventListener('resize', onRootElementMouted);
   };
 
+  const unbindEvent = () => {
+    if (!controlByUser) {
+      document.removeEventListener('click', clickEventHandler);
+    }
+    window.removeEventListener('resize', onRootElementMouted);
+  };
+
+  useEffect(() => {
+    bindEvent();
+    return () => {
+      unbindEvent();
+    };
+  }, []);
+
   if (!title && !content) return null;
 
   let triggerEventOption;
@@ -128,11 +140,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
   return (
     <>
       {open || openStatus ? (
-        <Portal
-          onRootElementMouted={onRootElementMouted}
-          {...PortalProps}
-          ref={ref}
-        >
+        <Portal onRootElementMouted={onRootElementMouted} ref={ref}>
           <div
             className={clsx(prefixCls, className, `popover-${arrowDirection}`, {
               'bui-popover-arrow-hide': hideArrow,
diff --git a/packages/bui-core/src/Popover/Popover.types.ts b/packages/bui-core/src/Popover/Popover.types.ts
index 947a6831..4c6f0a7e 100644
--- a/packages/bui-core/src/Popover/Popover.types.ts
+++ b/packages/bui-core/src/Popover/Popover.types.ts
@@ -1,6 +1,5 @@
 import React from 'react';
 import { OverrideProps } from '@bifrostui/types';
-import { PortalCoreProps } from '../Portal/Portal.types';
 
 type triggerType = 'click' | 'hover';
 
@@ -57,10 +56,6 @@ export type PopoverProps<
        * @default 'click'
        */
       trigger?: triggerType | triggerType[];
-      /**
-       * Portal组件的属性
-       */
-      PortalProps?: PortalCoreProps;
       /**
        * 点击事件回调方法
        * - event 触发事件
diff --git a/packages/bui-core/src/Popover/__tests__/Popover.test.tsx b/packages/bui-core/src/Popover/__tests__/Popover.test.tsx
index ac03f746..cfbb0859 100644
--- a/packages/bui-core/src/Popover/__tests__/Popover.test.tsx
+++ b/packages/bui-core/src/Popover/__tests__/Popover.test.tsx
@@ -25,7 +25,6 @@ describe('Popover', () => {
     displayName: 'BuiPopover',
     className: rootClass,
     skip: [
-      'PortalProps',
       'component-has-root-ref',
       'component-handles-classNames',
       'component-has-default-className',
diff --git a/packages/bui-core/src/Popover/index.en-US.md b/packages/bui-core/src/Popover/index.en-US.md
index 46ed688d..7167ae7f 100644
--- a/packages/bui-core/src/Popover/index.en-US.md
+++ b/packages/bui-core/src/Popover/index.en-US.md
@@ -16,10 +16,14 @@ Clicking with the mouse will display a prompt, and clicking again will disappear
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   return (
-    <Popover title="This is a title" content="This is a content">
+    <Popover
+      title={<div className="pop-style">This is a title</div>}
+      content={<div className="pop-style">This is a content</div>}
+    >
       <span>click显示</span>
     </Popover>
   );
@@ -37,7 +41,10 @@ import React, { useState } from 'react';
 export default () => {
   const [open, setOpen] = useState(true);
   return (
-    <Popover title="This is a popover" open={open}>
+    <Popover
+      title={<div className="pop-style">This is a popover</div>}
+      open={open}
+    >
       <span onClick={() => setOpen(!open)}>open控制显隐</span>
     </Popover>
   );
@@ -51,10 +58,14 @@ You can set defaultOpen to true to display bubble floating layers by default
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   return (
-    <Popover title="This is a popover" defaultOpen>
+    <Popover
+      title={<div className="pop-style">This is a popover</div>}
+      defaultOpen
+    >
       <span>defaultOpen默认显示</span>
     </Popover>
   );
@@ -68,10 +79,15 @@ You can set 'hideArrow' to true to hide arrows
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   return (
-    <Popover title="This is a popover" defaultOpen hideArrow>
+    <Popover
+      title={<div className="pop-style">This is a popover</div>}
+      defaultOpen
+      hideArrow
+    >
       <span>defaultOpen默认显示</span>
     </Popover>
   );
@@ -85,6 +101,7 @@ Placement: Set the position of the bubble float layer. The optional values are:
 ```tsx
 import { Popover, Button } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   const packageButton = (inner) => {
@@ -105,13 +122,25 @@ export default () => {
           justifyContent: 'space-between',
         }}
       >
-        <Popover trigger="hover" title="This is a popover" placement="topLeft">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="topLeft"
+        >
           {packageButton(<span>topLeft</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="top">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="top"
+        >
           {packageButton(<span>top</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="topRight">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="topRight"
+        >
           {packageButton(<span>topRight</span>)}
         </Popover>
       </div>
@@ -123,15 +152,23 @@ export default () => {
           flexDirection: 'column',
         }}
       >
-        <Popover trigger="hover" title="This is a popover" placement="leftTop">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="leftTop"
+        >
           {packageButton(<span>leftTop</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="left">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="left"
+        >
           {packageButton(<span>left</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title="This is a popover"
+          title={<div className="pop-style">This is a popover</div>}
           placement="leftBottom"
         >
           {packageButton(<span>leftBottom</span>)}
@@ -145,15 +182,23 @@ export default () => {
           flexDirection: 'column',
         }}
       >
-        <Popover trigger="hover" title="This is a popover" placement="rightTop">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="rightTop"
+        >
           {packageButton(<span>rightTop</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="right">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="right"
+        >
           {packageButton(<span>right</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title="This is a popover"
+          title={<div className="pop-style">This is a popover</div>}
           placement="rightBottom"
         >
           {packageButton(<span>rightBottom</span>)}
@@ -170,17 +215,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title="This is a popover"
+          title={<div className="pop-style">This is a popover</div>}
           placement="bottomLeft"
         >
           {packageButton(<span>bottomLeft</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="bottom">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="bottom"
+        >
           {packageButton(<span>bottom</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title="This is a popover"
+          title={<div className="pop-style">This is a popover</div>}
           placement="bottomRight"
         >
           {packageButton(<span>bottomRight</span>)}
@@ -198,10 +247,14 @@ The triggering method for displaying bubbles is "click" or "hover", with the def
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   return (
-    <Popover title="This is a popover" trigger="hover">
+    <Popover
+      title={<div className="pop-style">This is a popover</div>}
+      trigger="hover"
+    >
       <span>hover触发方式</span>
     </Popover>
   );
@@ -213,6 +266,7 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   const onOpenChange = (event, data) => {
@@ -220,7 +274,7 @@ export default () => {
   };
   return (
     <Popover
-      title="This is a popover"
+      title={<div className="pop-style">This is a popover</div>}
       trigger="hover"
       onOpenChange={onOpenChange}
     >
@@ -241,7 +295,6 @@ export default () => {
 | hideArrow    | Display arrows or not                                                                  | boolean                                                                                                                                                                          | false         |
 | placement    | Bubble box position                                                                    | String, the enumeration value is `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | 'top'         |
 | trigger      | Trigger behavior                                                                       | string \|String [], the enumeration value is' click '\|'hover'                                                                                                                   | 'click'       |
-| PortalProps  | Properties of internal Portal components                                               | PortalCoreProps                                                                                                                                                                  | -             |
 | onOpenChange | The callback method for bubble floating layer manifestation and concealment            | (e: React.MouseEvent<HTMLDivElement\>,data: {open: boolean}) => void                                                                                                             | -             |
 
 ### Style variables
diff --git a/packages/bui-core/src/Popover/index.zh-CN.md b/packages/bui-core/src/Popover/index.zh-CN.md
index cfd06184..b3ca0a84 100644
--- a/packages/bui-core/src/Popover/index.zh-CN.md
+++ b/packages/bui-core/src/Popover/index.zh-CN.md
@@ -16,10 +16,14 @@ click或hover触发弹出气泡式的卡片浮层，可以自定义事件
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   return (
-    <Popover title="This is a title" content="This is a content">
+    <Popover
+      title={<div className="pop-style">This is a title</div>}
+      content={<div className="pop-style">This is a content</div>}
+    >
       <span>click显示</span>
     </Popover>
   );
@@ -37,7 +41,10 @@ import React, { useState } from 'react';
 export default () => {
   const [open, setOpen] = useState(true);
   return (
-    <Popover title="This is a popover" open={open}>
+    <Popover
+      title={<div className="pop-style">This is a popover</div>}
+      open={open}
+    >
       <span onClick={() => setOpen(!open)}>open控制显隐</span>
     </Popover>
   );
@@ -51,10 +58,14 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   return (
-    <Popover title="This is a popover" defaultOpen>
+    <Popover
+      title={<div className="pop-style">This is a popover</div>}
+      defaultOpen
+    >
       <span>defaultOpen默认显示</span>
     </Popover>
   );
@@ -68,10 +79,15 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   return (
-    <Popover title="This is a popover" defaultOpen hideArrow>
+    <Popover
+      title={<div className="pop-style">This is a popover</div>}
+      defaultOpen
+      hideArrow
+    >
       <span>defaultOpen默认显示</span>
     </Popover>
   );
@@ -85,6 +101,7 @@ export default () => {
 ```tsx
 import { Popover, Button } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   const packageButton = (inner) => {
@@ -105,13 +122,25 @@ export default () => {
           justifyContent: 'space-between',
         }}
       >
-        <Popover trigger="hover" title="This is a popover" placement="topLeft">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="topLeft"
+        >
           {packageButton(<span>topLeft</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="top">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="top"
+        >
           {packageButton(<span>top</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="topRight">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="topRight"
+        >
           {packageButton(<span>topRight</span>)}
         </Popover>
       </div>
@@ -123,15 +152,23 @@ export default () => {
           flexDirection: 'column',
         }}
       >
-        <Popover trigger="hover" title="This is a popover" placement="leftTop">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="leftTop"
+        >
           {packageButton(<span>leftTop</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="left">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="left"
+        >
           {packageButton(<span>left</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title="This is a popover"
+          title={<div className="pop-style">This is a popover</div>}
           placement="leftBottom"
         >
           {packageButton(<span>leftBottom</span>)}
@@ -145,15 +182,23 @@ export default () => {
           flexDirection: 'column',
         }}
       >
-        <Popover trigger="hover" title="This is a popover" placement="rightTop">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="rightTop"
+        >
           {packageButton(<span>rightTop</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="right">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="right"
+        >
           {packageButton(<span>right</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title="This is a popover"
+          title={<div className="pop-style">This is a popover</div>}
           placement="rightBottom"
         >
           {packageButton(<span>rightBottom</span>)}
@@ -170,17 +215,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title="This is a popover"
+          title={<div className="pop-style">This is a popover</div>}
           placement="bottomLeft"
         >
           {packageButton(<span>bottomLeft</span>)}
         </Popover>
-        <Popover trigger="hover" title="This is a popover" placement="bottom">
+        <Popover
+          trigger="hover"
+          title={<div className="pop-style">This is a popover</div>}
+          placement="bottom"
+        >
           {packageButton(<span>bottom</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title="This is a popover"
+          title={<div className="pop-style">This is a popover</div>}
           placement="bottomRight"
         >
           {packageButton(<span>bottomRight</span>)}
@@ -198,10 +247,14 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   return (
-    <Popover title="This is a popover" trigger="hover">
+    <Popover
+      title={<div className="pop-style">This is a popover</div>}
+      trigger="hover"
+    >
       <span>hover触发方式</span>
     </Popover>
   );
@@ -213,6 +266,7 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
+import './md.css';
 
 export default () => {
   const onOpenChange = (event, data) => {
@@ -220,7 +274,7 @@ export default () => {
   };
   return (
     <Popover
-      title="This is a popover"
+      title={<div className="pop-style">This is a popover</div>}
       trigger="hover"
       onOpenChange={onOpenChange}
     >
@@ -241,7 +295,6 @@ export default () => {
 | hideArrow    | 是否展示箭头             | boolean                                                                                                                                                          | false   |
 | placement    | 气泡框位置               | string，枚举值是 `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | 'top'   |
 | trigger      | 触发行为                 | string \| string[]，枚举值是 'click' \| 'hover'                                                                                                                  | 'click' |
-| PortalProps  | 内部Portal组件的属性     | PortalCoreProps                                                                                                                                                  | -       |
 | onOpenChange | 气泡浮层显隐的回调方法   | (e: React.MouseEvent<HTMLDivElement\>,data: {open: boolean}) => void                                                                                             | -       |
 
 ### 样式变量
diff --git a/packages/bui-core/src/Popover/md.css b/packages/bui-core/src/Popover/md.css
new file mode 100644
index 00000000..3d74da22
--- /dev/null
+++ b/packages/bui-core/src/Popover/md.css
@@ -0,0 +1,3 @@
+.pop-style {
+  padding: 2px 8px;
+}
diff --git a/packages/bui-core/src/Tooltip/Tooltip.tsx b/packages/bui-core/src/Tooltip/Tooltip.tsx
index becf58a4..cad12bdb 100644
--- a/packages/bui-core/src/Tooltip/Tooltip.tsx
+++ b/packages/bui-core/src/Tooltip/Tooltip.tsx
@@ -4,6 +4,7 @@ import {
   getStylesAndLocation,
   triggerEventTransform,
   useUniqueId,
+  throttle,
 } from '@bifrostui/utils';
 import Portal from '../Portal';
 import { TooltipProps } from './Tooltip.types';
@@ -22,7 +23,6 @@ const Tooltip = React.forwardRef<HTMLElement, TooltipProps>((props, ref) => {
     trigger = 'click',
     onOpenChange,
     open,
-    PortalProps,
     ...others
   } = props;
 
@@ -79,16 +79,7 @@ const Tooltip = React.forwardRef<HTMLElement, TooltipProps>((props, ref) => {
     hideTooltip(event);
   };
 
-  useEffect(() => {
-    if (controlByUser) return;
-    document.addEventListener('click', clickEventHandler);
-    // eslint-disable-next-line
-    return () => {
-      document.removeEventListener('click', clickEventHandler);
-    };
-  }, []);
-
-  const onRootElementMouted = () => {
+  const onRootElementMouted = throttle(() => {
     const result = getStylesAndLocation({
       childrenRef,
       arrowDirection,
@@ -105,8 +96,29 @@ const Tooltip = React.forwardRef<HTMLElement, TooltipProps>((props, ref) => {
       setArrowLocation(newArrowLocation);
     }
     setTooltyles(styles);
+  }, 100);
+
+  const bindEvent = () => {
+    if (!controlByUser) {
+      document.addEventListener('click', clickEventHandler);
+    }
+    window.addEventListener('resize', onRootElementMouted);
   };
 
+  const unbindEvent = () => {
+    if (!controlByUser) {
+      document.removeEventListener('click', clickEventHandler);
+    }
+    window.removeEventListener('resize', onRootElementMouted);
+  };
+
+  useEffect(() => {
+    bindEvent();
+    return () => {
+      unbindEvent();
+    };
+  }, []);
+
   let triggerEventOption;
   if (!controlByUser) {
     triggerEventOption = triggerEventTransform({
@@ -125,11 +137,7 @@ const Tooltip = React.forwardRef<HTMLElement, TooltipProps>((props, ref) => {
   return (
     <>
       {(open || openStatus) && title ? (
-        <Portal
-          onRootElementMouted={onRootElementMouted}
-          {...PortalProps}
-          ref={ref}
-        >
+        <Portal onRootElementMouted={onRootElementMouted} ref={ref}>
           <div
             className={clsx(prefixCls, className, `tooltip-${arrowDirection}`)}
             style={{ ...style, ...tooltyles }}
diff --git a/packages/bui-core/src/Tooltip/Tooltip.types.ts b/packages/bui-core/src/Tooltip/Tooltip.types.ts
index de99dd1e..1a924e2c 100644
--- a/packages/bui-core/src/Tooltip/Tooltip.types.ts
+++ b/packages/bui-core/src/Tooltip/Tooltip.types.ts
@@ -1,6 +1,5 @@
 import React from 'react';
 import { OverrideProps } from '@bifrostui/types';
-import { PortalCoreProps } from '../Portal/Portal.types';
 
 type triggerType = 'click' | 'hover';
 
@@ -48,10 +47,6 @@ export type TooltipProps<
        * @default 'click'
        */
       trigger?: triggerType | triggerType[];
-      /**
-       * Portal组件的属性
-       */
-      PortalProps?: PortalCoreProps;
       /**
        * 点击事件回调方法
        * - event 触发事件
diff --git a/packages/bui-core/src/Tooltip/__tests__/Tooltip.test.tsx b/packages/bui-core/src/Tooltip/__tests__/Tooltip.test.tsx
index 4206e2a6..6480d5bb 100644
--- a/packages/bui-core/src/Tooltip/__tests__/Tooltip.test.tsx
+++ b/packages/bui-core/src/Tooltip/__tests__/Tooltip.test.tsx
@@ -24,7 +24,6 @@ describe('Tooltip', () => {
     displayName: 'BuiTooltip',
     className: rootClass,
     skip: [
-      'PortalProps',
       'component-has-root-ref',
       'component-handles-classNames',
       'component-has-default-className',
@@ -122,7 +121,6 @@ describe('Tooltip', () => {
     displayName: 'BuiTooltip',
     className: rootClass,
     skip: [
-      'PortalProps',
       'component-has-root-ref',
       'component-handles-classNames',
       'component-has-default-className',
diff --git a/packages/bui-core/src/Tooltip/index.en-US.md b/packages/bui-core/src/Tooltip/index.en-US.md
index 5453b937..c7778344 100644
--- a/packages/bui-core/src/Tooltip/index.en-US.md
+++ b/packages/bui-core/src/Tooltip/index.en-US.md
@@ -222,7 +222,6 @@ export default () => {
 | open         | Used for manually controlling the appearance and concealment of bubble floating layers | boolean                                                                                                                                                                          | -             |
 | placement    | Bubble box position                                                                    | String, the enumeration value is `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | 'top'         |
 | trigger      | Trigger behavior                                                                       | string \|String [], the enumeration value is' click '\|'hover'                                                                                                                   | 'click'       |
-| PortalProps  | Properties of internal Portal components                                               | PortalCoreProps                                                                                                                                                                  | -             |
 | onOpenChange | The callback method for bubble floating layer manifestation and concealment            | (e: React.MouseEvent<HTMLDivElement\>,data: {open: boolean}) => void                                                                                                             | -             |
 
 ### Style variables
diff --git a/packages/bui-core/src/Tooltip/index.zh-CN.md b/packages/bui-core/src/Tooltip/index.zh-CN.md
index 7d92d10b..9af87b19 100644
--- a/packages/bui-core/src/Tooltip/index.zh-CN.md
+++ b/packages/bui-core/src/Tooltip/index.zh-CN.md
@@ -222,7 +222,6 @@ export default () => {
 | open         | 用于手动控制气泡浮层显隐 | boolean                                                                                                                                                          | -       |
 | placement    | 气泡框位置               | string，枚举值是 `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | 'top'   |
 | trigger      | 触发行为                 | string \| string[]，枚举值是 'click' \| 'hover'                                                                                                                  | 'click' |
-| PortalProps  | 内部Portal组件的属性     | PortalCoreProps                                                                                                                                                  | -       |
 | onOpenChange | 气泡浮层显隐的回调方法   | (e: React.MouseEvent<HTMLDivElement\>,data: {open: boolean}) => void                                                                                             | -       |
 
 ### 样式变量

From 03e4d03c80baea46dd172f4814fd97495561ec83 Mon Sep 17 00:00:00 2001
From: NeverEllipsis <chengkang.zhu@qq.com>
Date: Mon, 25 Nov 2024 10:08:20 +0800
Subject: [PATCH 06/15] fix: Slider css var

---
 packages/bui-core/src/Slider/Slider.less | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/bui-core/src/Slider/Slider.less b/packages/bui-core/src/Slider/Slider.less
index d98ea432..cef2f562 100644
--- a/packages/bui-core/src/Slider/Slider.less
+++ b/packages/bui-core/src/Slider/Slider.less
@@ -1,8 +1,11 @@
 @import '@bifrostui/styles/mixins/index.less';
 
 .bui-slider {
-  --line-color: var(--bui-slider-line-color, --bui-color-primary);
-  --line-bg-color: var(--bui-slider-line-bg-color, --bui-color-border-default);
+  --line-color: var(--bui-slider-line-color, var(--bui-color-primary));
+  --line-bg-color: var(
+    --bui-slider-line-bg-color,
+    var(--bui-color-border-default)
+  );
   --width: var(--bui-slider-width, 100%);
   --height: var(--bui-slider-height, 2px);
   --padding: var(--bui-slider-padding, 19px 0);
@@ -17,9 +20,9 @@
   --tooltip-height: var(--bui-slider-tooltip-height, 24px);
   --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
   --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
-  --tooltip-font-size: var(--bui-tooltip-font-size, --bui-text-size-3);
-  --tooltip-color: var(--bui-tooltip-color, --bui-color-white);
-  --tooltip-bg-color: var(--bui-tooltip-bg-color, --line-color);
+  --tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
+  --tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
+  --tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));
 
   position: relative;
   width: var(--width);
@@ -47,7 +50,7 @@
     top: 50%;
     left: 0;
     width: 100%;
-    height: var(---height);
+    height: var(--height);
     transform: translateY(-50%);
     background-color: var(--line-bg-color);
   }

From 965eba11b2a92b561260b0cb46002353d04f921f Mon Sep 17 00:00:00 2001
From: whyrove <whyrove@163.com>
Date: Mon, 25 Nov 2024 10:24:55 +0800
Subject: [PATCH 07/15] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0Collapse?=
 =?UTF-8?q?=E5=BF=AB=E7=85=A7&=E4=BF=AE=E5=A4=8DCollapse=E5=8D=95=E6=B5=8B?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/Collapse.snapshot.test.tsx      |   5 +
 .../Collapse.snapshot.test.tsx.snap           | 148 ++++++++++++++++++
 .../__tests__/CollapsePanel.test.tsx          |  58 ++++---
 3 files changed, 188 insertions(+), 23 deletions(-)
 create mode 100644 packages/bui-core/src/Collapse/__tests__/Collapse.snapshot.test.tsx
 create mode 100644 packages/bui-core/src/Collapse/__tests__/__snapshots__/Collapse.snapshot.test.tsx.snap

diff --git a/packages/bui-core/src/Collapse/__tests__/Collapse.snapshot.test.tsx b/packages/bui-core/src/Collapse/__tests__/Collapse.snapshot.test.tsx
new file mode 100644
index 00000000..15651c3b
--- /dev/null
+++ b/packages/bui-core/src/Collapse/__tests__/Collapse.snapshot.test.tsx
@@ -0,0 +1,5 @@
+import { snapshotTest } from 'testing';
+
+describe('Collapse snapshot', () => {
+  snapshotTest('Collapse');
+});
diff --git a/packages/bui-core/src/Collapse/__tests__/__snapshots__/Collapse.snapshot.test.tsx.snap b/packages/bui-core/src/Collapse/__tests__/__snapshots__/Collapse.snapshot.test.tsx.snap
new file mode 100644
index 00000000..d5b75be1
--- /dev/null
+++ b/packages/bui-core/src/Collapse/__tests__/__snapshots__/Collapse.snapshot.test.tsx.snap
@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapse snapshot Collapse demo snapshot 0 1`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "column",
+      "--flex-wrap": "wrap",
+      "--justify-content": "center",
+      "--spacing": "8px",
+    }
+  }
+>
+  <div
+    className="bui-switch bui-switch-medium bui-switch-primary"
+  >
+    <input
+      checked={false}
+      className="bui-switch-input"
+      disabled={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="bui-collapse undefined"
+    style={
+      Object {
+        "WebKitWidth": "0px",
+        "WebkitTransition": "width 1500ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+        "transition": "width 1500ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+        "width": "0px",
+      }
+    }
+  >
+    <div
+      className="bui-card"
+      style={
+        Object {
+          "background": "#CCCCCC",
+          "height": "100px",
+          "width": "100px",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Collapse snapshot Collapse demo snapshot 0 2`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "column",
+      "--flex-wrap": "wrap",
+      "--justify-content": "center",
+      "--spacing": "8px",
+    }
+  }
+>
+  <div
+    className="bui-switch bui-switch-medium bui-switch-primary bui-switch-checked"
+  >
+    <input
+      checked={true}
+      className="bui-switch-input"
+      disabled={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="bui-collapse undefined"
+    style={
+      Object {
+        "WebKitHeight": "fit-content",
+        "WebkitTransition": "height 1500ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+        "height": "fit-content",
+        "transition": "height 1500ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+      }
+    }
+  >
+    <div
+      className="bui-card"
+      style={
+        Object {
+          "background": "#CCCCCC",
+          "height": "100px",
+          "width": "100px",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Collapse snapshot Collapse demo snapshot 0 3`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "column",
+      "--flex-wrap": "wrap",
+      "--justify-content": "center",
+      "--spacing": "8px",
+    }
+  }
+>
+  <div
+    className="bui-switch bui-switch-medium bui-switch-primary bui-switch-checked"
+  >
+    <input
+      checked={true}
+      className="bui-switch-input"
+      disabled={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="bui-collapse undefined"
+    style={
+      Object {
+        "WebKitHeight": "fit-content",
+        "WebkitTransition": "height 1500ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+        "height": "fit-content",
+        "transition": "height 1500ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+      }
+    }
+  >
+    <div
+      className="bui-card"
+      style={
+        Object {
+          "background": "#CCCCCC",
+          "height": "100px",
+          "width": "100px",
+        }
+      }
+    />
+  </div>
+</div>
+`;
diff --git a/packages/bui-core/src/CollapsePanel/__tests__/CollapsePanel.test.tsx b/packages/bui-core/src/CollapsePanel/__tests__/CollapsePanel.test.tsx
index 4c53411c..f6223537 100644
--- a/packages/bui-core/src/CollapsePanel/__tests__/CollapsePanel.test.tsx
+++ b/packages/bui-core/src/CollapsePanel/__tests__/CollapsePanel.test.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useState } from 'react';
-import { render, isConformant, userEvent, screen } from 'testing';
+import { render, isConformant, userEvent, screen, waitFor } from 'testing';
 import CollapsePanel, { CollapsePanelItem, CollapsePanelProps } from '../index';
 
 const setup = (props: CollapsePanelProps, children?: ReactElement) => {
@@ -86,7 +86,7 @@ describe('CollapsePanel', () => {
     expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
     expect(secondPanel).not.toHaveClass('bui-collapse-panel-item-active');
   });
-  it('should only open one panel when use accordion', () => {
+  it('should only open one panel when use accordion', async () => {
     const { container } = setup({
       defaultActiveKeys: ['1'],
       accordion: true,
@@ -100,8 +100,10 @@ describe('CollapsePanel', () => {
     )[1];
 
     userEvent.click(screen.getByText('这是面板标题2'));
-    expect(firstPanel).not.toHaveClass('bui-collapse-panel-item-active');
-    expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+    await waitFor(() => {
+      expect(firstPanel).not.toHaveClass('bui-collapse-panel-item-active');
+      expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+    });
   });
   it('should use custom icon', () => {
     const customIcon = <div>custom icon</div>;
@@ -119,7 +121,7 @@ describe('CollapsePanel', () => {
     const icon = screen.getByText('custom icon');
     expect(icon).toBeVisible();
   });
-  it('should use custom icon by function', () => {
+  it('should use custom icon by function', async () => {
     setup({
       arrowIcon: (active) => {
         if (active) {
@@ -138,10 +140,12 @@ describe('CollapsePanel', () => {
     const unactivedIcon = screen.getByText('unactived icon');
     expect(unactivedIcon).toBeVisible();
     userEvent.click(screen.getByText('这是面板标题1'));
-    const activeIcon = screen.getByText('active icon');
-    expect(activeIcon).toBeVisible();
+    await waitFor(() => {
+      const activeIcon = screen.getByText('active icon');
+      expect(activeIcon).toBeVisible();
+    });
   });
-  it('should call onChange', () => {
+  it('should call onChange', async () => {
     const fakeChange = jest.fn();
     const Component = () => {
       const [activeKeys, setActiveKeys] = useState(['1']);
@@ -167,10 +171,12 @@ describe('CollapsePanel', () => {
     )[1];
 
     userEvent.click(screen.getByText('这是面板标题2'));
-    expect(fakeChange).toBeCalled();
-    expect(fakeChange).toBeCalledWith(['2', '1']);
-    expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
-    expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+    await waitFor(() => {
+      expect(fakeChange).toBeCalled();
+      expect(fakeChange).toBeCalledWith(['2', '1']);
+      expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
+      expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+    });
   });
   it('should return null', () => {
     const { container } = setup({});
@@ -206,7 +212,7 @@ describe('CollapsePanel', () => {
       expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
       expect(secondPanel).not.toHaveClass('bui-collapse-panel-item-active');
     });
-    it('should only open one panel when use accordion', () => {
+    it('should only open one panel when use accordion', async () => {
       const { container } = setupByElement({
         defaultActiveKeys: ['1'],
         accordion: true,
@@ -219,8 +225,10 @@ describe('CollapsePanel', () => {
       )[1];
 
       userEvent.click(screen.getByText('这是面板标题2'));
-      expect(firstPanel).not.toHaveClass('bui-collapse-panel-item-active');
-      expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+      await waitFor(() => {
+        expect(firstPanel).not.toHaveClass('bui-collapse-panel-item-active');
+        expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+      });
     });
     it('should use custom icon', () => {
       const customIcon = <div>custom icon</div>;
@@ -236,7 +244,7 @@ describe('CollapsePanel', () => {
       const icon = screen.getByText('custom icon');
       expect(icon).toBeVisible();
     });
-    it('should use custom icon by function', () => {
+    it('should use custom icon by function', async () => {
       setupByElement(
         {
           arrowIcon: (active) => {
@@ -251,10 +259,12 @@ describe('CollapsePanel', () => {
       const unactivedIcon = screen.getByText('unactived icon');
       expect(unactivedIcon).toBeVisible();
       userEvent.click(screen.getByText('这是面板标题1'));
-      const activeIcon = screen.getByText('active icon');
-      expect(activeIcon).toBeVisible();
+      await waitFor(() => {
+        const activeIcon = screen.getByText('active icon');
+        expect(activeIcon).toBeVisible();
+      });
     });
-    it('should call onChange', () => {
+    it('should call onChange', async () => {
       const fakeChange = jest.fn();
       const Component = () => {
         const [activeKeys, setActiveKeys] = useState(['1']);
@@ -283,10 +293,12 @@ describe('CollapsePanel', () => {
       )[1];
 
       userEvent.click(screen.getByText('这是面板标题2'));
-      expect(fakeChange).toBeCalled();
-      expect(fakeChange).toBeCalledWith(['2', '1']);
-      expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
-      expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+      await waitFor(() => {
+        expect(fakeChange).toBeCalled();
+        expect(fakeChange).toBeCalledWith(['2', '1']);
+        expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
+        expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+      });
     });
     it('should return null', () => {
       const { container } = setupByElement({}, 0);

From 93892e9677361da03e6fe613e3d90c26e12b5fbf Mon Sep 17 00:00:00 2001
From: whyrove <whyrove@163.com>
Date: Mon, 25 Nov 2024 11:44:08 +0800
Subject: [PATCH 08/15] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0toast=E5=8D=95?=
 =?UTF-8?q?=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bui-core/src/Toast/FunctionalToast.tsx    |  2 +-
 .../src/Toast/__tests__/Toast.test.tsx        | 72 ++++++++++++++++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/packages/bui-core/src/Toast/FunctionalToast.tsx b/packages/bui-core/src/Toast/FunctionalToast.tsx
index 1991adb8..6f4b2324 100644
--- a/packages/bui-core/src/Toast/FunctionalToast.tsx
+++ b/packages/bui-core/src/Toast/FunctionalToast.tsx
@@ -162,7 +162,7 @@ const useToast = () => {
       functionalToast({
         type: methodName,
         ...formatProps(options),
-        theme: holderRef.current.theme,
+        theme: holderRef.current?.theme,
       });
   });
 
diff --git a/packages/bui-core/src/Toast/__tests__/Toast.test.tsx b/packages/bui-core/src/Toast/__tests__/Toast.test.tsx
index e03be8e7..35e86756 100644
--- a/packages/bui-core/src/Toast/__tests__/Toast.test.tsx
+++ b/packages/bui-core/src/Toast/__tests__/Toast.test.tsx
@@ -1,15 +1,20 @@
 import React from 'react';
-import { act, fireEvent, render } from 'testing';
+import { act, fireEvent, render, screen } from 'testing';
 import { Button } from '@bifrostui/react';
 import { ErrorCircleFilledBoldIcon } from '@bifrostui/icons';
+import { renderHook } from '@testing-library/react';
 import { Toast } from '../index';
 
 describe('Toast', () => {
   const rootClass = 'bui-toast';
+  let toastHook;
 
   beforeEach(() => {
     document.body.innerHTML = '';
     jest.useFakeTimers();
+    renderHook(() => {
+      toastHook = Toast.useToast();
+    });
   });
 
   afterEach(() => {
@@ -346,4 +351,69 @@ describe('Toast', () => {
     });
     expect(document.body.innerHTML.includes('提示内容')).toBeFalsy();
   });
+  it.each(['warning', 'loading', 'success', 'fail', 'clear'])(
+    'should support basic api with useToast',
+    async (type) => {
+      const toast = toastHook?.[0];
+      if (type === 'clear') {
+        render(
+          <>
+            <Button
+              onClick={() => {
+                toast({
+                  message: '提示内容',
+                  allowMultiple: true,
+                  duration: 0,
+                });
+              }}
+            >
+              button one
+            </Button>
+            <Button
+              onClick={() => {
+                toast({
+                  message: '提示内容',
+                  allowMultiple: true,
+                  duration: 0,
+                });
+              }}
+            >
+              button two
+            </Button>
+            <Button
+              onClick={() => {
+                toast.clear();
+              }}
+            >
+              button three
+            </Button>
+          </>,
+        );
+        fireEvent.click(screen.getByText('button one'));
+        fireEvent.click(screen.getByText('button two'));
+        expect(document.body.innerHTML.split('提示内容').length - 1).toBe(2);
+        fireEvent.click(screen.getByText('button three'));
+        await act(async () => {
+          await jest.runAllTimers();
+        });
+        expect(document.body.innerHTML.includes('提示内容')).toBeFalsy();
+      } else {
+        render(
+          <Button
+            onClick={() => {
+              toast[type](`校验${type}`);
+            }}
+          >
+            {`${type} button`}
+          </Button>,
+        );
+        fireEvent.click(screen.getByText(`${type} button`));
+        expect(
+          document.body.querySelector('.bui-svg-icon'),
+        ).toBeInTheDocument();
+        const toastDom = document.body.querySelector(`.${rootClass}`);
+        expect(toastDom.innerHTML.includes(`校验${type}`)).toBeTruthy();
+      }
+    },
+  );
 });

From ead77c200d830dc0cf8f1e312c03a6c0066ff652 Mon Sep 17 00:00:00 2001
From: whyrove <whyrove@163.com>
Date: Mon, 25 Nov 2024 14:14:15 +0800
Subject: [PATCH 09/15] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0dialog=20?=
 =?UTF-8?q?=E5=8D=95=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bui-core/src/Dialog/FunctionalDialog.tsx  |  6 ++---
 .../src/Dialog/__tests__/Dialog.test.tsx      | 25 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/bui-core/src/Dialog/FunctionalDialog.tsx b/packages/bui-core/src/Dialog/FunctionalDialog.tsx
index 751abd32..25e4862f 100644
--- a/packages/bui-core/src/Dialog/FunctionalDialog.tsx
+++ b/packages/bui-core/src/Dialog/FunctionalDialog.tsx
@@ -119,7 +119,7 @@ const useDialog = () => {
   const wrapAPI: DialogFunction = (
     props: DialogOptions | string,
   ): DialogPromise => {
-    const options = { theme: holderRef.current.theme, ...formatProps(props) };
+    const options = { theme: holderRef.current?.theme, ...formatProps(props) };
     const { onConfirm, onCancel, ...rest } = options;
     return new Promise((resolve) => {
       DialogGenerator({
@@ -141,13 +141,13 @@ const useDialog = () => {
     Dialog({
       type: 'confirm',
       ...formatProps(options),
-      theme: holderRef.current.theme,
+      theme: holderRef.current?.theme,
     });
   wrapAPI.prompt = (options: PromptOptions) =>
     Dialog({
       type: 'prompt',
       ...formatProps(options),
-      theme: holderRef.current.theme,
+      theme: holderRef.current?.theme,
     });
   return [wrapAPI, <Popup key="dialog-holder" ref={holderRef} />] as [
     DialogFunction,
diff --git a/packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx b/packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx
index dbce8d34..046a21f7 100644
--- a/packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx
+++ b/packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, renderHook, waitFor } from '@testing-library/react';
 import { Button } from '@bifrostui/react';
 import { render, screen, act } from 'testing';
 import Dialog from '../FunctionalDialog';
@@ -7,9 +7,14 @@ import '@testing-library/jest-dom/extend-expect';
 
 describe('Dialog Functional Calls', () => {
   const rootClass = 'bui-dialog';
+  let dialogHook;
+
   beforeEach(() => {
     document.body.innerHTML = '';
     jest.useFakeTimers();
+    renderHook(() => {
+      dialogHook = Dialog.useDialog();
+    });
   });
 
   afterEach(() => {
@@ -142,4 +147,22 @@ describe('Dialog Functional Calls', () => {
     fireEvent.click(screen.getByText('Delete'));
     await waitFor(() => expect(promptPromise).resolves.toBe(false));
   });
+
+  it.each(['confirm', 'prompt'])(
+    'should support basic api with useDialog',
+    async (type) => {
+      const dialog = dialogHook?.[0];
+      render(
+        <Button
+          onClick={() => {
+            dialog[type](`${type} message`);
+          }}
+        >
+          dialog button
+        </Button>,
+      );
+      fireEvent.click(screen.getByText('dialog button'));
+      expect(screen.getByText(`${type} message`)).toBeInTheDocument();
+    },
+  );
 });

From 2bd7bbbae47b644593a3118a0794499733621ebb Mon Sep 17 00:00:00 2001
From: whyrove <whyrove@163.com>
Date: Mon, 25 Nov 2024 14:26:21 +0800
Subject: [PATCH 10/15] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0ThemeProvider?=
 =?UTF-8?q?=E5=8D=95=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/ThemeProvider.test.tsx          | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/bui-core/src/ThemeProvider/__tests__/ThemeProvider.test.tsx b/packages/bui-core/src/ThemeProvider/__tests__/ThemeProvider.test.tsx
index 8b87eec1..52f7b10c 100644
--- a/packages/bui-core/src/ThemeProvider/__tests__/ThemeProvider.test.tsx
+++ b/packages/bui-core/src/ThemeProvider/__tests__/ThemeProvider.test.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  render,
-  // userEvent,
-  screen,
-} from 'testing';
+import { render, userEvent, screen } from 'testing';
 import dayjs from 'dayjs/esm/index';
 import {
   ThemeProvider,
@@ -11,10 +7,18 @@ import {
   EN,
   CN,
   TW,
-  // Dialog,
+  Dialog,
+  Button,
 } from '@bifrostui/react';
+import { renderHook } from '@testing-library/react';
 
 describe('ThemeProvider', () => {
+  let dialogHook;
+  beforeEach(() => {
+    renderHook(() => {
+      dialogHook = Dialog.useDialog();
+    });
+  });
   it.each([
     { locale: EN, type: 'EN' },
     { locale: CN, type: 'CN' },
@@ -33,21 +37,21 @@ describe('ThemeProvider', () => {
     expect(screen.getByText(placeHolder[theme.type])).toBeTruthy();
   });
 
-  // it('should render function locale theme currently', () => {
-  //   const [dialog, contextHolder] = Dialog.useDialog();
-  //   render(
-  //     <ThemeProvider locale={EN}>
-  //       {contextHolder}
-  //       <Button
-  //         onClick={() => {
-  //           dialog.confirm({ message: '测试' });
-  //         }}
-  //       >
-  //         Dialog
-  //       </Button>
-  //     </ThemeProvider>,
-  //   );
-  //   userEvent.click(screen.getByText(/Dialog/));
-  //   expect(screen.getByText('Cancel')).toBeTruthy();
-  // });
+  it('should render function locale theme currently', () => {
+    const [dialog, contextHolder] = dialogHook;
+    render(
+      <ThemeProvider locale={EN}>
+        {contextHolder}
+        <Button
+          onClick={() => {
+            dialog.confirm({ message: '测试' });
+          }}
+        >
+          Dialog
+        </Button>
+      </ThemeProvider>,
+    );
+    userEvent.click(screen.getByText(/Dialog/));
+    expect(screen.getByText('Cancel')).toBeTruthy();
+  });
 });

From 067b37f40dc203c47b3c717073ae58a72eba626d Mon Sep 17 00:00:00 2001
From: whyrove <whyrove@163.com>
Date: Mon, 25 Nov 2024 14:52:50 +0800
Subject: [PATCH 11/15] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dcss=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E5=86=99=E6=B3=95=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bui-core/src/Progress/Progress.less | 2 +-
 packages/bui-core/src/Radio/Radio.less       | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/bui-core/src/Progress/Progress.less b/packages/bui-core/src/Progress/Progress.less
index 60d58639..c6b9fa42 100644
--- a/packages/bui-core/src/Progress/Progress.less
+++ b/packages/bui-core/src/Progress/Progress.less
@@ -1,5 +1,5 @@
 .bui-progress {
-  --fill-color: var(--bui-progress-fill-color, --bui-color-primary);
+  --fill-color: var(--bui-progress-fill-color, var(--bui-color-primary));
   --trail-color: var(--bui-progress-trail-color, rgba(156, 156, 165, 0.2));
   --stroke-width: var(--bui-progress-stroke-width, 8px);
   --width: var(--bui-progress-width, 100%);
diff --git a/packages/bui-core/src/Radio/Radio.less b/packages/bui-core/src/Radio/Radio.less
index a01f94e8..01e6070b 100644
--- a/packages/bui-core/src/Radio/Radio.less
+++ b/packages/bui-core/src/Radio/Radio.less
@@ -1,7 +1,7 @@
 .bui-radio {
-  --label-color: var(--bui-radio-label-color, --bui-color-fg-default);
-  --label-font-size: var(--bui-radio-label-font-size, --bui-text-size-1);
-  --icon-font-size: var(--bui-radio-icon-font-size, --bui-title-size-2);
+  --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
+  --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
+  --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
   --icon-padding: var(--bui-radio-icon-padding, 5px);
 
   @iconSize: 16px;

From f6f9f46630c69b51ef40ad3caf0d8aed551d17bb Mon Sep 17 00:00:00 2001
From: whyrove <whyrove@163.com>
Date: Mon, 25 Nov 2024 15:43:53 +0800
Subject: [PATCH 12/15] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4md=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bui-core/src/Toast/index.en-US.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/bui-core/src/Toast/index.en-US.md b/packages/bui-core/src/Toast/index.en-US.md
index ff3b924e..baf19867 100644
--- a/packages/bui-core/src/Toast/index.en-US.md
+++ b/packages/bui-core/src/Toast/index.en-US.md
@@ -602,4 +602,3 @@ export default () => {
 | --border-radius    | fillet                                                   | --bui-shape-radius-default | --bui-toast-border-radius   |
 | --icon-margin      | Icon margin                                              | 0 0 8px                    | --bui-toast-icon-margin     |
 | --icon-font-size   | Icon font size                                           | 30px                       | --bui-toast-icon-font-size  |
-| --text-align       | Text position                                            | center                     | -                           |

From 8afe559cfa61d33dc8388522f87fb5536907074b Mon Sep 17 00:00:00 2001
From: xiexiejie <zhangjie891124@126.com>
Date: Mon, 25 Nov 2024 16:41:39 +0800
Subject: [PATCH 13/15] feat: relative path replace

---
 packages/bui-core/src/Popover/index.en-US.md | 44 +++++++++-----------
 packages/bui-core/src/Popover/index.zh-CN.md | 44 +++++++++-----------
 2 files changed, 38 insertions(+), 50 deletions(-)

diff --git a/packages/bui-core/src/Popover/index.en-US.md b/packages/bui-core/src/Popover/index.en-US.md
index 7167ae7f..97ecf902 100644
--- a/packages/bui-core/src/Popover/index.en-US.md
+++ b/packages/bui-core/src/Popover/index.en-US.md
@@ -16,13 +16,12 @@ Clicking with the mouse will display a prompt, and clicking again will disappear
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   return (
     <Popover
-      title={<div className="pop-style">This is a title</div>}
-      content={<div className="pop-style">This is a content</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a title</div>}
+      content={<div style={{ padding: '2px 8px' }}>This is a content</div>}
     >
       <span>click显示</span>
     </Popover>
@@ -42,7 +41,7 @@ export default () => {
   const [open, setOpen] = useState(true);
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       open={open}
     >
       <span onClick={() => setOpen(!open)}>open控制显隐</span>
@@ -58,12 +57,11 @@ You can set defaultOpen to true to display bubble floating layers by default
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       defaultOpen
     >
       <span>defaultOpen默认显示</span>
@@ -79,12 +77,11 @@ You can set 'hideArrow' to true to hide arrows
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       defaultOpen
       hideArrow
     >
@@ -101,7 +98,6 @@ Placement: Set the position of the bubble float layer. The optional values are:
 ```tsx
 import { Popover, Button } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   const packageButton = (inner) => {
@@ -124,21 +120,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="topLeft"
         >
           {packageButton(<span>topLeft</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="top"
         >
           {packageButton(<span>top</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="topRight"
         >
           {packageButton(<span>topRight</span>)}
@@ -154,21 +150,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="leftTop"
         >
           {packageButton(<span>leftTop</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="left"
         >
           {packageButton(<span>left</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="leftBottom"
         >
           {packageButton(<span>leftBottom</span>)}
@@ -184,21 +180,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="rightTop"
         >
           {packageButton(<span>rightTop</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="right"
         >
           {packageButton(<span>right</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="rightBottom"
         >
           {packageButton(<span>rightBottom</span>)}
@@ -215,21 +211,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="bottomLeft"
         >
           {packageButton(<span>bottomLeft</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="bottom"
         >
           {packageButton(<span>bottom</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="bottomRight"
         >
           {packageButton(<span>bottomRight</span>)}
@@ -247,12 +243,11 @@ The triggering method for displaying bubbles is "click" or "hover", with the def
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       trigger="hover"
     >
       <span>hover触发方式</span>
@@ -266,7 +261,6 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   const onOpenChange = (event, data) => {
@@ -274,7 +268,7 @@ export default () => {
   };
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       trigger="hover"
       onOpenChange={onOpenChange}
     >
diff --git a/packages/bui-core/src/Popover/index.zh-CN.md b/packages/bui-core/src/Popover/index.zh-CN.md
index b3ca0a84..de952832 100644
--- a/packages/bui-core/src/Popover/index.zh-CN.md
+++ b/packages/bui-core/src/Popover/index.zh-CN.md
@@ -16,13 +16,12 @@ click或hover触发弹出气泡式的卡片浮层，可以自定义事件
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   return (
     <Popover
-      title={<div className="pop-style">This is a title</div>}
-      content={<div className="pop-style">This is a content</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a title</div>}
+      content={<div style={{ padding: '2px 8px' }}>This is a content</div>}
     >
       <span>click显示</span>
     </Popover>
@@ -42,7 +41,7 @@ export default () => {
   const [open, setOpen] = useState(true);
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       open={open}
     >
       <span onClick={() => setOpen(!open)}>open控制显隐</span>
@@ -58,12 +57,11 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       defaultOpen
     >
       <span>defaultOpen默认显示</span>
@@ -79,12 +77,11 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       defaultOpen
       hideArrow
     >
@@ -101,7 +98,6 @@ export default () => {
 ```tsx
 import { Popover, Button } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   const packageButton = (inner) => {
@@ -124,21 +120,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="topLeft"
         >
           {packageButton(<span>topLeft</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="top"
         >
           {packageButton(<span>top</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="topRight"
         >
           {packageButton(<span>topRight</span>)}
@@ -154,21 +150,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="leftTop"
         >
           {packageButton(<span>leftTop</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="left"
         >
           {packageButton(<span>left</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="leftBottom"
         >
           {packageButton(<span>leftBottom</span>)}
@@ -184,21 +180,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="rightTop"
         >
           {packageButton(<span>rightTop</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="right"
         >
           {packageButton(<span>right</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="rightBottom"
         >
           {packageButton(<span>rightBottom</span>)}
@@ -215,21 +211,21 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="bottomLeft"
         >
           {packageButton(<span>bottomLeft</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="bottom"
         >
           {packageButton(<span>bottom</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div className="pop-style">This is a popover</div>}
+          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
           placement="bottomRight"
         >
           {packageButton(<span>bottomRight</span>)}
@@ -247,12 +243,11 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       trigger="hover"
     >
       <span>hover触发方式</span>
@@ -266,7 +261,6 @@ export default () => {
 ```tsx
 import { Popover } from '@bifrostui/react';
 import React from 'react';
-import './md.css';
 
 export default () => {
   const onOpenChange = (event, data) => {
@@ -274,7 +268,7 @@ export default () => {
   };
   return (
     <Popover
-      title={<div className="pop-style">This is a popover</div>}
+      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
       trigger="hover"
       onOpenChange={onOpenChange}
     >

From 25bffd0ce1aed72972e7bce58d1df63c631fbb3f Mon Sep 17 00:00:00 2001
From: xiexiejie <zhangjie891124@126.com>
Date: Mon, 25 Nov 2024 16:41:47 +0800
Subject: [PATCH 14/15] feat: relative path replace

---
 packages/bui-core/src/Popover/md.css | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 packages/bui-core/src/Popover/md.css

diff --git a/packages/bui-core/src/Popover/md.css b/packages/bui-core/src/Popover/md.css
deleted file mode 100644
index 3d74da22..00000000
--- a/packages/bui-core/src/Popover/md.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.pop-style {
-  padding: 2px 8px;
-}

From 6515b9b2fa9b3409c5eac13954e5aaf8154a6228 Mon Sep 17 00:00:00 2001
From: whyrove <whyrove@163.com>
Date: Tue, 26 Nov 2024 16:01:28 +0800
Subject: [PATCH 15/15] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=8D=95?=
 =?UTF-8?q?=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/__tests__/Dialog.snapshot.test.tsx |   5 +
 .../src/Dialog/__tests__/Dialog.test.tsx      |  49 +++++-
 .../Dialog.snapshot.test.tsx.snap             | 165 ++++++++++++++++++
 packages/bui-core/src/Dialog/index.en-US.md   |   6 +-
 packages/bui-core/src/Dialog/index.zh-CN.md   |   6 +-
 .../src/ThemeProvider/ThemeProvider.types.ts  |  22 +--
 packages/bui-core/src/Toast/index.en-US.md    |   6 +-
 packages/bui-core/src/Toast/index.zh-CN.md    |   6 +-
 8 files changed, 241 insertions(+), 24 deletions(-)
 create mode 100644 packages/bui-core/src/Dialog/__tests__/Dialog.snapshot.test.tsx
 create mode 100644 packages/bui-core/src/Dialog/__tests__/__snapshots__/Dialog.snapshot.test.tsx.snap

diff --git a/packages/bui-core/src/Dialog/__tests__/Dialog.snapshot.test.tsx b/packages/bui-core/src/Dialog/__tests__/Dialog.snapshot.test.tsx
new file mode 100644
index 00000000..58b1bb8e
--- /dev/null
+++ b/packages/bui-core/src/Dialog/__tests__/Dialog.snapshot.test.tsx
@@ -0,0 +1,5 @@
+import { snapshotTest } from 'testing';
+
+describe('Dialog snapshot', () => {
+  snapshotTest('Dialog');
+});
diff --git a/packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx b/packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx
index 046a21f7..3b87b506 100644
--- a/packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx
+++ b/packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx
@@ -147,15 +147,54 @@ describe('Dialog Functional Calls', () => {
     fireEvent.click(screen.getByText('Delete'));
     await waitFor(() => expect(promptPromise).resolves.toBe(false));
   });
+  it('the default type of useDialog is confirm', async () => {
+    const onConfirm = jest.fn();
+    const onCancel = jest.fn();
+    const { getByTestId } = render(
+      <Button
+        data-testid="emit-button"
+        onClick={() => {
+          dialogHook[0]({
+            header: '标题',
+            message: '描述内容',
+            onConfirm,
+            onCancel,
+          });
+        }}
+      >
+        test
+      </Button>,
+    );
+    fireEvent.click(getByTestId('emit-button'));
+    expect(
+      document.body.querySelector(`.${rootClass}-body-desc`),
+    ).toBeInTheDocument();
+    expect(screen.getByText('描述内容')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('取消'));
+    await waitFor(async () => {
+      expect(onCancel).toHaveBeenCalled();
+      fireEvent.click(screen.getByText('确定'));
+      await waitFor(() => {
+        expect(onConfirm).toHaveBeenCalled();
+      });
+    });
+  });
 
   it.each(['confirm', 'prompt'])(
     'should support basic api with useDialog',
     async (type) => {
       const dialog = dialogHook?.[0];
+      const onConfirm = jest.fn();
+      const onCancel = jest.fn();
+
       render(
         <Button
           onClick={() => {
-            dialog[type](`${type} message`);
+            dialog[type]({
+              message: `${type} message`,
+              onConfirm,
+              onCancel,
+            });
           }}
         >
           dialog button
@@ -163,6 +202,14 @@ describe('Dialog Functional Calls', () => {
       );
       fireEvent.click(screen.getByText('dialog button'));
       expect(screen.getByText(`${type} message`)).toBeInTheDocument();
+      fireEvent.click(screen.getByText('取消'));
+      await waitFor(async () => {
+        expect(onCancel).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('确定'));
+        await waitFor(() => {
+          expect(onConfirm).toHaveBeenCalled();
+        });
+      });
     },
   );
 });
diff --git a/packages/bui-core/src/Dialog/__tests__/__snapshots__/Dialog.snapshot.test.tsx.snap b/packages/bui-core/src/Dialog/__tests__/__snapshots__/Dialog.snapshot.test.tsx.snap
new file mode 100644
index 00000000..4b093fd3
--- /dev/null
+++ b/packages/bui-core/src/Dialog/__tests__/__snapshots__/Dialog.snapshot.test.tsx.snap
@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog snapshot Dialog demo snapshot 0 1`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "row",
+      "--flex-wrap": "nowrap",
+      "--justify-content": "center",
+      "--spacing": "10px",
+    }
+  }
+>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    默认为confirm
+  </button>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    confirm
+  </button>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    等待confirm完成
+  </button>
+</div>
+`;
+
+exports[`Dialog snapshot Dialog demo snapshot 0 2`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "row",
+      "--flex-wrap": "nowrap",
+      "--justify-content": "center",
+      "--spacing": "10px",
+    }
+  }
+>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    默认为confirm
+  </button>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    confirm
+  </button>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    等待confirm完成
+  </button>
+</div>
+`;
+
+exports[`Dialog snapshot Dialog demo snapshot 0 3`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "row",
+      "--flex-wrap": "nowrap",
+      "--justify-content": "center",
+      "--spacing": "10px",
+    }
+  }
+>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    异步操作执行成功
+  </button>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    异步操作执行失败
+  </button>
+</div>
+`;
+
+exports[`Dialog snapshot Dialog demo snapshot 0 4`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "row",
+      "--flex-wrap": "nowrap",
+      "--justify-content": "center",
+      "--spacing": "10px",
+    }
+  }
+>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    自定义标题和消息
+  </button>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    自定义确认按钮文本
+  </button>
+</div>
+`;
+
+exports[`Dialog snapshot Dialog demo snapshot 0 5`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "row",
+      "--flex-wrap": "nowrap",
+      "--justify-content": "center",
+      "--spacing": "10px",
+    }
+  }
+>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    prompt
+  </button>
+  <button
+    className="bui-btn bui-btn-outlined bui-btn-medium bui-btn-default"
+    onClick={[Function]}
+    type="button"
+  >
+    传入InputProps
+  </button>
+</div>
+`;
diff --git a/packages/bui-core/src/Dialog/index.en-US.md b/packages/bui-core/src/Dialog/index.en-US.md
index 0b4761cd..76eee815 100644
--- a/packages/bui-core/src/Dialog/index.en-US.md
+++ b/packages/bui-core/src/Dialog/index.en-US.md
@@ -158,7 +158,7 @@ export default () => {
   };
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button onClick={handleClickConfirm}>异步操作执行成功</Button>
@@ -188,7 +188,7 @@ export default () => {
   const [dialog, contextHolder] = Dialog.useDialog();
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button
@@ -251,7 +251,7 @@ export default () => {
   };
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button onClick={handleClickPrompt}>prompt</Button>
diff --git a/packages/bui-core/src/Dialog/index.zh-CN.md b/packages/bui-core/src/Dialog/index.zh-CN.md
index 8a69b56b..57fc486f 100644
--- a/packages/bui-core/src/Dialog/index.zh-CN.md
+++ b/packages/bui-core/src/Dialog/index.zh-CN.md
@@ -158,7 +158,7 @@ export default () => {
   };
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button onClick={handleClickConfirm}>异步操作执行成功</Button>
@@ -188,7 +188,7 @@ export default () => {
   const [dialog, contextHolder] = Dialog.useDialog();
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button
@@ -251,7 +251,7 @@ export default () => {
   };
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button onClick={handleClickPrompt}>prompt</Button>
diff --git a/packages/bui-core/src/ThemeProvider/ThemeProvider.types.ts b/packages/bui-core/src/ThemeProvider/ThemeProvider.types.ts
index c06d14f9..c7b5bd53 100644
--- a/packages/bui-core/src/ThemeProvider/ThemeProvider.types.ts
+++ b/packages/bui-core/src/ThemeProvider/ThemeProvider.types.ts
@@ -2,17 +2,6 @@ import { ReactNode } from 'react';
 import { OverrideProps } from '@bifrostui/types';
 import { BaseLang } from '../locales/base';
 
-export type ThemeProviderProps<
-  D extends React.ElementType = 'div',
-  P = {},
-> = OverrideProps<
-  {
-    props: P & ThemeProps;
-    defaultComponent: D;
-  },
-  D
->;
-
 export interface Breakpoints {
   /**
    * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
@@ -150,6 +139,17 @@ export type UpdateTokensOptions = Pick<
   rootString: string;
 };
 
+export type ThemeProviderProps<
+  D extends React.ElementType = 'div',
+  P = {},
+> = OverrideProps<
+  {
+    props: P & ThemeProps;
+    defaultComponent: D;
+  },
+  D
+>;
+
 export {
   BaseLang,
   ResponsiveTokenOptions,
diff --git a/packages/bui-core/src/Toast/index.en-US.md b/packages/bui-core/src/Toast/index.en-US.md
index baf19867..2be465f2 100644
--- a/packages/bui-core/src/Toast/index.en-US.md
+++ b/packages/bui-core/src/Toast/index.en-US.md
@@ -87,7 +87,7 @@ export default () => {
   const theme = useTheme();
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button
@@ -468,7 +468,7 @@ export default () => {
   const theme = useTheme();
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button
@@ -528,7 +528,7 @@ export default () => {
   const theme = useTheme();
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button
diff --git a/packages/bui-core/src/Toast/index.zh-CN.md b/packages/bui-core/src/Toast/index.zh-CN.md
index dfcfeec0..f5e4dbdc 100644
--- a/packages/bui-core/src/Toast/index.zh-CN.md
+++ b/packages/bui-core/src/Toast/index.zh-CN.md
@@ -87,7 +87,7 @@ export default () => {
   const theme = useTheme();
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button
@@ -468,7 +468,7 @@ export default () => {
   const theme = useTheme();
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button
@@ -528,7 +528,7 @@ export default () => {
   const theme = useTheme();
 
   return (
-    <ThemeProvider locale={theme}>
+    <ThemeProvider locale={theme.locale}>
       {contextHolder}
       <Stack direction="row" spacing="10px">
         <Button