@bioturing/components 0.13.2 → 0.14.0

package/dist/index.js

@@ -4,22 +4,19 @@ import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@biotur
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__ from "antd/es/select";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_checkbox_80658bc3__ from "antd/es/checkbox";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__ from "@floating-ui/react";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_es_toolkit_82663681__ from "es-toolkit";
 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_config_provider_6a57beb3__ from "antd/es/config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 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";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalOkBtn_897b50c4__ from "antd/es/modal/components/NormalOkBtn";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_locale_f16c0933__ from "antd/es/modal/locale";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_locale_31079002__ from "antd/es/locale";
-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_es_switch_101feb97__ from "antd/es/switch";
-import "antd/es/checkbox/style/css";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_segmented_6dbdbe23__ from "antd/es/segmented";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_table_8c9fc42b__ from "antd/es/table";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_empty_5eb61431__ from "antd/es/empty";
@@ -35,9 +32,11 @@ import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b6
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__ from "react-dom";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_upload_29096ddd__ from "antd/es/upload";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_button_8f463bb4__ from "antd/es/button";
+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 * as __WEBPACK_EXTERNAL_MODULE_antd_es_popover_ff5d0161__ from "antd/es/popover";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_slider_a2f2f6f0__ from "antd/es/slider";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__ from "antd/es/tooltip";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_breadcrumb_524ec91e__ from "antd/es/breadcrumb";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_breadcrumb_useItemRender_afeae2fe__ from "antd/es/breadcrumb/useItemRender";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_tree_05ca9855__ from "antd/es/tree";
@@ -48,28 +47,116 @@ import * as __WEBPACK_EXTERNAL_MODULE_antd_es_form_FormList_8c66a51b__ from "ant
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_form_context_0a1516eb__ from "antd/es/form/context";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_form_hooks_useFormInstance_2ae86589__ from "antd/es/form/hooks/useFormInstance";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_form_FormItem_940c64da__ from "antd/es/form/FormItem";
-import "antd/es/select/style/css";
-import "antd/es/input/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__ from "antd/es/input";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_tour_6998cb50__ from "antd/es/tour";
 import * as __WEBPACK_EXTERNAL_MODULE_prism_react_renderer_be33806e__ from "prism-react-renderer";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__ from "@base-ui-components/react/popover";
+import * as __WEBPACK_EXTERNAL_MODULE_react_use_resizable_ad29d4b1__ from "react-use-resizable";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_badge_f5f828f9__ from "antd/es/badge";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_radio_e6b5c17a__ from "antd/es/radio";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_app_App_698582f4__ from "antd/es/app/App";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_57fdaa32__ from "antd/es/theme";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_grid_ec1d1712__ from "antd/es/grid";
-const MainSelectInner = ({ mode, className, popupClassName, ...rest }, ref)=>{
+"use client";
+function useControlledState(value, onChange, defaultValue) {
+    const [internalState, setInternalState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultValue);
+    const isControlled = void 0 !== value;
+    const setState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((next)=>{
+        const nextValue = "function" == typeof next ? next(value) : next;
+        if ("function" == typeof onChange) onChange(nextValue);
+        if (!isControlled) setInternalState(next);
+    }, [
+        value,
+        onChange,
+        isControlled
+    ]);
+    const state = isControlled ? value : internalState;
+    return [
+        state,
+        setState
+    ];
+}
+function cx(...args) {
+    const classes = [];
+    for (const arg of args)if (arg) {
+        if ("string" == typeof arg || "number" == typeof arg) classes.push(String(arg));
+        else if (Array.isArray(arg)) classes.push(...cx(...arg));
+        else if ("object" == typeof arg) {
+            for (const [key, value] of Object.entries(arg))if (value) classes.push(key);
+        }
+    }
+    return classes;
+}
+function clsx(...args) {
+    return cx(...args).join(" ");
+}
+function cn(...args) {
+    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(cx(...args));
+}
+var constants_PopupPanelSize = /*#__PURE__*/ function(PopupPanelSize) {
+    PopupPanelSize["xsmall"] = "320px";
+    PopupPanelSize["small"] = "400px";
+    PopupPanelSize["medium"] = "480px";
+    PopupPanelSize["large"] = "640px";
+    PopupPanelSize["xlarge"] = "840px";
+    return PopupPanelSize;
+}({});
+const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, classNames, styles = {}, ...rest }, ref)=>{
+    var _classNames_popup;
+    const portalNode = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloatingPortalNode)({});
     const isMultiple = "multiple" === mode || "tags" === mode;
+    const [open, setOpen] = useControlledState(openProp, onOpenChange || onDropdownVisibleChange, defaultOpen);
+    const { floatingStyles, refs } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
+        placement: "bottom-start",
+        transform: false,
+        open: enhancePositioner && open,
+        middleware: [
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.offset)({
+                mainAxis: 4
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoPlacement)({
+                allowedPlacements: [
+                    "bottom-start",
+                    "bottom-end",
+                    "bottom",
+                    "top-start",
+                    "top-end",
+                    "top"
+                ]
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.shift)({
+                padding: 8
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.size)({
+                padding: 8,
+                apply ({ availableHeight, availableWidth, elements }) {
+                    elements.floating.style.setProperty("--available-width", availableWidth + "px");
+                    elements.floating.style.setProperty("--available-height", availableHeight + "px");
+                }
+            })
+        ],
+        whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoUpdate
+    });
+    const dsPopupClassName = clsx("ds-select-popup", isMultiple && "ds-select-multiple", (null == classNames ? void 0 : null == (_classNames_popup = classNames.popup) ? void 0 : _classNames_popup.root) || popupClassName, enhancePositioner && "ds-select-popup-enhanced");
+    const popupWidth = popupSize && "string" == typeof popupSize && popupSize in constants_PopupPanelSize ? constants_PopupPanelSize[popupSize] : "number" == typeof popupSize ? popupSize + "px" : popupSize || "fit-content";
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__["default"], {
-        ref: ref,
+        ref: (node)=>{
+            if (ref) if ("function" == typeof ref) ref(node);
+            else ref.current = node;
+            if (!node) return;
+            refs.setReference(null == node ? void 0 : node.nativeElement);
+        },
         suffixIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.CaretDown, {
             weight: "bold"
         }),
-        popupClassName: [
-            "ds-select-popup",
-            isMultiple && "ds-select-multiple",
-            popupClassName
-        ].filter(Boolean).join(" "),
+        open: open,
+        onOpenChange: setOpen,
+        popupClassName: dsPopupClassName,
+        classNames: {
+            popup: {
+                root: dsPopupClassName
+            },
+            ...classNames
+        },
         ...isMultiple ? {
             menuItemSelectedIcon: ({ isSelected })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                     className: "ant-select-checkbox-indicator",
@@ -81,10 +168,36 @@ const MainSelectInner = ({ mode, className, popupClassName, ...rest }, ref)=>{
                 })
         } : {},
         mode: mode,
-        className: [
-            "ds-select",
-            className
-        ].filter(Boolean).join(" "),
+        className: clsx("ds-select", className),
+        styles: enhancePositioner ? (0, __WEBPACK_EXTERNAL_MODULE_es_toolkit_82663681__.toMerged)(styles, {
+            popup: {
+                root: {
+                    transition: "none",
+                    ...floatingStyles,
+                    "--ds-select-popup-width": popupWidth
+                }
+            }
+        }) : styles,
+        getPopupContainer: getPopupContainer || (enhancePositioner ? ()=>portalNode || document.body : void 0),
+        popupRender: (menu)=>{
+            if (!enhancePositioner) return popupRender ? popupRender(menu) : menu;
+            return /*#__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__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingOverlay, {
+                        lockScroll: true,
+                        onClick: ()=>setOpen(false)
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        ref: (node)=>{
+                            if (!node) return;
+                            const popupEl = node.closest(".ds-select-dropdown");
+                            refs.setFloating(popupEl);
+                        },
+                        children: popupRender ? popupRender(menu) : menu
+                    })
+                ]
+            });
+        },
         ...rest
     });
 };
@@ -93,23 +206,6 @@ const Select = Object.assign(MainSelect, {
     Option: __WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__["default"].Option,
     OptGroup: __WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__["default"].OptGroup
 });
-function cx(...args) {
-    const classes = [];
-    for (const arg of args)if (arg) {
-        if ("string" == typeof arg || "number" == typeof arg) classes.push(String(arg));
-        else if (Array.isArray(arg)) classes.push(...cx(...arg));
-        else if ("object" == typeof arg) {
-            for (const [key, value] of Object.entries(arg))if (value) classes.push(key);
-        }
-    }
-    return classes;
-}
-function clsx(...args) {
-    return cx(...args).join(" ");
-}
-function cn(...args) {
-    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(cx(...args));
-}
 "use client";
 const useGetPrefixCls = ()=>{
     const { getPrefixCls } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__["default"].ConfigContext);
@@ -126,6 +222,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;
@@ -172,7 +310,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,
@@ -191,14 +329,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,
@@ -215,7 +356,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)=>{
@@ -224,12 +365,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
     ]);
@@ -272,7 +413,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"),
@@ -305,7 +446,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", {
@@ -523,13 +664,13 @@ const MainSwitchInner = ({ ...rest }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL
     });
 const MainSwitch = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(MainSwitchInner);
 const Switch = MainSwitch;
-const MainCheckboxInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_checkbox_80658bc3__["default"], {
+const MainCheckboxInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Checkbox, {
         ref: ref,
         ...props
     });
 const MainCheckbox = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(MainCheckboxInner);
 const Checkbox = Object.assign(MainCheckbox, {
-    Group: __WEBPACK_EXTERNAL_MODULE_antd_es_checkbox_80658bc3__["default"].Group
+    Group: __WEBPACK_EXTERNAL_MODULE_antd__.Checkbox.Group
 });
 const MainSegmentedInner = ({ className, ...rest }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_segmented_6dbdbe23__["default"], {
         ref: ref,
@@ -565,7 +706,7 @@ const Empty = ({ image, size = "medium", className, ...rest })=>{
     });
 };
 const Empty_component = Empty;
-const InternalTable = ({ columns, locale, emptyDescription, loading, ...rest })=>{
+const InternalTable = ({ columns, locale, emptyDescription, loading, scroll = {}, ...rest })=>{
     const cls = useCls();
     const modifiedColumns = columns ? columns.map((column)=>({
             sortIcon: ({ sortOrder })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
@@ -619,7 +760,8 @@ const InternalTable = ({ columns, locale, emptyDescription, loading, ...rest })=
         loading: spinProps,
         locale: modifiedLocale,
         scroll: {
-            x: "max-content"
+            x: "fit-content",
+            ...scroll
         },
         ...rest
     });
@@ -654,134 +796,310 @@ const InternalTag = ({ className, active = false, color, style, closeIcon, closa
 const component_Tag = Object.assign(InternalTag, {
     CheckableTag: __WEBPACK_EXTERNAL_MODULE_antd_es_tag_1ccabaea__["default"].CheckableTag
 });
-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 getColorsByTheme = (colorsOrTokens, theme)=>{
+    if (Array.isArray(colorsOrTokens)) return colorsOrTokens.map((color)=>color[theme]);
+    return Object.values(getTokensByTheme(colorsOrTokens, theme));
+};
+function resolveColorTokens(colors) {
+    const resolved = {};
+    const raw = colors;
+    const resolve = (key)=>{
+        if (resolved[key]) return resolved[key];
+        const value = raw[key];
+        if (!value) return {
+            light: "",
+            dark: ""
+        };
+        if ("string" == typeof value) {
+            const match = value.match(/^\{(.+)\}$/);
+            if (!match) throw new Error(`Invalid reference token: ${String(key)}`);
+            const resolvedValue = resolve(match[1]);
+            resolved[key] = resolvedValue;
+            return resolvedValue;
+        }
+        const light = "string" == typeof value.light && /^\{.+\}$/.test(value.light) ? resolve(value.light.slice(1, -1)).light : value.light;
+        const dark = "string" == typeof value.dark && /^\{.+\}$/.test(value.dark) ? resolve(value.dark.slice(1, -1)).dark : value.dark;
+        resolved[key] = {
+            light,
+            dark
+        };
+        return resolved[key];
+    };
+    Object.keys(raw).forEach((key)=>{
+        resolve(key);
+    });
+    return Object.fromEntries(Object.entries(resolved).filter(([_, value])=>value && value.light && value.dark));
+}
+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 = {
@@ -802,7 +1120,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 = {
@@ -843,14 +1161,14 @@ const sharedThemeConfig = {
 };
 const lightTheme = {
     token: {
-        ...figmaToAntDesignTokens.lightMode,
+        ...getTokensByTheme(antdColorTokens, "light"),
         ...sharedTokens
     },
     ...sharedThemeConfig
 };
 const darkTheme = {
     token: {
-        ...figmaToAntDesignTokens.darkMode,
+        ...getTokensByTheme(antdColorTokens, "dark"),
         ...sharedTokens
     },
     ...sharedThemeConfig
@@ -1044,48 +1362,6 @@ const Truncate = ({ children, position = "end", className, style, ...rest })=>{
         })
     });
 };
-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 DropdownMenu = ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange })=>{
     const [open, setOpen] = (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_utils_d48cdb94__.useControlled)({
@@ -1144,7 +1420,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"),
@@ -1445,7 +1726,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),
@@ -1545,25 +1829,6 @@ const Breadcrumb = Object.assign(BreadcrumbInner, {
     Separator
 });
 "use client";
-function useControlledState(value, onChange, defaultValue) {
-    const [internalState, setInternalState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultValue);
-    const isControlled = void 0 !== value;
-    const setState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((next)=>{
-        const nextValue = "function" == typeof next ? next(value) : next;
-        if ("function" == typeof onChange) onChange(nextValue);
-        if (!isControlled) setInternalState(next);
-    }, [
-        value,
-        onChange,
-        isControlled
-    ]);
-    const state = isControlled ? value : internalState;
-    return [
-        state,
-        setState
-    ];
-}
-"use client";
 const getUniqueKeysFromOriginals = (nodes, originalKeysToFind, map)=>{
     if (!nodes) return [];
     let keys = [];
@@ -1887,13 +2152,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,
@@ -2274,7 +2539,182 @@ const VerticalCollapsiblePanel = ({ children, title, defaultOpen = false, open:
         ]
     });
 };
-const MainInputInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"], {
+"use client";
+const PopupPanel = ({ children, placement, openOnHover = false, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger = "click", className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size = "medium", footer, defaultOpen, resizable = false })=>{
+    const [open, setOpen] = useControlledState(outsideOpen, outsideOnOpenChange, defaultOpen ?? false);
+    const cls = useCls();
+    const antdCssVarClassname = useAntdCssVarClassname();
+    const headlessUIPlacement = parseAntdPlacement(placement);
+    const triggerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [popupRef, setPopupRef] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    const [width, setWidth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
+    const [height, setHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
+    const callbackRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((node)=>{
+        setPopupRef(node);
+    }, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!popupRef) return;
+        const observer = new ResizeObserver((entries)=>{
+            for (const entry of entries){
+                setWidth(entry.contentRect.width);
+                setHeight(entry.contentRect.height);
+            }
+        });
+        observer.observe(popupRef);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        popupRef
+    ]);
+    const defaultCloseIcon = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.X, {
+            size: 16
+        }), []);
+    const renderTitle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            className: cls("popup-panel-header"),
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+                    align: "center",
+                    gap: 8,
+                    className: cls("popup-panel-title-wrapper"),
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Title, {
+                            render: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("grow", "truncate"),
+                                children: title
+                            })
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                beforeCloseButton,
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Close, {
+                                    render: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconButton, {
+                                        children: defaultCloseIcon
+                                    })
+                                }),
+                                afterCloseButton
+                            ]
+                        })
+                    ]
+                }),
+                afterTitle ? afterTitle : null
+            ]
+        }), [
+        afterCloseButton,
+        afterTitle,
+        beforeCloseButton,
+        cls,
+        defaultCloseIcon,
+        title
+    ]);
+    const [resizing, setResizing] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const { getRootProps, getHandleProps, rootRef } = (0, __WEBPACK_EXTERNAL_MODULE_react_use_resizable_ad29d4b1__.useResizable)({
+        initialWidth: width,
+        initialHeight: height,
+        onDragStart: ()=>setResizing(true),
+        onDragEnd: ()=>setResizing(false)
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (resizing) document.body.style.userSelect = "none";
+        else document.body.style.userSelect = "";
+    }, [
+        resizing
+    ]);
+    const onReverseHandleChangeVertical = (parent, values)=>{
+        if (!parent.current) return;
+        const { heightDiff } = values;
+        parent.current.style.top = `${parseInt(parent.current.style.top || "0") - heightDiff}px`;
+    };
+    const onReverseHandleChangeHorizontal = (parent, values)=>{
+        if (!parent.current) return;
+        const { widthDiff } = values;
+        parent.current.style.left = `${parseInt(parent.current.style.left || "0") - widthDiff}px`;
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Root, {
+        openOnHover: "hover" === trigger ? true : openOnHover,
+        open: open,
+        onOpenChange: (newOpen)=>{
+            setOpen(newOpen);
+        },
+        delay: 100,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Trigger, {
+                render: children,
+                ref: triggerRef
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Portal, {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Positioner, {
+                    className: cls("popup-panel-root"),
+                    side: headlessUIPlacement.placement,
+                    align: headlessUIPlacement.align,
+                    sideOffset: 4,
+                    anchor: anchor,
+                    style: {
+                        "--size-width": size ? constants_PopupPanelSize[size] : void 0
+                    },
+                    ref: callbackRef,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Popup, {
+                        className: clsx(cls("popup-panel"), antdCssVarClassname, className),
+                        ...getRootProps(),
+                        ...resizing ? {
+                            "data-resizing": true
+                        } : {},
+                        children: [
+                            title && renderTitle(),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("popup-panel-content"),
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                    className: cls("popup-panel-content-inner"),
+                                    children: content
+                                })
+                            }),
+                            footer && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("popup-panel-footer"),
+                                children: "function" == typeof footer ? footer({
+                                    close: ()=>setOpen(false)
+                                }) : footer
+                            }),
+                            resizable && /*#__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__.jsx)("div", {
+                                        className: cls("resize-handle-top"),
+                                        ...getHandleProps({
+                                            reverse: true,
+                                            lockHorizontal: true,
+                                            onResize: (values)=>onReverseHandleChangeVertical(rootRef, values)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-bottom"),
+                                        ...getHandleProps({
+                                            lockHorizontal: true
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-left"),
+                                        ...getHandleProps({
+                                            reverse: true,
+                                            lockVertical: true,
+                                            onResize: (values)=>onReverseHandleChangeHorizontal(rootRef, values)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-right"),
+                                        ...getHandleProps({
+                                            lockVertical: true
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+const MainInputInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input, {
         ref: ref,
         ...props
     });
@@ -2287,7 +2727,7 @@ const PasswordInner = (props, ref)=>{
             }),
         ...props
     };
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"].Password, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input.Password, {
         ref: ref,
         ...mergedProps
     });
@@ -2299,12 +2739,12 @@ const SearchInner = (props, ref)=>{
         }) : props.enterButton,
         ...props
     };
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"].Search, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input.Search, {
         ref: ref,
         ...mergedProps
     });
 };
-const TextAreaInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"].TextArea, {
+const TextAreaInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input.TextArea, {
         ref: ref,
         ...props
     });
@@ -2347,17 +2787,30 @@ const Radio = Object.assign(ForwardedRadio, {
     Group: RadioGroup,
     Button: RadioButton
 });
-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;
+const useDS = ()=>__WEBPACK_EXTERNAL_MODULE_react__["default"].useContext(DSRootContext);
+"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
+                        ]
+                    })
                 })
             })
         })
@@ -2373,6 +2826,498 @@ const antd_useModal = ()=>{
     const { modal } = (0, __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d95086__["default"])();
     return modal;
 };
+const rawChartColorTokens = {
+    colorChartsRed300: {
+        light: "#ea7158",
+        dark: "#d63f38"
+    },
+    colorChartsRed400: {
+        light: "#dc5032",
+        dark: "#ed5958"
+    },
+    colorChartsRed500: {
+        light: "#d13313",
+        dark: "#fe6e73"
+    },
+    colorChartsRed600: {
+        light: "#ba2e0f",
+        dark: "#ff8a8a"
+    },
+    colorChartsRed700: {
+        light: "#a82a0c",
+        dark: "#ffa09e"
+    },
+    colorChartsRed800: {
+        light: "#972709",
+        dark: "#ffb3b0"
+    },
+    colorChartsRed900: {
+        light: "#892407",
+        dark: "#ffc4c0"
+    },
+    colorChartsRed1000: {
+        light: "#7d2105",
+        dark: "#ffd2cf"
+    },
+    colorChartsRed1100: {
+        light: "#721e03",
+        dark: "#ffe0dd"
+    },
+    colorChartsRed1200: {
+        light: "#671c00",
+        dark: "#ffecea"
+    },
+    colorChartsOrange300: {
+        light: "#e07941",
+        dark: "#c55305"
+    },
+    colorChartsOrange400: {
+        light: "#cc5f21",
+        dark: "#de6923"
+    },
+    colorChartsOrange500: {
+        light: "#bc4d01",
+        dark: "#f27c36"
+    },
+    colorChartsOrange600: {
+        light: "#a84401",
+        dark: "#f89256"
+    },
+    colorChartsOrange700: {
+        light: "#983c02",
+        dark: "#fca572"
+    },
+    colorChartsOrange800: {
+        light: "#8a3603",
+        dark: "#ffb68b"
+    },
+    colorChartsOrange900: {
+        light: "#7e3103",
+        dark: "#ffc6a4"
+    },
+    colorChartsOrange1000: {
+        light: "#732c02",
+        dark: "#ffd4bb"
+    },
+    colorChartsOrange1100: {
+        light: "#692801",
+        dark: "#ffe1cf"
+    },
+    colorChartsOrange1200: {
+        light: "#602400",
+        dark: "#ffede2"
+    },
+    colorChartsYellow300: {
+        light: "#b2911c",
+        dark: "#977001"
+    },
+    colorChartsYellow400: {
+        light: "#9c7b0b",
+        dark: "#b08400"
+    },
+    colorChartsYellow500: {
+        light: "#8a6b05",
+        dark: "#c59600"
+    },
+    colorChartsYellow600: {
+        light: "#7b5f04",
+        dark: "#d3a61c"
+    },
+    colorChartsYellow700: {
+        light: "#6f5504",
+        dark: "#dfb52c"
+    },
+    colorChartsYellow800: {
+        light: "#654d03",
+        dark: "#eac33a"
+    },
+    colorChartsYellow900: {
+        light: "#5d4503",
+        dark: "#f1cf65"
+    },
+    colorChartsYellow1000: {
+        light: "#553f03",
+        dark: "#f7db8a"
+    },
+    colorChartsYellow1100: {
+        light: "#4d3901",
+        dark: "#fce5a8"
+    },
+    colorChartsYellow1200: {
+        light: "#483300",
+        dark: "#ffefc9"
+    },
+    colorChartsGreen300: {
+        light: "#67a353",
+        dark: "#48851a"
+    },
+    colorChartsGreen400: {
+        light: "#41902c",
+        dark: "#5a9b29"
+    },
+    colorChartsGreen500: {
+        light: "#1f8104",
+        dark: "#69ae34"
+    },
+    colorChartsGreen600: {
+        light: "#1a7302",
+        dark: "#7dbd4c"
+    },
+    colorChartsGreen700: {
+        light: "#176702",
+        dark: "#8fca61"
+    },
+    colorChartsGreen800: {
+        light: "#145d02",
+        dark: "#9fd673"
+    },
+    colorChartsGreen900: {
+        light: "#125502",
+        dark: "#b2df8d"
+    },
+    colorChartsGreen1000: {
+        light: "#104d01",
+        dark: "#c5e7a8"
+    },
+    colorChartsGreen1100: {
+        light: "#0f4601",
+        dark: "#d5efbe"
+    },
+    colorChartsGreen1200: {
+        light: "#0d4000",
+        dark: "#e4f7d5"
+    },
+    colorChartsTeal300: {
+        light: "#2ea597",
+        dark: "#018977"
+    },
+    colorChartsTeal400: {
+        light: "#1c8e81",
+        dark: "#009d89"
+    },
+    colorChartsTeal500: {
+        light: "#0d7d70",
+        dark: "#00b09b"
+    },
+    colorChartsTeal600: {
+        light: "#096f64",
+        dark: "#40bfa9"
+    },
+    colorChartsTeal700: {
+        light: "#06645a",
+        dark: "#5fccb7"
+    },
+    colorChartsTeal800: {
+        light: "#045b52",
+        dark: "#77d7c3"
+    },
+    colorChartsTeal900: {
+        light: "#03524a",
+        dark: "#94e0d0"
+    },
+    colorChartsTeal1000: {
+        light: "#014b44",
+        dark: "#ace9db"
+    },
+    colorChartsTeal1100: {
+        light: "#01443e",
+        dark: "#c2f0e6"
+    },
+    colorChartsTeal1200: {
+        light: "#003e38",
+        dark: "#d7f7f0"
+    },
+    colorChartsBlue1300: {
+        light: "#529ccb",
+        dark: "#00819c"
+    },
+    colorChartsBlue1400: {
+        light: "#3184c2",
+        dark: "#0497ba"
+    },
+    colorChartsBlue1500: {
+        light: "#0273bb",
+        dark: "#08aad2"
+    },
+    colorChartsBlue1600: {
+        light: "#0166ab",
+        dark: "#44b9dd"
+    },
+    colorChartsBlue1700: {
+        light: "#015b9d",
+        dark: "#63c6e7"
+    },
+    colorChartsBlue1800: {
+        light: "#015292",
+        dark: "#79d2f0"
+    },
+    colorChartsBlue1900: {
+        light: "#014a87",
+        dark: "#98dcf5"
+    },
+    colorChartsBlue11000: {
+        light: "#01437d",
+        dark: "#b3e4f8"
+    },
+    colorChartsBlue11100: {
+        light: "#003c75",
+        dark: "#caedfc"
+    },
+    colorChartsBlue11200: {
+        light: "#00366d",
+        dark: "#ddf4ff"
+    },
+    colorChartsBlue2300: {
+        light: "#688ae8",
+        dark: "#486de8"
+    },
+    colorChartsBlue2400: {
+        light: "#5978e3",
+        dark: "#6384f5"
+    },
+    colorChartsBlue2500: {
+        light: "#4066df",
+        dark: "#7698fe"
+    },
+    colorChartsBlue2600: {
+        light: "#3759ce",
+        dark: "#8ea9ff"
+    },
+    colorChartsBlue2700: {
+        light: "#314fbf",
+        dark: "#a2b8ff"
+    },
+    colorChartsBlue2800: {
+        light: "#2c46b1",
+        dark: "#b1c5ff"
+    },
+    colorChartsBlue2900: {
+        light: "#273ea5",
+        dark: "#c3d1ff"
+    },
+    colorChartsBlue21000: {
+        light: "#23379b",
+        dark: "#d2dcff"
+    },
+    colorChartsBlue21100: {
+        light: "#1f3191",
+        dark: "#dfe6ff"
+    },
+    colorChartsBlue21200: {
+        light: "#1b2b88",
+        dark: "#ecf0ff"
+    },
+    colorChartsPurple300: {
+        light: "#a783e1",
+        dark: "#8d59de"
+    },
+    colorChartsPurple400: {
+        light: "#9469d6",
+        dark: "#a173ea"
+    },
+    colorChartsPurple500: {
+        light: "#8456ce",
+        dark: "#b088f5"
+    },
+    colorChartsPurple600: {
+        light: "#7749bf",
+        dark: "#bf9bf9"
+    },
+    colorChartsPurple700: {
+        light: "#6b40b2",
+        dark: "#cbabfc"
+    },
+    colorChartsPurple800: {
+        light: "#6237a7",
+        dark: "#d6baff"
+    },
+    colorChartsPurple900: {
+        light: "#59309d",
+        dark: "#dfc8ff"
+    },
+    colorChartsPurple1000: {
+        light: "#512994",
+        dark: "#e8d5ff"
+    },
+    colorChartsPurple1100: {
+        light: "#4a238b",
+        dark: "#efe2ff"
+    },
+    colorChartsPurple1200: {
+        light: "#431d84",
+        dark: "#f5edff"
+    },
+    colorChartsPink300: {
+        light: "#da7596",
+        dark: "#c64a70"
+    },
+    colorChartsPink400: {
+        light: "#ce567c",
+        dark: "#d56889"
+    },
+    colorChartsPink500: {
+        light: "#c33d69",
+        dark: "#e07f9d"
+    },
+    colorChartsPink600: {
+        light: "#b1325c",
+        dark: "#eb92ad"
+    },
+    colorChartsPink700: {
+        light: "#a32952",
+        dark: "#f5a2bb"
+    },
+    colorChartsPink800: {
+        light: "#962249",
+        dark: "#ffb0c8"
+    },
+    colorChartsPink900: {
+        light: "#8b1b42",
+        dark: "#ffc1d4"
+    },
+    colorChartsPink1000: {
+        light: "#81143b",
+        dark: "#ffd1de"
+    },
+    colorChartsPink1100: {
+        light: "#780d35",
+        dark: "#ffdfe8"
+    },
+    colorChartsPink1200: {
+        light: "#6f062f",
+        dark: "#ffecf1"
+    },
+    colorChartsStatusCritical: {
+        light: "{colorChartsRed1000}",
+        dark: "{colorChartsRed300}"
+    },
+    colorChartsStatusHigh: {
+        light: "{colorChartsRed600}",
+        dark: "{colorChartsRed500}"
+    },
+    colorChartsStatusMedium: {
+        light: "{colorChartsOrange400}",
+        dark: "{colorChartsOrange600}"
+    },
+    colorChartsStatusLow: {
+        light: "{colorChartsYellow300}",
+        dark: "{colorChartsYellow700}"
+    },
+    colorChartsStatusPositive: {
+        light: "{colorChartsGreen300}",
+        dark: "{colorChartsGreen500}"
+    },
+    colorChartsStatusInfo: {
+        light: "{colorChartsBlue1400}",
+        dark: "{colorChartsBlue1500}"
+    },
+    colorChartsStatusNeutral: antdColorTokens.colorTextSecondary,
+    colorChartsThresholdNegative: antdColorTokens.colorError,
+    colorChartsThresholdPositive: antdColorTokens.colorSuccess,
+    colorChartsThresholdInfo: antdColorTokens.colorInfo,
+    colorChartsThresholdNeutral: antdColorTokens.colorTextTertiary,
+    colorChartsLineGrid: {
+        light: "#DADADC",
+        dark: "#434347"
+    },
+    colorChartsLineTick: "{colorChartsLineGrid}",
+    colorChartsLineAxis: {
+        light: "#C8C8CB",
+        dark: "#73737A"
+    },
+    colorChartsLabelAxis: {
+        light: "#7C7C83",
+        dark: "#898990"
+    },
+    colorChartsPaletteCategorical1: "{colorChartsBlue2300}",
+    colorChartsPaletteCategorical2: "{colorChartsPink500}",
+    colorChartsPaletteCategorical3: "{colorChartsTeal300}",
+    colorChartsPaletteCategorical4: "{colorChartsPurple500}",
+    colorChartsPaletteCategorical5: "{colorChartsOrange300}",
+    colorChartsPaletteCategorical6: "{colorChartsBlue2600}",
+    colorChartsPaletteCategorical7: "{colorChartsPink800}",
+    colorChartsPaletteCategorical8: "{colorChartsTeal600}",
+    colorChartsPaletteCategorical9: "{colorChartsPurple800}",
+    colorChartsPaletteCategorical10: "{colorChartsOrange600}",
+    colorChartsPaletteCategorical11: "{colorChartsBlue2900}",
+    colorChartsPaletteCategorical12: "{colorChartsPink1100}",
+    colorChartsPaletteCategorical13: "{colorChartsTeal900}",
+    colorChartsPaletteCategorical14: "{colorChartsPurple1100}",
+    colorChartsPaletteCategorical15: "{colorChartsOrange900}",
+    colorChartsPaletteCategorical16: "{colorChartsBlue21200}",
+    colorChartsPaletteCategorical17: "{colorChartsPink400}",
+    colorChartsPaletteCategorical18: "{colorChartsTeal1200}",
+    colorChartsPaletteCategorical19: "{colorChartsPurple400}",
+    colorChartsPaletteCategorical20: "{colorChartsOrange1200}",
+    colorChartsPaletteCategorical21: "{colorChartsBlue2500}",
+    colorChartsPaletteCategorical22: "{colorChartsPink700}",
+    colorChartsPaletteCategorical23: "{colorChartsTeal500}",
+    colorChartsPaletteCategorical24: "{colorChartsPurple700}",
+    colorChartsPaletteCategorical25: "{colorChartsOrange500}",
+    colorChartsPaletteCategorical26: "{colorChartsBlue2800}",
+    colorChartsPaletteCategorical27: "{colorChartsPink1000}",
+    colorChartsPaletteCategorical28: "{colorChartsTeal800}",
+    colorChartsPaletteCategorical29: "{colorChartsPurple1000}",
+    colorChartsPaletteCategorical30: "{colorChartsOrange800}",
+    colorChartsPaletteCategorical31: "{colorChartsBlue21100}",
+    colorChartsPaletteCategorical32: "{colorChartsPink300}",
+    colorChartsPaletteCategorical33: "{colorChartsTeal1100}",
+    colorChartsPaletteCategorical34: "{colorChartsPurple300}",
+    colorChartsPaletteCategorical35: "{colorChartsOrange1100}",
+    colorChartsPaletteCategorical36: "{colorChartsBlue2400}",
+    colorChartsPaletteCategorical37: "{colorChartsPink600}",
+    colorChartsPaletteCategorical38: "{colorChartsTeal400}",
+    colorChartsPaletteCategorical39: "{colorChartsPurple600}",
+    colorChartsPaletteCategorical40: "{colorChartsOrange400}",
+    colorChartsPaletteCategorical41: "{colorChartsBlue2700}",
+    colorChartsPaletteCategorical42: "{colorChartsPink900}",
+    colorChartsPaletteCategorical43: "{colorChartsTeal700}",
+    colorChartsPaletteCategorical44: "{colorChartsPurple900}",
+    colorChartsPaletteCategorical45: "{colorChartsOrange700}",
+    colorChartsPaletteCategorical46: "{colorChartsBlue21000}",
+    colorChartsPaletteCategorical47: "{colorChartsPink1200}",
+    colorChartsPaletteCategorical48: "{colorChartsTeal1000}",
+    colorChartsPaletteCategorical49: "{colorChartsPurple1200}",
+    colorChartsPaletteCategorical50: "{colorChartsOrange1000}"
+};
+const chartColorTokens = resolveColorTokens(rawChartColorTokens);
+const categoricalChartColorKeys = Object.keys(chartColorTokens).filter((key)=>key.startsWith("colorChartsPaletteCategorical"));
+const categoricalChartColorTokens = categoricalChartColorKeys.reduce((acc, key)=>{
+    acc[key] = chartColorTokens[key];
+    return acc;
+}, {});
+const categoricalChartsColors = categoricalChartColorKeys.map((key)=>chartColorTokens[key]);
+const useCharts = ()=>{
+    const { theme } = useDS();
+    const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);
+    const axisLineColor = themedChartColorTokens["colorChartsLineAxis"];
+    const splitLineColor = themedChartColorTokens["colorChartsLineGrid"];
+    const axisLabelColor = themedChartColorTokens["colorChartsLabelAxis"];
+    const categoricalColors = getColorsByTheme(categoricalChartColorTokens, theme);
+    const echartsAxisConfig = {
+        axisLine: {
+            lineStyle: {
+                color: axisLineColor
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                color: splitLineColor
+            }
+        },
+        axisLabel: {
+            color: axisLabelColor,
+            fontFamily: "InterVariable"
+        }
+    };
+    return {
+        axisLineColor,
+        splitLineColor,
+        axisLabelColor,
+        categoricalColors,
+        echartsAxisConfig
+    };
+};
 var __webpack_exports__Affix = __WEBPACK_EXTERNAL_MODULE_antd__.Affix;
 var __webpack_exports__Alert = __WEBPACK_EXTERNAL_MODULE_antd__.Alert;
 var __webpack_exports__Anchor = __WEBPACK_EXTERNAL_MODULE_antd__.Anchor;
@@ -2427,4 +3372,4 @@ var __webpack_exports__useApp = __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d
 var __webpack_exports__useForm = __WEBPACK_EXTERNAL_MODULE_antd_es_form_Form_38f624ac__.useForm;
 var __webpack_exports__useWatch = __WEBPACK_EXTERNAL_MODULE_antd_es_form_Form_38f624ac__.useWatch;
 var __webpack_exports__version = __WEBPACK_EXTERNAL_MODULE_antd__.version;
-export { Badge, Breadcrumb, Button, Checkbox, CodeBlock, DSRoot, DefaultUpload, DropdownMenu, Empty, EmptyIcon, Field, Form, IconButton, Input, Modal_Modal as Modal, Popover, Radio, ScrollArea, Segmented, Select, Slider, Spin, Split, Splitter, Switch, Table, component_Tag as Tag, ThemeProvider, Toast, Tooltip, Tour, Transition, Tree, Truncate, Upload, VerticalCollapsiblePanel, WithAntdTokens, clsx, cn, cx, darkTheme, getUniqueKeysFromOriginals, isTracebackError, lightTheme, processTreeData, reactNodeToString, function_toast as toast, toastManager, useAnimationsFinished, useAntdCssVarClassname, useBreakpoint, useCls, useControlledState, useEnhancedEffect, useEventCallback, useGetPrefixCls, useLatestRef, useMessage, antd_useModal as useModal, useToken, useUniqueKeysTree, useUploadItemRender, __webpack_exports__Affix as Affix, __webpack_exports__Alert as Alert, __webpack_exports__Anchor as Anchor, __webpack_exports__App as App, __webpack_exports__AutoComplete as AutoComplete, __webpack_exports__Avatar as Avatar, __webpack_exports__BackTop as BackTop, __webpack_exports__Calendar as Calendar, __webpack_exports__Card as Card, __webpack_exports__Carousel as Carousel, __webpack_exports__Cascader as Cascader, __webpack_exports__Col as Col, __webpack_exports__Collapse as Collapse, __webpack_exports__ColorPicker as ColorPicker, __webpack_exports__ConfigProvider as ConfigProvider, __webpack_exports__DatePicker as DatePicker, __webpack_exports__Descriptions as Descriptions, __webpack_exports__Divider as Divider, __webpack_exports__Drawer as Drawer, __webpack_exports__Dropdown as Dropdown, __webpack_exports__Flex as Flex, __webpack_exports__FloatButton as FloatButton, __webpack_exports__Grid as Grid, __webpack_exports__InputNumber as InputNumber, __webpack_exports__Layout as Layout, __webpack_exports__List as List, __webpack_exports__Mentions as Mentions, __webpack_exports__Menu as Menu, __webpack_exports__Pagination as Pagination, __webpack_exports__Popconfirm as Popconfirm, __webpack_exports__Progress as Progress, __webpack_exports__QRCode as QRCode, __webpack_exports__Rate as Rate, __webpack_exports__Result as Result, __webpack_exports__Row as Row, __webpack_exports__Skeleton as Skeleton, __webpack_exports__Space as Space, __webpack_exports__Statistic as Statistic, __webpack_exports__Steps as Steps, __webpack_exports__Tabs as Tabs, __webpack_exports__TimePicker as TimePicker, __webpack_exports__Timeline as Timeline, __webpack_exports__Transfer as Transfer, __webpack_exports__TreeSelect as TreeSelect, __webpack_exports__Typography as Typography, __webpack_exports__Watermark as Watermark, __webpack_exports__message as message, __webpack_exports__notification as notification, __webpack_exports__theme as theme, __webpack_exports__unstableSetRender as unstableSetRender, __webpack_exports__useApp as useApp, __webpack_exports__useForm as useForm, __webpack_exports__useWatch as useWatch, __webpack_exports__version as version };
+export { Badge, Breadcrumb, Button, Checkbox, CodeBlock, DSRoot, DefaultUpload, DropdownMenu, Empty, EmptyIcon, Field, Form, IconButton, Input, Modal_Modal as Modal, Popover, PopupPanel, Radio, ScrollArea, Segmented, Select, Slider, Spin, Split, Splitter, Switch, Table, component_Tag as Tag, ThemeProvider, Toast, Tooltip, Tour, Transition, Tree, Truncate, Upload, VerticalCollapsiblePanel, WithAntdTokens, antdColorTokens, categoricalChartColorKeys, categoricalChartColorTokens, categoricalChartsColors, chartColorTokens, clsx, cn, cx, darkTheme, getUniqueKeysFromOriginals, isTracebackError, lightTheme, parseAntdPlacement, processTreeData, rawChartColorTokens, reactNodeToString, function_toast as toast, toastManager, useAnimationsFinished, useAntdCssVarClassname, useBreakpoint, useCharts, useCls, useControlledState, useEnhancedEffect, useEventCallback, useGetPrefixCls, useLatestRef, useMessage, antd_useModal as useModal, useToken, useUniqueKeysTree, useUploadItemRender, __webpack_exports__Affix as Affix, __webpack_exports__Alert as Alert, __webpack_exports__Anchor as Anchor, __webpack_exports__App as App, __webpack_exports__AutoComplete as AutoComplete, __webpack_exports__Avatar as Avatar, __webpack_exports__BackTop as BackTop, __webpack_exports__Calendar as Calendar, __webpack_exports__Card as Card, __webpack_exports__Carousel as Carousel, __webpack_exports__Cascader as Cascader, __webpack_exports__Col as Col, __webpack_exports__Collapse as Collapse, __webpack_exports__ColorPicker as ColorPicker, __webpack_exports__ConfigProvider as ConfigProvider, __webpack_exports__DatePicker as DatePicker, __webpack_exports__Descriptions as Descriptions, __webpack_exports__Divider as Divider, __webpack_exports__Drawer as Drawer, __webpack_exports__Dropdown as Dropdown, __webpack_exports__Flex as Flex, __webpack_exports__FloatButton as FloatButton, __webpack_exports__Grid as Grid, __webpack_exports__InputNumber as InputNumber, __webpack_exports__Layout as Layout, __webpack_exports__List as List, __webpack_exports__Mentions as Mentions, __webpack_exports__Menu as Menu, __webpack_exports__Pagination as Pagination, __webpack_exports__Popconfirm as Popconfirm, __webpack_exports__Progress as Progress, __webpack_exports__QRCode as QRCode, __webpack_exports__Rate as Rate, __webpack_exports__Result as Result, __webpack_exports__Row as Row, __webpack_exports__Skeleton as Skeleton, __webpack_exports__Space as Space, __webpack_exports__Statistic as Statistic, __webpack_exports__Steps as Steps, __webpack_exports__Tabs as Tabs, __webpack_exports__TimePicker as TimePicker, __webpack_exports__Timeline as Timeline, __webpack_exports__Transfer as Transfer, __webpack_exports__TreeSelect as TreeSelect, __webpack_exports__Typography as Typography, __webpack_exports__Watermark as Watermark, __webpack_exports__message as message, __webpack_exports__notification as notification, __webpack_exports__theme as theme, __webpack_exports__unstableSetRender as unstableSetRender, __webpack_exports__useApp as useApp, __webpack_exports__useForm as useForm, __webpack_exports__useWatch as useWatch, __webpack_exports__version as version };