@bioturing/components 0.13.2 → 0.14.0

package/dist/DSRoot.js

@@ -6,12 +6,9 @@ import "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__ant_design_cssinjs_c619260f__ from "@ant-design/cssinjs";
 import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@bioturing/assets";
 import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__ from "@base-ui-components/react";
-import "antd/es/tooltip/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__ from "antd/es/tooltip";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_button_8f463bb4__ from "antd/es/button";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d95086__ from "antd/es/app/useApp";
-import "antd/es/flex/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__ from "antd/es/flex";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_52965d33__ from "antd/es/modal";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_context_bc73863f__ from "antd/es/modal/context";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalCancelBtn_54ff398c__ from "antd/es/modal/components/NormalCancelBtn";
@@ -21,134 +18,276 @@ import * as __WEBPACK_EXTERNAL_MODULE_antd_es_locale_31079002__ from "antd/es/lo
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_segmented_6dbdbe23__ from "antd/es/segmented";
 import * as __WEBPACK_EXTERNAL_MODULE_prism_react_renderer_be33806e__ from "prism-react-renderer";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_app_App_698582f4__ from "antd/es/app/App";
-const figmaToAntDesignTokens = {
-    lightMode: {
-        colorText: "rgba(0, 0, 0, 0.88)",
-        colorTextSecondary: "rgba(0, 0, 0, 0.65)",
-        colorTextTertiary: "rgba(0, 0, 0, 0.45)",
-        colorTextQuaternary: "rgba(0, 0, 0, 0.25)",
-        colorPrimary: "#175CD3",
-        colorPrimaryBg: "#E9F2FF",
-        colorPrimaryBgHover: "#D1E9FF",
-        colorPrimaryBorder: "#84CAFF",
-        colorPrimaryBorderHover: "#53B1FD",
-        colorPrimaryHover: "#1570EF",
-        colorPrimaryActive: "#175CD3",
-        colorPrimaryTextHover: "#1570EF",
-        colorPrimaryTextActive: "#175CD3",
-        colorInfo: "#175CD3",
-        colorInfoBg: "#E9F2FF",
-        colorInfoBgHover: "#D1E9FF",
-        colorInfoBorder: "#84CAFF",
-        colorInfoBorderHover: "#53B1FD",
-        colorInfoHover: "#1570EF",
-        colorInfoActive: "#175CD3",
-        colorInfoTextHover: "#1570EF",
-        colorInfoTextActive: "#175CD3",
-        colorSuccess: "#4CB200",
-        colorSuccessBg: "#F6FFF0",
-        colorSuccessBgHover: "#D9F7BE",
-        colorSuccessBorder: "#B7EB8F",
-        colorSuccessBorderHover: "#95DE64",
-        colorSuccessHover: "#73D13D",
-        colorSuccessActive: "#389E0D",
-        colorSuccessTextHover: "#237804",
-        colorSuccessTextActive: "#092B00",
-        colorWarning: "#FA8C16",
-        colorWarningBg: "#FFF7E6",
-        colorWarningBgHover: "#FFE7BA",
-        colorWarningBorder: "#FFD591",
-        colorWarningBorderHover: "#FFC069",
-        colorWarningHover: "#FFA940",
-        colorWarningActive: "#D46B08",
-        colorWarningTextHover: "#AD4E00",
-        colorWarningTextActive: "#873800",
-        colorError: "#D92D20",
-        colorErrorBg: "#FEF3F2",
-        colorErrorBgHover: "#FEE4E2",
-        colorErrorBorder: "#FDA29B",
-        colorErrorBorderHover: "#F97066",
-        colorErrorHover: "#F04438",
-        colorErrorActive: "#D92D20",
-        colorErrorTextHover: "#F04438",
-        colorErrorTextActive: "#D92D20",
-        colorFill: "rgba(0, 0, 0, 0.15)",
-        colorFillSecondary: "rgba(0, 0, 0, 0.06)",
-        colorFillTertiary: "rgba(0, 0, 0, 0.04)",
-        colorFillQuaternary: "rgba(0, 0, 0, 0.02)",
-        colorFillAlter: "rgba(0, 0, 0, 0.02)",
-        colorBorder: "rgba(0, 0, 0, 0.16)",
-        colorBorderSecondary: "rgba(0, 0, 0, 0.06)",
-        colorIcon: "rgba(0, 0, 0, 0.58)",
-        colorIconHover: "rgba(0, 0, 0, 0.88)",
-        controlOutline: "rgba(0, 0, 0, 0.12)"
-    },
-    darkMode: {
-        colorText: "rgba(255, 255, 255, 0.85)",
-        colorTextSecondary: "rgba(255, 255, 255, 0.65)",
-        colorTextTertiary: "rgba(255, 255, 255, 0.45)",
-        colorTextQuaternary: "rgba(255, 255, 255, 0.25)",
-        colorBgContainer: "#26262C",
-        colorBgElevated: "#2F2F37",
-        colorBgLayout: "#1A1A1E",
-        colorBgSpotlight: "#505D5D",
-        colorBgMask: "rgba(0, 0, 0, 0.45)",
-        colorBgBase: "#13131A",
-        colorFill: "rgba(255, 255, 255, 0.15)",
-        colorFillSecondary: "rgba(255, 255, 255, 0.06)",
-        colorFillTertiary: "rgba(255, 255, 255, 0.04)",
-        colorFillQuaternary: "rgba(255, 255, 255, 0.02)",
-        colorFillAlter: "rgba(255, 255, 255, 0.02)",
-        colorBorder: "rgba(255, 255, 255, 0.16)",
-        colorBorderSecondary: "rgba(255, 255, 255, 0.06)",
-        colorPrimary: "#2E90FA",
-        colorPrimaryBg: "#152137",
-        colorPrimaryBgHover: "#112545",
-        colorPrimaryBorder: "#1C3959",
-        colorPrimaryBorderHover: "#204C7C",
-        colorPrimaryHover: "#50A0E8",
-        colorPrimaryActive: "#2565AB",
-        colorPrimaryTextHover: "#50A0E8",
-        colorPrimaryTextActive: "#2565AB",
-        colorInfo: "#2E90FA",
-        colorInfoBg: "#152137",
-        colorInfoBgHover: "#112545",
-        colorInfoBorder: "#1C3959",
-        colorInfoBorderHover: "#204C7C",
-        colorInfoHover: "#50A0E8",
-        colorInfoActive: "#2565AB",
-        colorInfoTextHover: "#50A0E8",
-        colorInfoTextActive: "#2565AB",
-        colorSuccess: "#389E0D",
-        colorSuccessBg: "#162100",
-        colorSuccessBgHover: "#1D2B00",
-        colorSuccessBorder: "#274916",
-        colorSuccessBorderHover: "#306317",
-        colorSuccessHover: "#52C41A",
-        colorSuccessActive: "#237804",
-        colorSuccessTextHover: "#52C41A",
-        colorSuccessTextActive: "#237804",
-        colorWarning: "#D48806",
-        colorWarningBg: "#281800",
-        colorWarningBgHover: "#3D2200",
-        colorWarningBorder: "#443B16",
-        colorWarningBorderHover: "#594E1A",
-        colorWarningHover: "#E8B339",
-        colorWarningActive: "#AA7714",
-        colorWarningTextHover: "#E8B339",
-        colorWarningTextActive: "#AA7714",
-        colorError: "#CF3D33",
-        colorErrorBg: "#291414",
-        colorErrorBgHover: "#411A18",
-        colorErrorBorder: "#562222",
-        colorErrorBorderHover: "#772A24",
-        colorErrorHover: "#E5695A",
-        colorErrorActive: "#A3332B",
-        colorErrorTextHover: "#E5695A",
-        colorErrorTextActive: "#A3332B",
-        colorIcon: "rgba(255, 255, 255, 0.58)",
-        colorIconHover: "rgba(255, 255, 255, 0.88)",
-        controlOutline: "rgba(255, 255, 255, 0.12)"
+const getTokensByTheme = (originTokens, theme)=>{
+    const tokens = {};
+    Object.entries(originTokens).forEach(([key, value])=>{
+        if (value && "object" == typeof value && "light" in value && "dark" in value) {
+            const tokenValue = value;
+            tokens[key] = tokenValue[theme];
+        } else if ("string" == typeof value) tokens[key] = value;
+    });
+    return tokens;
+};
+const antdColorTokens = {
+    colorText: {
+        light: "rgba(0, 0, 0, 0.88)",
+        dark: "rgba(255, 255, 255, 0.85)"
+    },
+    colorTextSecondary: {
+        light: "rgba(0, 0, 0, 0.65)",
+        dark: "rgba(255, 255, 255, 0.65)"
+    },
+    colorTextTertiary: {
+        light: "rgba(0, 0, 0, 0.45)",
+        dark: "rgba(255, 255, 255, 0.45)"
+    },
+    colorTextQuaternary: {
+        light: "rgba(0, 0, 0, 0.25)",
+        dark: "rgba(255, 255, 255, 0.25)"
+    },
+    colorPrimary: {
+        light: "#175CD3",
+        dark: "#2E90FA"
+    },
+    colorPrimaryBg: {
+        light: "#E9F2FF",
+        dark: "#152137"
+    },
+    colorPrimaryBgHover: {
+        light: "#D1E9FF",
+        dark: "#112545"
+    },
+    colorPrimaryBorder: {
+        light: "#84CAFF",
+        dark: "#1C3959"
+    },
+    colorPrimaryBorderHover: {
+        light: "#53B1FD",
+        dark: "#204C7C"
+    },
+    colorPrimaryHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorPrimaryActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorPrimaryTextHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorPrimaryTextActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorInfo: {
+        light: "#175CD3",
+        dark: "#2E90FA"
+    },
+    colorInfoBg: {
+        light: "#E9F2FF",
+        dark: "#152137"
+    },
+    colorInfoBgHover: {
+        light: "#D1E9FF",
+        dark: "#112545"
+    },
+    colorInfoBorder: {
+        light: "#84CAFF",
+        dark: "#1C3959"
+    },
+    colorInfoBorderHover: {
+        light: "#53B1FD",
+        dark: "#204C7C"
+    },
+    colorInfoHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorInfoActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorInfoTextHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorInfoTextActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorSuccess: {
+        light: "#4CB200",
+        dark: "#389E0D"
+    },
+    colorSuccessBg: {
+        light: "#F6FFF0",
+        dark: "#162100"
+    },
+    colorSuccessBgHover: {
+        light: "#D9F7BE",
+        dark: "#1D2B00"
+    },
+    colorSuccessBorder: {
+        light: "#B7EB8F",
+        dark: "#274916"
+    },
+    colorSuccessBorderHover: {
+        light: "#95DE64",
+        dark: "#306317"
+    },
+    colorSuccessHover: {
+        light: "#73D13D",
+        dark: "#52C41A"
+    },
+    colorSuccessActive: {
+        light: "#389E0D",
+        dark: "#237804"
+    },
+    colorSuccessTextHover: {
+        light: "#237804",
+        dark: "#52C41A"
+    },
+    colorSuccessTextActive: {
+        light: "#092B00",
+        dark: "#237804"
+    },
+    colorWarning: {
+        light: "#FA8C16",
+        dark: "#D48806"
+    },
+    colorWarningBg: {
+        light: "#FFF7E6",
+        dark: "#281800"
+    },
+    colorWarningBgHover: {
+        light: "#FFE7BA",
+        dark: "#3D2200"
+    },
+    colorWarningBorder: {
+        light: "#FFD591",
+        dark: "#443B16"
+    },
+    colorWarningBorderHover: {
+        light: "#FFC069",
+        dark: "#594E1A"
+    },
+    colorWarningHover: {
+        light: "#FFA940",
+        dark: "#E8B339"
+    },
+    colorWarningActive: {
+        light: "#D46B08",
+        dark: "#AA7714"
+    },
+    colorWarningTextHover: {
+        light: "#AD4E00",
+        dark: "#E8B339"
+    },
+    colorWarningTextActive: {
+        light: "#873800",
+        dark: "#AA7714"
+    },
+    colorError: {
+        light: "#D92D20",
+        dark: "#CF3D33"
+    },
+    colorErrorBg: {
+        light: "#FEF3F2",
+        dark: "#291414"
+    },
+    colorErrorBgHover: {
+        light: "#FEE4E2",
+        dark: "#411A18"
+    },
+    colorErrorBorder: {
+        light: "#FDA29B",
+        dark: "#562222"
+    },
+    colorErrorBorderHover: {
+        light: "#F97066",
+        dark: "#772A24"
+    },
+    colorErrorHover: {
+        light: "#F04438",
+        dark: "#E5695A"
+    },
+    colorErrorActive: {
+        light: "#D92D20",
+        dark: "#A3332B"
+    },
+    colorErrorTextHover: {
+        light: "#F04438",
+        dark: "#E5695A"
+    },
+    colorErrorTextActive: {
+        light: "#D92D20",
+        dark: "#A3332B"
+    },
+    colorFill: {
+        light: "rgba(0, 0, 0, 0.15)",
+        dark: "rgba(255, 255, 255, 0.15)"
+    },
+    colorFillSecondary: {
+        light: "rgba(0, 0, 0, 0.06)",
+        dark: "rgba(255, 255, 255, 0.06)"
+    },
+    colorFillTertiary: {
+        light: "rgba(0, 0, 0, 0.04)",
+        dark: "rgba(255, 255, 255, 0.04)"
+    },
+    colorFillQuaternary: {
+        light: "rgba(0, 0, 0, 0.02)",
+        dark: "rgba(255, 255, 255, 0.02)"
+    },
+    colorFillAlter: {
+        light: "rgba(0, 0, 0, 0.02)",
+        dark: "rgba(255, 255, 255, 0.02)"
+    },
+    colorBorder: {
+        light: "rgba(0, 0, 0, 0.16)",
+        dark: "rgba(255, 255, 255, 0.16)"
+    },
+    colorBorderSecondary: {
+        light: "rgba(0, 0, 0, 0.06)",
+        dark: "rgba(255, 255, 255, 0.06)"
+    },
+    colorIcon: {
+        light: "rgba(0, 0, 0, 0.58)",
+        dark: "rgba(255, 255, 255, 0.58)"
+    },
+    colorIconHover: {
+        light: "rgba(0, 0, 0, 0.88)",
+        dark: "rgba(255, 255, 255, 0.88)"
+    },
+    colorBgContainer: {
+        light: "#FFFFFF",
+        dark: "#26262C"
+    },
+    colorBgElevated: {
+        light: "#FFFFFF",
+        dark: "#2F2F37"
+    },
+    colorBgLayout: {
+        light: "#F5F5F5",
+        dark: "#1A1A1E"
+    },
+    colorBgSpotlight: {
+        light: "rgba(0, 0, 0, 0.85)",
+        dark: "#505D5D"
+    },
+    colorBgMask: {
+        light: "rgba(0, 0, 0, 0.45)",
+        dark: "rgba(0, 0, 0, 0.45)"
+    },
+    colorBgBase: {
+        light: "#FFFFFF",
+        dark: "#13131A"
+    },
+    controlOutline: {
+        light: "rgba(0, 0, 0, 0.12)",
+        dark: "rgba(255, 255, 255, 0.12)"
     }
 };
 const sharedTokens = {
@@ -169,7 +308,7 @@ const sharedTokens = {
     lineHeightSM: 16 / 12,
     fontWeightStrong: 600,
     boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 6px rgba(0, 0, 0, 0.04), 0px 2px 10px rgba(0, 0, 0, 0.04)",
-    boxShadowSecondary: "0px 0px 1px rgba(0, 0, 0, 0.24), 0px 3px 6px 1px rgba(0, 0, 0, 0.08), 0px 6px 26px 2px rgba(0, 0, 0, 0.08), 0px 4px 52px rgba(0, 0, 0, 0.05)",
+    boxShadowSecondary: "0px 0px 1px 0px var(--ds-color-border-modal), 0px 3px 6px 1px rgba(0, 0, 0, 0.08), 0px 6px 26px 2px rgba(0, 0, 0, 0.08), 0px 4px 52px 0px rgba(0, 0, 0, 0.05)",
     colorBgSpotlight: "rgba(0, 0, 0, 0.85)"
 };
 const sharedThemeConfig = {
@@ -210,14 +349,14 @@ const sharedThemeConfig = {
 };
 const lightTheme = {
     token: {
-        ...figmaToAntDesignTokens.lightMode,
+        ...getTokensByTheme(antdColorTokens, "light"),
         ...sharedTokens
     },
     ...sharedThemeConfig
 };
 const darkTheme = {
     token: {
-        ...figmaToAntDesignTokens.darkMode,
+        ...getTokensByTheme(antdColorTokens, "dark"),
         ...sharedTokens
     },
     ...sharedThemeConfig
@@ -326,7 +465,7 @@ const IconButtonImpl = (props, ref)=>{
         ...elementProps,
         children: children
     });
-    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__["default"], {
+    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Tooltip, {
         title: label,
         arrow: false,
         ...tooltipProps,
@@ -386,14 +525,17 @@ var constants_ModalSize = /*#__PURE__*/ function(ModalSize) {
     return ModalSize;
 }({});
 "use client";
-const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, style, styles, classNames, okButtonProps, cancelButtonProps, loading, onOk, onCancel, onClose, okText, okType = "primary", confirmLoading, cancelText = "Close", hideOkButton = false, hideCancelButton = false, contentPadding, title, afterTitle, beforeCloseButton, afterCloseButton, defaultFixedHeaderFooter = false, centered = true, type = "default", defaultOpen = true, ...rest })=>{
+const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer, width, style, styles, classNames, okButtonProps, cancelButtonProps, loading, onOk, onCancel, okText, okType = "primary", confirmLoading, cancelText = "Close", hideOkButton = false, hideCancelButton = false, contentPadding, title, afterTitle, beforeCloseButton, afterCloseButton, defaultFixedHeaderFooter = false, centered = true, type = "default", defaultOpen = true, background: backgroundProp, bodyScrollable = true, ...rest })=>{
     const defaultCloseIcon = void 0 === closeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.X, {
         size: 16,
         weight: "bold"
     }) : closeIcon;
     const defaultModalSize = "default" === type ? "medium" : "xsmall";
-    const modalWidth = width || size && size in constants_ModalSize ? constants_ModalSize[size] : constants_ModalSize[defaultModalSize];
+    const size = sizeProp || defaultModalSize;
+    const modalWidth = width || constants_ModalSize[size];
+    const background = backgroundProp || (size && size in constants_ModalSize && parseInt(constants_ModalSize[size]) <= parseInt(constants_ModalSize.medium) ? "elevated" : "container");
     const modalStyle = {
+        "--ds-modal-bg": `var(--ds-color-bg-${background})`,
         ...style,
         ..."fullscreen" === size ? {
             top: 0,
@@ -410,7 +552,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, s
             ...null == styles ? void 0 : styles.body
         }
     };
-    const [scrollable, setScrollable] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [isContentOverflow, setIsContentOverflow] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const cls = useCls();
     const resizeObserverRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const modalInnerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((node)=>{
@@ -419,12 +561,12 @@ const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, s
         if (!(modalBody instanceof HTMLElement)) return;
         const resizeObserver = new ResizeObserver(()=>{
             const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;
-            setScrollable(hasOverflow);
+            setIsContentOverflow(hasOverflow);
         });
         resizeObserverRef.current = resizeObserver;
         resizeObserver.observe(modalBody);
         const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;
-        setScrollable(hasOverflow);
+        setIsContentOverflow(hasOverflow);
     }, [
         cls
     ]);
@@ -467,7 +609,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, s
     });
     const renderTitle = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
             children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Flex, {
                     align: "center",
                     gap: 8,
                     className: cls("modal-title-wrapper"),
@@ -500,7 +642,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, s
         title: renderTitle(),
         classNames: {
             ...classNames,
-            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", scrollable && "modal-scrollable", (defaultFixedHeaderFooter || scrollable || "fullscreen" == size) && "modal-fixed")
+            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", isContentOverflow && "modal-content-overflow", false === bodyScrollable && "modal-no-body-scroll", (defaultFixedHeaderFooter || isContentOverflow || "fullscreen" == size) && "modal-fixed")
         },
         styles: modalStyles,
         modalRender: (modal)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -720,7 +862,10 @@ const ScrollArea = ({ children, className, viewportClassName, thumbClassName, sc
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Viewport, {
                 className: clsx(cls("scroll-area-viewport"), viewportClassName),
-                children: children
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Content, {
+                    className: clsx(cls("scroll-area-content")),
+                    children: children
+                })
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Scrollbar, {
                 className: clsx(cls("scroll-area-scrollbar"), scrollbarClassName),
@@ -1006,17 +1151,29 @@ const Toast = Object.assign(InnerToast, {
     List: ToastList,
     Provider: ToastProvider
 });
-const DSRoot = ({ className, appendClassesTo = "html", children, ...props })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ThemeProvider, {
-        ...props,
-        appendClassesTo: appendClassesTo,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_app_App_698582f4__["default"], {
-            className: className,
-            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toast.Provider, {
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Modal_Modal.Provider, {
-                    children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toast.List, {}),
-                        children
-                    ]
+"use client";
+const DSRootContext = __WEBPACK_EXTERNAL_MODULE_react__["default"].createContext({
+    theme: "light"
+});
+const DSRootContextProvider = DSRootContext.Provider;
+"use client";
+const DSRoot = ({ className, appendClassesTo = "html", children, theme, ...props })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DSRootContextProvider, {
+        value: {
+            theme: theme
+        },
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ThemeProvider, {
+            theme: theme,
+            ...props,
+            appendClassesTo: appendClassesTo,
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_app_App_698582f4__["default"], {
+                className: className,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toast.Provider, {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Modal_Modal.Provider, {
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toast.List, {}),
+                            children
+                        ]
+                    })
                 })
             })
         })

package/dist/DropdownMenu.js

@@ -139,7 +139,12 @@ const DropdownMenu = ({ children, items, placement, openOnHover, open: outsideOp
                                             className: clsx(cls("dropdown-menu-item")),
                                             disabled: item.disabled,
                                             "data-danger": item.danger,
+                                            ref: item.ref,
                                             onClick: item.onClick,
+                                            onMouseEnter: item.onMouseEnter,
+                                            onMouseLeave: item.onMouseLeave,
+                                            onMouseOver: item.onMouseOver,
+                                            onMouseOut: item.onMouseOut,
                                             children: [
                                                 item.icon && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                                                     className: cls("dropdown-menu-item-icon"),
@@ -203,4 +208,4 @@ const WithAntdTokens = ({ as: Tag = "div", ref, className, ...rest })=>{
     });
     return renderElement();
 };
-export { DropdownMenu, WithAntdTokens, clsx, cn, cx, isTracebackError, reactNodeToString, useAntdCssVarClassname, useCls, useGetPrefixCls };
+export { DropdownMenu, WithAntdTokens, clsx, cn, cx, isTracebackError, parseAntdPlacement, reactNodeToString, useAntdCssVarClassname, useCls, useGetPrefixCls };

package/dist/Field.js

@@ -1,8 +1,5 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import "antd/es/select/style/css";
-import "antd/es/input/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__ from "antd/es/select";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__ from "antd/es/input";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__ from "antd/es/config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
@@ -37,13 +34,13 @@ const FieldInner = ({ label, className, size = "small", colon = true, type = "in
     const id = (0, __WEBPACK_EXTERNAL_MODULE_react__.useId)();
     const cssVarClassname = useAntdCssVarClassname();
     const renderInputOrSelect = ()=>{
-        if ("select" === type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__["default"], {
+        if ("select" === type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Select, {
             id: id,
             ref: ref,
             size: size,
             ...rest.selectProps || {}
         });
-        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"], {
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input, {
             id: id,
             ref: ref,
             size: size,

package/dist/Form.js

@@ -7,8 +7,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_antd_es_form_hooks_useFormInstance_2ae8658
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_form_FormItem_940c64da__ from "antd/es/form/FormItem";
 import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@bioturing/assets";
-import "antd/es/tooltip/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__ from "antd/es/tooltip";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__ from "antd/es/config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
 import "tailwind-merge";
@@ -79,7 +78,7 @@ const IconButtonImpl = (props, ref)=>{
         ...elementProps,
         children: children
     });
-    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__["default"], {
+    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Tooltip, {
         title: label,
         arrow: false,
         ...tooltipProps,

package/dist/IconButton.js

@@ -1,7 +1,6 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import "antd/es/tooltip/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__ from "antd/es/tooltip";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__ from "antd/es/config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
 import "tailwind-merge";
@@ -72,7 +71,7 @@ const IconButtonImpl = (props, ref)=>{
         ...elementProps,
         children: children
     });
-    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__["default"], {
+    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Tooltip, {
         title: label,
         arrow: false,
         ...tooltipProps,