elseware-ui 2.31.17 → 2.33.0

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var tailwindMerge = require('tailwind-merge');
-var React4 = require('react');
+var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var bs = require('react-icons/bs');
 var fa = require('react-icons/fa');
@@ -12,7 +12,7 @@ var classNames16 = require('classnames');
 var fa6 = require('react-icons/fa6');
 var ReactWorldFlags = require('react-world-flags');
 var emojiFlags = require('emoji-flags');
-var d3 = require('d3');
+var recharts = require('recharts');
 var cloudinaryReact = require('cloudinary-react');
 var formik = require('formik');
 var reactToastify = require('react-toastify');
@@ -28,29 +28,10 @@ var bi = require('react-icons/bi');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 var classNames16__default = /*#__PURE__*/_interopDefault(classNames16);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
-var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -207,16 +188,16 @@ function resolveAppearanceStyles({
       return solid[variant];
   }
 }
-var EUIContext = React4.createContext(null);
+var EUIContext = React3.createContext(null);
 var EUIProvider = ({
   config,
   children
 }) => {
-  const [state, setState] = React4.useState(config);
+  const [state, setState] = React3.useState(config);
   return /* @__PURE__ */ jsxRuntime.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
 };
 var useEUIConfig = () => {
-  const ctx = React4.useContext(EUIContext);
+  const ctx = React3.useContext(EUIContext);
   if (!ctx) {
     throw new Error("useEUIConfig must be used inside EUIProvider");
   }
@@ -644,7 +625,7 @@ var Chip = ({
     }
   ) });
 };
-var DataViewContext = React4.createContext(null);
+var DataViewContext = React3.createContext(null);
 
 // src/components/data-display/data-view/utils/searchData.ts
 function searchData(data, search) {
@@ -688,19 +669,19 @@ function DataViewProvider({
   defaultPageSize = 9,
   sortConfig = {}
 }) {
-  const [search, setSearch] = React4.useState("");
-  const [filters, setFilters] = React4.useState({});
-  const [sort, setSort] = React4.useState("suggested");
-  const [page, setPage] = React4.useState(1);
-  const [pageSize, setPageSize] = React4.useState(defaultPageSize);
-  const processedData = React4.useMemo(() => {
+  const [search, setSearch] = React3.useState("");
+  const [filters, setFilters] = React3.useState({});
+  const [sort, setSort] = React3.useState("suggested");
+  const [page, setPage] = React3.useState(1);
+  const [pageSize, setPageSize] = React3.useState(defaultPageSize);
+  const processedData = React3.useMemo(() => {
     let result = searchData(data, search);
     result = filterData(result, filters);
     result = sortData(result, sort, sortConfig);
     return result;
   }, [data, search, filters, sort, sortConfig]);
   const totalPages = pageSize === "All" ? 1 : Math.ceil(processedData.length / pageSize);
-  const paginatedData = React4.useMemo(() => {
+  const paginatedData = React3.useMemo(() => {
     if (pageSize === "All") return processedData;
     const size = pageSize;
     const start = (page - 1) * size;
@@ -738,7 +719,7 @@ function DataViewSidebar({ children }) {
 }
 var DataViewSidebar_default = DataViewSidebar;
 function useDataView() {
-  const ctx = React4.useContext(DataViewContext);
+  const ctx = React3.useContext(DataViewContext);
   if (!ctx) {
     throw new Error("useDataView must be used within DataViewProvider");
   }
@@ -804,7 +785,7 @@ function Accordion({
   toggleOnSummaryClick = false,
   enableChildrenPadding = true
 }) {
-  const [collapse, setCollapse] = React4.useState(defaultCollapse);
+  const [collapse, setCollapse] = React3.useState(defaultCollapse);
   const handleToggle = () => {
     setCollapse((prev) => !prev);
   };
@@ -852,7 +833,7 @@ function Accordion({
         leave: "transition duration-75 ease-out",
         leaveFrom: "transform scale-100 opacity-100",
         leaveTo: "transform scale-95 opacity-0",
-        as: React4.Fragment,
+        as: React3.Fragment,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1284,329 +1265,2516 @@ function DataViewPagination({ shape }) {
     )
   ] });
 }
-var DataViewPagination_default = DataViewPagination;
-
-// src/components/data-display/data-view/index.ts
-var DataView = Object.assign(DataViewProvider_default, {
-  Header: DataViewHeader_default,
-  Sidebar: DataViewSidebar_default,
-  Content: DataViewContent_default,
-  Footer: DataViewFooter_default,
-  Pagination: DataViewPagination_default,
-  Search: DataViewSearch_default,
-  Sort: DataViewSort_default,
-  FilterGroup: DataViewFilterGroup_default,
-  PageSize: DataViewPageSize_default
-});
-var Flag = ({
-  code = "US",
-  width = 24,
-  height = 16,
-  className,
-  ...rest
-}) => {
-  const [pos, setPos] = React4.useState({ x: 0, y: 0 });
-  const [showTooltip, setShowTooltip] = React4.useState(false);
-  const upperCode = code.toUpperCase();
-  const country = emojiFlags__default.default.countryCode(upperCode);
+var DataViewPagination_default = DataViewPagination;
+
+// src/components/data-display/data-view/index.ts
+var DataView = Object.assign(DataViewProvider_default, {
+  Header: DataViewHeader_default,
+  Sidebar: DataViewSidebar_default,
+  Content: DataViewContent_default,
+  Footer: DataViewFooter_default,
+  Pagination: DataViewPagination_default,
+  Search: DataViewSearch_default,
+  Sort: DataViewSort_default,
+  FilterGroup: DataViewFilterGroup_default,
+  PageSize: DataViewPageSize_default
+});
+var Flag = ({
+  code = "US",
+  width = 24,
+  height = 16,
+  className,
+  ...rest
+}) => {
+  const [pos, setPos] = React3.useState({ x: 0, y: 0 });
+  const [showTooltip, setShowTooltip] = React3.useState(false);
+  const upperCode = code.toUpperCase();
+  const country = emojiFlags__default.default.countryCode(upperCode);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn("relative inline-block", className),
+      onMouseMove: (e) => {
+        setPos({ x: e.clientX, y: e.clientY });
+        setShowTooltip(true);
+      },
+      onMouseLeave: () => setShowTooltip(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ReactWorldFlags__default.default,
+          {
+            code: upperCode,
+            style: { width, height },
+            className
+          }
+        ),
+        showTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "fixed z-50 bg-black text-white text-xs px-2 py-1 rounded shadow pointer-events-none",
+            style: {
+              top: pos.y + 12,
+              left: pos.x + 12
+            },
+            children: [
+              upperCode,
+              " \u2014 ",
+              country?.name || "Unknown"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/data-display/graphs-v2/constants/graph.constants.ts
+var GRAPH_DEFAULT_HEIGHT = 320;
+var GRAPH_DEFAULT_MAX_REALTIME_POINTS = 100;
+var GRAPH_DEFAULT_POLLING_INTERVAL = 5e3;
+var GRAPH_DEFAULT_ANIMATION_DURATION = 350;
+var GRAPH_DEFAULT_MARGIN = {
+  top: 16,
+  right: 24,
+  bottom: 16,
+  left: 8
+};
+var GRAPH_DEFAULT_STROKE_WIDTH = 2;
+var GRAPH_DEFAULT_DOT_RADIUS = 3;
+var GRAPH_DEFAULT_ACTIVE_DOT_RADIUS = 5;
+var GRAPH_DEFAULT_BAR_RADIUS = [
+  6,
+  6,
+  0,
+  0
+];
+var GRAPH_STATUSES = {
+  IDLE: "idle",
+  LOADING: "loading",
+  SUCCESS: "success",
+  ERROR: "error",
+  STREAMING: "streaming"
+};
+var GRAPH_DATA_MODES = {
+  STATIC: "static",
+  POLLING: "polling",
+  REALTIME: "realtime"
+};
+var GRAPH_VALUE_FORMATS = {
+  RAW: "raw",
+  NUMBER: "number",
+  INTEGER: "integer",
+  COMPACT: "compact",
+  PERCENT: "percent",
+  CURRENCY: "currency",
+  BYTES: "bytes",
+  DURATION: "duration"
+};
+var GRAPH_EMPTY_MESSAGE = "No graph data available";
+var GRAPH_ERROR_MESSAGE = "Unable to load graph data";
+var GRAPH_LOADING_MESSAGE = "Loading graph data...";
+
+// src/components/data-display/graphs-v2/constants/graph-theme.constants.ts
+var GRAPH_COLOR_PALETTE = [
+  "#7dd3fc",
+  "#a78bfa",
+  "#34d399",
+  "#fbbf24",
+  "#fb7185",
+  "#60a5fa",
+  "#f472b6",
+  "#22d3ee",
+  "#c084fc",
+  "#a3e635"
+];
+var GRAPH_STATUS_COLORS = {
+  primary: "#7dd3fc",
+  secondary: "#a78bfa",
+  success: "#34d399",
+  warning: "#fbbf24",
+  danger: "#fb7185",
+  info: "#60a5fa",
+  muted: "#6b7280"
+};
+var GRAPH_DARK_THEME = {
+  panel: {
+    background: "bg-[#111217]",
+    border: "border border-[#2a2d35]",
+    radius: "rounded-xl",
+    shadow: "shadow-sm"
+  },
+  text: {
+    title: "text-gray-100",
+    description: "text-gray-400",
+    muted: "text-gray-500"
+  },
+  chart: {
+    grid: "#2a2d35",
+    axis: "#8b949e",
+    cursor: "rgba(255, 255, 255, 0.06)"
+  },
+  tooltip: {
+    background: "#181b21",
+    border: "#2a2d35",
+    text: "#f3f4f6",
+    muted: "#9ca3af"
+  },
+  colors: GRAPH_COLOR_PALETTE
+};
+var GRAPH_LIGHT_THEME = {
+  panel: {
+    background: "bg-white",
+    border: "border border-gray-200",
+    radius: "rounded-xl",
+    shadow: "shadow-sm"
+  },
+  text: {
+    title: "text-gray-900",
+    description: "text-gray-500",
+    muted: "text-gray-400"
+  },
+  chart: {
+    grid: "#e5e7eb",
+    axis: "#6b7280",
+    cursor: "rgba(0, 0, 0, 0.04)"
+  },
+  tooltip: {
+    background: "#ffffff",
+    border: "#e5e7eb",
+    text: "#111827",
+    muted: "#6b7280"
+  },
+  colors: GRAPH_COLOR_PALETTE
+};
+var DEFAULT_GRAPH_THEME = GRAPH_DARK_THEME;
+
+// src/components/data-display/graphs-v2/utils/normalizeGraphData.ts
+var DEFAULT_NORMALIZE_OPTIONS = {
+  serializeDates: true,
+  parseNumericStrings: true,
+  sanitizeInvalidNumbers: true,
+  removeUndefined: true
+};
+function isNumericString(value) {
+  if (!value.trim()) {
+    return false;
+  }
+  return !Number.isNaN(Number(value));
+}
+function normalizeValue(value, options) {
+  if (value instanceof Date) {
+    return options.serializeDates ? value.toISOString() : value;
+  }
+  if (typeof value === "number") {
+    if (options.sanitizeInvalidNumbers && (Number.isNaN(value) || !Number.isFinite(value))) {
+      return null;
+    }
+    return value;
+  }
+  if (typeof value === "string") {
+    if (options.parseNumericStrings && isNumericString(value)) {
+      return Number(value);
+    }
+    return value;
+  }
+  if (typeof value === "boolean" || value === null || value === void 0) {
+    return value;
+  }
+  return String(value);
+}
+function normalizeGraphData(data, options = {}) {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  const resolvedOptions = {
+    ...DEFAULT_NORMALIZE_OPTIONS,
+    ...options
+  };
+  return data.map((item) => {
+    const normalizedPoint = {};
+    const keys = options.keys ?? Object.keys(item);
+    keys.forEach((key) => {
+      const value = normalizeValue(item[key], resolvedOptions);
+      if (resolvedOptions.removeUndefined && value === void 0) {
+        return;
+      }
+      normalizedPoint[key] = value;
+    });
+    return normalizedPoint;
+  });
+}
+function normalizeGraphDataPoint(dataPoint, options = {}) {
+  return normalizeGraphData([dataPoint], options)[0] ?? {};
+}
+
+// src/components/data-display/graphs-v2/utils/formatGraphValue.ts
+var DEFAULT_FORMAT_OPTIONS = {
+  format: "number",
+  locale: "en-US",
+  fallback: "-"
+};
+function isValidNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) && !Number.isNaN(value);
+}
+function formatBytes(value, locale) {
+  if (value === 0) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+  const unitIndex = Math.min(
+    Math.floor(Math.log(Math.abs(value)) / Math.log(1024)),
+    units.length - 1
+  );
+  const formattedValue = value / 1024 ** unitIndex;
+  return `${new Intl.NumberFormat(locale, {
+    maximumFractionDigits: formattedValue >= 10 ? 1 : 2
+  }).format(formattedValue)} ${units[unitIndex]}`;
+}
+function formatDuration(value, locale) {
+  if (value < 1e3) {
+    return `${Math.round(value)} ms`;
+  }
+  const seconds = value / 1e3;
+  if (seconds < 60) {
+    return `${new Intl.NumberFormat(locale, {
+      maximumFractionDigits: 2
+    }).format(seconds)} s`;
+  }
+  const minutes = seconds / 60;
+  if (minutes < 60) {
+    return `${new Intl.NumberFormat(locale, {
+      maximumFractionDigits: 2
+    }).format(minutes)} min`;
+  }
+  const hours = minutes / 60;
+  return `${new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 2
+  }).format(hours)} h`;
+}
+function formatGraphValue(value, options = {}) {
+  const {
+    format,
+    locale,
+    fallback,
+    prefix = "",
+    suffix = "",
+    currency = "USD",
+    minimumFractionDigits,
+    maximumFractionDigits
+  } = {
+    ...DEFAULT_FORMAT_OPTIONS,
+    ...options
+  };
+  if (value === null || value === void 0 || value === "") {
+    return fallback;
+  }
+  if (format === "raw") {
+    return `${prefix}${String(value)}${suffix}`;
+  }
+  const numericValue = typeof value === "string" && value.trim() !== "" ? Number(value) : value;
+  if (!isValidNumber(numericValue)) {
+    return `${prefix}${String(value)}${suffix}`;
+  }
+  let formattedValue;
+  switch (format) {
+    case "integer":
+      formattedValue = new Intl.NumberFormat(locale, {
+        maximumFractionDigits: 0
+      }).format(numericValue);
+      break;
+    case "compact":
+      formattedValue = new Intl.NumberFormat(locale, {
+        notation: "compact",
+        maximumFractionDigits: maximumFractionDigits ?? 2
+      }).format(numericValue);
+      break;
+    case "percent":
+      formattedValue = new Intl.NumberFormat(locale, {
+        style: "percent",
+        minimumFractionDigits: minimumFractionDigits ?? 0,
+        maximumFractionDigits: maximumFractionDigits ?? 2
+      }).format(numericValue / 100);
+      break;
+    case "currency":
+      formattedValue = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits,
+        maximumFractionDigits
+      }).format(numericValue);
+      break;
+    case "bytes":
+      formattedValue = formatBytes(numericValue, locale);
+      break;
+    case "duration":
+      formattedValue = formatDuration(numericValue, locale);
+      break;
+    case "number":
+    default:
+      formattedValue = new Intl.NumberFormat(locale, {
+        minimumFractionDigits,
+        maximumFractionDigits: maximumFractionDigits ?? 2
+      }).format(numericValue);
+      break;
+  }
+  return `${prefix}${formattedValue}${suffix}`;
+}
+
+// src/components/data-display/graphs-v2/utils/resolveGraphColor.ts
+var NAMED_COLORS = {
+  primary: GRAPH_STATUS_COLORS.primary,
+  secondary: GRAPH_STATUS_COLORS.secondary,
+  success: GRAPH_STATUS_COLORS.success,
+  warning: GRAPH_STATUS_COLORS.warning,
+  danger: GRAPH_STATUS_COLORS.danger,
+  info: GRAPH_STATUS_COLORS.info,
+  muted: GRAPH_STATUS_COLORS.muted
+};
+function isCssColor(value) {
+  return value.startsWith("#") || value.startsWith("rgb(") || value.startsWith("rgba(") || value.startsWith("hsl(") || value.startsWith("hsla(") || value.startsWith("var(");
+}
+function resolveGraphColor(color, options = {}) {
+  const {
+    index = 0,
+    fallback = GRAPH_COLOR_PALETTE[0],
+    palette = GRAPH_COLOR_PALETTE
+  } = options;
+  if (color) {
+    if (isCssColor(color)) {
+      return color;
+    }
+    if (color in NAMED_COLORS) {
+      return NAMED_COLORS[color];
+    }
+  }
+  if (palette.length > 0) {
+    return palette[index % palette.length];
+  }
+  return fallback;
+}
+function resolveGraphColors(count, options = {}) {
+  return Array.from(
+    { length: count },
+    (_, index) => resolveGraphColor(void 0, {
+      ...options,
+      index
+    })
+  );
+}
+
+// src/components/data-display/graphs-v2/utils/limitRealtimePoints.ts
+var DEFAULT_MAX_POINTS = 100;
+function limitRealtimePoints(currentData = [], nextData, options = {}) {
+  const { maxPoints = DEFAULT_MAX_POINTS, appendDirection = "end" } = options;
+  const incomingData = Array.isArray(nextData) ? nextData : [nextData];
+  const mergedData = appendDirection === "start" ? [...incomingData, ...currentData] : [...currentData, ...incomingData];
+  if (maxPoints <= 0) {
+    return mergedData;
+  }
+  if (mergedData.length <= maxPoints) {
+    return mergedData;
+  }
+  return appendDirection === "start" ? mergedData.slice(0, maxPoints) : mergedData.slice(-maxPoints);
+}
+function replaceRealtimePoints(nextData = [], options = {}) {
+  const { maxPoints = DEFAULT_MAX_POINTS } = options;
+  if (maxPoints <= 0) {
+    return nextData;
+  }
+  return nextData.slice(-maxPoints);
+}
+
+// src/components/data-display/graphs-v2/hooks/useGraphData.ts
+function useGraphData({
+  data,
+  dataSource,
+  autoLoad = true,
+  maxDataPoints = GRAPH_DEFAULT_MAX_REALTIME_POINTS,
+  normalize: normalize2 = true,
+  onDataChange,
+  onError
+} = {}) {
+  const [state, setState] = React3.useState({
+    data: data ?? [],
+    loading: false,
+    error: null,
+    status: data?.length ? "success" : "idle",
+    lastUpdatedAt: data?.length ? /* @__PURE__ */ new Date() : void 0
+  });
+  const prepareData = React3.useCallback(
+    (nextData) => {
+      if (!normalize2) {
+        return nextData;
+      }
+      return normalizeGraphData(nextData);
+    },
+    [normalize2]
+  );
+  const replaceData = React3.useCallback(
+    (nextData) => {
+      const normalizedData = prepareData(nextData);
+      setState({
+        data: normalizedData,
+        loading: false,
+        error: null,
+        status: "success",
+        lastUpdatedAt: /* @__PURE__ */ new Date()
+      });
+      onDataChange?.(normalizedData);
+    },
+    [onDataChange, prepareData]
+  );
+  const appendData = React3.useCallback(
+    (nextData) => {
+      setState((currentState) => {
+        const incomingData = Array.isArray(nextData) ? nextData : [nextData];
+        const normalizedIncomingData = prepareData(incomingData);
+        const limitedData = limitRealtimePoints(
+          currentState.data,
+          normalizedIncomingData,
+          {
+            maxPoints: maxDataPoints
+          }
+        );
+        onDataChange?.(limitedData);
+        return {
+          data: limitedData,
+          loading: false,
+          error: null,
+          status: "streaming",
+          lastUpdatedAt: /* @__PURE__ */ new Date()
+        };
+      });
+    },
+    [maxDataPoints, onDataChange, prepareData]
+  );
+  const clearData = React3.useCallback(() => {
+    setState({
+      data: [],
+      loading: false,
+      error: null,
+      status: "idle",
+      lastUpdatedAt: void 0
+    });
+    onDataChange?.([]);
+  }, [onDataChange]);
+  const handleError = React3.useCallback(
+    (error) => {
+      setState((currentState) => ({
+        ...currentState,
+        loading: false,
+        error,
+        status: "error"
+      }));
+      onError?.(error);
+    },
+    [onError]
+  );
+  const refresh = React3.useCallback(async () => {
+    const resolvedDataSource = dataSource;
+    if (!resolvedDataSource?.refresh && !resolvedDataSource?.getInitialData) {
+      return;
+    }
+    try {
+      setState((currentState) => ({
+        ...currentState,
+        loading: true,
+        error: null,
+        status: "loading"
+      }));
+      const loader = resolvedDataSource.refresh ?? resolvedDataSource.getInitialData;
+      const result = await loader?.();
+      replaceData(result ?? []);
+    } catch (error) {
+      handleError(error instanceof Error ? error : new Error(String(error)));
+    }
+  }, [dataSource, handleError, replaceData]);
+  React3.useEffect(() => {
+    if (!data) {
+      return;
+    }
+    replaceData(data);
+  }, [data, replaceData]);
+  React3.useEffect(() => {
+    if (!dataSource || !autoLoad) {
+      return;
+    }
+    const resolvedDataSource = dataSource;
+    let unsubscribe;
+    let isMounted = true;
+    async function loadInitialData() {
+      if (!resolvedDataSource.getInitialData) {
+        return;
+      }
+      try {
+        setState((currentState) => ({
+          ...currentState,
+          loading: true,
+          error: null,
+          status: "loading"
+        }));
+        const result = await resolvedDataSource.getInitialData();
+        if (isMounted) {
+          replaceData(result ?? []);
+        }
+      } catch (error) {
+        if (isMounted) {
+          handleError(
+            error instanceof Error ? error : new Error(String(error))
+          );
+        }
+      }
+    }
+    void loadInitialData();
+    if (resolvedDataSource.subscribe) {
+      unsubscribe = resolvedDataSource.subscribe(appendData, handleError);
+    }
+    return () => {
+      isMounted = false;
+      unsubscribe?.();
+    };
+  }, [appendData, autoLoad, dataSource, handleError, replaceData]);
+  return React3.useMemo(
+    () => ({
+      ...state,
+      refresh,
+      replaceData,
+      appendData,
+      clearData
+    }),
+    [appendData, clearData, refresh, replaceData, state]
+  );
+}
+function useGraphRealtime({
+  enabled = true,
+  maxDataPoints = GRAPH_DEFAULT_MAX_REALTIME_POINTS,
+  normalize: normalize2 = true,
+  connect,
+  onData,
+  onError
+}) {
+  const [data, setData] = React3.useState([]);
+  const [error, setError] = React3.useState(null);
+  const [connected, setConnected] = React3.useState(false);
+  const [lastUpdatedAt, setLastUpdatedAt] = React3.useState();
+  React3.useEffect(() => {
+    if (!enabled) {
+      setConnected(false);
+      return;
+    }
+    const handleData = (incomingData) => {
+      const incomingArray = Array.isArray(incomingData) ? incomingData : [incomingData];
+      const normalizedIncomingData = normalize2 ? normalizeGraphData(incomingArray) : incomingArray;
+      setData((currentData) => {
+        const nextData = limitRealtimePoints(
+          currentData,
+          normalizedIncomingData,
+          {
+            maxPoints: maxDataPoints
+          }
+        );
+        onData?.(nextData);
+        return nextData;
+      });
+      setError(null);
+      setConnected(true);
+      setLastUpdatedAt(/* @__PURE__ */ new Date());
+    };
+    const handleError = (nextError) => {
+      setError(nextError);
+      onError?.(nextError);
+    };
+    const unsubscribe = connect(handleData, handleError);
+    setConnected(true);
+    return () => {
+      unsubscribe?.();
+      setConnected(false);
+    };
+  }, [connect, enabled, maxDataPoints, normalize2, onData, onError]);
+  return React3.useMemo(
+    () => ({
+      data,
+      error,
+      connected,
+      loading: enabled && !connected && !error,
+      status: error ? "error" : connected ? "streaming" : "idle",
+      lastUpdatedAt,
+      clearData: () => setData([])
+    }),
+    [connected, data, enabled, error, lastUpdatedAt]
+  );
+}
+function useGraphPolling({
+  enabled = true,
+  interval = GRAPH_DEFAULT_POLLING_INTERVAL,
+  immediate = true,
+  normalize: normalize2 = true,
+  fetcher,
+  onData,
+  onError
+}) {
+  const isMountedRef = React3.useRef(false);
+  const isFetchingRef = React3.useRef(false);
+  const [data, setData] = React3.useState([]);
+  const [error, setError] = React3.useState(null);
+  const [loading, setLoading] = React3.useState(immediate);
+  const [lastUpdatedAt, setLastUpdatedAt] = React3.useState();
+  const refresh = React3.useCallback(async () => {
+    if (isFetchingRef.current) {
+      return;
+    }
+    try {
+      isFetchingRef.current = true;
+      setLoading(true);
+      setError(null);
+      const result = await fetcher();
+      const nextData = normalize2 ? normalizeGraphData(result ?? []) : result ?? [];
+      if (!isMountedRef.current) {
+        return;
+      }
+      setData(nextData);
+      setLastUpdatedAt(/* @__PURE__ */ new Date());
+      onData?.(nextData);
+    } catch (error2) {
+      const nextError = error2 instanceof Error ? error2 : new Error(String(error2));
+      if (isMountedRef.current) {
+        setError(nextError);
+        onError?.(nextError);
+      }
+    } finally {
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
+      isFetchingRef.current = false;
+    }
+  }, [fetcher, normalize2, onData, onError]);
+  React3.useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  React3.useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    if (immediate) {
+      void refresh();
+    }
+    const timer = window.setInterval(() => {
+      void refresh();
+    }, interval);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [enabled, immediate, interval, refresh]);
+  return React3.useMemo(
+    () => ({
+      data,
+      error,
+      loading,
+      status: error ? "error" : loading ? "loading" : "success",
+      lastUpdatedAt,
+      refresh
+    }),
+    [data, error, lastUpdatedAt, loading, refresh]
+  );
+}
+function createLabelFromKey(key) {
+  return key.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (character) => character.toUpperCase());
+}
+function inferSeriesKeys(data, xKey, excludeKeys = []) {
+  const firstPoint = data[0];
+  if (!firstPoint) {
+    return [];
+  }
+  return Object.keys(firstPoint).filter((key) => {
+    if (key === xKey) {
+      return false;
+    }
+    if (excludeKeys.includes(key)) {
+      return false;
+    }
+    const value = firstPoint[key];
+    return typeof value === "number";
+  });
+}
+function useGraphSeries({
+  data = [],
+  series,
+  xKey,
+  excludeKeys = []
+}) {
+  return React3.useMemo(() => {
+    const normalizedSeries = series && series.length > 0 ? series : inferSeriesKeys(data, xKey, excludeKeys).map((key) => ({
+      key
+    }));
+    return normalizedSeries.map((item, index) => ({
+      key: item.key,
+      label: item.label ?? createLabelFromKey(item.key),
+      type: item.type ?? "line",
+      color: resolveGraphColor(item.color, { index }),
+      unit: item.unit,
+      visible: item.visible ?? true,
+      strokeWidth: item.strokeWidth ?? GRAPH_DEFAULT_STROKE_WIDTH,
+      radius: item.radius ?? GRAPH_DEFAULT_ACTIVE_DOT_RADIUS,
+      format: item.format,
+      prefix: item.prefix,
+      suffix: item.suffix,
+      yAxisId: item.yAxisId
+    }));
+  }, [data, excludeKeys, series, xKey]);
+}
+function mergeGraphTheme(baseTheme, customTheme) {
+  if (!customTheme) {
+    return baseTheme;
+  }
+  return {
+    panel: {
+      ...baseTheme.panel,
+      ...customTheme.panel
+    },
+    text: {
+      ...baseTheme.text,
+      ...customTheme.text
+    },
+    chart: {
+      ...baseTheme.chart,
+      ...customTheme.chart
+    },
+    tooltip: {
+      ...baseTheme.tooltip,
+      ...customTheme.tooltip
+    },
+    colors: customTheme.colors ?? baseTheme.colors
+  };
+}
+function useGraphTheme({
+  mode = "dark",
+  theme
+} = {}) {
+  return React3.useMemo(() => {
+    const baseTheme = mode === "light" ? GRAPH_LIGHT_THEME : mode === "dark" ? GRAPH_DARK_THEME : DEFAULT_GRAPH_THEME;
+    return mergeGraphTheme(baseTheme, theme);
+  }, [mode, theme]);
+}
+var GraphContext = React3.createContext({
+  data: [],
+  loading: false,
+  error: null,
+  status: "idle",
+  maxDataPoints: GRAPH_DEFAULT_MAX_REALTIME_POINTS,
+  refresh: async () => {
+  },
+  replaceData: () => {
+  },
+  appendData: () => {
+  },
+  clearData: () => {
+  }
+});
+function GraphProvider({
+  children,
+  data,
+  dataSource,
+  maxDataPoints = GRAPH_DEFAULT_MAX_REALTIME_POINTS,
+  autoLoad = true,
+  onDataChange,
+  onError
+}) {
+  const graphData = useGraphData({
+    data,
+    dataSource,
+    autoLoad,
+    maxDataPoints,
+    onDataChange,
+    onError
+  });
+  const value = React3.useMemo(
+    () => ({
+      ...graphData,
+      mode: dataSource?.mode,
+      maxDataPoints
+    }),
+    [dataSource?.mode, graphData, maxDataPoints]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    GraphContext.Provider,
+    {
+      value,
+      children
+    }
+  );
+}
+function useGraphContext() {
+  return React3.useContext(GraphContext);
+}
+
+// src/components/data-display/graphs-v2/context/graphReducer.ts
+function createInitialGraphState(data = []) {
+  return {
+    data,
+    loading: false,
+    error: null,
+    status: data.length > 0 ? "success" : "idle",
+    lastUpdatedAt: data.length > 0 ? /* @__PURE__ */ new Date() : void 0
+  };
+}
+function graphReducer(state, action) {
+  switch (action.type) {
+    case "SET_LOADING": {
+      const loading = action.payload ?? true;
+      return {
+        ...state,
+        loading,
+        error: loading ? null : state.error,
+        status: loading ? "loading" : state.status
+      };
+    }
+    case "SET_ERROR": {
+      return {
+        ...state,
+        loading: false,
+        error: action.payload,
+        status: action.payload ? "error" : state.data.length > 0 ? "success" : "idle"
+      };
+    }
+    case "SET_DATA": {
+      return {
+        data: action.payload,
+        loading: false,
+        error: null,
+        status: "success",
+        lastUpdatedAt: /* @__PURE__ */ new Date()
+      };
+    }
+    case "APPEND_DATA": {
+      const nextData = limitRealtimePoints(state.data, action.payload.data, {
+        maxPoints: action.payload.maxDataPoints ?? GRAPH_DEFAULT_MAX_REALTIME_POINTS
+      });
+      return {
+        data: nextData,
+        loading: false,
+        error: null,
+        status: "streaming",
+        lastUpdatedAt: /* @__PURE__ */ new Date()
+      };
+    }
+    case "CLEAR_DATA": {
+      return {
+        data: [],
+        loading: false,
+        error: null,
+        status: "idle",
+        lastUpdatedAt: void 0
+      };
+    }
+    case "SET_STREAMING": {
+      const streaming = action.payload ?? true;
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        status: streaming ? "streaming" : state.data.length > 0 ? "success" : "idle",
+        lastUpdatedAt: streaming ? /* @__PURE__ */ new Date() : state.lastUpdatedAt
+      };
+    }
+    default:
+      return state;
+  }
+}
+function GraphEmptyState({
+  height = GRAPH_DEFAULT_HEIGHT,
+  message = GRAPH_EMPTY_MESSAGE,
+  description,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `eui-graph flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-700/80 bg-[#111217]/40 px-6 text-center ${className}`,
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-gray-700 bg-white/5 text-gray-500", children: "\u2205" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-sm font-medium text-gray-300", children: message }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 max-w-sm text-xs text-gray-500", children: description })
+      ]
+    }
+  );
+}
+function GraphErrorState({
+  error,
+  height = GRAPH_DEFAULT_HEIGHT,
+  title = GRAPH_ERROR_MESSAGE,
+  message,
+  className = "",
+  onRetry,
+  retryLabel = "Retry"
+}) {
+  const resolvedMessage = message ?? error?.message;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `eui-graph flex flex-col items-center justify-center rounded-xl border border-red-500/30 bg-red-500/5 px-6 text-center ${className}`,
+      style: { height },
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-red-500/30 bg-red-500/10 text-red-400", children: "!" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-sm font-medium text-red-300", children: title }),
+        resolvedMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 max-w-md text-xs text-red-200/70", children: resolvedMessage }),
+        onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void onRetry(),
+            className: "mt-4 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-200 transition-colors hover:bg-red-500/10",
+            children: retryLabel
+          }
+        )
+      ]
+    }
+  );
+}
+function GraphHeader({
+  title,
+  description,
+  actions,
+  className = ""
+}) {
+  if (!title && !description && !actions) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex items-start justify-between gap-4 border-b border-[#2a2d35] px-4 py-3 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eui-graph-title truncate text-sm font-semibold text-gray-100", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eui-graph-description mt-1 text-xs text-gray-400", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: actions })
+      ]
+    }
+  );
+}
+function GraphLoadingState({
+  height = GRAPH_DEFAULT_HEIGHT,
+  message = GRAPH_LOADING_MESSAGE,
+  className = "",
+  showMessage = true
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `eui-graph eui-graph-loading flex flex-col items-center justify-center rounded-xl border border-[#2a2d35] bg-[#111217]/60 px-6 text-center ${className}`,
+      style: { height },
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-7 w-7 animate-spin rounded-full border-2 border-gray-700 border-t-gray-200" }),
+        showMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-3 text-sm font-medium text-gray-300", children: message })
+      ]
+    }
+  );
+}
+function formatLastUpdatedAt(value) {
+  if (!value) {
+    return "Never updated";
+  }
+  return `Updated ${value.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  })}`;
+}
+function GraphToolbar({
+  children,
+  className = "",
+  showRefresh = true,
+  showLastUpdated = true,
+  refreshLabel = "Refresh",
+  onRefresh
+}) {
+  const graph = useGraphContext();
+  async function handleRefresh() {
+    if (onRefresh) {
+      await onRefresh();
+      return;
+    }
+    await graph.refresh();
+  }
+  if (!children && !showRefresh && !showLastUpdated) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex flex-wrap items-center justify-between gap-3 border-b border-[#2a2d35] px-4 py-2 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-3", children: [
+          showLastUpdated && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: formatLastUpdatedAt(graph.lastUpdatedAt) }),
+          showRefresh && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void handleRefresh(),
+              disabled: graph.loading,
+              className: "rounded-md border border-[#2a2d35] px-2.5 py-1.5 text-xs font-medium text-gray-300 transition-colors hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-60",
+              children: graph.loading ? "Refreshing..." : refreshLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function GraphPanel({
+  title,
+  description,
+  actions,
+  toolbar,
+  children,
+  className = "",
+  contentClassName = "",
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  empty,
+  emptyMessage,
+  emptyDescription,
+  showToolbar = false,
+  showRefresh = true,
+  showLastUpdated = true,
+  onRetry
+}) {
+  const graph = useGraphContext();
+  const resolvedLoading = loading ?? graph.loading;
+  const resolvedError = error ?? graph.error;
+  const resolvedEmpty = empty ?? graph.data.length === 0;
+  function renderContent() {
+    if (resolvedLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(GraphLoadingState, { height });
+    }
+    if (resolvedError) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        GraphErrorState,
+        {
+          height,
+          error: resolvedError,
+          onRetry: onRetry ?? graph.refresh
+        }
+      );
+    }
+    if (resolvedEmpty) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        GraphEmptyState,
+        {
+          height,
+          message: emptyMessage,
+          description: emptyDescription
+        }
+      );
+    }
+    return children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: `eui-graph eui-graph-panel overflow-hidden rounded-xl border border-[#2a2d35] bg-[#111217] ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GraphHeader, { title, description, actions }),
+        showToolbar && /* @__PURE__ */ jsxRuntime.jsx(
+          GraphToolbar,
+          {
+            showRefresh,
+            showLastUpdated,
+            children: toolbar
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-4 ${contentClassName}`, children: renderContent() })
+      ]
+    }
+  );
+}
+function createLabelFromKey2(key) {
+  return key.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (character) => character.toUpperCase());
+}
+function GraphLegend({
+  items,
+  series,
+  data = [],
+  className = "",
+  showValues = true,
+  valueSource = "latest",
+  onItemClick
+}) {
+  const legendItems = React3.useMemo(() => {
+    if (items?.length) {
+      return items;
+    }
+    if (!series?.length) {
+      return [];
+    }
+    const latestPoint = data[data.length - 1];
+    return series.map((item, index) => ({
+      key: item.key,
+      label: item.label ?? createLabelFromKey2(item.key),
+      color: resolveGraphColor(item.color, { index }),
+      value: valueSource === "latest" ? latestPoint?.[item.key] : void 0,
+      unit: item.unit,
+      format: item.format,
+      prefix: item.prefix,
+      suffix: item.suffix,
+      active: item.visible ?? true
+    }));
+  }, [data, items, series, valueSource]);
+  if (!legendItems.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `eui-graph flex flex-wrap items-center gap-x-4 gap-y-2 text-xs ${className}`,
+      children: legendItems.map((item, index) => {
+        const color = resolveGraphColor(item.color, { index });
+        const active = item.active ?? true;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onItemClick?.(item),
+            disabled: !onItemClick,
+            className: `inline-flex items-center gap-2 rounded-md transition-opacity ${active ? "opacity-100" : "opacity-40"} ${onItemClick ? "cursor-pointer hover:opacity-80" : "cursor-default"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "h-2.5 w-2.5 rounded-full",
+                  style: { backgroundColor: color }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: item.label ?? createLabelFromKey2(item.key) }),
+              showValues && item.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-200", children: formatGraphValue(item.value, {
+                format: item.format ?? "number",
+                prefix: item.prefix,
+                suffix: item.suffix ?? item.unit
+              }) })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+}
+function GraphTooltip({
+  active,
+  label,
+  payload,
+  className = "",
+  labelFormatter,
+  valueFormatter,
+  seriesFormatters = {}
+}) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `eui-graph rounded-xl border border-[#2a2d35] bg-[#181b21] px-3 py-2 shadow-xl ${className}`,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-semibold text-gray-100", children: labelFormatter ? labelFormatter(label) : label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: payload.map((item, index) => {
+          const dataKey = item.dataKey ?? item.name ?? String(index);
+          const formatterOptions = seriesFormatters[dataKey];
+          const formattedValue = valueFormatter ? valueFormatter(item.value, item.name, item) : formatGraphValue(item.value, {
+            format: formatterOptions?.format ?? "number",
+            prefix: formatterOptions?.prefix,
+            suffix: formatterOptions?.suffix ?? formatterOptions?.unit
+          });
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex min-w-[140px] items-center justify-between gap-4 text-xs",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "h-2 w-2 rounded-full",
+                      style: { backgroundColor: item.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-gray-400", children: item.name ?? dataKey })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-100", children: formattedValue })
+              ]
+            },
+            `${dataKey}-${index}`
+          );
+        }) })
+      ]
+    }
+  );
+}
+function GraphContainer({
+  children,
+  height = GRAPH_DEFAULT_HEIGHT,
+  className = "",
+  contentClassName = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `eui-graph relative w-full min-w-0 overflow-hidden ${className}`,
+      style: { height },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-full w-full ${contentClassName}`, children })
+    }
+  );
+}
+function LineGraph({
+  data,
+  xKey = "time",
+  series,
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  animated = true
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedSeries = useGraphSeries({
+    data: graphData,
+    series,
+    xKey: String(xKey)
+  }).filter((item) => item.visible);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length || !resolvedSeries.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphEmptyState, { height, className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GraphContainer, { height, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: graphData, margin: GRAPH_DEFAULT_MARGIN, children: [
+      showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.CartesianGrid,
+        {
+          stroke: theme.chart.grid,
+          strokeDasharray: "3 3",
+          vertical: false
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: String(xKey),
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatGraphValue(value, {
+            format: "compact"
+          })
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(
+            GraphTooltip,
+            {
+              seriesFormatters: Object.fromEntries(
+                resolvedSeries.map((item) => [
+                  item.key,
+                  {
+                    format: item.format,
+                    prefix: item.prefix,
+                    suffix: item.suffix,
+                    unit: item.unit
+                  }
+                ])
+              )
+            }
+          ),
+          cursor: { stroke: theme.chart.cursor }
+        }
+      ),
+      resolvedSeries.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Line,
+        {
+          type: "monotone",
+          dataKey: item.key,
+          name: item.label,
+          stroke: item.color,
+          strokeWidth: item.strokeWidth,
+          dot: false,
+          activeDot: { r: item.radius },
+          isAnimationActive: animated,
+          animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION,
+          yAxisId: item.yAxisId
+        },
+        item.key
+      ))
+    ] }) }) }),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(
+      GraphLegend,
+      {
+        series: resolvedSeries,
+        data: graphData,
+        showValues: true,
+        valueSource: "latest"
+      }
+    )
+  ] });
+}
+function AreaGraph({
+  data,
+  xKey = "time",
+  series,
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  animated = true
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedSeries = useGraphSeries({
+    data: graphData,
+    series,
+    xKey: String(xKey)
+  }).filter((item) => item.visible);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length || !resolvedSeries.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphEmptyState, { height, className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GraphContainer, { height, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data: graphData, margin: GRAPH_DEFAULT_MARGIN, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: resolvedSeries.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "linearGradient",
+        {
+          id: `eui-area-gradient-${item.key}`,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: item.color, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "stop",
+              {
+                offset: "95%",
+                stopColor: item.color,
+                stopOpacity: 0.02
+              }
+            )
+          ]
+        },
+        item.key
+      )) }),
+      showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.CartesianGrid,
+        {
+          stroke: theme.chart.grid,
+          strokeDasharray: "3 3",
+          vertical: false
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: String(xKey),
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatGraphValue(value, {
+            format: "compact"
+          })
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(
+            GraphTooltip,
+            {
+              seriesFormatters: Object.fromEntries(
+                resolvedSeries.map((item) => [
+                  item.key,
+                  {
+                    format: item.format,
+                    prefix: item.prefix,
+                    suffix: item.suffix,
+                    unit: item.unit
+                  }
+                ])
+              )
+            }
+          ),
+          cursor: { stroke: theme.chart.cursor }
+        }
+      ),
+      resolvedSeries.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Area,
+        {
+          type: "monotone",
+          dataKey: item.key,
+          name: item.label,
+          stroke: item.color,
+          strokeWidth: item.strokeWidth,
+          fill: `url(#eui-area-gradient-${item.key})`,
+          isAnimationActive: animated,
+          animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION,
+          yAxisId: item.yAxisId
+        },
+        item.key
+      ))
+    ] }) }) }),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(
+      GraphLegend,
+      {
+        series: resolvedSeries,
+        data: graphData,
+        showValues: true,
+        valueSource: "latest"
+      }
+    )
+  ] });
+}
+function BarGraph({
+  data,
+  xKey = "name",
+  series,
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  animated = true,
+  layout = "horizontal"
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedSeries = useGraphSeries({
+    data: graphData,
+    series,
+    xKey: String(xKey)
+  }).filter((item) => item.visible);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length || !resolvedSeries.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphEmptyState, { height, className });
+  }
+  const isVertical = layout === "vertical";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GraphContainer, { height, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      recharts.BarChart,
+      {
+        data: graphData,
+        margin: GRAPH_DEFAULT_MARGIN,
+        layout: isVertical ? "vertical" : "horizontal",
+        children: [
+          showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.CartesianGrid,
+            {
+              stroke: theme.chart.grid,
+              strokeDasharray: "3 3",
+              horizontal: !isVertical,
+              vertical: isVertical
+            }
+          ),
+          isVertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                type: "number",
+                stroke: theme.chart.axis,
+                tick: { fill: theme.chart.axis, fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => formatGraphValue(value, {
+                  format: "compact"
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                type: "category",
+                dataKey: String(xKey),
+                stroke: theme.chart.axis,
+                tick: { fill: theme.chart.axis, fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                width: 110
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: String(xKey),
+                stroke: theme.chart.axis,
+                tick: { fill: theme.chart.axis, fontSize: 12 },
+                tickLine: false,
+                axisLine: false
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                stroke: theme.chart.axis,
+                tick: { fill: theme.chart.axis, fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => formatGraphValue(value, {
+                  format: "compact"
+                })
+              }
+            )
+          ] }),
+          showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Tooltip,
+            {
+              content: /* @__PURE__ */ jsxRuntime.jsx(
+                GraphTooltip,
+                {
+                  seriesFormatters: Object.fromEntries(
+                    resolvedSeries.map((item) => [
+                      item.key,
+                      {
+                        format: item.format,
+                        prefix: item.prefix,
+                        suffix: item.suffix,
+                        unit: item.unit
+                      }
+                    ])
+                  )
+                }
+              ),
+              cursor: { fill: theme.chart.cursor }
+            }
+          ),
+          resolvedSeries.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Bar,
+            {
+              dataKey: item.key,
+              name: item.label,
+              fill: item.color,
+              radius: GRAPH_DEFAULT_BAR_RADIUS,
+              isAnimationActive: animated,
+              animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION,
+              yAxisId: isVertical ? void 0 : item.yAxisId
+            },
+            item.key
+          ))
+        ]
+      }
+    ) }) }),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(
+      GraphLegend,
+      {
+        series: resolvedSeries,
+        data: graphData,
+        showValues: true,
+        valueSource: "latest"
+      }
+    )
+  ] });
+}
+function PieGraph({
+  data,
+  nameKey = "name",
+  valueKey = "value",
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showTooltip = true,
+  showLegend = true,
+  animated = true,
+  innerRadius = "45%",
+  outerRadius = "75%",
+  valueFormat = "number",
+  unit
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  if (graphLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphEmptyState, { height, className });
+  }
+  const legendItems = graphData.map((item, index) => {
+    const key = String(item[String(nameKey)] ?? index);
+    return {
+      key,
+      label: key,
+      value: item[String(valueKey)],
+      color: resolveGraphColor(void 0, {
+        index,
+        palette: theme.colors
+      }),
+      format: valueFormat,
+      unit,
+      active: true
+    };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GraphContainer, { height, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Pie,
+        {
+          data: graphData,
+          dataKey: String(valueKey),
+          nameKey: String(nameKey),
+          innerRadius,
+          outerRadius,
+          paddingAngle: 2,
+          isAnimationActive: animated,
+          animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION,
+          children: graphData.map((_item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Cell,
+            {
+              fill: resolveGraphColor(void 0, {
+                index,
+                palette: theme.colors
+              })
+            },
+            `cell-${index}`
+          ))
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(
+            GraphTooltip,
+            {
+              seriesFormatters: {
+                [String(valueKey)]: {
+                  format: valueFormat,
+                  suffix: unit
+                }
+              }
+            }
+          )
+        }
+      )
+    ] }) }) }),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(GraphLegend, { items: legendItems, showValues: true, valueSource: "latest" })
+  ] });
+}
+function ScatterGraph({
+  data,
+  xKey = "x",
+  series,
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  animated = true
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedSeries = useGraphSeries({
+    data: graphData,
+    series,
+    xKey: String(xKey)
+  }).filter((item) => item.visible);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length || !resolvedSeries.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphEmptyState, { height, className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GraphContainer, { height, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin: GRAPH_DEFAULT_MARGIN, children: [
+      showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { stroke: theme.chart.grid, strokeDasharray: "3 3" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          type: "number",
+          dataKey: String(xKey),
+          name: String(xKey),
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatGraphValue(value, {
+            format: "compact"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          type: "number",
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatGraphValue(value, {
+            format: "compact"
+          })
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(
+            GraphTooltip,
+            {
+              seriesFormatters: Object.fromEntries(
+                resolvedSeries.map((item) => [
+                  item.key,
+                  {
+                    format: item.format,
+                    prefix: item.prefix,
+                    suffix: item.suffix,
+                    unit: item.unit
+                  }
+                ])
+              )
+            }
+          ),
+          cursor: { stroke: theme.chart.cursor, strokeDasharray: "3 3" }
+        }
+      ),
+      resolvedSeries.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Scatter,
+        {
+          data: graphData,
+          dataKey: item.key,
+          name: item.label,
+          fill: item.color,
+          isAnimationActive: animated,
+          animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION
+        },
+        item.key
+      ))
+    ] }) }) }),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(
+      GraphLegend,
+      {
+        series: resolvedSeries,
+        data: graphData,
+        showValues: true,
+        valueSource: "latest"
+      }
+    )
+  ] });
+}
+function GaugeGraph({
+  data,
+  valueKey = "value",
+  label,
+  value,
+  min = 0,
+  max = 100,
+  height = GRAPH_DEFAULT_HEIGHT,
+  color,
+  unit,
+  format = "number",
+  loading,
+  error,
+  className = ""
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedValue = React3.useMemo(() => {
+    if (typeof value === "number") {
+      return value;
+    }
+    const latestPoint = graphData[graphData.length - 1];
+    const latestValue = latestPoint?.[String(valueKey)];
+    return typeof latestValue === "number" ? latestValue : void 0;
+  }, [graphData, value, valueKey]);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (resolvedValue === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphEmptyState, { height, className });
+  }
+  const range = max - min;
+  const percentage = range === 0 ? 0 : Math.min(100, Math.max(0, (resolvedValue - min) / range * 100));
+  const radius = 72;
+  const strokeWidth = 14;
+  const circumference = Math.PI * radius;
+  const offset = circumference - percentage / 100 * circumference;
+  const resolvedColor = resolveGraphColor(color, {
+    index: 0,
+    palette: theme.colors
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `eui-graph flex items-center justify-center ${className}`,
+      style: { height },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "220", height: "130", viewBox: "0 0 220 130", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M 38 104 A 72 72 0 0 1 182 104",
+              fill: "none",
+              stroke: theme.chart.grid,
+              strokeWidth,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M 38 104 A 72 72 0 0 1 182 104",
+              fill: "none",
+              stroke: resolvedColor,
+              strokeWidth,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: offset
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: "110",
+              y: "92",
+              textAnchor: "middle",
+              fill: theme.tooltip.text,
+              fontSize: "28",
+              fontWeight: "700",
+              children: formatGraphValue(resolvedValue, {
+                format,
+                suffix: unit,
+                maximumFractionDigits: 2
+              })
+            }
+          ),
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: "110",
+              y: "118",
+              textAnchor: "middle",
+              fill: theme.tooltip.muted,
+              fontSize: "12",
+              children: label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[180px] justify-between text-xs text-gray-500", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatGraphValue(min, {
+            format,
+            suffix: unit
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatGraphValue(max, {
+            format,
+            suffix: unit
+          }) })
+        ] })
+      ] })
+    }
+  );
+}
+function StatGraph({
+  data,
+  valueKey = "value",
+  label,
+  value,
+  previousValue,
+  format = "number",
+  prefix,
+  suffix,
+  unit,
+  loading,
+  error,
+  className = "",
+  showTrend = true
+}) {
+  const context = useGraphContext();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedValue = React3.useMemo(() => {
+    if (value !== void 0) {
+      return value;
+    }
+    const latestPoint = graphData[graphData.length - 1];
+    return latestPoint?.[String(valueKey)] ?? null;
+  }, [graphData, value, valueKey]);
+  const resolvedPreviousValue = React3.useMemo(() => {
+    if (previousValue !== void 0) {
+      return previousValue;
+    }
+    const previousPoint = graphData[graphData.length - 2];
+    const previous = previousPoint?.[String(valueKey)];
+    return typeof previous === "number" ? previous : void 0;
+  }, [graphData, previousValue, valueKey]);
+  const trend = React3.useMemo(() => {
+    if (typeof resolvedValue !== "number" || typeof resolvedPreviousValue !== "number") {
+      return null;
+    }
+    const difference = resolvedValue - resolvedPreviousValue;
+    const percentage = resolvedPreviousValue === 0 ? 0 : difference / Math.abs(resolvedPreviousValue) * 100;
+    return {
+      difference,
+      percentage,
+      direction: difference > 0 ? "up" : difference < 0 ? "down" : "neutral"
+    };
+  }, [resolvedPreviousValue, resolvedValue]);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphLoadingState, { height: 120, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphErrorState, { error: graphError, height: 120, className });
+  }
+  if (resolvedValue === null || resolvedValue === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GraphEmptyState, { height: 120, className });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ...rest,
-      className: cn("relative inline-block", className),
-      onMouseMove: (e) => {
-        setPos({ x: e.clientX, y: e.clientY });
-        setShowTooltip(true);
-      },
-      onMouseLeave: () => setShowTooltip(false),
+      className: `eui-graph rounded-xl border border-[#2a2d35] bg-[#111217] p-5 ${className}`,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ReactWorldFlags__default.default,
-          {
-            code: upperCode,
-            style: { width, height },
-            className
-          }
-        ),
-        showTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
+        label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-400", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-3xl font-semibold tracking-tight text-gray-100", children: formatGraphValue(resolvedValue, {
+          format,
+          prefix,
+          suffix: suffix ?? unit
+        }) }),
+        showTrend && trend && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "fixed z-50 bg-black text-white text-xs px-2 py-1 rounded shadow pointer-events-none",
-            style: {
-              top: pos.y + 12,
-              left: pos.x + 12
-            },
+            className: `mt-3 text-sm ${trend.direction === "up" ? "text-emerald-400" : trend.direction === "down" ? "text-red-400" : "text-gray-500"}`,
             children: [
-              upperCode,
-              " \u2014 ",
-              country?.name || "Unknown"
+              trend.direction === "up" ? "\u2191" : trend.direction === "down" ? "\u2193" : "\u2192",
+              " ",
+              formatGraphValue(Math.abs(trend.percentage), {
+                format: "number",
+                suffix: "%",
+                maximumFractionDigits: 2
+              })
             ]
           }
         )
       ]
     }
   );
-};
+}
+function renderGraphChart(props) {
+  const {
+    type = "line",
+    data,
+    xKey,
+    series,
+    height,
+    loading,
+    error,
+    chartClassName = "",
+    showGrid = true,
+    showTooltip = true,
+    showLegend = true,
+    animated = true,
+    layout,
+    nameKey,
+    valueKey,
+    innerRadius,
+    outerRadius,
+    valueFormat,
+    value,
+    previousValue,
+    label,
+    min,
+    max,
+    color,
+    unit,
+    format,
+    prefix,
+    suffix,
+    showTrend
+  } = props;
+  switch (type) {
+    case "area":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AreaGraph,
+        {
+          data,
+          xKey,
+          series,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showGrid,
+          showTooltip,
+          showLegend,
+          animated
+        }
+      );
+    case "bar":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        BarGraph,
+        {
+          data,
+          xKey,
+          series,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showGrid,
+          showTooltip,
+          showLegend,
+          animated,
+          layout
+        }
+      );
+    case "pie":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        PieGraph,
+        {
+          data,
+          nameKey,
+          valueKey,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showTooltip,
+          showLegend,
+          animated,
+          innerRadius,
+          outerRadius,
+          valueFormat,
+          unit
+        }
+      );
+    case "scatter":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ScatterGraph,
+        {
+          data,
+          xKey,
+          series,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showGrid,
+          showTooltip,
+          showLegend,
+          animated
+        }
+      );
+    case "gauge":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        GaugeGraph,
+        {
+          data,
+          valueKey,
+          value: typeof value === "number" ? value : void 0,
+          label,
+          min,
+          max,
+          height,
+          color,
+          unit,
+          format,
+          loading,
+          error,
+          className: chartClassName
+        }
+      );
+    case "stat":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        StatGraph,
+        {
+          data,
+          valueKey,
+          value,
+          previousValue,
+          label,
+          format,
+          prefix,
+          suffix,
+          unit,
+          loading,
+          error,
+          className: chartClassName,
+          showTrend
+        }
+      );
+    case "line":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        LineGraph,
+        {
+          data,
+          xKey,
+          series,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showGrid,
+          showTooltip,
+          showLegend,
+          animated
+        }
+      );
+  }
+}
+function GraphContent(props) {
+  const {
+    children,
+    withPanel = true,
+    title,
+    description,
+    actions,
+    toolbar,
+    className = "",
+    contentClassName = "",
+    height,
+    loading,
+    error,
+    showToolbar = false,
+    showRefresh = true,
+    showLastUpdated = true,
+    emptyMessage,
+    emptyDescription,
+    onRetry
+  } = props;
+  const chart = children ?? renderGraphChart(props);
+  if (!withPanel) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: chart });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    GraphPanel,
+    {
+      title,
+      description,
+      actions,
+      toolbar,
+      className,
+      contentClassName,
+      height,
+      loading,
+      error,
+      empty: children ? false : void 0,
+      showToolbar,
+      showRefresh,
+      showLastUpdated,
+      emptyMessage,
+      emptyDescription,
+      onRetry,
+      children: chart
+    }
+  );
+}
+function Graph(props) {
+  const {
+    data,
+    dataSource,
+    autoLoad = true,
+    maxDataPoints,
+    theme,
+    onDataChange,
+    onError
+  } = props;
+  const shouldUseProvider = Boolean(data || dataSource);
+  const content = /* @__PURE__ */ jsxRuntime.jsx(GraphContent, { ...props });
+  if (!shouldUseProvider) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    GraphProvider,
+    {
+      data,
+      dataSource,
+      autoLoad,
+      maxDataPoints,
+      theme,
+      onDataChange,
+      onError,
+      children: content
+    }
+  );
+}
 
-// src/components/data-display/graphs/layouts/registry.ts
-var registry = /* @__PURE__ */ new Map();
-var registerLayout = (type, executor) => {
-  registry.set(type, executor);
-};
-var getLayout = (type) => {
-  const layout = registry.get(type);
-  if (!layout) {
-    throw new Error(`Layout "${type}" not registered`);
+// src/components/data-display/graphs-v2/datasource/GraphDataSource.ts
+var BaseGraphDataSource = class {
+  normalizeError(error) {
+    if (error instanceof Error) {
+      return error;
+    }
+    return new Error(String(error));
   }
-  return layout;
-};
-var createForceLayout = (nodes, edges, width, height) => {
-  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-  const d3Links = edges.filter((e) => {
-    const fromId = typeof e.from === "string" ? e.from : e.from.id;
-    const toId = typeof e.to === "string" ? e.to : e.to.id;
-    const valid = nodeMap.has(fromId) && nodeMap.has(toId);
-    if (!valid) {
-      console.warn("Invalid edge skipped:", e);
+  ensureArray(data) {
+    if (!data) {
+      return [];
     }
-    return valid;
-  }).map((e) => ({
-    source: typeof e.from === "string" ? e.from : e.from.id,
-    target: typeof e.to === "string" ? e.to : e.to.id,
-    weight: e.weight
-  }));
-  return d3__namespace.forceSimulation(nodes).force(
-    "link",
-    d3__namespace.forceLink(d3Links).id((d) => d.id).distance(120).strength(0.7)
-  ).force("charge", d3__namespace.forceManyBody().strength(-280)).force("center", d3__namespace.forceCenter(width / 2, height / 2)).force("collision", d3__namespace.forceCollide().radius(35));
+    return Array.isArray(data) ? data : [data];
+  }
+  safeExecute(executor) {
+    try {
+      return Promise.resolve(executor());
+    } catch (error) {
+      return Promise.reject(this.normalizeError(error));
+    }
+  }
 };
 
-// src/components/data-display/graphs/layouts/gridLayout.ts
-function createGridLayout(nodes, width, height) {
-  const cols = Math.ceil(Math.sqrt(nodes.length));
-  const spacingX = width / (cols + 1);
-  const spacingY = height / (cols + 1);
-  return nodes.map((node, i) => ({
-    ...node,
-    x: spacingX * (i % cols + 1),
-    y: spacingY * (Math.floor(i / cols) + 1)
-  }));
-}
+// src/components/data-display/graphs-v2/datasource/StaticGraphDataSource.ts
+var StaticGraphDataSource = class extends BaseGraphDataSource {
+  constructor(config = {}) {
+    super();
+    this.mode = GRAPH_DATA_MODES.STATIC;
+    this.data = Array.isArray(config) ? config : config.data ?? [];
+  }
+  getInitialData() {
+    return this.data;
+  }
+  refresh() {
+    return this.data;
+  }
+  setData(data) {
+    this.data = data;
+  }
+  appendData(data) {
+    const nextData = this.ensureArray(data);
+    this.data = [...this.data, ...nextData];
+  }
+  clearData() {
+    this.data = [];
+  }
+};
 
-// src/components/data-display/graphs/layouts/treeLayout.ts
-function createTreeLayout(nodes, edges, width, height) {
-  const levelMap = {};
-  const root = nodes[0];
-  if (!root) return nodes;
-  levelMap[root.id] = 0;
-  edges.forEach((edge) => {
-    const fromId = typeof edge.from === "string" ? edge.from : edge.from.id;
-    const toId = typeof edge.to === "string" ? edge.to : edge.to.id;
-    levelMap[toId] = (levelMap[fromId] ?? 0) + 1;
-  });
-  const maxLevel = Math.max(...Object.values(levelMap));
-  const levelGroups = {};
-  nodes.forEach((node) => {
-    const level = levelMap[node.id] ?? 0;
-    if (!levelGroups[level]) levelGroups[level] = [];
-    levelGroups[level].push(node);
-  });
-  return nodes.map((node) => {
-    const level = levelMap[node.id] ?? 0;
-    const siblings = levelGroups[level];
-    const index = siblings.indexOf(node);
-    return {
-      ...node,
-      x: (index + 1) * width / (siblings.length + 1),
-      y: (level + 1) * height / (maxLevel + 2)
-    };
-  });
-}
-var NODE_SIZE = 48;
-var GraphNode = ({ node, renderCustom }) => {
-  if (node.x === void 0 || node.y === void 0) return null;
-  const x = node.x;
-  const y = node.y;
-  if (renderCustom) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "foreignObject",
-      {
-        x: x - NODE_SIZE / 2,
-        y: y - NODE_SIZE / 2,
-        width: NODE_SIZE,
-        height: NODE_SIZE,
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              width: NODE_SIZE,
-              height: NODE_SIZE,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: renderCustom(node)
-          }
-        )
-      }
-    );
+// src/components/data-display/graphs-v2/datasource/PollingGraphDataSource.ts
+var PollingGraphDataSource = class extends BaseGraphDataSource {
+  constructor(config) {
+    super();
+    this.mode = GRAPH_DATA_MODES.POLLING;
+    this.fetcher = config.fetcher;
+    this.interval = config.interval ?? GRAPH_DEFAULT_POLLING_INTERVAL;
+    this.immediate = config.immediate ?? true;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x}, ${y})`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { r: 16, fill: "#4f46e5" }),
-    node.label && /* @__PURE__ */ jsxRuntime.jsx(
-      "text",
-      {
-        y: 4,
-        textAnchor: "middle",
-        fontSize: "11",
-        fill: "white",
-        pointerEvents: "none",
-        children: node.label
+  getInitialData() {
+    return this.refresh();
+  }
+  refresh() {
+    return this.safeExecute(async () => {
+      const data = await this.fetcher();
+      return this.ensureArray(data);
+    });
+  }
+  subscribe(onData, onError) {
+    let disposed = false;
+    let fetching = false;
+    let timer;
+    const execute = async () => {
+      if (disposed || fetching) {
+        return;
       }
-    )
-  ] });
-};
-function resolveNode(ref, map) {
-  return typeof ref === "string" ? map.get(ref) : ref;
-}
-var GraphEdge = ({ edge, nodeMap }) => {
-  const source = resolveNode(edge.from, nodeMap);
-  const target = resolveNode(edge.to, nodeMap);
-  if (!source || !target) return null;
-  if (source.x == null || source.y == null) return null;
-  if (target.x == null || target.y == null) return null;
-  const labelX = (source.x + target.x) / 2;
-  const labelY = (source.y + target.y) / 2;
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: source.x,
-        y1: source.y,
-        x2: target.x,
-        y2: target.y,
-        stroke: "#64748b",
-        strokeWidth: 1.5
+      try {
+        fetching = true;
+        const data = await this.refresh();
+        if (!disposed) {
+          onData(data);
+        }
+      } catch (error) {
+        if (!disposed) {
+          onError?.(this.normalizeError(error));
+        }
+      } finally {
+        fetching = false;
       }
-    ),
-    edge.weight && /* @__PURE__ */ jsxRuntime.jsx(
-      "text",
-      {
-        x: labelX,
-        y: labelY - 4,
-        textAnchor: "middle",
-        fontSize: 10,
-        fill: "#e5e7eb",
-        children: edge.weight
+    };
+    if (this.immediate) {
+      void execute();
+    }
+    timer = globalThis.setInterval(() => {
+      void execute();
+    }, this.interval);
+    return () => {
+      disposed = true;
+      if (timer) {
+        globalThis.clearInterval(timer);
       }
-    )
-  ] });
+    };
+  }
 };
-var GraphRenderer = ({
-  data,
-  layout = "force",
-  nodeRenderer,
-  width = 1e3,
-  height = 700
-}) => {
-  const [nodes, setNodes] = React4.useState([]);
-  const edges = data.edges;
-  const simulationRef = React4.useRef(null);
-  const [offset, setOffset] = React4.useState({ x: 0, y: 0 });
-  const isDragging = React4.useRef(false);
-  const lastPos = React4.useRef({ x: 0, y: 0 });
-  const nodeMap = React4.useMemo(() => {
-    return new Map(nodes.map((n) => [n.id, n]));
-  }, [nodes]);
-  React4.useEffect(() => {
-    simulationRef.current?.stop?.();
-    const positionedNodes = data.nodes.map((n) => ({
-      ...n,
-      x: width / 2,
-      y: height / 2
-    }));
-    const executor = getLayout(layout);
-    const instance = executor({
-      nodes: positionedNodes,
-      edges,
-      width,
-      height,
-      onTick: setNodes
+
+// src/components/data-display/graphs-v2/datasource/RealtimeGraphDataSource.ts
+var RealtimeGraphDataSource = class extends BaseGraphDataSource {
+  constructor(config) {
+    super();
+    this.mode = GRAPH_DATA_MODES.REALTIME;
+    this.connect = config.connect;
+    this.initialDataLoader = config.getInitialData;
+    this.refreshHandler = config.refresh;
+  }
+  getInitialData() {
+    if (!this.initialDataLoader) {
+      return [];
+    }
+    return this.safeExecute(async () => {
+      const data = await this.initialDataLoader?.();
+      return this.ensureArray(data);
     });
-    simulationRef.current = instance;
-    return () => instance.stop?.();
-  }, [data, layout, width, height]);
-  const onMouseDown = (e) => {
-    isDragging.current = true;
-    lastPos.current = { x: e.clientX, y: e.clientY };
-  };
-  const onMouseMove = (e) => {
-    if (!isDragging.current) return;
-    const dx = e.clientX - lastPos.current.x;
-    const dy = e.clientY - lastPos.current.y;
-    setOffset((prev) => ({
-      x: prev.x + dx,
-      y: prev.y + dy
-    }));
-    lastPos.current = { x: e.clientX, y: e.clientY };
-  };
-  const stopDrag = () => isDragging.current = false;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden border border-gray-800 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "100%",
-      height,
-      viewBox: `0 0 ${width} ${height}`,
-      onMouseDown,
-      onMouseMove,
-      onMouseUp: stopDrag,
-      onMouseLeave: stopDrag,
-      style: {
-        cursor: isDragging.current ? "grabbing" : "grab"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${offset.x}, ${offset.y})`, children: [
-        edges.map((edge, i) => /* @__PURE__ */ jsxRuntime.jsx(GraphEdge, { edge, nodeMap }, edge.id || i)),
-        nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(GraphNode, { node, renderCustom: nodeRenderer }, node.id))
-      ] })
+  }
+  refresh() {
+    if (!this.refreshHandler) {
+      return this.getInitialData();
     }
-  ) });
-};
-var Graph = ({
-  data,
-  layout = "force",
-  nodeRenderer,
-  width = 800,
-  height = 500,
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...rest,
-      style: { width, height },
-      className: cn("relative bg-gray-900 rounded-lg", className),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        GraphRenderer,
-        {
-          data,
-          layout,
-          nodeRenderer,
-          width,
-          height
+    return this.safeExecute(async () => {
+      const data = await this.refreshHandler?.();
+      return this.ensureArray(data);
+    });
+  }
+  subscribe(onData, onError) {
+    try {
+      return this.connect(
+        (data) => {
+          onData(this.ensureArray(data));
+        },
+        (error) => {
+          onError?.(this.normalizeError(error));
         }
-      )
+      );
+    } catch (error) {
+      onError?.(this.normalizeError(error));
+      return () => {
+      };
     }
-  );
+  }
 };
-var CloudinaryContext = React4.createContext(null);
+var CloudinaryContext = React3.createContext(null);
 var CloudinaryProvider = ({
   cloudName,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(CloudinaryContext.Provider, { value: { cloudName }, children });
 var useCloudinaryConfig = () => {
-  const ctx = React4.useContext(CloudinaryContext);
+  const ctx = React3.useContext(CloudinaryContext);
   if (!ctx) {
     throw new Error(
       "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
@@ -2061,7 +4229,7 @@ var ListItem = ({
             children: bullet
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React4__default.default.cloneElement(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React3__default.default.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -2095,7 +4263,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React4__default.default.isValidElement(item)) {
+  if (React3__default.default.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -2559,8 +4727,8 @@ function Table({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [sortKey, setSortKey] = React4.useState(null);
-  const [sortOrder, setSortOrder] = React4.useState("asc");
+  const [sortKey, setSortKey] = React3.useState(null);
+  const [sortOrder, setSortOrder] = React3.useState("asc");
   const toggleSort = (key) => {
     if (sortKey === key) {
       setSortOrder((prev) => prev === "asc" ? "desc" : "asc");
@@ -2569,7 +4737,7 @@ function Table({
       setSortOrder("asc");
     }
   };
-  const sortedData = React4.useMemo(() => {
+  const sortedData = React3.useMemo(() => {
     if (!sortKey) return data;
     return [...data].sort((a, b) => {
       const aVal = a[sortKey];
@@ -2652,7 +4820,7 @@ function Tag({ text, className, ...rest }) {
   );
 }
 var Tag_default = Tag;
-function Tooltip4({
+function Tooltip9({
   children,
   show,
   offsetX = 20,
@@ -2660,8 +4828,8 @@ function Tooltip4({
   className,
   ...rest
 }) {
-  const [pos, setPos] = React4.useState({ x: 0, y: 0 });
-  React4.useEffect(() => {
+  const [pos, setPos] = React3.useState({ x: 0, y: 0 });
+  React3.useEffect(() => {
     if (!show) return;
     const handleMove = (e) => {
       setPos({ x: e.clientX + offsetX, y: e.clientY + offsetY });
@@ -2790,8 +4958,8 @@ function CloudinaryVideo({
 }
 var CloudinaryVideo_default = CloudinaryVideo;
 var FormObserver = ({ formik, onChange }) => {
-  const prevValuesRef = React4.useRef(formik.values);
-  React4.useEffect(() => {
+  const prevValuesRef = React3.useRef(formik.values);
+  React3.useEffect(() => {
     if (!onChange) return;
     const currentValues = formik.values;
     const prevValues = prevValuesRef.current;
@@ -2810,7 +4978,7 @@ var FormObserver = ({ formik, onChange }) => {
 };
 var FormObserver_default = FormObserver;
 var DirtyObserver = ({ formik, onDirtyChange }) => {
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (onDirtyChange) {
       onDirtyChange(formik.dirty);
     }
@@ -2819,7 +4987,7 @@ var DirtyObserver = ({ formik, onDirtyChange }) => {
 };
 var DirtyObserver_default = DirtyObserver;
 var UnsavedChangesGuard = ({ formik, enabled }) => {
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (!enabled) return;
     const handleBeforeUnload = (e) => {
       if (!formik.dirty) return;
@@ -2925,7 +5093,7 @@ function TransitionDropdown({ visibility, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Transition,
     {
-      as: React4.Fragment,
+      as: React3.Fragment,
       show: visibility,
       enter: "transition duration-100 ease-out",
       enterFrom: "transform scale-95 opacity-0",
@@ -2942,7 +5110,7 @@ function TransitionFadeIn({ visibility, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Transition,
     {
-      as: React4.Fragment,
+      as: React3.Fragment,
       show: visibility,
       enter: `transition-all ease-in-out duration-700 dalay-[0ms]`,
       enterFrom: "opacity-0 translate-y-6",
@@ -3045,17 +5213,17 @@ function YoutubeVideo({
   ) });
 }
 var YoutubeVideo_default = YoutubeVideo;
-var ThemeContext = React4.createContext(
+var ThemeContext = React3.createContext(
   void 0
 );
 var ThemeProvider = ({
   defaultTheme = "dark",
   children
 }) => {
-  const [theme, setTheme] = React4.useState(() => {
+  const [theme, setTheme] = React3.useState(() => {
     return localStorage.getItem("theme") || defaultTheme;
   });
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
     } else {
@@ -3069,7 +5237,7 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
 };
 var ThemeSwitch = () => {
-  const themeContext = React4.useContext(ThemeContext);
+  const themeContext = React3.useContext(ThemeContext);
   if (!themeContext) return null;
   const { theme, toggleTheme } = themeContext;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3132,7 +5300,7 @@ var ShapeSwitch = () => {
     {
       value: currentShape,
       onChange: handleChange,
-      className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        ",
+      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
       children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
@@ -3140,7 +5308,7 @@ var ShapeSwitch = () => {
 
 // src/hooks/theme/useCurrentTheme.ts
 var useCurrentTheme = () => {
-  const context = React4.useContext(ThemeContext);
+  const context = React3.useContext(ThemeContext);
   if (!context) {
     throw new Error("useCurrentTheme must be used within a ThemeProvider");
   }
@@ -14483,7 +16651,7 @@ function WorldMap({
     }
   };
   const mode = isDarkMode ? mapStyles.dark : mapStyles.light;
-  const resolvedData = React4.useMemo(() => {
+  const resolvedData = React3.useMemo(() => {
     return data.map((item) => {
       const c = COUNTRIES.find((x) => x.code === item.code);
       if (!c) return null;
@@ -14495,8 +16663,8 @@ function WorldMap({
     }).filter(Boolean);
   }, [data]);
   const maxValue = resolvedData.length > 0 ? Math.max(...resolvedData.map((d) => d.value)) : 0;
-  const [showTooltip, setShowTooltip] = React4.useState(false);
-  const [tooltipContent, setTooltipContent] = React4.useState(null);
+  const [showTooltip, setShowTooltip] = React3.useState(false);
+  const [tooltipContent, setTooltipContent] = React3.useState(null);
   const handleMouseMove = (_e, point) => {
     setTooltipContent(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -14554,7 +16722,7 @@ function WorldMap({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tooltip4, { show: showTooltip, children: tooltipContent })
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip9, { show: showTooltip, children: tooltipContent })
   ] });
 }
 var sizes4 = {
@@ -14582,7 +16750,7 @@ function Button({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const btnRef = React4.useRef(null);
+  const btnRef = React3.useRef(null);
   const variantStyles = resolveAppearanceStyles({
     appearance,
     variant,
@@ -14683,7 +16851,7 @@ var toggleType = (visibility) => {
 var PasswordVisibilityToggler = ({
   onClick
 }) => {
-  const [passwordVisibility, setPasswordVisibilty] = React4.useState(false);
+  const [passwordVisibility, setPasswordVisibilty] = React3.useState(false);
   const handleOnClick = (visibility) => {
     onClick(visibility);
     setPasswordVisibilty(visibility);
@@ -14708,7 +16876,7 @@ var Input = ({
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
   const [field, meta] = formik.useField(props);
-  const [passwordVisibility, setPasswordVisibilty] = React4.useState(false);
+  const [passwordVisibility, setPasswordVisibilty] = React3.useState(false);
   const inputType = type === "password" ? toggleType(passwordVisibility) : type;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -14753,7 +16921,7 @@ var InputFile = ({
   styles,
   ...props
 }) => {
-  const fileInputRef = React4.useRef(null);
+  const fileInputRef = React3.useRef(null);
   const [field, meta, helpers] = formik.useField(props);
   const handleFileChange = (e) => {
     const file = e.target.files?.[0] || null;
@@ -15235,7 +17403,7 @@ function ImageView({ imageUrl, secure = true, alt = "image" }) {
   ) }) });
 }
 var ImageView_default = ImageView;
-var ImageInput = React4.forwardRef(
+var ImageInput = React3.forwardRef(
   ({
     title = "Upload Image",
     uploadDir = "eg-frontend-admin-temp",
@@ -15247,10 +17415,10 @@ var ImageInput = React4.forwardRef(
     const [field, meta, helpers] = formik.useField(props);
     const { value: imageUrl } = field;
     const { setValue } = helpers;
-    const [image, setImage] = React4.useState(null);
-    const [url, setUrl] = React4.useState(imageUrl);
-    const [loading, setLoading] = React4.useState(false);
-    const [preview, setPreview] = React4.useState(null);
+    const [image, setImage] = React3.useState(null);
+    const [url, setUrl] = React3.useState(imageUrl);
+    const [loading, setLoading] = React3.useState(false);
+    const [preview, setPreview] = React3.useState(null);
     const uploadImage = async () => {
       if (!image) return;
       setLoading(true);
@@ -15296,10 +17464,10 @@ var ImageInput = React4.forwardRef(
       if (!disableSetValue) setValue("");
       setLoading(false);
     };
-    React4.useImperativeHandle(ref, () => ({
+    React3.useImperativeHandle(ref, () => ({
       handleResetClick
     }));
-    React4.useEffect(() => {
+    React3.useEffect(() => {
       if (!disableSetValue) setValue(url);
     }, [url, setValue, disableSetValue]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
@@ -15384,14 +17552,14 @@ function MultiImageInput({
   const [field, meta, helpers] = formik.useField(props);
   const { value: imageUrls } = field;
   const { setValue } = helpers;
-  const imageInputRef = React4.useRef(null);
+  const imageInputRef = React3.useRef(null);
   const onValueChanged = (url) => {
     setValue([...imageUrls, url]);
     if (imageInputRef.current) {
       imageInputRef.current.handleResetClick();
     }
   };
-  React4.useEffect(() => {
+  React3.useEffect(() => {
   }, [imageUrls]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row flex-wrap gap-5 w-ful", children: [
@@ -15491,9 +17659,9 @@ function StarRatingInput({
   const { name } = props;
   const [field, meta] = formik.useField(props);
   const formikContext = formik.useFormikContext();
-  const [rating, setRating] = React4.useState(Number(field.value) || 0);
-  const [hover, setHover] = React4.useState(null);
-  React4.useEffect(() => {
+  const [rating, setRating] = React3.useState(Number(field.value) || 0);
+  const [hover, setHover] = React3.useState(null);
+  React3.useEffect(() => {
     setRating(Number(field.value));
   }, [field.value]);
   const handleOnClick = (index) => {
@@ -15642,7 +17810,7 @@ function Tags({
   ...props
 }) {
   const [field, meta, helpers] = formik.useField({ ...props });
-  const [input, setInput] = React4.useState("");
+  const [input, setInput] = React3.useState("");
   const handleAddTag = () => {
     const trimmed = input.trim();
     if (trimmed && !field.value.includes(trimmed) && field.value.length < limit) {
@@ -15906,8 +18074,8 @@ var Header = ({
   );
 };
 var useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = React4.useState(window.innerWidth < breakpoint);
-  React4.useEffect(() => {
+  const [isMobile, setIsMobile] = React3.useState(window.innerWidth < breakpoint);
+  React3.useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < breakpoint);
     };
@@ -16017,7 +18185,7 @@ function BlockGroup({
 }
 var BlockGroup_default = BlockGroup;
 var useTheme = () => {
-  const context = React4.useContext(ThemeContext);
+  const context = React3.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -16079,11 +18247,11 @@ function MarkdownEditor({
   ] });
 }
 var MarkdownEditor_default = MarkdownEditor;
-var MarkdownContext = React4.createContext(null);
+var MarkdownContext = React3.createContext(null);
 
 // src/components/markdown/hooks/useMarkdown.tsx
 function useMarkdown() {
-  return React4.useContext(MarkdownContext);
+  return React3.useContext(MarkdownContext);
 }
 
 // src/components/markdown/utils/generateHeadingNumbers.ts
@@ -16126,7 +18294,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: "\r\n            text-sm\r\n            font-semibold\r\n            uppercase\r\n            tracking-wide\r\n            text-gray-900\r\n            dark:text-gray-100\r\n          ",
+        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
         children: title
       }
     ) }),
@@ -16158,7 +18326,7 @@ function MarkdownViewer({ value }) {
   const markdown = value ?? context?.markdown ?? "";
   const headings = context?.headings ?? [];
   const setActiveHeading = context?.setActiveHeading;
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     const timeout = setTimeout(() => {
       headings.forEach((heading) => {
         const headingEls = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
@@ -16263,8 +18431,8 @@ function extractHeadings(markdown) {
   });
 }
 function MarkdownProvider({ markdown, children }) {
-  const [activeHeading, setActiveHeading] = React4.useState("");
-  const headings = React4.useMemo(() => extractHeadings(markdown), [markdown]);
+  const [activeHeading, setActiveHeading] = React3.useState("");
+  const headings = React3.useMemo(() => extractHeadings(markdown), [markdown]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MarkdownContext.Provider,
     {
@@ -16337,7 +18505,7 @@ var Breadcrumb = ({
   const { config } = useEUIConfig();
   const pathname = currentPath || (typeof window !== "undefined" ? window.location.pathname : "/");
   const resolvedRoutes = routes || config?.routes || [];
-  const resolvedData = React4.useMemo(() => {
+  const resolvedData = React3.useMemo(() => {
     if (resolvedRoutes && resolvedRoutes.length > 0) {
       return buildFromRoutes(resolvedRoutes, pathname);
     }
@@ -16354,7 +18522,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React3__default.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           BreadcrumbItem_default,
           {
@@ -16699,7 +18867,7 @@ function HeaderNav({ data = [], styles }) {
 }
 var HeaderNav_default = HeaderNav;
 function useClickOutside(ref, fun) {
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     const listener = (e) => {
       if (!ref.current || ref.current.contains(e.target)) {
         return;
@@ -16740,8 +18908,8 @@ var HeaderNavGroup = ({
   styles,
   children
 }) => {
-  const [collapsed, setCollapsed] = React4.useState(true);
-  const headerNavGroupRef = React4.useRef(null);
+  const [collapsed, setCollapsed] = React3.useState(true);
+  const headerNavGroupRef = React3.useRef(null);
   useClickOutside(headerNavGroupRef, () => setCollapsed(true));
   const handleNavigation = () => {
     if (to) {
@@ -16964,8 +19132,8 @@ var MenuGroup = ({
   style,
   ...rest
 }) => {
-  const [collapsed, setCollapsed] = React4.useState(!defaultOpen);
-  React4.useEffect(() => {
+  const [collapsed, setCollapsed] = React3.useState(!defaultOpen);
+  React3.useEffect(() => {
     if (defaultOpen !== void 0) {
       setCollapsed(!defaultOpen);
     }
@@ -17082,12 +19250,12 @@ var Menu = ({
   defaultMenuElements,
   currentPath
 }) => {
-  const normalizedItems = React4.useMemo(() => assignKeys(items), [items]);
-  const selected = React4.useMemo(() => {
+  const normalizedItems = React3.useMemo(() => assignKeys(items), [items]);
+  const selected = React3.useMemo(() => {
     if (!currentPath) return void 0;
     return findSelectedKey(normalizedItems, currentPath);
   }, [currentPath, normalizedItems]);
-  const parentMap = React4.useMemo(
+  const parentMap = React3.useMemo(
     () => buildParentMap(normalizedItems),
     [normalizedItems]
   );
@@ -17240,8 +19408,8 @@ function RouteTabs({
     const currentPath = window.location.pathname;
     return navData.find((tab) => tab.to === currentPath)?.to || navData[0]?.to;
   };
-  const [activeTab, setActiveTab] = React4.useState(getActiveTab);
-  React4.useEffect(() => {
+  const [activeTab, setActiveTab] = React3.useState(getActiveTab);
+  React3.useEffect(() => {
     if (mode !== "route") return;
     const handlePopState = () => {
       setActiveTab(getActiveTab());
@@ -17338,7 +19506,7 @@ function Modal({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const modalRef = React4.useRef(null);
+  const modalRef = React3.useRef(null);
   useClickOutside(
     modalRef,
     enableCloseOnClickOutside ? handleOnClose : void 0
@@ -17353,7 +19521,7 @@ function Modal({
       leave: "transition duration-100 ease-out",
       leaveFrom: "transform scale-200 opacity-100",
       leaveTo: "transform scale-95 opacity-0",
-      as: React4.Fragment,
+      as: React3.Fragment,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-eui-dark-900/90 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -17407,8 +19575,8 @@ var GlowWrapper = ({
   className = "",
   hideOnLeave = true
 }) => {
-  const ref = React4.useRef(null);
-  const handleMove = React4.useCallback(
+  const ref = React3.useRef(null);
+  const handleMove = React3.useCallback(
     (e) => {
       const el = ref.current;
       if (!el) return;
@@ -17430,7 +19598,7 @@ var GlowWrapper = ({
     },
     [glowSize, glowColor]
   );
-  const handleLeave = React4.useCallback(() => {
+  const handleLeave = React3.useCallback(() => {
     const el = ref.current;
     if (!el || !hideOnLeave) return;
     el.style.setProperty("--glow-x", `-999px`);
@@ -17456,7 +19624,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
+            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -17466,8 +19634,43 @@ var GlowWrapper = ({
   );
 };
 var GlowWrapper_default = GlowWrapper;
+function InfiniteScrollTrigger({
+  children,
+  className,
+  hasMore = false,
+  isLoading = false,
+  rootMargin = "600px",
+  threshold = 0,
+  onLoadMore
+}) {
+  const triggerRef = React3.useRef(null);
+  React3.useEffect(() => {
+    const element = triggerRef.current;
+    if (!element || !hasMore || isLoading) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          onLoadMore?.();
+        }
+      },
+      {
+        root: null,
+        rootMargin,
+        threshold
+      }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasMore, isLoading, onLoadMore, rootMargin, threshold]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, className: cn("w-full", className), children });
+}
+var InfiniteScrollTrigger_default = InfiniteScrollTrigger;
 function ShowMore({ text, limit }) {
-  const [showMore, setShowMore] = React4.useState(false);
+  const [showMore, setShowMore] = React3.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     showMore ? text : `${text.substring(0, limit)}`,
     text.length > limit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -17495,8 +19698,8 @@ function CommentComposer({
   loading,
   onSubmit
 }) {
-  const [value, setValue] = React4.useState("");
-  const [focused, setFocused] = React4.useState(false);
+  const [value, setValue] = React3.useState("");
+  const [focused, setFocused] = React3.useState(false);
   async function handleSubmit() {
     const content = value.trim();
     if (!content) {
@@ -17751,7 +19954,7 @@ function CommentHeader({ comment, config }) {
 }
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
-  const [show, setShow] = React4.useState(defaultVisibility);
+  const [show, setShow] = React3.useState(defaultVisibility);
   const openDrawer = () => {
     setShow((prev) => !prev);
   };
@@ -17766,7 +19969,7 @@ var useDrawer = (defaultVisibility = true) => {
 };
 var useDrawer_default = useDrawer;
 var useModal = () => {
-  const [show, setShow] = React4.useState(false);
+  const [show, setShow] = React3.useState(false);
   const handleOpenModal = () => {
     setShow(true);
   };
@@ -17814,7 +20017,7 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const ref = React4.useRef(null);
+  const ref = React3.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -17942,11 +20145,11 @@ function CommentItem({
   onDelete,
   onReport
 }) {
-  const [collapsed, setCollapsed] = React4.useState(true);
-  const [isReplying, setIsReplying] = React4.useState(false);
-  const [menuOpen, setMenuOpen] = React4.useState(false);
-  const [loadingReplies, setLoadingReplies] = React4.useState(false);
-  const [repliesLoaded, setRepliesLoaded] = React4.useState(false);
+  const [collapsed, setCollapsed] = React3.useState(true);
+  const [isReplying, setIsReplying] = React3.useState(false);
+  const [menuOpen, setMenuOpen] = React3.useState(false);
+  const [loadingReplies, setLoadingReplies] = React3.useState(false);
+  const [repliesLoaded, setRepliesLoaded] = React3.useState(false);
   const resolvedDepth = Math.min(depth, config.maxDepth);
   const {
     Header: HeaderComponent = CommentHeader_default,
@@ -18110,18 +20313,18 @@ function CommentThread({
   onDelete,
   onReport
 }) {
-  const [comments, setComments] = React4.useState([]);
-  const [isLoadingComments, setIsLoadingComments] = React4.useState(true);
-  const [replyCache, setReplyCache] = React4.useState(
+  const [comments, setComments] = React3.useState([]);
+  const [isLoadingComments, setIsLoadingComments] = React3.useState(true);
+  const [replyCache, setReplyCache] = React3.useState(
     {}
   );
-  const replyCacheRef = React4.useRef(replyCache);
+  const replyCacheRef = React3.useRef(replyCache);
   const ComposerComponent = components?.Composer ?? CommentComposer_default;
   const resolvedConfig = {
     ...DEFAULT_COMMENT_THREAD_CONFIG,
     ...config
   };
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     async function loadComments() {
       try {
         const result = await dataSource.getComments({
@@ -18135,10 +20338,10 @@ function CommentThread({
     }
     void loadComments();
   }, [dataSource, resolvedConfig.commentsPerPage]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     replyCacheRef.current = replyCache;
   }, [replyCache]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     let cancelled = false;
     async function refreshLoadedReplies() {
       const parentIds = Object.keys(replyCacheRef.current);
@@ -18174,13 +20377,13 @@ function CommentThread({
       cancelled = true;
     };
   }, [dataSource, resolvedConfig.repliesPerPage]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (!updatedComment) {
       return;
     }
     updateCommentEverywhere(updatedComment.id, () => updatedComment);
   }, [updatedComment]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (!deletedComment) {
       return;
     }
@@ -18394,13 +20597,13 @@ function SliderItem({
 }
 var SliderItem_default = SliderItem;
 function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
-  const [images, setImages] = React4.useState([
+  const [images, setImages] = React3.useState([
     {
       img: coverArt,
       selected: true
     }
   ]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     setImages([
       {
         img: coverArt,
@@ -18408,7 +20611,7 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       }
     ]);
   }, [isSuccess]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (screenshots) {
       const selectableScreenshots = [];
       screenshots.forEach((item) => {
@@ -18420,8 +20623,8 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       setImages((prev) => [...prev, ...selectableScreenshots]);
     }
   }, [isSuccess]);
-  const [displayImg, setDisplayImg] = React4.useState(coverArt);
-  React4.useEffect(() => {
+  const [displayImg, setDisplayImg] = React3.useState(coverArt);
+  React3.useEffect(() => {
     setDisplayImg(coverArt);
   }, [coverArt]);
   const displayImageHandler = (itemIndex, img) => {
@@ -18533,7 +20736,7 @@ function WorldMapCountryTable({
   title = "Country Breakdown",
   data
 }) {
-  const enrichedData = React4.useMemo(() => {
+  const enrichedData = React3.useMemo(() => {
     const mapped = data.map((item) => {
       const countryMeta = COUNTRIES.find((c) => c.code === item.code);
       return {
@@ -18546,11 +20749,11 @@ function WorldMapCountryTable({
     });
     return mapped.sort((a, b) => b.value - a.value);
   }, [data]);
-  const total = React4.useMemo(
+  const total = React3.useMemo(
     () => enrichedData.reduce((sum, i) => sum + i.value, 0),
     [enrichedData]
   );
-  const finalData = React4.useMemo(() => {
+  const finalData = React3.useMemo(() => {
     return enrichedData.map((item) => ({
       ...item,
       percent: total > 0 ? item.value / total * 100 : 0
@@ -18795,7 +20998,7 @@ var TNDropdownGroup = ({
   navigate,
   className
 }) => {
-  const [open, setOpen] = React4.useState(true);
+  const [open, setOpen] = React3.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -18884,8 +21087,8 @@ var TNGroup = ({
   components,
   selected
 }) => {
-  const [open, setOpen] = React4.useState(false);
-  const timeoutRef = React4.useRef(null);
+  const [open, setOpen] = React3.useState(false);
+  const timeoutRef = React3.useRef(null);
   const handleEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -19022,7 +21225,7 @@ function SidebarLayout({
   header = /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
   footer = /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
 }) {
-  const [showSidebar, setShowSidebar] = React4.useState(true);
+  const [showSidebar, setShowSidebar] = React3.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsx(GenericLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx(Layout, { flexDirection: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs(Content, { sidebarVisible: showSidebar, styles: "theme-bg-md pt-[60px]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ContentArea_default, { children }),
     footer
@@ -19076,7 +21279,7 @@ function ScrollToTop({
   behavior = "smooth",
   target
 }) {
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (target) {
       target.scrollTo({
         top: 0,
@@ -19094,11 +21297,14 @@ function ScrollToTop({
 var ScrollToTop_default = ScrollToTop;
 
 exports.Accordion = Accordion_default;
+exports.AreaGraph = AreaGraph;
 exports.AsyncComponentWrapper = AsyncComponentWrapper_default;
 exports.Avatar = Avatar;
 exports.Backdrop = Backdrop_default;
 exports.Badge = Badge;
 exports.BarChart = BarChart_default;
+exports.BarGraph = BarGraph;
+exports.BaseGraphDataSource = BaseGraphDataSource;
 exports.Block = Block_default;
 exports.BlockGroup = BlockGroup_default;
 exports.BoxNav = BoxNav_default;
@@ -19122,6 +21328,7 @@ exports.Code = Code;
 exports.CommentThread = CommentThread_default;
 exports.Content = Content;
 exports.ContentArea = ContentArea_default;
+exports.DEFAULT_GRAPH_THEME = DEFAULT_GRAPH_THEME;
 exports.DataView = DataView;
 exports.DataViewTable = DataViewTable_default;
 exports.DateSelector = DateSelector_default;
@@ -19144,12 +21351,40 @@ exports.FooterNavItemContext = FooterNavItemContext;
 exports.FooterNavItemTitle = FooterNavItemTitle;
 exports.Form = Form;
 exports.FormResponse = FormResponse_default;
+exports.GRAPH_COLOR_PALETTE = GRAPH_COLOR_PALETTE;
+exports.GRAPH_DARK_THEME = GRAPH_DARK_THEME;
+exports.GRAPH_DATA_MODES = GRAPH_DATA_MODES;
+exports.GRAPH_DEFAULT_ACTIVE_DOT_RADIUS = GRAPH_DEFAULT_ACTIVE_DOT_RADIUS;
+exports.GRAPH_DEFAULT_ANIMATION_DURATION = GRAPH_DEFAULT_ANIMATION_DURATION;
+exports.GRAPH_DEFAULT_BAR_RADIUS = GRAPH_DEFAULT_BAR_RADIUS;
+exports.GRAPH_DEFAULT_DOT_RADIUS = GRAPH_DEFAULT_DOT_RADIUS;
+exports.GRAPH_DEFAULT_HEIGHT = GRAPH_DEFAULT_HEIGHT;
+exports.GRAPH_DEFAULT_MARGIN = GRAPH_DEFAULT_MARGIN;
+exports.GRAPH_DEFAULT_MAX_REALTIME_POINTS = GRAPH_DEFAULT_MAX_REALTIME_POINTS;
+exports.GRAPH_DEFAULT_POLLING_INTERVAL = GRAPH_DEFAULT_POLLING_INTERVAL;
+exports.GRAPH_DEFAULT_STROKE_WIDTH = GRAPH_DEFAULT_STROKE_WIDTH;
+exports.GRAPH_EMPTY_MESSAGE = GRAPH_EMPTY_MESSAGE;
+exports.GRAPH_ERROR_MESSAGE = GRAPH_ERROR_MESSAGE;
+exports.GRAPH_LIGHT_THEME = GRAPH_LIGHT_THEME;
+exports.GRAPH_LOADING_MESSAGE = GRAPH_LOADING_MESSAGE;
+exports.GRAPH_STATUSES = GRAPH_STATUSES;
+exports.GRAPH_STATUS_COLORS = GRAPH_STATUS_COLORS;
+exports.GRAPH_VALUE_FORMATS = GRAPH_VALUE_FORMATS;
+exports.GaugeGraph = GaugeGraph;
 exports.GenericLayout = GenericLayout_default;
 exports.GlowWrapper = GlowWrapper_default;
 exports.Graph = Graph;
-exports.GraphEdge = GraphEdge;
-exports.GraphNode = GraphNode;
-exports.GraphRenderer = GraphRenderer;
+exports.GraphContainer = GraphContainer;
+exports.GraphContext = GraphContext;
+exports.GraphEmptyState = GraphEmptyState;
+exports.GraphErrorState = GraphErrorState;
+exports.GraphHeader = GraphHeader;
+exports.GraphLegend = GraphLegend;
+exports.GraphLoadingState = GraphLoadingState;
+exports.GraphPanel = GraphPanel;
+exports.GraphProvider = GraphProvider;
+exports.GraphToolbar = GraphToolbar;
+exports.GraphTooltip = GraphTooltip;
 exports.Grid = Grid_default;
 exports.Header = Header;
 exports.HeaderNav = HeaderNav_default;
@@ -19160,6 +21395,7 @@ exports.HeaderNavItemTitle = HeaderNavItemTitle;
 exports.HomeLayout = HomeLayout_default;
 exports.Image = Image2;
 exports.ImageInput = ImageInput_default;
+exports.InfiniteScrollTrigger = InfiniteScrollTrigger_default;
 exports.Info = Info_default;
 exports.Input = Input;
 exports.InputFile = InputFile;
@@ -19171,6 +21407,7 @@ exports.Label = Label;
 exports.Layout = Layout;
 exports.Lead = Lead;
 exports.LineChart = LineChart_default;
+exports.LineGraph = LineGraph;
 exports.Link = Link;
 exports.List = List_default;
 exports.ListItem = ListItem_default;
@@ -19189,13 +21426,17 @@ exports.NumericRating = NumericRating_default;
 exports.Overline = Overline;
 exports.Paragraph = Paragraph;
 exports.PieChart = PieChart_default;
+exports.PieGraph = PieGraph;
+exports.PollingGraphDataSource = PollingGraphDataSource;
 exports.PriceTag = PriceTag;
 exports.ProgressBar = ProgressBar;
 exports.ProgressBarRating = ProgressBarRating_default;
 exports.Quote = Quote;
 exports.Radio = Radio_default;
+exports.RealtimeGraphDataSource = RealtimeGraphDataSource;
 exports.RouteTab = RouteTab_default;
 exports.RouteTabs = RouteTabs_default;
+exports.ScatterGraph = ScatterGraph;
 exports.ScrollToTop = ScrollToTop_default;
 exports.Section = Section;
 exports.Select = Select_default;
@@ -19209,6 +21450,8 @@ exports.Slider = Slider_default;
 exports.StarRating = StarRating_default;
 exports.StarRatingDistribution = StarRatingDistribution_default;
 exports.StarRatingInput = StarRatingInput_default;
+exports.StatGraph = StatGraph;
+exports.StaticGraphDataSource = StaticGraphDataSource;
 exports.Switch = Switch_default;
 exports.TNDropdown = TNDropdown;
 exports.TNDropdownItem = TNDropdownItem;
@@ -19223,7 +21466,7 @@ exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitch = ThemeSwitch;
 exports.TitleBanner = TitleBanner;
 exports.Toast = Toast;
-exports.Tooltip = Tooltip4;
+exports.Tooltip = Tooltip9;
 exports.TopNav = TopNav;
 exports.Transition = Transition4;
 exports.TransitionDropdown = TransitionDropdown_default;
@@ -19237,24 +21480,28 @@ exports.YoutubeVideoPlayer = YoutubeVideo_default;
 exports.addReplyToCache = addReplyToCache;
 exports.applyReactionState = applyReactionState;
 exports.cn = cn;
-exports.createForceLayout = createForceLayout;
-exports.createGridLayout = createGridLayout;
-exports.createTreeLayout = createTreeLayout;
+exports.createInitialGraphState = createInitialGraphState;
 exports.decrementReplyCount = decrementReplyCount;
 exports.enumValues = enumValues;
 exports.formatCommentDate = formatCommentDate;
+exports.formatGraphValue = formatGraphValue;
 exports.getCurrencySymbol = getCurrencySymbol;
-exports.getLayout = getLayout;
 exports.getOptimisticDislikeState = getOptimisticDislikeState;
 exports.getOptimisticLikeState = getOptimisticLikeState;
+exports.graphReducer = graphReducer;
 exports.incrementReplyCount = incrementReplyCount;
 exports.isMatch = isMatch;
 exports.isRenderFn = isRenderFn;
+exports.limitRealtimePoints = limitRealtimePoints;
 exports.normalize = normalize;
-exports.registerLayout = registerLayout;
+exports.normalizeGraphData = normalizeGraphData;
+exports.normalizeGraphDataPoint = normalizeGraphDataPoint;
 exports.removeComment = removeComment;
 exports.removeCommentTreeFromCache = removeCommentTreeFromCache;
+exports.replaceRealtimePoints = replaceRealtimePoints;
 exports.resolveAppearanceStyles = resolveAppearanceStyles;
+exports.resolveGraphColor = resolveGraphColor;
+exports.resolveGraphColors = resolveGraphColors;
 exports.resolveWithGlobal = resolveWithGlobal;
 exports.sendToast = sendToast;
 exports.updateComment = updateComment;
@@ -19264,6 +21511,12 @@ exports.useCloudinaryConfig = useCloudinaryConfig;
 exports.useCurrentTheme = useCurrentTheme_default;
 exports.useDrawer = useDrawer_default;
 exports.useEUIConfig = useEUIConfig;
+exports.useGraphContext = useGraphContext;
+exports.useGraphData = useGraphData;
+exports.useGraphPolling = useGraphPolling;
+exports.useGraphRealtime = useGraphRealtime;
+exports.useGraphSeries = useGraphSeries;
+exports.useGraphTheme = useGraphTheme;
 exports.useIsMobile = useIsMobile_default;
 exports.useModal = useModal_default;
 exports.useTheme = useTheme_default;