@x-plat/design-system 0.5.35 → 0.5.37

package/dist/components/index.cjs

@@ -2229,25 +2229,8 @@ var CardTab = Object.assign(CardTabRoot, {
 var CardTab_default = CardTab;
 
 // src/components/Chart/Chart.tsx
-var import_react7 = __toESM(require("react"), 1);
-
-// src/tokens/hooks/Portal.tsx
 var import_react6 = __toESM(require("react"), 1);
-var import_react_dom = __toESM(require("react-dom"), 1);
 var import_jsx_runtime307 = require("react/jsx-runtime");
-var PortalContainerContext = import_react6.default.createContext(null);
-var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PortalContainerContext.Provider, { value: container, children });
-var Portal = ({ children }) => {
-  const contextContainer = import_react6.default.useContext(PortalContainerContext);
-  if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return import_react_dom.default.createPortal(children, container);
-};
-Portal.displayName = "Portal";
-var Portal_default = Portal;
-
-// src/components/Chart/Chart.tsx
-var import_jsx_runtime308 = require("react/jsx-runtime");
 var CATEGORICAL_COUNT2 = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
   const n = i + 1;
@@ -2293,11 +2276,11 @@ var toSmoothPath = (points) => {
 };
 var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
-  const [size, setSize] = import_react7.default.useState({ width: 0, height: 0 });
-  const settleTimer = import_react7.default.useRef(0);
-  const committedSize = import_react7.default.useRef({ width: 0, height: 0 });
-  const initialRef = import_react7.default.useRef(true);
-  import_react7.default.useEffect(() => {
+  const [size, setSize] = import_react6.default.useState({ width: 0, height: 0 });
+  const settleTimer = import_react6.default.useRef(0);
+  const committedSize = import_react6.default.useRef({ width: 0, height: 0 });
+  const initialRef = import_react6.default.useRef(true);
+  import_react6.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -2339,10 +2322,10 @@ var useChartSize = (ref) => {
 };
 var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 var useChartAnimation = (containerRef, dataKey) => {
-  const [animate, setAnimate] = import_react7.default.useState(false);
-  const prevDataKey = import_react7.default.useRef(dataKey);
-  const hasAnimated = import_react7.default.useRef(false);
-  import_react7.default.useEffect(() => {
+  const [animate, setAnimate] = import_react6.default.useState(false);
+  const prevDataKey = import_react6.default.useRef(dataKey);
+  const hasAnimated = import_react6.default.useRef(false);
+  import_react6.default.useEffect(() => {
     if (prefersReducedMotion()) return;
     const el = containerRef.current;
     if (!el) return;
@@ -2358,7 +2341,7 @@ var useChartAnimation = (containerRef, dataKey) => {
     observer.observe(el);
     return () => observer.disconnect();
   }, [containerRef]);
-  import_react7.default.useEffect(() => {
+  import_react6.default.useEffect(() => {
     if (dataKey !== prevDataKey.current) {
       prevDataKey.current = dataKey;
       if (prefersReducedMotion()) return;
@@ -2372,39 +2355,60 @@ var useChartAnimation = (containerRef, dataKey) => {
 };
 var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
-  const [tooltip, setTooltip] = import_react7.default.useState({
+  const [tooltip, setTooltip] = import_react6.default.useState({
     visible: false,
-    clientX: 0,
-    clientY: 0,
+    x: 0,
+    y: 0,
     content: ""
   });
-  const containerRef = import_react7.default.useRef(null);
-  const rafRef = import_react7.default.useRef(0);
-  const move = import_react7.default.useCallback((e) => {
+  const containerRef = import_react6.default.useRef(null);
+  const rafRef = import_react6.default.useRef(0);
+  const move = import_react6.default.useCallback((e) => {
     if (!enabled) return;
     const cx = e.clientX;
     const cy = e.clientY;
     cancelAnimationFrame(rafRef.current);
     rafRef.current = requestAnimationFrame(() => {
-      setTooltip((prev) => ({ ...prev, clientX: cx, clientY: cy }));
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setTooltip((prev) => ({ ...prev, x: cx - rect.left, y: cy - rect.top }));
     });
   }, [enabled]);
-  const show = import_react7.default.useCallback((e, content) => {
+  const show = import_react6.default.useCallback((e, content) => {
+    if (!enabled) return;
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
+  }, [enabled]);
+  const showAt = import_react6.default.useCallback((svgX, svgY, content, svgEl) => {
     if (!enabled) return;
-    setTooltip({ visible: true, clientX: e.clientX, clientY: e.clientY, content });
+    const container = containerRef.current;
+    if (!container) return;
+    let x = svgX;
+    let y = svgY;
+    if (svgEl) {
+      const svgRect = svgEl.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const vb = svgEl.viewBox.baseVal;
+      const scaleX = svgRect.width / (vb.width || 1);
+      const scaleY = svgRect.height / (vb.height || 1);
+      x = svgX * scaleX + (svgRect.left - containerRect.left);
+      y = svgY * scaleY + (svgRect.top - containerRect.top);
+    }
+    setTooltip({ visible: true, x, y, content });
   }, [enabled]);
-  const hide = import_react7.default.useCallback(() => {
+  const hide = import_react6.default.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, hide, move, containerRef };
+  return { tooltip, show, showAt, hide, move, containerRef };
 };
-var GridLines = import_react7.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_jsx_runtime308.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+var GridLines = import_react6.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_jsx_runtime307.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
   const val = Math.round(maxVal * ratio);
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -2414,18 +2418,18 @@ var getLabelStep = (count, chartW) => {
   if (count <= maxLabels) return 1;
   return Math.ceil(count / maxLabels);
 };
-var AxisLabels = import_react7.default.memo(({ labels, count, chartW, height }) => {
+var AxisLabels = import_react6.default.memo(({ labels, count, chartW, height }) => {
   const step = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_jsx_runtime308.Fragment, { children: labels.map((label, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_jsx_runtime307.Fragment, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
 var useCrosshair = (seriesPoints, entries, labels, chartH) => {
-  const [activeIndex, setActiveIndex] = import_react7.default.useState(null);
-  const handleMouseMove = import_react7.default.useCallback((e) => {
+  const [activeIndex, setActiveIndex] = import_react6.default.useState(null);
+  const handleMouseMove = import_react6.default.useCallback((e) => {
     const svg = e.currentTarget;
     const rect = svg.getBoundingClientRect();
     const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
@@ -2444,17 +2448,17 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
     }
     setActiveIndex(minDist <= threshold ? closest : null);
   }, [seriesPoints]);
-  const handleMouseLeave = import_react7.default.useCallback(() => {
+  const handleMouseLeave = import_react6.default.useCallback(() => {
     setActiveIndex(null);
   }, []);
-  const tooltipContent = import_react7.default.useMemo(() => {
+  const tooltipContent = import_react6.default.useMemo(() => {
     if (activeIndex === null) return "";
     return entries.map(([key], di) => {
       const p = seriesPoints[di]?.[activeIndex];
       return p ? `${key}: ${p.v}` : "";
     }).filter(Boolean).join(" / ");
   }, [activeIndex, entries, seriesPoints]);
-  const getTooltipAt = import_react7.default.useCallback((idx) => {
+  const getTooltipAt = import_react6.default.useCallback((idx) => {
     return entries.map(([key], di) => {
       const p = seriesPoints[di]?.[idx];
       return p ? `${key}: ${p.v}` : "";
@@ -2462,16 +2466,16 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = import_react7.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react7.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react7.default.useMemo(() => {
+var LineChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = import_react7.default.useMemo(
+  const seriesPoints = import_react6.default.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -2481,9 +2485,10 @@ var LineChart = import_react7.default.memo(({ data, labels, width, height, anima
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const clipRef = import_react7.default.useRef(null);
+  const clipRef = import_react6.default.useRef(null);
+  const svgRef = import_react6.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
-  import_react7.default.useEffect(() => {
+  import_react6.default.useEffect(() => {
     if (!animate || !clipRef.current) return;
     clipRef.current.setAttribute("width", "0");
     requestAnimationFrame(() => {
@@ -2495,30 +2500,17 @@ var LineChart = import_react7.default.memo(({ data, labels, width, height, anima
   }, [animate, width]);
   const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const lineClipId = "line-area-clip";
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
     "svg",
     {
+      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        const svg = e.currentTarget;
-        const rect = svg.getBoundingClientRect();
-        const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
-        const points = seriesPoints[0];
-        if (!points || points.length === 0) return;
-        const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
-        let closest = 0;
-        let minDist = Math.abs(points[0].x - mx);
-        for (let i = 1; i < points.length; i++) {
-          const dist = Math.abs(points[i].x - mx);
-          if (dist < minDist) {
-            minDist = dist;
-            closest = i;
-          }
-        }
-        if (minDist <= step / 2) {
-          onHover(e, `${labels[closest]} \u2014 ${getTooltipAt(closest)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
         } else {
           onLeave();
         }
@@ -2528,9 +2520,9 @@ var LineChart = import_react7.default.memo(({ data, labels, width, height, anima
         onLeave();
       },
       children: [
-        animate && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("clipPath", { id: lineClipId, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(GridLines, { width, height, chartH, maxVal }),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(AxisLabels, { labels, count, chartW, height }),
+        animate && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("clipPath", { id: lineClipId, children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(AxisLabels, { labels, count, chartW, height }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -2539,16 +2531,16 @@ var LineChart = import_react7.default.memo(({ data, labels, width, height, anima
           const gradientId = `line-gradient-${di}`;
           const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
           const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
-          return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("g", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+          return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("path", { d: areaD, fill: `url(#${gradientId})` }),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: areaD, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
             ] }),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -2560,7 +2552,7 @@ var LineChart = import_react7.default.memo(({ data, labels, width, height, anima
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "line",
           {
             x1: activeX,
@@ -2570,7 +2562,7 @@ var LineChart = import_react7.default.memo(({ data, labels, width, height, anima
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "rect",
           {
             x: PADDING.left,
@@ -2586,16 +2578,16 @@ var LineChart = import_react7.default.memo(({ data, labels, width, height, anima
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = import_react7.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react7.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react7.default.useMemo(() => {
+var CurveChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = import_react7.default.useMemo(
+  const seriesPoints = import_react6.default.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -2605,9 +2597,10 @@ var CurveChart = import_react7.default.memo(({ data, labels, width, height, anim
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const curveClipRef = import_react7.default.useRef(null);
+  const curveClipRef = import_react6.default.useRef(null);
+  const curveSvgRef = import_react6.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
-  import_react7.default.useEffect(() => {
+  import_react6.default.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
     curveClipRef.current.setAttribute("width", "0");
     requestAnimationFrame(() => {
@@ -2619,30 +2612,17 @@ var CurveChart = import_react7.default.memo(({ data, labels, width, height, anim
   }, [animate, width]);
   const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const curveClipId = "curve-area-clip";
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
     "svg",
     {
+      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        const svg = e.currentTarget;
-        const rect = svg.getBoundingClientRect();
-        const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
-        const points = seriesPoints[0];
-        if (!points || points.length === 0) return;
-        const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
-        let closest = 0;
-        let minDist = Math.abs(points[0].x - mx);
-        for (let i = 1; i < points.length; i++) {
-          const dist = Math.abs(points[i].x - mx);
-          if (dist < minDist) {
-            minDist = dist;
-            closest = i;
-          }
-        }
-        if (minDist <= step / 2) {
-          onHover(e, `${labels[closest]} \u2014 ${getTooltipAt(closest)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
         } else {
           onLeave();
         }
@@ -2652,9 +2632,9 @@ var CurveChart = import_react7.default.memo(({ data, labels, width, height, anim
         onLeave();
       },
       children: [
-        animate && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("clipPath", { id: curveClipId, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(GridLines, { width, height, chartH, maxVal }),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(AxisLabels, { labels, count, chartW, height }),
+        animate && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("clipPath", { id: curveClipId, children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(AxisLabels, { labels, count, chartW, height }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -2663,16 +2643,16 @@ var CurveChart = import_react7.default.memo(({ data, labels, width, height, anim
           const gradientId = `curve-gradient-${di}`;
           const linePath = toSmoothPath(points);
           const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
-          return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("g", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+          return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
             ] }),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -2684,7 +2664,7 @@ var CurveChart = import_react7.default.memo(({ data, labels, width, height, anim
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "line",
           {
             x1: activeX,
@@ -2694,7 +2674,7 @@ var CurveChart = import_react7.default.memo(({ data, labels, width, height, anim
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "rect",
           {
             x: PADDING.left,
@@ -2710,9 +2690,10 @@ var CurveChart = import_react7.default.memo(({ data, labels, width, height, anim
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = import_react7.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react7.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react7.default.useMemo(() => {
+var BarChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const barSvgRef = import_react6.default.useRef(null);
+  const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
@@ -2724,7 +2705,7 @@ var BarChart = import_react7.default.memo(({ data, labels, width, height, animat
   const barGap = groupCount > 1 ? 2 : 0;
   const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
   const baseline = PADDING.top + chartH;
-  const bars = import_react7.default.useMemo(
+  const bars = import_react6.default.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
         const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
@@ -2737,11 +2718,11 @@ var BarChart = import_react7.default.memo(({ data, labels, width, height, animat
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(GridLines, { width, height, chartH, maxVal }),
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
@@ -2750,7 +2731,7 @@ var BarChart = import_react7.default.memo(({ data, labels, width, height, animat
         const r2 = Math.min(4, b.w / 2);
         const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
         const delay = 100 + i * 80;
-        return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             d,
@@ -2760,8 +2741,7 @@ var BarChart = import_react7.default.memo(({ data, labels, width, height, animat
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
-            onMouseMove: onMove,
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -2771,11 +2751,11 @@ var BarChart = import_react7.default.memo(({ data, labels, width, height, animat
   ] });
 });
 BarChart.displayName = "BarChart";
-var PieDonutChart = import_react7.default.memo(
+var PieDonutChart = import_react6.default.memo(
   ({ data, labels, width, height, animate, isDoughnut, onHover, onMove, onLeave }) => {
-    const entries = import_react7.default.useMemo(() => Object.entries(data), [data]);
-    const values = import_react7.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
-    const total = import_react7.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
+    const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
+    const values = import_react6.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
+    const total = import_react6.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
     const size = Math.min(width, height);
     const cx = size / 2;
     const cy = size / 2;
@@ -2783,10 +2763,10 @@ var PieDonutChart = import_react7.default.memo(
     const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    const maskRef = import_react7.default.useRef(null);
+    const maskRef = import_react6.default.useRef(null);
     const maskR = r2 + 10;
     const maskCircumference = 2 * Math.PI * maskR;
-    import_react7.default.useEffect(() => {
+    import_react6.default.useEffect(() => {
       if (!animate || !maskRef.current) return;
       const el = maskRef.current;
       el.style.strokeDasharray = `${maskCircumference}`;
@@ -2796,7 +2776,7 @@ var PieDonutChart = import_react7.default.memo(
         el.style.strokeDashoffset = "0";
       });
     }, [animate, maskCircumference]);
-    const sliceData = import_react7.default.useMemo(() => {
+    const sliceData = import_react6.default.useMemo(() => {
       let angle0 = -Math.PI / 2;
       let cumulativeAngle = 0;
       return values.map((v, i) => {
@@ -2830,8 +2810,8 @@ var PieDonutChart = import_react7.default.memo(
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
     const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
-      animate && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("mask", { id: maskId, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("mask", { id: maskId, children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
         "circle",
         {
           ref: maskRef,
@@ -2844,56 +2824,39 @@ var PieDonutChart = import_react7.default.memo(
           transform: `rotate(-90 ${cx} ${cy})`
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
         "path",
         {
           d: s.d,
           fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
+          className: "chart-slice"
         }
-      ) }, i)) }),
-      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
-        "text",
-        {
-          x: s.lx,
-          y: s.ly,
-          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
-          textAnchor: "middle",
-          dominantBaseline: "central",
-          children: s.v
-        },
-        `label-${i}`
-      ))
+      ) }, i)) })
     ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
-  const ref = import_react7.default.useRef(null);
-  const [pos, setPos] = import_react7.default.useState({ left: 0, top: 0 });
-  import_react7.default.useLayoutEffect(() => {
+var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
+  const ref = import_react6.default.useRef(null);
+  const [pos, setPos] = import_react6.default.useState({ left: 0, top: 0 });
+  import_react6.default.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const w = el.offsetWidth;
     const h = el.offsetHeight;
-    const vw = window.innerWidth;
-    let left = clientX + TOOLTIP_OFFSET;
-    let top = clientY - h - TOOLTIP_OFFSET;
-    if (left + w > vw - 8) left = clientX - w - TOOLTIP_OFFSET;
-    if (top < 8) top = clientY + TOOLTIP_OFFSET;
-    if (left < 8) left = 8;
+    let left = x + TOOLTIP_OFFSET;
+    let top = y - h - TOOLTIP_OFFSET;
+    if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
+    if (top < 0) top = y + TOOLTIP_OFFSET;
+    if (left < 0) left = 0;
     setPos({ left, top });
-  }, [clientX, clientY]);
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+  }, [x, y, containerWidth, containerHeight]);
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
     "div",
     {
       ref,
-      className: `chart-tooltip ${visible ? "chart-tooltip-show" : "chart-tooltip-hide"}`,
-      style: { position: "fixed", left: pos.left, top: pos.top, zIndex: 1100 },
+      className: "chart-tooltip chart-tooltip-show",
+      style: { left: pos.left, top: pos.top },
       children
     }
   );
@@ -2905,14 +2868,14 @@ var ChartLegend = ({ data, labels, type }) => {
     const total = values.reduce((a, b) => a + b, 0) || 1;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "chart-legend", children: values.map((v, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-legend", children: values.map((v, i) => {
       const pct = Math.round(v / total * 100);
       const color = PIE_COLORS[(i + colorOffset) % PIE_COLORS.length];
-      return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "chart-legend-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "chart-legend-text", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("span", { className: "chart-legend-value", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "chart-legend-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "chart-legend-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("span", { className: "chart-legend-value", children: [
             v.toLocaleString(),
             "(",
             pct,
@@ -2922,37 +2885,37 @@ var ChartLegend = ({ data, labels, type }) => {
       ] }, i);
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "chart-legend", children: entries.map(([key], di) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-legend", children: entries.map(([key], di) => {
     const palette = getPalette(LINE_BAR_PALETTES, di, key);
     const color = palette[2];
     const values = entries[di][1];
     const sum = values.reduce((a, b) => a + b, 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "chart-legend-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "chart-legend-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: "chart-legend-label", children: key }),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: "chart-legend-value", children: sum.toLocaleString() })
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "chart-legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "chart-legend-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: "chart-legend-label", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: "chart-legend-value", children: sum.toLocaleString() })
       ] })
     ] }, di);
   }) });
 };
-var Chart = import_react7.default.memo((props) => {
+var Chart = import_react6.default.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
-  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { tooltip, show, showAt, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
-  const stableData = import_react7.default.useMemo(() => data, [JSON.stringify(data)]);
-  const stableLabels = import_react7.default.useMemo(() => labels, [JSON.stringify(labels)]);
-  const dataKey = import_react7.default.useMemo(() => JSON.stringify(labels), [labels]);
+  const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = import_react6.default.useMemo(() => labels, [JSON.stringify(labels)]);
+  const dataKey = import_react6.default.useMemo(() => JSON.stringify(labels), [labels]);
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -2965,7 +2928,7 @@ var import_tokens_core = require("@x-plat/tokens-core");
 var import_tokens_core2 = require("@x-plat/tokens-core");
 
 // src/components/CheckBox/CheckBox.tsx
-var import_jsx_runtime309 = require("react/jsx-runtime");
+var import_jsx_runtime308 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     checked,
@@ -2983,8 +2946,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
       "input",
       {
         type: "checkbox",
@@ -2994,22 +2957,22 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("span", { className: "label", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: "label", children: label })
   ] });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-var import_jsx_runtime310 = require("react/jsx-runtime");
+var import_jsx_runtime309 = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
     type = "primary",
     size = "md"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
@@ -3018,20 +2981,20 @@ var Chip_default = Chip;
 var import_react13 = __toESM(require("react"), 1);
 
 // src/components/Input/Input.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 
 // src/components/Input/InputValidations.tsx
-var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_jsx_runtime310 = require("react/jsx-runtime");
 var InputValidations = (props) => {
   const { message, status = "default" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(ErrorIcon_default, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(ErrorIcon_default, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "message", children: message })
+    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -3072,8 +3035,8 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime312 = require("react/jsx-runtime");
-var import_react9 = require("react");
+var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_react8 = require("react");
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -3121,7 +3084,7 @@ var parseValue = (type, value) => {
       return value;
   }
 };
-var Input = import_react8.default.forwardRef((props, ref) => {
+var Input = import_react7.default.forwardRef((props, ref) => {
   const {
     value,
     onChange,
@@ -3147,13 +3110,13 @@ var Input = import_react8.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
         className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
             "input",
             {
               ...inputProps,
@@ -3164,11 +3127,11 @@ var Input = import_react8.default.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react9.createElement)(
+    validations && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react8.createElement)(
       InputValidations_default,
       {
         ...validation,
@@ -3181,20 +3144,20 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_jsx_runtime313 = require("react/jsx-runtime");
-var PasswordInput = import_react10.default.forwardRef(
+var import_react9 = __toESM(require("react"), 1);
+var import_jsx_runtime312 = require("react/jsx-runtime");
+var PasswordInput = import_react9.default.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = import_react10.default.useState(false);
+    const [isView, setIsView] = import_react9.default.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(CloseEyeIcon_default, {}) }),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CloseEyeIcon_default, {}) }),
         type: isView ? "text" : "password",
         ref
       }
@@ -3207,6 +3170,23 @@ var PasswordInput_default = PasswordInput;
 // src/components/Modal/Modal.tsx
 var import_react11 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
+
+// src/tokens/hooks/Portal.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_jsx_runtime313 = require("react/jsx-runtime");
+var PortalContainerContext = import_react10.default.createContext(null);
+var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(PortalContainerContext.Provider, { value: container, children });
+var Portal = ({ children }) => {
+  const contextContainer = import_react10.default.useContext(PortalContainerContext);
+  if (typeof document === "undefined") return null;
+  const container = contextContainer ?? document.body;
+  return import_react_dom.default.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/components/Modal/Modal.tsx
 var import_jsx_runtime314 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {