@bioturing/components 0.13.3 → 0.14.1

package/dist/hooks.js

@@ -0,0 +1,961 @@
+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";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d95086__ from "antd/es/app/useApp";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_form_Form_38f624ac__ from "antd/es/form/Form";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__ from "react-dom";
+"use client";
+const useToken = __WEBPACK_EXTERNAL_MODULE_antd_es_theme_57fdaa32__["default"].useToken;
+const useBreakpoint = __WEBPACK_EXTERNAL_MODULE_antd_es_grid_ec1d1712__["default"].useBreakpoint;
+const useMessage = ()=>{
+    const { message } = (0, __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d95086__["default"])();
+    return message;
+};
+const useModal = ()=>{
+    const { modal } = (0, __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d95086__["default"])();
+    return modal;
+};
+"use client";
+const useEnhancedEffect = "undefined" != typeof window ? __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect : __WEBPACK_EXTERNAL_MODULE_react__.useEffect;
+function useEventCallback(fn) {
+    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(fn);
+    useEnhancedEffect(()=>{
+        ref.current = fn;
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((...args)=>{
+        var _ref_current;
+        return null == (_ref_current = ref.current) ? void 0 : _ref_current.call(ref, ...args);
+    }, []);
+}
+function useLatestRef(value) {
+    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(value);
+    useEnhancedEffect(()=>{
+        ref.current = value;
+    });
+    return ref;
+}
+function useAnimationsFinished(ref, waitForNextTick = false) {
+    const frameRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(-1);
+    const timeoutRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(-1);
+    const cancelTasks = useEventCallback(()=>{
+        cancelAnimationFrame(frameRef.current);
+        clearTimeout(timeoutRef.current);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>cancelTasks, [
+        cancelTasks
+    ]);
+    return useEventCallback((fnToExecute)=>{
+        cancelTasks();
+        const element = ref.current;
+        if (!element) return;
+        if ("function" != typeof element.getAnimations) fnToExecute();
+        else frameRef.current = requestAnimationFrame(()=>{
+            function exec() {
+                if (!element) return;
+                Promise.allSettled(element.getAnimations().map((anim)=>anim.finished)).then(()=>{
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__.flushSync)(fnToExecute);
+                });
+            }
+            if (waitForNextTick) timeoutRef.current = window.setTimeout(exec);
+            else exec();
+        });
+    });
+}
+"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 DSRootContext = __WEBPACK_EXTERNAL_MODULE_react__["default"].createContext({
+    theme: "light"
+});
+DSRootContext.Provider;
+const useDS = ()=>__WEBPACK_EXTERNAL_MODULE_react__["default"].useContext(DSRootContext);
+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 = {
+    fontFamily: "var(--ds-inter)",
+    fontFamilyCode: "var(--ds-roboto-mono)",
+    fontSizeHeading1: 36,
+    fontSizeHeading2: 30,
+    fontSizeHeading3: 24,
+    fontSizeHeading4: 20,
+    fontSizeHeading5: 16,
+    lineHeightHeading1: 40 / 36,
+    lineHeightHeading2: 1.2,
+    lineHeightHeading3: 32 / 24,
+    lineHeightHeading4: 1.4,
+    lineHeightHeading5: 1.5,
+    lineHeight: 20 / 14,
+    lineHeightLG: 1.5,
+    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 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 = {
+    cssVar: true,
+    components: {
+        Input: {},
+        InputNumber: {},
+        Button: {
+            defaultShadow: void 0,
+            primaryShadow: void 0,
+            dangerShadow: void 0
+        },
+        Select: {},
+        Segmented: {
+            controlHeightLG: 36,
+            controlHeightSM: 24
+        },
+        Breadcrumb: {
+            separatorColor: "var(--ds-color-border)"
+        },
+        Slider: {
+            trackBg: "var(--ds-color-primary)",
+            trackHoverBg: "var(--ds-color-primary-hover)",
+            trackBgDisabled: "var(--ds-color-text-disabled)",
+            railBg: "var(--ds-control-outline)",
+            railHoverBg: "var(--ds-color-border)",
+            handleColor: "var(--ds-color-primary)",
+            handleActiveColor: "var(--ds-color-primary-active)",
+            handleColorDisabled: "var(--ds-color-text-disabled)",
+            dotBorderColor: "var(--ds-color-primary)",
+            dotActiveBorderColor: "var(--ds-color-primary-active)"
+        },
+        Form: {
+            itemMarginBottom: 16,
+            labelColor: "var(--ds-color-text)"
+        }
+    }
+};
+({
+    token: {
+        ...getTokensByTheme(antdColorTokens, "light"),
+        ...sharedTokens
+    },
+    ...sharedThemeConfig
+});
+({
+    token: {
+        ...getTokensByTheme(antdColorTokens, "dark"),
+        ...sharedTokens
+    },
+    ...sharedThemeConfig
+});
+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;
+}, {});
+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__useApp = __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d95086__["default"];
+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;
+export { useAnimationsFinished, useBreakpoint, useCharts, useControlledState, useEnhancedEffect, useEventCallback, useLatestRef, useMessage, useModal, useToken, __webpack_exports__useApp as useApp, __webpack_exports__useForm as useForm, __webpack_exports__useWatch as useWatch };