elseware-ui 2.36.1 → 2.36.2

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var tailwindMerge = require('tailwind-merge');
-var React4 = require('react');
+var React8 = 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 classNames16 = require('classnames');
+var classNames17 = require('classnames');
 var fa6 = require('react-icons/fa6');
 var ReactWorldFlags = require('react-world-flags');
 var emojiFlags = require('emoji-flags');
@@ -43,8 +43,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
-var classNames16__default = /*#__PURE__*/_interopDefault(classNames16);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
+var classNames17__default = /*#__PURE__*/_interopDefault(classNames17);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
@@ -582,9 +582,9 @@ function ConfigBootstrap({
   loadingFallback = null,
   showStack = false
 }) {
-  const [RootApp, setRootApp] = React4.useState(null);
-  const [loadError, setLoadError] = React4.useState(null);
-  React4.useEffect(() => {
+  const [RootApp, setRootApp] = React8.useState(null);
+  const [loadError, setLoadError] = React8.useState(null);
+  React8.useEffect(() => {
     if (!config.isValid) {
       return;
     }
@@ -625,16 +625,16 @@ function ConfigBootstrap({
   return /* @__PURE__ */ jsxRuntime.jsx(RootApp, {});
 }
 var ConfigBootstrap_default = ConfigBootstrap;
-var EUIContext = React4.createContext(null);
+var EUIContext = React8.createContext(null);
 var EUIProvider = ({
   config,
   children
 }) => {
-  const [state, setState] = React4.useState(config);
+  const [state, setState] = React8.useState(config);
   return /* @__PURE__ */ jsxRuntime.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
 };
 var useEUIConfig = () => {
-  const ctx = React4.useContext(EUIContext);
+  const ctx = React8.useContext(EUIContext);
   if (!ctx) {
     throw new Error("useEUIConfig must be used inside EUIProvider");
   }
@@ -1452,14 +1452,14 @@ function useChartData({
   onDataChange,
   onError
 } = {}) {
-  const [state, setState] = React4.useState({
+  const [state, setState] = React8.useState({
     data: data ?? [],
     loading: false,
     error: null,
     status: data?.length ? "success" : "idle",
     lastUpdatedAt: data?.length ? /* @__PURE__ */ new Date() : void 0
   });
-  const prepareData = React4.useCallback(
+  const prepareData = React8.useCallback(
     (nextData) => {
       if (!normalize2) {
         return nextData;
@@ -1468,7 +1468,7 @@ function useChartData({
     },
     [normalize2]
   );
-  const replaceData = React4.useCallback(
+  const replaceData = React8.useCallback(
     (nextData) => {
       const normalizedData = prepareData(nextData);
       setState({
@@ -1482,7 +1482,7 @@ function useChartData({
     },
     [onDataChange, prepareData]
   );
-  const appendData = React4.useCallback(
+  const appendData = React8.useCallback(
     (nextData) => {
       setState((currentState) => {
         const incomingData = Array.isArray(nextData) ? nextData : [nextData];
@@ -1506,7 +1506,7 @@ function useChartData({
     },
     [maxDataPoints, onDataChange, prepareData]
   );
-  const clearData = React4.useCallback(() => {
+  const clearData = React8.useCallback(() => {
     setState({
       data: [],
       loading: false,
@@ -1516,7 +1516,7 @@ function useChartData({
     });
     onDataChange?.([]);
   }, [onDataChange]);
-  const handleError = React4.useCallback(
+  const handleError = React8.useCallback(
     (error) => {
       setState((currentState) => ({
         ...currentState,
@@ -1528,7 +1528,7 @@ function useChartData({
     },
     [onError]
   );
-  const refresh = React4.useCallback(async () => {
+  const refresh = React8.useCallback(async () => {
     const resolvedDataSource = dataSource;
     if (!resolvedDataSource?.refresh && !resolvedDataSource?.getInitialData) {
       return;
@@ -1547,13 +1547,13 @@ function useChartData({
       handleError(error instanceof Error ? error : new Error(String(error)));
     }
   }, [dataSource, handleError, replaceData]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (!data) {
       return;
     }
     replaceData(data);
   }, [data, replaceData]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (!dataSource || !autoLoad) {
       return;
     }
@@ -1592,7 +1592,7 @@ function useChartData({
       unsubscribe?.();
     };
   }, [appendData, autoLoad, dataSource, handleError, replaceData]);
-  return React4.useMemo(
+  return React8.useMemo(
     () => ({
       ...state,
       refresh,
@@ -1611,11 +1611,11 @@ function useChartRealtime({
   onData,
   onError
 }) {
-  const [data, setData] = React4.useState([]);
-  const [error, setError] = React4.useState(null);
-  const [connected, setConnected] = React4.useState(false);
-  const [lastUpdatedAt, setLastUpdatedAt] = React4.useState();
-  React4.useEffect(() => {
+  const [data, setData] = React8.useState([]);
+  const [error, setError] = React8.useState(null);
+  const [connected, setConnected] = React8.useState(false);
+  const [lastUpdatedAt, setLastUpdatedAt] = React8.useState();
+  React8.useEffect(() => {
     if (!enabled) {
       setConnected(false);
       return;
@@ -1649,7 +1649,7 @@ function useChartRealtime({
       setConnected(false);
     };
   }, [connect, enabled, maxDataPoints, normalize2, onData, onError]);
-  return React4.useMemo(
+  return React8.useMemo(
     () => ({
       data,
       error,
@@ -1671,13 +1671,13 @@ function useChartPolling({
   onData,
   onError
 }) {
-  const isMountedRef = React4.useRef(false);
-  const isFetchingRef = React4.useRef(false);
-  const [data, setData] = React4.useState([]);
-  const [error, setError] = React4.useState(null);
-  const [loading, setLoading] = React4.useState(immediate);
-  const [lastUpdatedAt, setLastUpdatedAt] = React4.useState();
-  const refresh = React4.useCallback(async () => {
+  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 () => {
     if (isFetchingRef.current) {
       return;
     }
@@ -1706,13 +1706,13 @@ function useChartPolling({
       isFetchingRef.current = false;
     }
   }, [fetcher, normalize2, onData, onError]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (!enabled) {
       setLoading(false);
       return;
@@ -1727,7 +1727,7 @@ function useChartPolling({
       window.clearInterval(timer);
     };
   }, [enabled, immediate, interval, refresh]);
-  return React4.useMemo(
+  return React8.useMemo(
     () => ({
       data,
       error,
@@ -1764,7 +1764,7 @@ function useChartSeries({
   xKey,
   excludeKeys = []
 }) {
-  return React4.useMemo(() => {
+  return React8.useMemo(() => {
     const normalizedSeries = series && series.length > 0 ? series : inferSeriesKeys(data, xKey, excludeKeys).map((key) => ({
       key
     }));
@@ -1812,12 +1812,12 @@ function useChartTheme({
   mode = "dark",
   theme
 } = {}) {
-  return React4.useMemo(() => {
+  return React8.useMemo(() => {
     const baseTheme = mode === "light" ? CHART_LIGHT_THEME : mode === "dark" ? CHART_DARK_THEME : DEFAULT_CHART_THEME;
     return mergeChartTheme(baseTheme, theme);
   }, [mode, theme]);
 }
-var ChartContext = React4.createContext({
+var ChartContext = React8.createContext({
   data: [],
   loading: false,
   error: null,
@@ -1849,7 +1849,7 @@ function ChartProvider({
     onDataChange,
     onError
   });
-  const value = React4.useMemo(
+  const value = React8.useMemo(
     () => ({
       ...chartData,
       mode: dataSource?.mode,
@@ -1866,7 +1866,7 @@ function ChartProvider({
   );
 }
 function useChartContext() {
-  return React4.useContext(ChartContext);
+  return React8.useContext(ChartContext);
 }
 
 // src/components/data-display/charts/context/chartReducer.ts
@@ -2170,7 +2170,7 @@ function ChartLegend({
   valueSource = "latest",
   onItemClick
 }) {
-  const legendItems = React4.useMemo(() => {
+  const legendItems = React8.useMemo(() => {
     if (items?.length) {
       return items;
     }
@@ -2948,7 +2948,7 @@ function GaugePlot({
   const chartData = data ?? context.data;
   const chartLoading = loading ?? context.loading;
   const chartError = error ?? context.error;
-  const resolvedValue = React4.useMemo(() => {
+  const resolvedValue = React8.useMemo(() => {
     if (typeof value === "number") {
       return value;
     }
@@ -3065,14 +3065,14 @@ function StatPlot({
   const chartData = data ?? context.data;
   const chartLoading = loading ?? context.loading;
   const chartError = error ?? context.error;
-  const resolvedValue = React4.useMemo(() => {
+  const resolvedValue = React8.useMemo(() => {
     if (value !== void 0) {
       return value;
     }
     const latestPoint = chartData[chartData.length - 1];
     return latestPoint?.[String(valueKey)] ?? null;
   }, [chartData, value, valueKey]);
-  const resolvedPreviousValue = React4.useMemo(() => {
+  const resolvedPreviousValue = React8.useMemo(() => {
     if (previousValue !== void 0) {
       return previousValue;
     }
@@ -3080,7 +3080,7 @@ function StatPlot({
     const previous = previousPoint?.[String(valueKey)];
     return typeof previous === "number" ? previous : void 0;
   }, [chartData, previousValue, valueKey]);
-  const trend = React4.useMemo(() => {
+  const trend = React8.useMemo(() => {
     if (typeof resolvedValue !== "number" || typeof resolvedPreviousValue !== "number") {
       return null;
     }
@@ -3551,7 +3551,7 @@ var Chip = ({
     }
   ) });
 };
-var DataViewContext = React4.createContext(null);
+var DataViewContext = React8.createContext(null);
 
 // src/components/data-display/data-view/utils/searchData.ts
 function searchData(data, search) {
@@ -3595,19 +3595,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] = 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(() => {
     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 = React8.useMemo(() => {
     if (pageSize === "All") return processedData;
     const size = pageSize;
     const start = (page - 1) * size;
@@ -3645,7 +3645,7 @@ function DataViewSidebar({ children }) {
 }
 var DataViewSidebar_default = DataViewSidebar;
 function useDataView() {
-  const ctx = React4.useContext(DataViewContext);
+  const ctx = React8.useContext(DataViewContext);
   if (!ctx) {
     throw new Error("useDataView must be used within DataViewProvider");
   }
@@ -3711,7 +3711,7 @@ function Accordion({
   toggleOnSummaryClick = false,
   enableChildrenPadding = true
 }) {
-  const [collapse, setCollapse] = React4.useState(defaultCollapse);
+  const [collapse, setCollapse] = React8.useState(defaultCollapse);
   const handleToggle = () => {
     setCollapse((prev) => !prev);
   };
@@ -3719,7 +3719,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames16__default.default({
+        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
         }),
@@ -3737,7 +3737,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 fa6.FaCircleChevronDown,
                 {
-                  className: classNames16__default.default(
+                  className: classNames17__default.default(
                     "text-xl transition-transform duration-300",
                     { "rotate-180": collapse }
                   )
@@ -3759,11 +3759,11 @@ function Accordion({
         leave: "transition duration-75 ease-out",
         leaveFrom: "transform scale-100 opacity-100",
         leaveTo: "transform scale-95 opacity-0",
-        as: React4.Fragment,
+        as: React8.Fragment,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames16__default.default({
+            className: classNames17__default.default({
               "border-t border-t-eui-dark-400/40 eui-text-sm": true,
               "p-5": enableChildrenPadding
             }),
@@ -3847,7 +3847,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames16__default.default(
+      className: classNames17__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -3863,14 +3863,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames16__default.default("p-6 text-gray-300 text-sm", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default("p-6 text-gray-300 text-sm", className), children });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default(
+      className: classNames17__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -3912,7 +3912,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default("absolute inset-0"),
+      className: classNames17__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -4058,7 +4058,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames16__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames17__default.default("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsxRuntime.jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsxRuntime.jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children })
@@ -4216,8 +4216,8 @@ var Flag = ({
   className,
   ...rest
 }) => {
-  const [pos, setPos] = React4.useState({ x: 0, y: 0 });
-  const [showTooltip, setShowTooltip] = React4.useState(false);
+  const [pos, setPos] = React8.useState({ x: 0, y: 0 });
+  const [showTooltip, setShowTooltip] = React8.useState(false);
   const upperCode = code.toUpperCase();
   const country = emojiFlags__default.default.countryCode(upperCode);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4421,16 +4421,16 @@ var GraphRenderer = ({
   width = 1e3,
   height = 700
 }) => {
-  const [nodes, setNodes] = React4.useState([]);
+  const [nodes, setNodes] = React8.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(() => {
+  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(() => {
     return new Map(nodes.map((n) => [n.id, n]));
   }, [nodes]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     simulationRef.current?.stop?.();
     const positionedNodes = data.nodes.map((n) => ({
       ...n,
@@ -4511,13 +4511,13 @@ var Graph = ({
     }
   );
 };
-var CloudinaryContext = React4.createContext(null);
+var CloudinaryContext = React8.createContext(null);
 var CloudinaryProvider = ({
   cloudName,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(CloudinaryContext.Provider, { value: { cloudName }, children });
 var useCloudinaryConfig = () => {
-  const ctx = React4.useContext(CloudinaryContext);
+  const ctx = React8.useContext(CloudinaryContext);
   if (!ctx) {
     throw new Error(
       "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
@@ -4968,7 +4968,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 ? React8__default.default.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -5002,7 +5002,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React4__default.default.isValidElement(item)) {
+  if (React8__default.default.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -5462,7 +5462,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "bg-black/75 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden": true,
         [`${styles}`]: styles
       }),
@@ -5687,8 +5687,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] = React8.useState(null);
+  const [sortOrder, setSortOrder] = React8.useState("asc");
   const toggleSort = (key) => {
     if (sortKey === key) {
       setSortOrder((prev) => prev === "asc" ? "desc" : "asc");
@@ -5697,7 +5697,7 @@ function Table({
       setSortOrder("asc");
     }
   };
-  const sortedData = React4.useMemo(() => {
+  const sortedData = React8.useMemo(() => {
     if (!sortKey) return data;
     return [...data].sort((a, b) => {
       const aVal = a[sortKey];
@@ -5788,8 +5788,8 @@ function Tooltip6({
   className,
   ...rest
 }) {
-  const [pos, setPos] = React4.useState({ x: 0, y: 0 });
-  React4.useEffect(() => {
+  const [pos, setPos] = React8.useState({ x: 0, y: 0 });
+  React8.useEffect(() => {
     if (!show) return;
     const handleMove = (e) => {
       setPos({ x: e.clientX + offsetX, y: e.clientY + offsetY });
@@ -5918,8 +5918,8 @@ function CloudinaryVideo({
 }
 var CloudinaryVideo_default = CloudinaryVideo;
 var FormObserver = ({ formik, onChange }) => {
-  const prevValuesRef = React4.useRef(formik.values);
-  React4.useEffect(() => {
+  const prevValuesRef = React8.useRef(formik.values);
+  React8.useEffect(() => {
     if (!onChange) return;
     const currentValues = formik.values;
     const prevValues = prevValuesRef.current;
@@ -5938,7 +5938,7 @@ var FormObserver = ({ formik, onChange }) => {
 };
 var FormObserver_default = FormObserver;
 var DirtyObserver = ({ formik, onDirtyChange }) => {
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (onDirtyChange) {
       onDirtyChange(formik.dirty);
     }
@@ -5947,7 +5947,7 @@ var DirtyObserver = ({ formik, onDirtyChange }) => {
 };
 var DirtyObserver_default = DirtyObserver;
 var UnsavedChangesGuard = ({ formik, enabled }) => {
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (!enabled) return;
     const handleBeforeUnload = (e) => {
       if (!formik.dirty) return;
@@ -5986,7 +5986,7 @@ var Form = ({
         /* @__PURE__ */ jsxRuntime.jsx(UnsavedChangesGuard_default, { formik: formik$1, enabled: warnOnUnsavedChanges }),
         /* @__PURE__ */ jsxRuntime.jsx(DirtyObserver_default, { formik: formik$1, onDirtyChange }),
         /* @__PURE__ */ jsxRuntime.jsx(FormObserver_default, { formik: formik$1, onChange }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames16__default.default(styles), children })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default(styles), children })
       ] })
     }
   );
@@ -6235,17 +6235,17 @@ function useToastTimer({
   pauseOnHover,
   onTimeout
 }) {
-  const [isPaused, setIsPaused] = React4.useState(false);
-  const timeoutRef = React4.useRef(null);
-  const startedAtRef = React4.useRef(0);
-  const remainingRef = React4.useRef(typeof duration === "number" ? duration : 0);
-  const clearTimer = React4.useCallback(() => {
+  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(() => {
     if (timeoutRef.current !== null) {
       window.clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }, []);
-  const startTimer = React4.useCallback(() => {
+  const startTimer = React8.useCallback(() => {
     if (typeof duration !== "number" || duration <= 0) {
       return;
     }
@@ -6255,12 +6255,12 @@ function useToastTimer({
       onTimeout();
     }, remainingRef.current);
   }, [clearTimer, duration, onTimeout]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     remainingRef.current = typeof duration === "number" ? duration : 0;
     startTimer();
     return clearTimer;
   }, [clearTimer, duration, startTimer]);
-  const pauseTimer = React4.useCallback(() => {
+  const pauseTimer = React8.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
@@ -6271,14 +6271,14 @@ function useToastTimer({
     );
     setIsPaused(true);
   }, [clearTimer, duration, pauseOnHover]);
-  const resumeTimer = React4.useCallback(() => {
+  const resumeTimer = React8.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
     setIsPaused(false);
     startTimer();
   }, [duration, pauseOnHover, startTimer]);
-  const progressStyle = React4.useMemo(() => {
+  const progressStyle = React8.useMemo(() => {
     if (typeof duration !== "number") {
       return void 0;
     }
@@ -6319,7 +6319,7 @@ function ToastItem({
   const duration = item.duration ?? autoClose;
   const variant = toastStatusVariantMap[item.status];
   const statusStyles = toastVariantStyles[variant];
-  const dismiss = React4.useCallback(() => {
+  const dismiss = React8.useCallback(() => {
     toastStore.remove(item.id);
   }, [item.id]);
   const { pauseTimer, resumeTimer, progressStyle } = useToastTimer({
@@ -6398,16 +6398,16 @@ var Toast = ({
   ...rest
 }) => {
   const eui = useEUIConfig();
-  const [items, setItems] = React4.useState(() => {
+  const [items, setItems] = React8.useState(() => {
     return toastStore.getSnapshot();
   });
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     return toastStore.subscribe(setItems);
   }, []);
-  const safeShape = React4.useMemo(() => {
+  const safeShape = React8.useMemo(() => {
     return normalizeToastShape(shape ?? eui?.config?.global?.shape);
   }, [shape, eui?.config?.global?.shape]);
-  const visibleItems = React4.useMemo(() => {
+  const visibleItems = React8.useMemo(() => {
     const orderedItems = newestOnTop ? [...items].reverse() : [...items];
     return orderedItems.slice(0, maxToasts);
   }, [items, maxToasts, newestOnTop]);
@@ -6486,18 +6486,80 @@ 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(
-    react.Transition,
+    TransitionBase_default,
     {
-      as: React4.Fragment,
-      show: visibility,
-      enter: "transition duration-100 ease-out",
-      enterFrom: "transform scale-95 opacity-0",
-      enterTo: "transform scale-100 opacity-100",
-      leave: "transition duration-50 ease-out",
-      leaveFrom: "transform scale-100 opacity-100",
-      leaveTo: "transform scale-95 opacity-0",
+      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
     }
   );
@@ -6505,16 +6567,14 @@ function TransitionDropdown({ visibility, children }) {
 var TransitionDropdown_default = TransitionDropdown;
 function TransitionFadeIn({ visibility, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react.Transition,
+    TransitionBase_default,
     {
-      as: React4.Fragment,
-      show: visibility,
-      enter: `transition-all ease-in-out duration-700 dalay-[0ms]`,
-      enterFrom: "opacity-0 translate-y-6",
-      enterTo: "opacity-100 translate-y-0",
-      leave: "transition-all ease-in-out duration-300",
-      leaveFrom: "opacity-100",
-      leaveTo: "opacity-0",
+      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
     }
   );
@@ -6522,7 +6582,7 @@ function TransitionFadeIn({ visibility, children }) {
 var TransitionFadeIn_default = TransitionFadeIn;
 
 // src/components/feedback/transition/index.tsx
-var Transition4 = {
+var Transition2 = {
   TransitionDropdown: TransitionDropdown_default,
   TransitionFadeIn: TransitionFadeIn_default
 };
@@ -6540,10 +6600,10 @@ function FormResponse({
   size = "md",
   styles
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Transition2.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
@@ -6610,17 +6670,17 @@ function YoutubeVideo({
   ) });
 }
 var YoutubeVideo_default = YoutubeVideo;
-var ThemeContext = React4.createContext(
+var ThemeContext = React8.createContext(
   void 0
 );
 var ThemeProvider = ({
   defaultTheme = "dark",
   children
 }) => {
-  const [theme, setTheme] = React4.useState(() => {
+  const [theme, setTheme] = React8.useState(() => {
     return localStorage.getItem("theme") || defaultTheme;
   });
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
     } else {
@@ -6634,7 +6694,7 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
 };
 var ThemeSwitch = () => {
-  const themeContext = React4.useContext(ThemeContext);
+  const themeContext = React8.useContext(ThemeContext);
   if (!themeContext) return null;
   const { theme, toggleTheme } = themeContext;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6660,7 +6720,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames16__default.default(
+            className: classNames17__default.default(
               "w-6 h-6 bg-white dark:bg-gray-600 rounded-full shadow-md transition-transform duration-300",
               theme === "dark" ? "translate-x-8" : "translate-x-0"
             )
@@ -6696,7 +6756,7 @@ var ShapeSwitch = () => {
 
 // src/hooks/theme/useCurrentTheme.ts
 var useCurrentTheme = () => {
-  const context = React4.useContext(ThemeContext);
+  const context = React8.useContext(ThemeContext);
   if (!context) {
     throw new Error("useCurrentTheme must be used within a ThemeProvider");
   }
@@ -18039,7 +18099,7 @@ function WorldMap({
     }
   };
   const mode = isDarkMode ? mapStyles.dark : mapStyles.light;
-  const resolvedData = React4.useMemo(() => {
+  const resolvedData = React8.useMemo(() => {
     return data.map((item) => {
       const c = COUNTRIES.find((x) => x.code === item.code);
       if (!c) return null;
@@ -18051,8 +18111,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] = React8.useState(false);
+  const [tooltipContent, setTooltipContent] = React8.useState(null);
   const handleMouseMove = (_e, point) => {
     setTooltipContent(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -18138,7 +18198,7 @@ function Button({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const btnRef = React4.useRef(null);
+  const btnRef = React8.useRef(null);
   const variantStyles = resolveAppearanceStyles({
     appearance,
     variant,
@@ -18201,14 +18261,14 @@ function Button({
 var Button_default = Button;
 function InputResponse({
   name,
-  visibility,
+  visibility = false,
   variant = "default",
   styles
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Transition2.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -18223,7 +18283,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "label",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -18239,7 +18299,7 @@ var toggleType = (visibility) => {
 var PasswordVisibilityToggler = ({
   onClick
 }) => {
-  const [passwordVisibility, setPasswordVisibilty] = React4.useState(false);
+  const [passwordVisibility, setPasswordVisibilty] = React8.useState(false);
   const handleOnClick = (visibility) => {
     onClick(visibility);
     setPasswordVisibilty(visibility);
@@ -18264,7 +18324,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] = React8.useState(false);
   const inputType = type === "password" ? toggleType(passwordVisibility) : type;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -18275,7 +18335,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames16__default.default({
+        className: classNames17__default.default({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]": true,
           "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
           "border-eui-danger-500": meta.touched && meta.error,
@@ -18309,7 +18369,7 @@ var InputFile = ({
   styles,
   ...props
 }) => {
-  const fileInputRef = React4.useRef(null);
+  const fileInputRef = React8.useRef(null);
   const [field, meta, helpers] = formik.useField(props);
   const handleFileChange = (e) => {
     const file = e.target.files?.[0] || null;
@@ -18320,7 +18380,7 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames16__default.default(
+        className: classNames17__default.default(
           "border rounded-sm bg-eui-primary-300/10 px-3 pt-3 text-md text-eui-dark-100 cursor-pointer h-[50px] flex items-center",
           {
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -18346,7 +18406,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames16__default.default({
+        styles: classNames17__default.default({
           "absolute left-2 eui-text-sm peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none": true,
           "top-[0.7px]": showFloatingLabel,
           "top-[13px] text-base": !showFloatingLabel
@@ -18399,7 +18459,7 @@ var InputList = ({ name, placeholder, shape }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name, children: ({ push, remove, move }) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames16__default.default(
+        className: classNames17__default.default(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -18428,7 +18488,7 @@ var InputList = ({ name, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames16__default.default(
+                          className: classNames17__default.default(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -18439,7 +18499,7 @@ var InputList = ({ name, placeholder, shape }) => {
                               {
                                 name: `${name}[${index}]`,
                                 placeholder: `Item ${index + 1}`,
-                                className: classNames16__default.default(
+                                className: classNames17__default.default(
                                   "peer h-[50px] w-full border bg-eui-primary-300/10 px-3 pb-2 pt-5 text-md placeholder-transparent placeholder-shown:p-3 focus:outline-none eui-text-md",
                                   shapes[resolvedShape],
                                   hasItemError ? "border-eui-danger-500" : "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -18535,7 +18595,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames16__default.default(
+            className: classNames17__default.default(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -18547,7 +18607,7 @@ var InputListGroup = ({
                   {
                     name: `${name}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames16__default.default(
+                    className: classNames17__default.default(
                       "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                       shapes[resolvedShape],
                       "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -18578,7 +18638,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames16__default.default(
+                      className: classNames17__default.default(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -18598,7 +18658,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames16__default.default(
+                                  className: classNames17__default.default(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -18609,7 +18669,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames16__default.default(
+                                        className: classNames17__default.default(
                                           "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                                           shapes[resolvedShape],
                                           "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -18823,7 +18883,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames16__default.default({
+        className: classNames17__default.default({
           "border border-eui-primary-400 peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-danger-500": meta.touched && meta.error,
           "transition-all ease-in-out": true,
@@ -18849,7 +18909,7 @@ function ImageView({ imageUrl, secure = true, alt = "image" }) {
   ) }) });
 }
 var ImageView_default = ImageView;
-var ImageInput = React4.forwardRef(
+var ImageInput = React8.forwardRef(
   ({
     title = "Upload Image",
     uploadDir = "eg-frontend-admin-temp",
@@ -18861,10 +18921,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] = React8.useState(null);
+    const [url, setUrl] = React8.useState(imageUrl);
+    const [loading, setLoading] = React8.useState(false);
+    const [preview, setPreview] = React8.useState(null);
     const uploadImage = async () => {
       if (!image) return;
       setLoading(true);
@@ -18910,10 +18970,10 @@ var ImageInput = React4.forwardRef(
       if (!disableSetValue) setValue("");
       setLoading(false);
     };
-    React4.useImperativeHandle(ref, () => ({
+    React8.useImperativeHandle(ref, () => ({
       handleResetClick
     }));
-    React4.useEffect(() => {
+    React8.useEffect(() => {
       if (!disableSetValue) setValue(url);
     }, [url, setValue, disableSetValue]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
@@ -18932,7 +18992,7 @@ var ImageInput = React4.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames16__default.default({
+              className: classNames17__default.default({
                 "border-2 border-dashed border-gray-700 bg-gray-900 h-[200px] w-[300px] flex flex-col gap-2 items-center justify-center group": true,
                 "hover:cursor-pointer hover:border-solid hover:border-gray-600 hover:bg-gray-900/80": true,
                 "transition-all ease-in-out duration-150": true
@@ -18998,14 +19058,14 @@ function MultiImageInput({
   const [field, meta, helpers] = formik.useField(props);
   const { value: imageUrls } = field;
   const { setValue } = helpers;
-  const imageInputRef = React4.useRef(null);
+  const imageInputRef = React8.useRef(null);
   const onValueChanged = (url) => {
     setValue([...imageUrls, url]);
     if (imageInputRef.current) {
       imageInputRef.current.handleResetClick();
     }
   };
-  React4.useEffect(() => {
+  React8.useEffect(() => {
   }, [imageUrls]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row flex-wrap gap-5 w-ful", children: [
@@ -19049,7 +19109,7 @@ function Radio({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames16__default.default({
+            className: classNames17__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -19062,7 +19122,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames16__default.default({
+                  className: classNames17__default.default({
                     "appearance-none w-4 h-4 border-2 border-eui-primary-400 rounded-full cursor-pointer transition-all duration-300": true,
                     // base radio button styles
                     "checked:bg-eui-secondary-700 checked:border-eui-primary-400": field2.value === option.value
@@ -19074,7 +19134,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames16__default.default({
+                  className: classNames17__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -19105,9 +19165,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] = React8.useState(Number(field.value) || 0);
+  const [hover, setHover] = React8.useState(null);
+  React8.useEffect(() => {
     setRating(Number(field.value));
   }, [field.value]);
   const handleOnClick = (index) => {
@@ -19117,7 +19177,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -19130,7 +19190,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames16__default.default({
+            className: classNames17__default.default({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -19174,7 +19234,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames16__default.default({
+        className: classNames17__default.default({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-primary-400": !(meta.touched && meta.error),
           "border-red-500": meta.touched && meta.error,
@@ -19226,7 +19286,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames16__default.default(
+            className: classNames17__default.default(
               "w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-eui-dark-100",
               "peer-checked:after:translate-x-full peer-checked:after:border-white",
               "after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white",
@@ -19256,7 +19316,7 @@ function Tags({
   ...props
 }) {
   const [field, meta, helpers] = formik.useField({ ...props });
-  const [input, setInput] = React4.useState("");
+  const [input, setInput] = React8.useState("");
   const handleAddTag = () => {
     const trimmed = input.trim();
     if (trimmed && !field.value.includes(trimmed) && field.value.length < limit) {
@@ -19283,7 +19343,7 @@ function Tags({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames16__default.default(
+          className: classNames17__default.default(
             "border rounded-sm flex flex-wrap items-center gap-2 px-2 pt-2 pb-6 min-h-[3rem]",
             {
               "bg-eui-primary-300/10 eui-text-md": true,
@@ -19331,7 +19391,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames16__default.default(
+          styles: classNames17__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             input.length > 0 || field.value.length > 0 ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -19372,7 +19432,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames16__default.default({
+          className: classNames17__default.default({
             "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 resize-none focus:resize-none focus:outline-none": true,
             "transition-all ease-in-out": true,
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -19386,7 +19446,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames16__default.default(
+          styles: classNames17__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -19417,7 +19477,7 @@ function ContentArea({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "min-h-screen h-full w-full py-3 px-5": true,
         "py-3 px-5": !enablePadding,
         "py-3 px-5 lg:px-[150px]": enablePadding,
@@ -19433,7 +19493,7 @@ function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -19446,7 +19506,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -19465,7 +19525,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -19482,7 +19542,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -19501,7 +19561,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -19520,8 +19580,8 @@ var Header = ({
   );
 };
 var useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = React4.useState(window.innerWidth < breakpoint);
-  React4.useEffect(() => {
+  const [isMobile, setIsMobile] = React8.useState(window.innerWidth < breakpoint);
+  React8.useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < breakpoint);
     };
@@ -19541,7 +19601,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "w-full min-h-screen transition-all duration-200 eui-bg-sm": true,
         "md:pl-[300px]": !overlayedSidebar && sidebarVisible && !isMobile,
         // Shift when sidebar is open (desktop)
@@ -19557,7 +19617,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "bottom-0 w-full h-fit": true,
         "border-t border-eui-dark-500/40 dark:border-eui-secondary-800 eui-bg-md": !styles,
         [`${styles}`]: styles
@@ -19631,7 +19691,7 @@ function BlockGroup({
 }
 var BlockGroup_default = BlockGroup;
 var useTheme = () => {
-  const context = React4.useContext(ThemeContext);
+  const context = React8.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -19645,7 +19705,7 @@ function MarkdownEditor({
   const [field, meta, helpers] = formik.useField(props);
   const { theme } = useTheme_default();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames16__default.default(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsxRuntime.jsx(
       editor.MDXEditor,
       {
         markdown: field.value,
@@ -19693,11 +19753,11 @@ function MarkdownEditor({
   ] });
 }
 var MarkdownEditor_default = MarkdownEditor;
-var MarkdownContext = React4.createContext(null);
+var MarkdownContext = React8.createContext(null);
 
 // src/components/markdown/hooks/useMarkdown.tsx
 function useMarkdown() {
-  return React4.useContext(MarkdownContext);
+  return React8.useContext(MarkdownContext);
 }
 
 // src/components/markdown/utils/generateHeadingNumbers.ts
@@ -19748,7 +19808,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
       "button",
       {
         onClick: () => scrollToHeading(heading.id),
-        className: classNames16__default.default(
+        className: classNames17__default.default(
           "block w-full text-left text-sm transition-all ease-in-out duration-150",
           "hover:text-primary",
           activeHeading === heading.id ? "text-primary font-semibold underline" : "text-gray-500 dark:text-gray-400"
@@ -19772,7 +19832,7 @@ function MarkdownViewer({ value }) {
   const markdown = value ?? context?.markdown ?? "";
   const headings = context?.headings ?? [];
   const setActiveHeading = context?.setActiveHeading;
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     const timeout = setTimeout(() => {
       headings.forEach((heading) => {
         const headingEls = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
@@ -19877,8 +19937,8 @@ function extractHeadings(markdown) {
   });
 }
 function MarkdownProvider({ markdown, children }) {
-  const [activeHeading, setActiveHeading] = React4.useState("");
-  const headings = React4.useMemo(() => extractHeadings(markdown), [markdown]);
+  const [activeHeading, setActiveHeading] = React8.useState("");
+  const headings = React8.useMemo(() => extractHeadings(markdown), [markdown]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MarkdownContext.Provider,
     {
@@ -19904,7 +19964,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -19951,7 +20011,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 = React8.useMemo(() => {
     if (resolvedRoutes && resolvedRoutes.length > 0) {
       return buildFromRoutes(resolvedRoutes, pathname);
     }
@@ -19968,7 +20028,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           BreadcrumbItem_default,
           {
@@ -19981,7 +20041,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames16__default.default({
+            className: classNames17__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -19995,7 +20055,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -20025,7 +20085,7 @@ var Drawer = ({
       {
         show: visibility,
         enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames16__default.default({
+        enterFrom: classNames17__default.default({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -20034,7 +20094,7 @@ var Drawer = ({
         enterTo: "translate-x-0 translate-y-0",
         leave: "transform transition duration-200 ease-in",
         leaveFrom: "translate-x-0 translate-y-0",
-        leaveTo: classNames16__default.default({
+        leaveTo: classNames17__default.default({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -20043,7 +20103,7 @@ var Drawer = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames16__default.default(
+            className: classNames17__default.default(
               "fixed shadow-lg z-50",
               {
                 "h-full w-[300px]": isHorizontal,
@@ -20075,7 +20135,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -20123,7 +20183,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames16__default.default({
+        className: classNames17__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -20136,7 +20196,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20177,7 +20237,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames16__default.default({
+        className: classNames17__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -20222,7 +20282,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-1 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "text-sm eui-text-sm": !styles,
@@ -20251,7 +20311,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -20304,7 +20364,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20313,7 +20373,7 @@ function HeaderNav({ data = [], styles }) {
 }
 var HeaderNav_default = HeaderNav;
 function useClickOutside(ref, fun) {
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     const listener = (e) => {
       if (!ref.current || ref.current.contains(e.target)) {
         return;
@@ -20354,8 +20414,8 @@ var HeaderNavGroup = ({
   styles,
   children
 }) => {
-  const [collapsed, setCollapsed] = React4.useState(true);
-  const headerNavGroupRef = React4.useRef(null);
+  const [collapsed, setCollapsed] = React8.useState(true);
+  const headerNavGroupRef = React8.useRef(null);
   useClickOutside(headerNavGroupRef, () => setCollapsed(true));
   const handleNavigation = () => {
     if (to) {
@@ -20366,7 +20426,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames16__default.default({
+        className: classNames17__default.default({
           "flex flex-row gap-2 items-center justify-between cursor-pointer p-3 w-full": true,
           "transition-all duration-300 ease-in-out": true,
           "eui-text-md bg-gradient-to-t from-eui-dark-500/10 dark:from-green-700/10": !styles,
@@ -20394,7 +20454,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsxRuntime.jsx(
             bs.BsChevronDown,
             {
-              className: classNames16__default.default({
+              className: classNames17__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -20407,7 +20467,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames16__default.default({
+        className: classNames17__default.default({
           "absolute min-w-80 left-0 top-full mt-1 border border-eui-dark-300/10 dark:border-eui-dark-300/50 shadow-lg eui-shadow-lg z-50 w-full eui-bg-md": true,
           "transition-all duration-300 ease-in-out": true
         }),
@@ -20437,7 +20497,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-3 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "eui-text-md border-b border-eui-dark-500/20 dark:border-eui-secondary-900/20 bg-gradient-to-r from-eui-dark-500/10 dark:from-eui-secondary-900/10": !styles,
@@ -20466,7 +20526,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -20506,7 +20566,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -20578,8 +20638,8 @@ var MenuGroup = ({
   style,
   ...rest
 }) => {
-  const [collapsed, setCollapsed] = React4.useState(!defaultOpen);
-  React4.useEffect(() => {
+  const [collapsed, setCollapsed] = React8.useState(!defaultOpen);
+  React8.useEffect(() => {
     if (defaultOpen !== void 0) {
       setCollapsed(!defaultOpen);
     }
@@ -20696,12 +20756,12 @@ var Menu = ({
   defaultMenuElements,
   currentPath
 }) => {
-  const normalizedItems = React4.useMemo(() => assignKeys(items), [items]);
-  const selected = React4.useMemo(() => {
+  const normalizedItems = React8.useMemo(() => assignKeys(items), [items]);
+  const selected = React8.useMemo(() => {
     if (!currentPath) return void 0;
     return findSelectedKey(normalizedItems, currentPath);
   }, [currentPath, normalizedItems]);
-  const parentMap = React4.useMemo(
+  const parentMap = React8.useMemo(
     () => buildParentMap(normalizedItems),
     [normalizedItems]
   );
@@ -20854,8 +20914,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] = React8.useState(getActiveTab);
+  React8.useEffect(() => {
     if (mode !== "route") return;
     const handlePopState = () => {
       setActiveTab(getActiveTab());
@@ -20952,7 +21012,7 @@ function Modal({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const modalRef = React4.useRef(null);
+  const modalRef = React8.useRef(null);
   useClickOutside(
     modalRef,
     enableCloseOnClickOutside ? handleOnClose : void 0
@@ -20967,12 +21027,12 @@ function Modal({
       leave: "transition duration-100 ease-out",
       leaveFrom: "transform scale-200 opacity-100",
       leaveTo: "transform scale-95 opacity-0",
-      as: React4.Fragment,
+      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: classNames16__default.default({
+          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
@@ -20983,7 +21043,7 @@ function Modal({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: classNames16__default.default({
+                  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
                   }),
@@ -21021,8 +21081,8 @@ var GlowWrapper = ({
   className = "",
   hideOnLeave = true
 }) => {
-  const ref = React4.useRef(null);
-  const handleMove = React4.useCallback(
+  const ref = React8.useRef(null);
+  const handleMove = React8.useCallback(
     (e) => {
       const el = ref.current;
       if (!el) return;
@@ -21044,7 +21104,7 @@ var GlowWrapper = ({
     },
     [glowSize, glowColor]
   );
-  const handleLeave = React4.useCallback(() => {
+  const handleLeave = React8.useCallback(() => {
     const el = ref.current;
     if (!el || !hideOnLeave) return;
     el.style.setProperty("--glow-x", `-999px`);
@@ -21089,8 +21149,8 @@ function InfiniteScrollTrigger({
   threshold = 0,
   onLoadMore
 }) {
-  const triggerRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const triggerRef = React8.useRef(null);
+  React8.useEffect(() => {
     const element = triggerRef.current;
     if (!element || !hasMore || isLoading) {
       return;
@@ -21116,7 +21176,7 @@ function InfiniteScrollTrigger({
 }
 var InfiniteScrollTrigger_default = InfiniteScrollTrigger;
 function ShowMore({ text, limit }) {
-  const [showMore, setShowMore] = React4.useState(false);
+  const [showMore, setShowMore] = React8.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     showMore ? text : `${text.substring(0, limit)}`,
     text.length > limit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -21124,7 +21184,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames16__default.default({
+          className: classNames17__default.default({
             "text-blue-300  px-1 pb-1 mt-1": true,
             "bg-slate-900/70": !showMore,
             "bg-gradient-to-t from-slate-900/50 to-transparent": showMore
@@ -21151,8 +21211,8 @@ function CommentComposer({
   loading,
   onSubmit
 }) {
-  const [value, setValue] = React4.useState("");
-  const [focused, setFocused] = React4.useState(false);
+  const [value, setValue] = React8.useState("");
+  const [focused, setFocused] = React8.useState(false);
   async function handleSubmit() {
     const content = value.trim();
     if (!content) {
@@ -21407,7 +21467,7 @@ function CommentHeader({ comment, config }) {
 }
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
-  const [show, setShow] = React4.useState(defaultVisibility);
+  const [show, setShow] = React8.useState(defaultVisibility);
   const openDrawer = () => {
     setShow((prev) => !prev);
   };
@@ -21422,7 +21482,7 @@ var useDrawer = (defaultVisibility = true) => {
 };
 var useDrawer_default = useDrawer;
 var useModal = () => {
-  const [show, setShow] = React4.useState(false);
+  const [show, setShow] = React8.useState(false);
   const handleOpenModal = () => {
     setShow(true);
   };
@@ -21470,7 +21530,7 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const ref = React4.useRef(null);
+  const ref = React8.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -21525,7 +21585,7 @@ function CommentMenu({
         children: /* @__PURE__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Transition4.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(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 }) }) })
   ] });
 }
 var CommentMenu_default = CommentMenu;
@@ -21598,11 +21658,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] = 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 resolvedDepth = Math.min(depth, config.maxDepth);
   const {
     Header: HeaderComponent = CommentHeader_default,
@@ -21766,18 +21826,18 @@ function CommentThread({
   onDelete,
   onReport
 }) {
-  const [comments, setComments] = React4.useState([]);
-  const [isLoadingComments, setIsLoadingComments] = React4.useState(true);
-  const [replyCache, setReplyCache] = React4.useState(
+  const [comments, setComments] = React8.useState([]);
+  const [isLoadingComments, setIsLoadingComments] = React8.useState(true);
+  const [replyCache, setReplyCache] = React8.useState(
     {}
   );
-  const replyCacheRef = React4.useRef(replyCache);
+  const replyCacheRef = React8.useRef(replyCache);
   const ComposerComponent = components?.Composer ?? CommentComposer_default;
   const resolvedConfig = {
     ...DEFAULT_COMMENT_THREAD_CONFIG,
     ...config
   };
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     async function loadComments() {
       try {
         const result = await dataSource.getComments({
@@ -21791,10 +21851,10 @@ function CommentThread({
     }
     void loadComments();
   }, [dataSource, resolvedConfig.commentsPerPage]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     replyCacheRef.current = replyCache;
   }, [replyCache]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     let cancelled = false;
     async function refreshLoadedReplies() {
       const parentIds = Object.keys(replyCacheRef.current);
@@ -21830,13 +21890,13 @@ function CommentThread({
       cancelled = true;
     };
   }, [dataSource, resolvedConfig.repliesPerPage]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (!updatedComment) {
       return;
     }
     updateCommentEverywhere(updatedComment.id, () => updatedComment);
   }, [updatedComment]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (!deletedComment) {
       return;
     }
@@ -22050,13 +22110,13 @@ function SliderItem({
 }
 var SliderItem_default = SliderItem;
 function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
-  const [images, setImages] = React4.useState([
+  const [images, setImages] = React8.useState([
     {
       img: coverArt,
       selected: true
     }
   ]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     setImages([
       {
         img: coverArt,
@@ -22064,7 +22124,7 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       }
     ]);
   }, [isSuccess]);
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (screenshots) {
       const selectableScreenshots = [];
       screenshots.forEach((item) => {
@@ -22076,8 +22136,8 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       setImages((prev) => [...prev, ...selectableScreenshots]);
     }
   }, [isSuccess]);
-  const [displayImg, setDisplayImg] = React4.useState(coverArt);
-  React4.useEffect(() => {
+  const [displayImg, setDisplayImg] = React8.useState(coverArt);
+  React8.useEffect(() => {
     setDisplayImg(coverArt);
   }, [coverArt]);
   const displayImageHandler = (itemIndex, img) => {
@@ -22189,7 +22249,7 @@ function WorldMapCountryTable({
   title = "Country Breakdown",
   data
 }) {
-  const enrichedData = React4.useMemo(() => {
+  const enrichedData = React8.useMemo(() => {
     const mapped = data.map((item) => {
       const countryMeta = COUNTRIES.find((c) => c.code === item.code);
       return {
@@ -22202,11 +22262,11 @@ function WorldMapCountryTable({
     });
     return mapped.sort((a, b) => b.value - a.value);
   }, [data]);
-  const total = React4.useMemo(
+  const total = React8.useMemo(
     () => enrichedData.reduce((sum, i) => sum + i.value, 0),
     [enrichedData]
   );
-  const finalData = React4.useMemo(() => {
+  const finalData = React8.useMemo(() => {
     return enrichedData.map((item) => ({
       ...item,
       percent: total > 0 ? item.value / total * 100 : 0
@@ -22281,7 +22341,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames16__default.default(
+      className: classNames17__default.default(
         "w-full min-w-[80px] flex flex-col items-center justify-center py-3 text-center",
         "hover:text-secondary-700 hover:bg-gray-300/10 hover:cursor-pointer",
         selected ? "text-eui-secondary-700 bg-gray-300/10" : "text-gray-400",
@@ -22451,7 +22511,7 @@ var TNDropdownGroup = ({
   navigate,
   className
 }) => {
-  const [open, setOpen] = React4.useState(true);
+  const [open, setOpen] = React8.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -22540,8 +22600,8 @@ var TNGroup = ({
   components,
   selected
 }) => {
-  const [open, setOpen] = React4.useState(false);
-  const timeoutRef = React4.useRef(null);
+  const [open, setOpen] = React8.useState(false);
+  const timeoutRef = React8.useRef(null);
   const handleEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -22641,7 +22701,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`${styles}`]: styles
       }),
       children
@@ -22678,7 +22738,7 @@ function SidebarLayout({
   header = /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
   footer = /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
 }) {
-  const [showSidebar, setShowSidebar] = React4.useState(true);
+  const [showSidebar, setShowSidebar] = React8.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
@@ -22690,7 +22750,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -22732,7 +22792,7 @@ function ScrollToTop({
   behavior = "smooth",
   target
 }) {
-  React4.useEffect(() => {
+  React8.useEffect(() => {
     if (target) {
       target.scrollTo({
         top: 0,
@@ -22927,7 +22987,7 @@ exports.TitleBanner = TitleBanner;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip6;
 exports.TopNav = TopNav;
-exports.Transition = Transition4;
+exports.Transition = Transition2;
 exports.TransitionDropdown = TransitionDropdown_default;
 exports.TransitionFadeIn = TransitionFadeIn_default;
 exports.Typography = Typography;