@bioturing/components 0.13.2 → 0.14.0

package/dist/Toast.js

@@ -6,12 +6,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import "tailwind-merge";
 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";
@@ -91,7 +88,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,
@@ -151,14 +148,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,
@@ -175,7 +175,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)=>{
@@ -184,12 +184,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
     ]);
@@ -232,7 +232,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"),
@@ -265,7 +265,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", {
@@ -485,7 +485,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),
@@ -504,134 +507,276 @@ const MainSegmentedInner = ({ className, ...rest }, ref)=>/*#__PURE__*/ (0, __WE
     });
 const MainSegmented = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(MainSegmentedInner);
 const Segmented = MainSegmented;
-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 = {
@@ -652,7 +797,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 = {
@@ -693,14 +838,14 @@ const sharedThemeConfig = {
 };
 const lightTheme = {
     token: {
-        ...figmaToAntDesignTokens.lightMode,
+        ...getTokensByTheme(antdColorTokens, "light"),
         ...sharedTokens
     },
     ...sharedThemeConfig
 };
 const darkTheme = {
     token: {
-        ...figmaToAntDesignTokens.darkMode,
+        ...getTokensByTheme(antdColorTokens, "dark"),
         ...sharedTokens
     },
     ...sharedThemeConfig

package/dist/Upload.js

@@ -8,8 +8,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "an
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__ from "antd/es/flex";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_progress_da1757d8__ from "antd/es/progress";
-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__base_ui_components_react_5aaa6934__ from "@base-ui-components/react";
 const ButtonInner = ({ style, ...rest }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_button_8f463bb4__["default"], {
         ref: ref,
@@ -50,6 +49,48 @@ const useCls = ()=>{
     const { getPrefixCls } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__["default"].ConfigContext);
     return (...args)=>cx(...args).map((cls)=>getPrefixCls(cls)).join(" ");
 };
+function splitCamelCase(text) {
+    const result = [];
+    let currentWord = "";
+    for (const char of text)if (char >= "A" && char <= "Z") {
+        if (currentWord) result.push(currentWord);
+        currentWord = char.toLowerCase();
+    } else currentWord += char;
+    if (currentWord) result.push(currentWord);
+    return result.length > 0 ? result : [
+        text
+    ];
+}
+const parseAntdPlacement = (placement = "bottomLeft")=>{
+    const [position1, position2] = splitCamelCase(placement);
+    let primaryPlacement;
+    let align = "center";
+    if ("top" === position1 || "bottom" === position1) {
+        primaryPlacement = position1;
+        if (position2) switch(position2){
+            case "left":
+                align = "start";
+                break;
+            case "right":
+                align = "end";
+                break;
+        }
+    } else if ("left" === position1 || "right" === position1) {
+        primaryPlacement = position1;
+        if (position2) switch(position2){
+            case "top":
+                align = "start";
+                break;
+            case "bottom":
+                align = "end";
+                break;
+        }
+    } else primaryPlacement = "bottom";
+    return {
+        placement: primaryPlacement,
+        align
+    };
+};
 "use client";
 const IconButtonImpl = (props, ref)=>{
     const { label, size = "medium", negativeMargin = true, children, className, tooltipProps = {}, as, href, target, rel, download, hrefLang, referrerPolicy, ...rest } = props;
@@ -96,7 +137,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,
@@ -416,4 +457,4 @@ const WithAntdTokens = ({ as: Tag = "div", ref, className, ...rest })=>{
     });
     return renderElement();
 };
-export { DefaultUpload, Upload, WithAntdTokens, clsx, cn, cx, isTracebackError, reactNodeToString, useAntdCssVarClassname, useCls, useGetPrefixCls, useUploadItemRender };
+export { DefaultUpload, Upload, WithAntdTokens, clsx, cn, cx, isTracebackError, parseAntdPlacement, reactNodeToString, useAntdCssVarClassname, useCls, useGetPrefixCls, useUploadItemRender };

package/dist/VerticalCollapsiblePanel.js

@@ -9,8 +9,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_use_render_2fb9d
 import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b69945__ from "@base-ui-components/react/merge-props";
 import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_utils_d48cdb94__ from "@base-ui-components/react/utils";
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__ from "react-dom";
-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";
 function cx(...args) {
     const classes = [];
     for (const arg of args)if (arg) {
@@ -184,7 +183,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/components/{src/components/DSRoot → DSRoot}/component.d.ts

@@ -10,4 +10,4 @@ export interface DSRootProps extends ThemeProviderProps {
      */
     appendClassesTo?: string | HTMLElement;
 }
-export declare const DSRoot: ({ className, appendClassesTo, children, ...props }: DSRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DSRoot: ({ className, appendClassesTo, children, theme, ...props }: DSRootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DSRoot/context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const DSRootContextProvider: React.Provider<{
+    theme: "light" | "dark";
+}>;
+export declare const useDS: () => {
+    theme: "light" | "dark";
+};

package/dist/components/{src/components/DropdownMenu → DropdownMenu}/component.d.ts

@@ -6,8 +6,13 @@ export type DropdownMenuItemType = {
     disabled?: boolean;
     icon?: React.ReactNode;
     key: React.Key;
-    onClick?: React.ButtonHTMLAttributes<HTMLLIElement>["onClick"];
+    onClick?: React.HTMLAttributes<HTMLElement>["onClick"];
+    onMouseEnter?: React.HTMLAttributes<HTMLElement>["onMouseEnter"];
+    onMouseLeave?: React.HTMLAttributes<HTMLElement>["onMouseLeave"];
+    onMouseOver?: React.HTMLAttributes<HTMLElement>["onMouseOver"];
+    onMouseOut?: React.HTMLAttributes<HTMLElement>["onMouseOut"];
     danger?: boolean;
+    ref?: React.Ref<HTMLElement>;
 } | {
     type: "divider";
 } | {