elseware-ui 2.36.2 → 2.36.5

package/dist/index.js

@@ -1,12 +1,11 @@
 'use strict';
 
 var tailwindMerge = require('tailwind-merge');
-var React8 = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var bs = require('react-icons/bs');
 var fa = require('react-icons/fa');
 var recharts = require('recharts');
-var react = require('@headlessui/react');
 var classNames17 = require('classnames');
 var fa6 = require('react-icons/fa6');
 var ReactWorldFlags = require('react-world-flags');
@@ -43,7 +42,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React8__default = /*#__PURE__*/_interopDefault(React8);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var classNames17__default = /*#__PURE__*/_interopDefault(classNames17);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
@@ -582,9 +581,9 @@ function ConfigBootstrap({
   loadingFallback = null,
   showStack = false
 }) {
-  const [RootApp, setRootApp] = React8.useState(null);
-  const [loadError, setLoadError] = React8.useState(null);
-  React8.useEffect(() => {
+  const [RootApp, setRootApp] = React2.useState(null);
+  const [loadError, setLoadError] = React2.useState(null);
+  React2.useEffect(() => {
     if (!config.isValid) {
       return;
     }
@@ -625,16 +624,16 @@ function ConfigBootstrap({
   return /* @__PURE__ */ jsxRuntime.jsx(RootApp, {});
 }
 var ConfigBootstrap_default = ConfigBootstrap;
-var EUIContext = React8.createContext(null);
+var EUIContext = React2.createContext(null);
 var EUIProvider = ({
   config,
   children
 }) => {
-  const [state, setState] = React8.useState(config);
+  const [state, setState] = React2.useState(config);
   return /* @__PURE__ */ jsxRuntime.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
 };
 var useEUIConfig = () => {
-  const ctx = React8.useContext(EUIContext);
+  const ctx = React2.useContext(EUIContext);
   if (!ctx) {
     throw new Error("useEUIConfig must be used inside EUIProvider");
   }
@@ -1452,14 +1451,14 @@ function useChartData({
   onDataChange,
   onError
 } = {}) {
-  const [state, setState] = React8.useState({
+  const [state, setState] = React2.useState({
     data: data ?? [],
     loading: false,
     error: null,
     status: data?.length ? "success" : "idle",
     lastUpdatedAt: data?.length ? /* @__PURE__ */ new Date() : void 0
   });
-  const prepareData = React8.useCallback(
+  const prepareData = React2.useCallback(
     (nextData) => {
       if (!normalize2) {
         return nextData;
@@ -1468,7 +1467,7 @@ function useChartData({
     },
     [normalize2]
   );
-  const replaceData = React8.useCallback(
+  const replaceData = React2.useCallback(
     (nextData) => {
       const normalizedData = prepareData(nextData);
       setState({
@@ -1482,7 +1481,7 @@ function useChartData({
     },
     [onDataChange, prepareData]
   );
-  const appendData = React8.useCallback(
+  const appendData = React2.useCallback(
     (nextData) => {
       setState((currentState) => {
         const incomingData = Array.isArray(nextData) ? nextData : [nextData];
@@ -1506,7 +1505,7 @@ function useChartData({
     },
     [maxDataPoints, onDataChange, prepareData]
   );
-  const clearData = React8.useCallback(() => {
+  const clearData = React2.useCallback(() => {
     setState({
       data: [],
       loading: false,
@@ -1516,7 +1515,7 @@ function useChartData({
     });
     onDataChange?.([]);
   }, [onDataChange]);
-  const handleError = React8.useCallback(
+  const handleError = React2.useCallback(
     (error) => {
       setState((currentState) => ({
         ...currentState,
@@ -1528,7 +1527,7 @@ function useChartData({
     },
     [onError]
   );
-  const refresh = React8.useCallback(async () => {
+  const refresh = React2.useCallback(async () => {
     const resolvedDataSource = dataSource;
     if (!resolvedDataSource?.refresh && !resolvedDataSource?.getInitialData) {
       return;
@@ -1547,13 +1546,13 @@ function useChartData({
       handleError(error instanceof Error ? error : new Error(String(error)));
     }
   }, [dataSource, handleError, replaceData]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (!data) {
       return;
     }
     replaceData(data);
   }, [data, replaceData]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (!dataSource || !autoLoad) {
       return;
     }
@@ -1592,7 +1591,7 @@ function useChartData({
       unsubscribe?.();
     };
   }, [appendData, autoLoad, dataSource, handleError, replaceData]);
-  return React8.useMemo(
+  return React2.useMemo(
     () => ({
       ...state,
       refresh,
@@ -1611,11 +1610,11 @@ function useChartRealtime({
   onData,
   onError
 }) {
-  const [data, setData] = React8.useState([]);
-  const [error, setError] = React8.useState(null);
-  const [connected, setConnected] = React8.useState(false);
-  const [lastUpdatedAt, setLastUpdatedAt] = React8.useState();
-  React8.useEffect(() => {
+  const [data, setData] = React2.useState([]);
+  const [error, setError] = React2.useState(null);
+  const [connected, setConnected] = React2.useState(false);
+  const [lastUpdatedAt, setLastUpdatedAt] = React2.useState();
+  React2.useEffect(() => {
     if (!enabled) {
       setConnected(false);
       return;
@@ -1649,7 +1648,7 @@ function useChartRealtime({
       setConnected(false);
     };
   }, [connect, enabled, maxDataPoints, normalize2, onData, onError]);
-  return React8.useMemo(
+  return React2.useMemo(
     () => ({
       data,
       error,
@@ -1671,13 +1670,13 @@ function useChartPolling({
   onData,
   onError
 }) {
-  const isMountedRef = React8.useRef(false);
-  const isFetchingRef = React8.useRef(false);
-  const [data, setData] = React8.useState([]);
-  const [error, setError] = React8.useState(null);
-  const [loading, setLoading] = React8.useState(immediate);
-  const [lastUpdatedAt, setLastUpdatedAt] = React8.useState();
-  const refresh = React8.useCallback(async () => {
+  const isMountedRef = React2.useRef(false);
+  const isFetchingRef = React2.useRef(false);
+  const [data, setData] = React2.useState([]);
+  const [error, setError] = React2.useState(null);
+  const [loading, setLoading] = React2.useState(immediate);
+  const [lastUpdatedAt, setLastUpdatedAt] = React2.useState();
+  const refresh = React2.useCallback(async () => {
     if (isFetchingRef.current) {
       return;
     }
@@ -1706,13 +1705,13 @@ function useChartPolling({
       isFetchingRef.current = false;
     }
   }, [fetcher, normalize2, onData, onError]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) {
       setLoading(false);
       return;
@@ -1727,7 +1726,7 @@ function useChartPolling({
       window.clearInterval(timer);
     };
   }, [enabled, immediate, interval, refresh]);
-  return React8.useMemo(
+  return React2.useMemo(
     () => ({
       data,
       error,
@@ -1764,7 +1763,7 @@ function useChartSeries({
   xKey,
   excludeKeys = []
 }) {
-  return React8.useMemo(() => {
+  return React2.useMemo(() => {
     const normalizedSeries = series && series.length > 0 ? series : inferSeriesKeys(data, xKey, excludeKeys).map((key) => ({
       key
     }));
@@ -1812,12 +1811,12 @@ function useChartTheme({
   mode = "dark",
   theme
 } = {}) {
-  return React8.useMemo(() => {
+  return React2.useMemo(() => {
     const baseTheme = mode === "light" ? CHART_LIGHT_THEME : mode === "dark" ? CHART_DARK_THEME : DEFAULT_CHART_THEME;
     return mergeChartTheme(baseTheme, theme);
   }, [mode, theme]);
 }
-var ChartContext = React8.createContext({
+var ChartContext = React2.createContext({
   data: [],
   loading: false,
   error: null,
@@ -1849,7 +1848,7 @@ function ChartProvider({
     onDataChange,
     onError
   });
-  const value = React8.useMemo(
+  const value = React2.useMemo(
     () => ({
       ...chartData,
       mode: dataSource?.mode,
@@ -1866,7 +1865,7 @@ function ChartProvider({
   );
 }
 function useChartContext() {
-  return React8.useContext(ChartContext);
+  return React2.useContext(ChartContext);
 }
 
 // src/components/data-display/charts/context/chartReducer.ts
@@ -2170,7 +2169,7 @@ function ChartLegend({
   valueSource = "latest",
   onItemClick
 }) {
-  const legendItems = React8.useMemo(() => {
+  const legendItems = React2.useMemo(() => {
     if (items?.length) {
       return items;
     }
@@ -2948,7 +2947,7 @@ function GaugePlot({
   const chartData = data ?? context.data;
   const chartLoading = loading ?? context.loading;
   const chartError = error ?? context.error;
-  const resolvedValue = React8.useMemo(() => {
+  const resolvedValue = React2.useMemo(() => {
     if (typeof value === "number") {
       return value;
     }
@@ -3065,14 +3064,14 @@ function StatPlot({
   const chartData = data ?? context.data;
   const chartLoading = loading ?? context.loading;
   const chartError = error ?? context.error;
-  const resolvedValue = React8.useMemo(() => {
+  const resolvedValue = React2.useMemo(() => {
     if (value !== void 0) {
       return value;
     }
     const latestPoint = chartData[chartData.length - 1];
     return latestPoint?.[String(valueKey)] ?? null;
   }, [chartData, value, valueKey]);
-  const resolvedPreviousValue = React8.useMemo(() => {
+  const resolvedPreviousValue = React2.useMemo(() => {
     if (previousValue !== void 0) {
       return previousValue;
     }
@@ -3080,7 +3079,7 @@ function StatPlot({
     const previous = previousPoint?.[String(valueKey)];
     return typeof previous === "number" ? previous : void 0;
   }, [chartData, previousValue, valueKey]);
-  const trend = React8.useMemo(() => {
+  const trend = React2.useMemo(() => {
     if (typeof resolvedValue !== "number" || typeof resolvedPreviousValue !== "number") {
       return null;
     }
@@ -3551,7 +3550,7 @@ var Chip = ({
     }
   ) });
 };
-var DataViewContext = React8.createContext(null);
+var DataViewContext = React2.createContext(null);
 
 // src/components/data-display/data-view/utils/searchData.ts
 function searchData(data, search) {
@@ -3595,19 +3594,19 @@ function DataViewProvider({
   defaultPageSize = 9,
   sortConfig = {}
 }) {
-  const [search, setSearch] = React8.useState("");
-  const [filters, setFilters] = React8.useState({});
-  const [sort, setSort] = React8.useState("suggested");
-  const [page, setPage] = React8.useState(1);
-  const [pageSize, setPageSize] = React8.useState(defaultPageSize);
-  const processedData = React8.useMemo(() => {
+  const [search, setSearch] = React2.useState("");
+  const [filters, setFilters] = React2.useState({});
+  const [sort, setSort] = React2.useState("suggested");
+  const [page, setPage] = React2.useState(1);
+  const [pageSize, setPageSize] = React2.useState(defaultPageSize);
+  const processedData = React2.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 = React8.useMemo(() => {
+  const paginatedData = React2.useMemo(() => {
     if (pageSize === "All") return processedData;
     const size = pageSize;
     const start = (page - 1) * size;
@@ -3645,7 +3644,7 @@ function DataViewSidebar({ children }) {
 }
 var DataViewSidebar_default = DataViewSidebar;
 function useDataView() {
-  const ctx = React8.useContext(DataViewContext);
+  const ctx = React2.useContext(DataViewContext);
   if (!ctx) {
     throw new Error("useDataView must be used within DataViewProvider");
   }
@@ -3702,6 +3701,243 @@ function DataViewSort({ options = [], shape }) {
   );
 }
 var DataViewSort_default = DataViewSort;
+function useTransitionVisibility(visibility, leaveDuration = 150) {
+  const [mounted, setMounted] = React2.useState(Boolean(visibility));
+  const [active, setActive] = React2.useState(Boolean(visibility));
+  const isInitialRenderRef = React2.useRef(true);
+  const frameOneRef = React2.useRef(null);
+  const frameTwoRef = React2.useRef(null);
+  const timeoutRef = React2.useRef(null);
+  const clearTimers = () => {
+    if (frameOneRef.current) {
+      cancelAnimationFrame(frameOneRef.current);
+      frameOneRef.current = null;
+    }
+    if (frameTwoRef.current) {
+      cancelAnimationFrame(frameTwoRef.current);
+      frameTwoRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+  React2.useEffect(() => {
+    clearTimers();
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+      return clearTimers;
+    }
+    if (visibility) {
+      setMounted(true);
+      setActive(false);
+      frameOneRef.current = requestAnimationFrame(() => {
+        frameTwoRef.current = requestAnimationFrame(() => {
+          setActive(true);
+        });
+      });
+      return clearTimers;
+    }
+    setActive(false);
+    timeoutRef.current = setTimeout(() => {
+      setMounted(false);
+    }, leaveDuration);
+    return clearTimers;
+  }, [visibility, leaveDuration]);
+  return {
+    mounted,
+    active
+  };
+}
+function renderTransitionChild(children, className) {
+  const childCount = React2.Children.count(children);
+  if (childCount !== 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  }
+  const child = React2.Children.only(children);
+  if (!React2__default.default.isValidElement(child)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: child });
+  }
+  const element = child;
+  return React2__default.default.cloneElement(element, {
+    className: classNames17__default.default(element.props.className, className)
+  });
+}
+function TransitionBase({
+  visibility,
+  children,
+  enterClassName,
+  leaveClassName,
+  visibleClassName,
+  hiddenClassName,
+  leaveDuration = 150,
+  unmountOnExit = true
+}) {
+  const { mounted, active } = useTransitionVisibility(
+    Boolean(visibility),
+    leaveDuration
+  );
+  if (!mounted && unmountOnExit) {
+    return null;
+  }
+  const transitionClassName = classNames17__default.default(
+    visibility ? enterClassName : leaveClassName,
+    active ? visibleClassName : hiddenClassName
+  );
+  return renderTransitionChild(children, transitionClassName);
+}
+var TransitionBase_default = TransitionBase;
+function TransitionDropdown({
+  visibility,
+  children,
+  leaveDuration = 120
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transform-gpu transition-all duration-150 ease-out origin-top-right",
+      leaveClassName: "transform-gpu transition-all duration-120 ease-in origin-top-right",
+      visibleClassName: "scale-100 opacity-100 translate-y-0",
+      hiddenClassName: "scale-95 opacity-0 -translate-y-1",
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionDropdown_default = TransitionDropdown;
+function TransitionFade({
+  visibility,
+  children,
+  leaveDuration = 180
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transition-opacity duration-200 ease-out",
+      leaveClassName: "transition-opacity duration-180 ease-in",
+      visibleClassName: "opacity-100",
+      hiddenClassName: "opacity-0",
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionFade_default = TransitionFade;
+function TransitionFadeIn({
+  visibility,
+  children,
+  leaveDuration = 180
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transform-gpu transition-all duration-250 ease-out",
+      leaveClassName: "transform-gpu transition-all duration-180 ease-in",
+      visibleClassName: "opacity-100 translate-y-0",
+      hiddenClassName: "opacity-0 translate-y-3",
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionFadeIn_default = TransitionFadeIn;
+function TransitionScale({
+  visibility,
+  children,
+  leaveDuration = 120
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transform-gpu transition-all duration-150 ease-out origin-center",
+      leaveClassName: "transform-gpu transition-all duration-120 ease-in origin-center",
+      visibleClassName: "scale-100 opacity-100",
+      hiddenClassName: "scale-95 opacity-0",
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionScale_default = TransitionScale;
+function getHiddenClassName(side) {
+  switch (side) {
+    case "right":
+      return "translate-x-full";
+    case "top":
+      return "-translate-y-full";
+    case "bottom":
+      return "translate-y-full";
+    case "left":
+    default:
+      return "-translate-x-full";
+  }
+}
+function TransitionSlide({
+  visibility,
+  side = "left",
+  children,
+  leaveDuration = 240
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transform-gpu transition-transform duration-300 ease-out",
+      leaveClassName: "transform-gpu transition-transform duration-240 ease-in",
+      visibleClassName: "translate-x-0 translate-y-0",
+      hiddenClassName: getHiddenClassName(side),
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionSlide_default = TransitionSlide;
+function TransitionAccordion({
+  visibility,
+  children,
+  enterDuration = 220,
+  leaveDuration = 180
+}) {
+  const { mounted, active } = useTransitionVisibility(
+    Boolean(visibility),
+    leaveDuration
+  );
+  if (!mounted) {
+    return null;
+  }
+  const duration = visibility ? enterDuration : leaveDuration;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateRows: active ? "1fr" : "0fr",
+        opacity: active ? 1 : 0,
+        transitionProperty: "grid-template-rows, opacity",
+        transitionDuration: `${duration}ms`,
+        transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+        willChange: "grid-template-rows, opacity"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children })
+    }
+  );
+}
+var TransitionAccordion_default = TransitionAccordion;
+
+// src/components/feedback/transition/index.tsx
+var Transition = {
+  TransitionBase: TransitionBase_default,
+  TransitionDropdown: TransitionDropdown_default,
+  TransitionFade: TransitionFade_default,
+  TransitionFadeIn: TransitionFadeIn_default,
+  TransitionScale: TransitionScale_default,
+  TransitionSlide: TransitionSlide_default,
+  TransitionAccordion: TransitionAccordion_default
+};
 function Accordion({
   summary = "Accordion",
   children,
@@ -3711,18 +3947,20 @@ function Accordion({
   toggleOnSummaryClick = false,
   enableChildrenPadding = true
 }) {
-  const [collapse, setCollapse] = React8.useState(defaultCollapse);
+  const [collapse, setCollapse] = React2.useState(defaultCollapse);
   const handleToggle = () => {
     setCollapse((prev) => !prev);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-eui-dark-400/80 text-gray-500", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames17__default.default({
-          "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs": true,
-          "hover:cursor-pointer": toggleOnSummaryClick
-        }),
+        className: classNames17__default.default(
+          "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
+          {
+            "hover:cursor-pointer": toggleOnSummaryClick
+          }
+        ),
         onClick: toggleOnSummaryClick ? handleToggle : void 0,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex gap-3 items-center w-full", children: [
@@ -3730,17 +3968,17 @@ function Accordion({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eui-text-md w-full", children: summary })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            "button",
             {
+              type: "button",
               onClick: toggleOnSummaryClick ? void 0 : handleToggle,
               className: "hover:cursor-pointer",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 fa6.FaCircleChevronDown,
                 {
-                  className: classNames17__default.default(
-                    "text-xl transition-transform duration-300",
-                    { "rotate-180": collapse }
-                  )
+                  className: classNames17__default.default("text-xl transition-transform duration-300", {
+                    "rotate-180": collapse
+                  })
                 }
               )
             }
@@ -3748,30 +3986,19 @@ function Accordion({
           rhsActions && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (e) => e.stopPropagation(), children: rhsActions })
         ]
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react.Transition,
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        show: collapse,
-        enter: "transition duration-100 ease-out",
-        enterFrom: "transform scale-95 opacity-0",
-        enterTo: "transform scale-100 opacity-100",
-        leave: "transition duration-75 ease-out",
-        leaveFrom: "transform scale-100 opacity-100",
-        leaveTo: "transform scale-95 opacity-0",
-        as: React8.Fragment,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        className: classNames17__default.default(
+          "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
-            className: classNames17__default.default({
-              "border-t border-t-eui-dark-400/40 eui-text-sm": true,
-              "p-5": enableChildrenPadding
-            }),
-            children
+            "p-5": enableChildrenPadding
           }
-        )
+        ),
+        children
       }
-    )
+    ) })
   ] });
 }
 var Accordion_default = Accordion;
@@ -4216,8 +4443,8 @@ var Flag = ({
   className,
   ...rest
 }) => {
-  const [pos, setPos] = React8.useState({ x: 0, y: 0 });
-  const [showTooltip, setShowTooltip] = React8.useState(false);
+  const [pos, setPos] = React2.useState({ x: 0, y: 0 });
+  const [showTooltip, setShowTooltip] = React2.useState(false);
   const upperCode = code.toUpperCase();
   const country = emojiFlags__default.default.countryCode(upperCode);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4421,16 +4648,16 @@ var GraphRenderer = ({
   width = 1e3,
   height = 700
 }) => {
-  const [nodes, setNodes] = React8.useState([]);
+  const [nodes, setNodes] = React2.useState([]);
   const edges = data.edges;
-  const simulationRef = React8.useRef(null);
-  const [offset, setOffset] = React8.useState({ x: 0, y: 0 });
-  const isDragging = React8.useRef(false);
-  const lastPos = React8.useRef({ x: 0, y: 0 });
-  const nodeMap = React8.useMemo(() => {
+  const simulationRef = React2.useRef(null);
+  const [offset, setOffset] = React2.useState({ x: 0, y: 0 });
+  const isDragging = React2.useRef(false);
+  const lastPos = React2.useRef({ x: 0, y: 0 });
+  const nodeMap = React2.useMemo(() => {
     return new Map(nodes.map((n) => [n.id, n]));
   }, [nodes]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     simulationRef.current?.stop?.();
     const positionedNodes = data.nodes.map((n) => ({
       ...n,
@@ -4511,13 +4738,13 @@ var Graph = ({
     }
   );
 };
-var CloudinaryContext = React8.createContext(null);
+var CloudinaryContext = React2.createContext(null);
 var CloudinaryProvider = ({
   cloudName,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(CloudinaryContext.Provider, { value: { cloudName }, children });
 var useCloudinaryConfig = () => {
-  const ctx = React8.useContext(CloudinaryContext);
+  const ctx = React2.useContext(CloudinaryContext);
   if (!ctx) {
     throw new Error(
       "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
@@ -4968,7 +5195,7 @@ var ListItem = ({
             children: bullet
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React8__default.default.cloneElement(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React2__default.default.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -5002,7 +5229,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React8__default.default.isValidElement(item)) {
+  if (React2__default.default.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -5687,8 +5914,8 @@ function Table({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [sortKey, setSortKey] = React8.useState(null);
-  const [sortOrder, setSortOrder] = React8.useState("asc");
+  const [sortKey, setSortKey] = React2.useState(null);
+  const [sortOrder, setSortOrder] = React2.useState("asc");
   const toggleSort = (key) => {
     if (sortKey === key) {
       setSortOrder((prev) => prev === "asc" ? "desc" : "asc");
@@ -5697,7 +5924,7 @@ function Table({
       setSortOrder("asc");
     }
   };
-  const sortedData = React8.useMemo(() => {
+  const sortedData = React2.useMemo(() => {
     if (!sortKey) return data;
     return [...data].sort((a, b) => {
       const aVal = a[sortKey];
@@ -5788,8 +6015,8 @@ function Tooltip6({
   className,
   ...rest
 }) {
-  const [pos, setPos] = React8.useState({ x: 0, y: 0 });
-  React8.useEffect(() => {
+  const [pos, setPos] = React2.useState({ x: 0, y: 0 });
+  React2.useEffect(() => {
     if (!show) return;
     const handleMove = (e) => {
       setPos({ x: e.clientX + offsetX, y: e.clientY + offsetY });
@@ -5918,8 +6145,8 @@ function CloudinaryVideo({
 }
 var CloudinaryVideo_default = CloudinaryVideo;
 var FormObserver = ({ formik, onChange }) => {
-  const prevValuesRef = React8.useRef(formik.values);
-  React8.useEffect(() => {
+  const prevValuesRef = React2.useRef(formik.values);
+  React2.useEffect(() => {
     if (!onChange) return;
     const currentValues = formik.values;
     const prevValues = prevValuesRef.current;
@@ -5938,7 +6165,7 @@ var FormObserver = ({ formik, onChange }) => {
 };
 var FormObserver_default = FormObserver;
 var DirtyObserver = ({ formik, onDirtyChange }) => {
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (onDirtyChange) {
       onDirtyChange(formik.dirty);
     }
@@ -5947,7 +6174,7 @@ var DirtyObserver = ({ formik, onDirtyChange }) => {
 };
 var DirtyObserver_default = DirtyObserver;
 var UnsavedChangesGuard = ({ formik, enabled }) => {
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     const handleBeforeUnload = (e) => {
       if (!formik.dirty) return;
@@ -6235,17 +6462,17 @@ function useToastTimer({
   pauseOnHover,
   onTimeout
 }) {
-  const [isPaused, setIsPaused] = React8.useState(false);
-  const timeoutRef = React8.useRef(null);
-  const startedAtRef = React8.useRef(0);
-  const remainingRef = React8.useRef(typeof duration === "number" ? duration : 0);
-  const clearTimer = React8.useCallback(() => {
+  const [isPaused, setIsPaused] = React2.useState(false);
+  const timeoutRef = React2.useRef(null);
+  const startedAtRef = React2.useRef(0);
+  const remainingRef = React2.useRef(typeof duration === "number" ? duration : 0);
+  const clearTimer = React2.useCallback(() => {
     if (timeoutRef.current !== null) {
       window.clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }, []);
-  const startTimer = React8.useCallback(() => {
+  const startTimer = React2.useCallback(() => {
     if (typeof duration !== "number" || duration <= 0) {
       return;
     }
@@ -6255,12 +6482,12 @@ function useToastTimer({
       onTimeout();
     }, remainingRef.current);
   }, [clearTimer, duration, onTimeout]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     remainingRef.current = typeof duration === "number" ? duration : 0;
     startTimer();
     return clearTimer;
   }, [clearTimer, duration, startTimer]);
-  const pauseTimer = React8.useCallback(() => {
+  const pauseTimer = React2.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
@@ -6271,14 +6498,14 @@ function useToastTimer({
     );
     setIsPaused(true);
   }, [clearTimer, duration, pauseOnHover]);
-  const resumeTimer = React8.useCallback(() => {
+  const resumeTimer = React2.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
     setIsPaused(false);
     startTimer();
   }, [duration, pauseOnHover, startTimer]);
-  const progressStyle = React8.useMemo(() => {
+  const progressStyle = React2.useMemo(() => {
     if (typeof duration !== "number") {
       return void 0;
     }
@@ -6319,7 +6546,7 @@ function ToastItem({
   const duration = item.duration ?? autoClose;
   const variant = toastStatusVariantMap[item.status];
   const statusStyles = toastVariantStyles[variant];
-  const dismiss = React8.useCallback(() => {
+  const dismiss = React2.useCallback(() => {
     toastStore.remove(item.id);
   }, [item.id]);
   const { pauseTimer, resumeTimer, progressStyle } = useToastTimer({
@@ -6398,16 +6625,16 @@ var Toast = ({
   ...rest
 }) => {
   const eui = useEUIConfig();
-  const [items, setItems] = React8.useState(() => {
+  const [items, setItems] = React2.useState(() => {
     return toastStore.getSnapshot();
   });
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     return toastStore.subscribe(setItems);
   }, []);
-  const safeShape = React8.useMemo(() => {
+  const safeShape = React2.useMemo(() => {
     return normalizeToastShape(shape ?? eui?.config?.global?.shape);
   }, [shape, eui?.config?.global?.shape]);
-  const visibleItems = React8.useMemo(() => {
+  const visibleItems = React2.useMemo(() => {
     const orderedItems = newestOnTop ? [...items].reverse() : [...items];
     return orderedItems.slice(0, maxToasts);
   }, [items, maxToasts, newestOnTop]);
@@ -6486,106 +6713,6 @@ function sendToast(data = {}) {
     status: data.status || "success" /* success */
   });
 }
-function renderTransitionChild(children, className) {
-  const childCount = React8.Children.count(children);
-  if (childCount !== 1) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
-  }
-  const child = React8.Children.only(children);
-  if (!React8__default.default.isValidElement(child)) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: child });
-  }
-  const element = child;
-  return React8__default.default.cloneElement(element, {
-    className: classNames17__default.default(element.props.className, className)
-  });
-}
-function TransitionBase({
-  visibility,
-  children,
-  enterClassName,
-  leaveClassName,
-  visibleClassName,
-  hiddenClassName,
-  leaveDuration = 150
-}) {
-  const [mounted, setMounted] = React8.useState(Boolean(visibility));
-  const [active, setActive] = React8.useState(Boolean(visibility));
-  const frameRef = React8.useRef(null);
-  const timeoutRef = React8.useRef(null);
-  React8.useEffect(() => {
-    if (frameRef.current) {
-      cancelAnimationFrame(frameRef.current);
-    }
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    if (visibility) {
-      setMounted(true);
-      frameRef.current = requestAnimationFrame(() => {
-        setActive(true);
-      });
-      return;
-    }
-    setActive(false);
-    timeoutRef.current = setTimeout(() => {
-      setMounted(false);
-    }, leaveDuration);
-    return () => {
-      if (frameRef.current) {
-        cancelAnimationFrame(frameRef.current);
-      }
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, [visibility, leaveDuration]);
-  if (!mounted) {
-    return null;
-  }
-  const transitionClassName = classNames17__default.default(
-    visibility ? enterClassName : leaveClassName,
-    active ? visibleClassName : hiddenClassName
-  );
-  return renderTransitionChild(children, transitionClassName);
-}
-var TransitionBase_default = TransitionBase;
-function TransitionDropdown({ visibility, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TransitionBase_default,
-    {
-      visibility: Boolean(visibility),
-      enterClassName: "transition duration-100 ease-out",
-      leaveClassName: "transition duration-50 ease-out",
-      visibleClassName: "transform scale-100 opacity-100",
-      hiddenClassName: "transform scale-95 opacity-0",
-      leaveDuration: 50,
-      children
-    }
-  );
-}
-var TransitionDropdown_default = TransitionDropdown;
-function TransitionFadeIn({ visibility, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TransitionBase_default,
-    {
-      visibility: Boolean(visibility),
-      enterClassName: "transition-all ease-in-out duration-700 delay-[0ms]",
-      leaveClassName: "transition-all ease-in-out duration-300",
-      visibleClassName: "opacity-100 translate-y-0",
-      hiddenClassName: "opacity-0 translate-y-6",
-      leaveDuration: 300,
-      children
-    }
-  );
-}
-var TransitionFadeIn_default = TransitionFadeIn;
-
-// src/components/feedback/transition/index.tsx
-var Transition2 = {
-  TransitionDropdown: TransitionDropdown_default,
-  TransitionFadeIn: TransitionFadeIn_default
-};
 var sizes3 = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-2 text-sm",
@@ -6600,7 +6727,7 @@ function FormResponse({
   size = "md",
   styles
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Transition2.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: classNames17__default.default({
@@ -6670,17 +6797,17 @@ function YoutubeVideo({
   ) });
 }
 var YoutubeVideo_default = YoutubeVideo;
-var ThemeContext = React8.createContext(
+var ThemeContext = React2.createContext(
   void 0
 );
 var ThemeProvider = ({
   defaultTheme = "dark",
   children
 }) => {
-  const [theme, setTheme] = React8.useState(() => {
+  const [theme, setTheme] = React2.useState(() => {
     return localStorage.getItem("theme") || defaultTheme;
   });
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
     } else {
@@ -6694,7 +6821,7 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
 };
 var ThemeSwitch = () => {
-  const themeContext = React8.useContext(ThemeContext);
+  const themeContext = React2.useContext(ThemeContext);
   if (!themeContext) return null;
   const { theme, toggleTheme } = themeContext;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6756,7 +6883,7 @@ var ShapeSwitch = () => {
 
 // src/hooks/theme/useCurrentTheme.ts
 var useCurrentTheme = () => {
-  const context = React8.useContext(ThemeContext);
+  const context = React2.useContext(ThemeContext);
   if (!context) {
     throw new Error("useCurrentTheme must be used within a ThemeProvider");
   }
@@ -18099,7 +18226,7 @@ function WorldMap({
     }
   };
   const mode = isDarkMode ? mapStyles.dark : mapStyles.light;
-  const resolvedData = React8.useMemo(() => {
+  const resolvedData = React2.useMemo(() => {
     return data.map((item) => {
       const c = COUNTRIES.find((x) => x.code === item.code);
       if (!c) return null;
@@ -18111,8 +18238,8 @@ function WorldMap({
     }).filter(Boolean);
   }, [data]);
   const maxValue = resolvedData.length > 0 ? Math.max(...resolvedData.map((d) => d.value)) : 0;
-  const [showTooltip, setShowTooltip] = React8.useState(false);
-  const [tooltipContent, setTooltipContent] = React8.useState(null);
+  const [showTooltip, setShowTooltip] = React2.useState(false);
+  const [tooltipContent, setTooltipContent] = React2.useState(null);
   const handleMouseMove = (_e, point) => {
     setTooltipContent(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -18198,7 +18325,7 @@ function Button({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const btnRef = React8.useRef(null);
+  const btnRef = React2.useRef(null);
   const variantStyles = resolveAppearanceStyles({
     appearance,
     variant,
@@ -18265,7 +18392,7 @@ function InputResponse({
   variant = "default",
   styles
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Transition2.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: classNames17__default.default({
@@ -18299,7 +18426,7 @@ var toggleType = (visibility) => {
 var PasswordVisibilityToggler = ({
   onClick
 }) => {
-  const [passwordVisibility, setPasswordVisibilty] = React8.useState(false);
+  const [passwordVisibility, setPasswordVisibilty] = React2.useState(false);
   const handleOnClick = (visibility) => {
     onClick(visibility);
     setPasswordVisibilty(visibility);
@@ -18324,7 +18451,7 @@ var Input = ({
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
   const [field, meta] = formik.useField(props);
-  const [passwordVisibility, setPasswordVisibilty] = React8.useState(false);
+  const [passwordVisibility, setPasswordVisibilty] = React2.useState(false);
   const inputType = type === "password" ? toggleType(passwordVisibility) : type;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -18369,7 +18496,7 @@ var InputFile = ({
   styles,
   ...props
 }) => {
-  const fileInputRef = React8.useRef(null);
+  const fileInputRef = React2.useRef(null);
   const [field, meta, helpers] = formik.useField(props);
   const handleFileChange = (e) => {
     const file = e.target.files?.[0] || null;
@@ -18909,7 +19036,7 @@ function ImageView({ imageUrl, secure = true, alt = "image" }) {
   ) }) });
 }
 var ImageView_default = ImageView;
-var ImageInput = React8.forwardRef(
+var ImageInput = React2.forwardRef(
   ({
     title = "Upload Image",
     uploadDir = "eg-frontend-admin-temp",
@@ -18921,10 +19048,10 @@ var ImageInput = React8.forwardRef(
     const [field, meta, helpers] = formik.useField(props);
     const { value: imageUrl } = field;
     const { setValue } = helpers;
-    const [image, setImage] = React8.useState(null);
-    const [url, setUrl] = React8.useState(imageUrl);
-    const [loading, setLoading] = React8.useState(false);
-    const [preview, setPreview] = React8.useState(null);
+    const [image, setImage] = React2.useState(null);
+    const [url, setUrl] = React2.useState(imageUrl);
+    const [loading, setLoading] = React2.useState(false);
+    const [preview, setPreview] = React2.useState(null);
     const uploadImage = async () => {
       if (!image) return;
       setLoading(true);
@@ -18970,10 +19097,10 @@ var ImageInput = React8.forwardRef(
       if (!disableSetValue) setValue("");
       setLoading(false);
     };
-    React8.useImperativeHandle(ref, () => ({
+    React2.useImperativeHandle(ref, () => ({
       handleResetClick
     }));
-    React8.useEffect(() => {
+    React2.useEffect(() => {
       if (!disableSetValue) setValue(url);
     }, [url, setValue, disableSetValue]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
@@ -19058,14 +19185,14 @@ function MultiImageInput({
   const [field, meta, helpers] = formik.useField(props);
   const { value: imageUrls } = field;
   const { setValue } = helpers;
-  const imageInputRef = React8.useRef(null);
+  const imageInputRef = React2.useRef(null);
   const onValueChanged = (url) => {
     setValue([...imageUrls, url]);
     if (imageInputRef.current) {
       imageInputRef.current.handleResetClick();
     }
   };
-  React8.useEffect(() => {
+  React2.useEffect(() => {
   }, [imageUrls]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row flex-wrap gap-5 w-ful", children: [
@@ -19165,9 +19292,9 @@ function StarRatingInput({
   const { name } = props;
   const [field, meta] = formik.useField(props);
   const formikContext = formik.useFormikContext();
-  const [rating, setRating] = React8.useState(Number(field.value) || 0);
-  const [hover, setHover] = React8.useState(null);
-  React8.useEffect(() => {
+  const [rating, setRating] = React2.useState(Number(field.value) || 0);
+  const [hover, setHover] = React2.useState(null);
+  React2.useEffect(() => {
     setRating(Number(field.value));
   }, [field.value]);
   const handleOnClick = (index) => {
@@ -19316,7 +19443,7 @@ function Tags({
   ...props
 }) {
   const [field, meta, helpers] = formik.useField({ ...props });
-  const [input, setInput] = React8.useState("");
+  const [input, setInput] = React2.useState("");
   const handleAddTag = () => {
     const trimmed = input.trim();
     if (trimmed && !field.value.includes(trimmed) && field.value.length < limit) {
@@ -19580,8 +19707,8 @@ var Header = ({
   );
 };
 var useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = React8.useState(window.innerWidth < breakpoint);
-  React8.useEffect(() => {
+  const [isMobile, setIsMobile] = React2.useState(window.innerWidth < breakpoint);
+  React2.useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < breakpoint);
     };
@@ -19691,7 +19818,7 @@ function BlockGroup({
 }
 var BlockGroup_default = BlockGroup;
 var useTheme = () => {
-  const context = React8.useContext(ThemeContext);
+  const context = React2.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -19753,11 +19880,11 @@ function MarkdownEditor({
   ] });
 }
 var MarkdownEditor_default = MarkdownEditor;
-var MarkdownContext = React8.createContext(null);
+var MarkdownContext = React2.createContext(null);
 
 // src/components/markdown/hooks/useMarkdown.tsx
 function useMarkdown() {
-  return React8.useContext(MarkdownContext);
+  return React2.useContext(MarkdownContext);
 }
 
 // src/components/markdown/utils/generateHeadingNumbers.ts
@@ -19832,7 +19959,7 @@ function MarkdownViewer({ value }) {
   const markdown = value ?? context?.markdown ?? "";
   const headings = context?.headings ?? [];
   const setActiveHeading = context?.setActiveHeading;
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     const timeout = setTimeout(() => {
       headings.forEach((heading) => {
         const headingEls = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
@@ -19937,8 +20064,8 @@ function extractHeadings(markdown) {
   });
 }
 function MarkdownProvider({ markdown, children }) {
-  const [activeHeading, setActiveHeading] = React8.useState("");
-  const headings = React8.useMemo(() => extractHeadings(markdown), [markdown]);
+  const [activeHeading, setActiveHeading] = React2.useState("");
+  const headings = React2.useMemo(() => extractHeadings(markdown), [markdown]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MarkdownContext.Provider,
     {
@@ -20011,7 +20138,7 @@ var Breadcrumb = ({
   const { config } = useEUIConfig();
   const pathname = currentPath || (typeof window !== "undefined" ? window.location.pathname : "/");
   const resolvedRoutes = routes || config?.routes || [];
-  const resolvedData = React8.useMemo(() => {
+  const resolvedData = React2.useMemo(() => {
     if (resolvedRoutes && resolvedRoutes.length > 0) {
       return buildFromRoutes(resolvedRoutes, pathname);
     }
@@ -20028,7 +20155,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React2__default.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           BreadcrumbItem_default,
           {
@@ -20068,63 +20195,41 @@ var Drawer = ({
   visibility,
   side = "left",
   handleClose,
-  styles
+  styles,
+  showBackdrop = true,
+  closeOnBackdropClick = true
 }) => {
   const isHorizontal = side === "left" || side === "right";
   const isMobile = useIsMobile_default();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    isMobile && visibility && /* @__PURE__ */ jsxRuntime.jsx(
+    isMobile && showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "fixed inset-0 bg-black bg-opacity-50 z-40",
-        onClick: handleClose
+        className: "fixed inset-0 bg-black/50 z-40",
+        onClick: closeOnBackdropClick ? handleClose : void 0
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react.Transition,
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TransitionSlide_default, { visibility, side, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        show: visibility,
-        enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames17__default.default({
-          "-translate-x-full": side === "left",
-          "translate-x-full": side === "right",
-          "-translate-y-full": side === "top",
-          "translate-y-full": side === "bottom"
-        }),
-        enterTo: "translate-x-0 translate-y-0",
-        leave: "transform transition duration-200 ease-in",
-        leaveFrom: "translate-x-0 translate-y-0",
-        leaveTo: classNames17__default.default({
-          "-translate-x-full": side === "left",
-          "translate-x-full": side === "right",
-          "-translate-y-full": side === "top",
-          "translate-y-full": side === "bottom"
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        className: classNames17__default.default(
+          "fixed shadow-lg z-50",
           {
-            className: classNames17__default.default(
-              "fixed shadow-lg z-50",
-              {
-                "h-full w-[300px]": isHorizontal,
-                "w-full h-[300px]": !isHorizontal
-              },
-              {
-                "left-0": side === "left",
-                // add top-0 to align it to top
-                "right-0": side === "right",
-                // add top-0 to align it to top
-                "top-0 left-0": side === "top",
-                "bottom-0 left-0": side === "bottom"
-              },
-              { "eui-bg-md": !styles },
-              { [`${styles}`]: styles }
-            ),
-            children
-          }
-        )
+            "h-full w-[300px] top-0": isHorizontal,
+            "w-full h-[300px] left-0": !isHorizontal,
+            "left-0": side === "left",
+            "right-0": side === "right",
+            "top-0": side === "top",
+            "bottom-0": side === "bottom"
+          },
+          {
+            "eui-bg-md": !styles
+          },
+          styles
+        ),
+        children
       }
-    )
+    ) })
   ] });
 };
 function DrawerToggler({
@@ -20373,7 +20478,7 @@ function HeaderNav({ data = [], styles }) {
 }
 var HeaderNav_default = HeaderNav;
 function useClickOutside(ref, fun) {
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     const listener = (e) => {
       if (!ref.current || ref.current.contains(e.target)) {
         return;
@@ -20414,8 +20519,8 @@ var HeaderNavGroup = ({
   styles,
   children
 }) => {
-  const [collapsed, setCollapsed] = React8.useState(true);
-  const headerNavGroupRef = React8.useRef(null);
+  const [collapsed, setCollapsed] = React2.useState(true);
+  const headerNavGroupRef = React2.useRef(null);
   useClickOutside(headerNavGroupRef, () => setCollapsed(true));
   const handleNavigation = () => {
     if (to) {
@@ -20638,8 +20743,8 @@ var MenuGroup = ({
   style,
   ...rest
 }) => {
-  const [collapsed, setCollapsed] = React8.useState(!defaultOpen);
-  React8.useEffect(() => {
+  const [collapsed, setCollapsed] = React2.useState(!defaultOpen);
+  React2.useEffect(() => {
     if (defaultOpen !== void 0) {
       setCollapsed(!defaultOpen);
     }
@@ -20756,12 +20861,12 @@ var Menu = ({
   defaultMenuElements,
   currentPath
 }) => {
-  const normalizedItems = React8.useMemo(() => assignKeys(items), [items]);
-  const selected = React8.useMemo(() => {
+  const normalizedItems = React2.useMemo(() => assignKeys(items), [items]);
+  const selected = React2.useMemo(() => {
     if (!currentPath) return void 0;
     return findSelectedKey(normalizedItems, currentPath);
   }, [currentPath, normalizedItems]);
-  const parentMap = React8.useMemo(
+  const parentMap = React2.useMemo(
     () => buildParentMap(normalizedItems),
     [normalizedItems]
   );
@@ -20914,8 +21019,8 @@ function RouteTabs({
     const currentPath = window.location.pathname;
     return navData.find((tab) => tab.to === currentPath)?.to || navData[0]?.to;
   };
-  const [activeTab, setActiveTab] = React8.useState(getActiveTab);
-  React8.useEffect(() => {
+  const [activeTab, setActiveTab] = React2.useState(getActiveTab);
+  React2.useEffect(() => {
     if (mode !== "route") return;
     const handlePopState = () => {
       setActiveTab(getActiveTab());
@@ -20958,16 +21063,21 @@ function RouteTabs({
   ] });
 }
 var RouteTabs_default = RouteTabs;
+function UnderConstructionBanner({
+  text
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-5", children: /* @__PURE__ */ jsxRuntime.jsx(Info_default, { children: text ? text : "This component is currently under construction and will be made available soon" }) });
+}
 var getDefaultErrorMessage = (error) => {
   if (!error) return "Something went wrong.";
   if (typeof error === "string") return error;
   if (error instanceof Error) return error.message;
   if (typeof error === "object") {
     const anyErr = error;
-    if (anyErr?.data?.message && typeof anyErr.data.message === "string") {
+    if (typeof anyErr?.data?.message === "string") {
       return anyErr.data.message;
     }
-    if (anyErr?.message && typeof anyErr.message === "string") {
+    if (typeof anyErr?.message === "string") {
       return anyErr.message;
     }
     if (anyErr?.status) {
@@ -20983,20 +21093,107 @@ var getDefaultErrorMessage = (error) => {
 };
 function AsyncComponentWrapper({
   children,
-  isLoading,
-  isSuccess = true,
-  isError,
+  isLoading = false,
+  isFetching = false,
+  isSuccess,
+  isError = false,
+  isUninitialized = false,
   error,
-  errorFormatter
+  isEmpty = false,
+  loadingText = "Loading...",
+  fetchingText = "Updating...",
+  emptyText = "No data available.",
+  loadingType = "spinner",
+  skeletonCount = 3,
+  skeletonClassName = "h-24 w-full rounded-md",
+  spinnerProps,
+  fetchingSpinnerProps,
+  loadingFallback,
+  emptyFallback,
+  errorFallback,
+  showFetchingIndicator = true,
+  onRetry,
+  errorFormatter,
+  className,
+  contentClassName
 }) {
-  const errorMessage = isError && error ? errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full py-10 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ai.AiOutlineLoading, { className: "animate-spin" }) }),
-    isError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: errorMessage, variant: "danger" }) }),
-    !isLoading && !isError && isSuccess && /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+  const errorMessage = React2.useMemo(() => {
+    if (!isError) return "";
+    return errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error);
+  }, [isError, error, errorFormatter]);
+  const hasSuccess = isSuccess ?? (!isLoading && !isError && !isUninitialized);
+  const renderLoading = () => {
+    if (loadingFallback) return loadingFallback;
+    if (loadingType === "skeleton") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 py-4", children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: skeletonClassName }, index)) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Spinner_default,
+      {
+        centered: true,
+        label: loadingText,
+        type: "border",
+        size: "md",
+        variant: "primary",
+        ...spinnerProps
+      }
+    );
+  };
+  const renderError = () => {
+    if (typeof errorFallback === "function") {
+      return errorFallback(errorMessage);
+    }
+    if (errorFallback) {
+      return errorFallback;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: errorMessage, variant: "danger" }),
+      onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRetry,
+          className: "mt-3 rounded-md border px-4 py-2",
+          children: "Retry"
+        }
+      )
+    ] });
+  };
+  const renderEmpty = () => {
+    if (emptyFallback) return emptyFallback;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-10 text-center text-gray-500", children: emptyText });
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "aria-live": "polite", children: renderLoading() });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "aria-live": "polite", children: renderError() });
+  }
+  if (hasSuccess && isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "aria-live": "polite", children: renderEmpty() });
+  }
+  if (!hasSuccess) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-gray-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Spinner_default,
+        {
+          size: "xs",
+          type: "border",
+          variant: "primary",
+          showLabel: false,
+          ariaLabel: fetchingText,
+          ...fetchingSpinnerProps
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: fetchingText })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children })
   ] });
 }
-var AsyncComponentWrapper_default = AsyncComponentWrapper;
+var AsyncComponentWrapper_default = React2__default.default.memo(AsyncComponentWrapper);
 function Modal({
   title,
   show = false,
@@ -21012,68 +21209,51 @@ function Modal({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const modalRef = React8.useRef(null);
+  const modalRef = React2.useRef(null);
   useClickOutside(
     modalRef,
     enableCloseOnClickOutside ? handleOnClose : void 0
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.Transition,
+  return /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility: show, leaveDuration: 100, 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.jsx(TransitionScale_default, { visibility: show, leaveDuration: 100, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      show,
-      enter: "transition duration-100 ease-out",
-      enterFrom: "transform scale-95 opacity-0",
-      enterTo: "transform scale-100 opacity-100",
-      leave: "transition duration-100 ease-out",
-      leaveFrom: "transform scale-200 opacity-100",
-      leaveTo: "transform scale-95 opacity-0",
-      as: React8.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",
-        {
-          ref: modalRef,
-          className: classNames17__default.default({
-            "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit": true,
-            [`${shapes[resolvedShape]}`]: true,
-            [`${styles}`]: styles
-          }),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eui-gradient-to-r-sm inline-flex items-center border-b w-full border-eui-dark-500/80", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full text-center text-md font-semibold", children: title }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: classNames17__default.default({
-                    "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast": true,
-                    "hover:cursor-pointer hover:bg-eui-dark-500": true
-                  }),
-                  onClick: handleOnClose,
-                  children: "X"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AsyncComponentWrapper_default,
-              {
-                isLoading,
-                isSuccess,
-                isError,
-                error,
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 w-full", children })
-              }
-            )
-          ]
-        }
-      ) })
+      ref: modalRef,
+      className: classNames17__default.default(
+        "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
+        shapes[resolvedShape],
+        styles
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eui-gradient-to-r-sm inline-flex items-center border-b w-full border-eui-dark-500/80", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full text-center text-md font-semibold", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: classNames17__default.default(
+                "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
+                "hover:cursor-pointer hover:bg-eui-dark-500"
+              ),
+              onClick: handleOnClose,
+              children: "X"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AsyncComponentWrapper_default,
+          {
+            isLoading,
+            isSuccess,
+            isError,
+            error,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 w-full", children })
+          }
+        )
+      ]
     }
-  );
+  ) }) }) });
 }
 var Modal_default = Modal;
-function UnderConstructionBanner({
-  text
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-5", children: /* @__PURE__ */ jsxRuntime.jsx(Info_default, { children: text ? text : "This component is currently under construction and will be made available soon" }) });
-}
 var GlowWrapper = ({
   children,
   glowSize = 200,
@@ -21081,8 +21261,8 @@ var GlowWrapper = ({
   className = "",
   hideOnLeave = true
 }) => {
-  const ref = React8.useRef(null);
-  const handleMove = React8.useCallback(
+  const ref = React2.useRef(null);
+  const handleMove = React2.useCallback(
     (e) => {
       const el = ref.current;
       if (!el) return;
@@ -21104,7 +21284,7 @@ var GlowWrapper = ({
     },
     [glowSize, glowColor]
   );
-  const handleLeave = React8.useCallback(() => {
+  const handleLeave = React2.useCallback(() => {
     const el = ref.current;
     if (!el || !hideOnLeave) return;
     el.style.setProperty("--glow-x", `-999px`);
@@ -21149,8 +21329,8 @@ function InfiniteScrollTrigger({
   threshold = 0,
   onLoadMore
 }) {
-  const triggerRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const triggerRef = React2.useRef(null);
+  React2.useEffect(() => {
     const element = triggerRef.current;
     if (!element || !hasMore || isLoading) {
       return;
@@ -21176,7 +21356,7 @@ function InfiniteScrollTrigger({
 }
 var InfiniteScrollTrigger_default = InfiniteScrollTrigger;
 function ShowMore({ text, limit }) {
-  const [showMore, setShowMore] = React8.useState(false);
+  const [showMore, setShowMore] = React2.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     showMore ? text : `${text.substring(0, limit)}`,
     text.length > limit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -21211,8 +21391,8 @@ function CommentComposer({
   loading,
   onSubmit
 }) {
-  const [value, setValue] = React8.useState("");
-  const [focused, setFocused] = React8.useState(false);
+  const [value, setValue] = React2.useState("");
+  const [focused, setFocused] = React2.useState(false);
   async function handleSubmit() {
     const content = value.trim();
     if (!content) {
@@ -21467,7 +21647,7 @@ function CommentHeader({ comment, config }) {
 }
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
-  const [show, setShow] = React8.useState(defaultVisibility);
+  const [show, setShow] = React2.useState(defaultVisibility);
   const openDrawer = () => {
     setShow((prev) => !prev);
   };
@@ -21482,7 +21662,7 @@ var useDrawer = (defaultVisibility = true) => {
 };
 var useDrawer_default = useDrawer;
 var useModal = () => {
-  const [show, setShow] = React8.useState(false);
+  const [show, setShow] = React2.useState(false);
   const handleOpenModal = () => {
     setShow(true);
   };
@@ -21530,7 +21710,7 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const ref = React8.useRef(null);
+  const ref = React2.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -21585,7 +21765,7 @@ function CommentMenu({
         children: /* @__PURE__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Transition2.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsx(Menu, { items }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsx(Menu, { items }) }) })
   ] });
 }
 var CommentMenu_default = CommentMenu;
@@ -21658,11 +21838,11 @@ function CommentItem({
   onDelete,
   onReport
 }) {
-  const [collapsed, setCollapsed] = React8.useState(true);
-  const [isReplying, setIsReplying] = React8.useState(false);
-  const [menuOpen, setMenuOpen] = React8.useState(false);
-  const [loadingReplies, setLoadingReplies] = React8.useState(false);
-  const [repliesLoaded, setRepliesLoaded] = React8.useState(false);
+  const [collapsed, setCollapsed] = React2.useState(true);
+  const [isReplying, setIsReplying] = React2.useState(false);
+  const [menuOpen, setMenuOpen] = React2.useState(false);
+  const [loadingReplies, setLoadingReplies] = React2.useState(false);
+  const [repliesLoaded, setRepliesLoaded] = React2.useState(false);
   const resolvedDepth = Math.min(depth, config.maxDepth);
   const {
     Header: HeaderComponent = CommentHeader_default,
@@ -21826,18 +22006,18 @@ function CommentThread({
   onDelete,
   onReport
 }) {
-  const [comments, setComments] = React8.useState([]);
-  const [isLoadingComments, setIsLoadingComments] = React8.useState(true);
-  const [replyCache, setReplyCache] = React8.useState(
+  const [comments, setComments] = React2.useState([]);
+  const [isLoadingComments, setIsLoadingComments] = React2.useState(true);
+  const [replyCache, setReplyCache] = React2.useState(
     {}
   );
-  const replyCacheRef = React8.useRef(replyCache);
+  const replyCacheRef = React2.useRef(replyCache);
   const ComposerComponent = components?.Composer ?? CommentComposer_default;
   const resolvedConfig = {
     ...DEFAULT_COMMENT_THREAD_CONFIG,
     ...config
   };
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     async function loadComments() {
       try {
         const result = await dataSource.getComments({
@@ -21851,10 +22031,10 @@ function CommentThread({
     }
     void loadComments();
   }, [dataSource, resolvedConfig.commentsPerPage]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     replyCacheRef.current = replyCache;
   }, [replyCache]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     let cancelled = false;
     async function refreshLoadedReplies() {
       const parentIds = Object.keys(replyCacheRef.current);
@@ -21890,13 +22070,13 @@ function CommentThread({
       cancelled = true;
     };
   }, [dataSource, resolvedConfig.repliesPerPage]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (!updatedComment) {
       return;
     }
     updateCommentEverywhere(updatedComment.id, () => updatedComment);
   }, [updatedComment]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (!deletedComment) {
       return;
     }
@@ -22110,13 +22290,13 @@ function SliderItem({
 }
 var SliderItem_default = SliderItem;
 function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
-  const [images, setImages] = React8.useState([
+  const [images, setImages] = React2.useState([
     {
       img: coverArt,
       selected: true
     }
   ]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     setImages([
       {
         img: coverArt,
@@ -22124,7 +22304,7 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       }
     ]);
   }, [isSuccess]);
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (screenshots) {
       const selectableScreenshots = [];
       screenshots.forEach((item) => {
@@ -22136,8 +22316,8 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       setImages((prev) => [...prev, ...selectableScreenshots]);
     }
   }, [isSuccess]);
-  const [displayImg, setDisplayImg] = React8.useState(coverArt);
-  React8.useEffect(() => {
+  const [displayImg, setDisplayImg] = React2.useState(coverArt);
+  React2.useEffect(() => {
     setDisplayImg(coverArt);
   }, [coverArt]);
   const displayImageHandler = (itemIndex, img) => {
@@ -22249,7 +22429,7 @@ function WorldMapCountryTable({
   title = "Country Breakdown",
   data
 }) {
-  const enrichedData = React8.useMemo(() => {
+  const enrichedData = React2.useMemo(() => {
     const mapped = data.map((item) => {
       const countryMeta = COUNTRIES.find((c) => c.code === item.code);
       return {
@@ -22262,11 +22442,11 @@ function WorldMapCountryTable({
     });
     return mapped.sort((a, b) => b.value - a.value);
   }, [data]);
-  const total = React8.useMemo(
+  const total = React2.useMemo(
     () => enrichedData.reduce((sum, i) => sum + i.value, 0),
     [enrichedData]
   );
-  const finalData = React8.useMemo(() => {
+  const finalData = React2.useMemo(() => {
     return enrichedData.map((item) => ({
       ...item,
       percent: total > 0 ? item.value / total * 100 : 0
@@ -22511,7 +22691,7 @@ var TNDropdownGroup = ({
   navigate,
   className
 }) => {
-  const [open, setOpen] = React8.useState(true);
+  const [open, setOpen] = React2.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -22600,8 +22780,8 @@ var TNGroup = ({
   components,
   selected
 }) => {
-  const [open, setOpen] = React8.useState(false);
-  const timeoutRef = React8.useRef(null);
+  const [open, setOpen] = React2.useState(false);
+  const timeoutRef = React2.useRef(null);
   const handleEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -22738,7 +22918,7 @@ function SidebarLayout({
   header = /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
   footer = /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
 }) {
-  const [showSidebar, setShowSidebar] = React8.useState(true);
+  const [showSidebar, setShowSidebar] = React2.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
@@ -22792,7 +22972,7 @@ function ScrollToTop({
   behavior = "smooth",
   target
 }) {
-  React8.useEffect(() => {
+  React2.useEffect(() => {
     if (target) {
       target.scrollTo({
         top: 0,
@@ -22987,9 +23167,14 @@ exports.TitleBanner = TitleBanner;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip6;
 exports.TopNav = TopNav;
-exports.Transition = Transition2;
+exports.Transition = Transition;
+exports.TransitionAccordion = TransitionAccordion_default;
+exports.TransitionBase = TransitionBase_default;
 exports.TransitionDropdown = TransitionDropdown_default;
+exports.TransitionFade = TransitionFade_default;
 exports.TransitionFadeIn = TransitionFadeIn_default;
+exports.TransitionScale = TransitionScale_default;
+exports.TransitionSlide = TransitionSlide_default;
 exports.Typography = Typography;
 exports.UnderConstructionBanner = UnderConstructionBanner;
 exports.ValueBadge = ValueBadge_default;