elseware-ui 2.36.1 → 2.36.4

package/dist/index.js

@@ -1,13 +1,12 @@
 'use strict';
 
 var tailwindMerge = require('tailwind-merge');
-var React4 = 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 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 +42,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
-var classNames16__default = /*#__PURE__*/_interopDefault(classNames16);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+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 +581,9 @@ function ConfigBootstrap({
   loadingFallback = null,
   showStack = false
 }) {
-  const [RootApp, setRootApp] = React4.useState(null);
-  const [loadError, setLoadError] = React4.useState(null);
-  React4.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 = React4.createContext(null);
+var EUIContext = React2.createContext(null);
 var EUIProvider = ({
   config,
   children
 }) => {
-  const [state, setState] = React4.useState(config);
+  const [state, setState] = React2.useState(config);
   return /* @__PURE__ */ jsxRuntime.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
 };
 var useEUIConfig = () => {
-  const ctx = React4.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] = React4.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 = React4.useCallback(
+  const prepareData = React2.useCallback(
     (nextData) => {
       if (!normalize2) {
         return nextData;
@@ -1468,7 +1467,7 @@ function useChartData({
     },
     [normalize2]
   );
-  const replaceData = React4.useCallback(
+  const replaceData = React2.useCallback(
     (nextData) => {
       const normalizedData = prepareData(nextData);
       setState({
@@ -1482,7 +1481,7 @@ function useChartData({
     },
     [onDataChange, prepareData]
   );
-  const appendData = React4.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 = React4.useCallback(() => {
+  const clearData = React2.useCallback(() => {
     setState({
       data: [],
       loading: false,
@@ -1516,7 +1515,7 @@ function useChartData({
     });
     onDataChange?.([]);
   }, [onDataChange]);
-  const handleError = React4.useCallback(
+  const handleError = React2.useCallback(
     (error) => {
       setState((currentState) => ({
         ...currentState,
@@ -1528,7 +1527,7 @@ function useChartData({
     },
     [onError]
   );
-  const refresh = React4.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]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (!data) {
       return;
     }
     replaceData(data);
   }, [data, replaceData]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (!dataSource || !autoLoad) {
       return;
     }
@@ -1592,7 +1591,7 @@ function useChartData({
       unsubscribe?.();
     };
   }, [appendData, autoLoad, dataSource, handleError, replaceData]);
-  return React4.useMemo(
+  return React2.useMemo(
     () => ({
       ...state,
       refresh,
@@ -1611,11 +1610,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] = 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 React4.useMemo(
+  return React2.useMemo(
     () => ({
       data,
       error,
@@ -1671,13 +1670,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 = 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]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) {
       setLoading(false);
       return;
@@ -1727,7 +1726,7 @@ function useChartPolling({
       window.clearInterval(timer);
     };
   }, [enabled, immediate, interval, refresh]);
-  return React4.useMemo(
+  return React2.useMemo(
     () => ({
       data,
       error,
@@ -1764,7 +1763,7 @@ function useChartSeries({
   xKey,
   excludeKeys = []
 }) {
-  return React4.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 React4.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 = React4.createContext({
+var ChartContext = React2.createContext({
   data: [],
   loading: false,
   error: null,
@@ -1849,7 +1848,7 @@ function ChartProvider({
     onDataChange,
     onError
   });
-  const value = React4.useMemo(
+  const value = React2.useMemo(
     () => ({
       ...chartData,
       mode: dataSource?.mode,
@@ -1866,7 +1865,7 @@ function ChartProvider({
   );
 }
 function useChartContext() {
-  return React4.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 = React4.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 = React4.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 = React4.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 = React4.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 = React4.useMemo(() => {
+  const trend = React2.useMemo(() => {
     if (typeof resolvedValue !== "number" || typeof resolvedPreviousValue !== "number") {
       return null;
     }
@@ -3551,7 +3550,7 @@ var Chip = ({
     }
   ) });
 };
-var DataViewContext = React4.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] = 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] = 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 = React4.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 = React4.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] = React4.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: classNames16__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: classNames16__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: React4.Fragment,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        className: classNames17__default.default(
+          "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
-            className: classNames16__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;
@@ -3847,7 +4074,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 +4090,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 +4139,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 +4285,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 +4443,8 @@ var Flag = ({
   className,
   ...rest
 }) => {
-  const [pos, setPos] = React4.useState({ x: 0, y: 0 });
-  const [showTooltip, setShowTooltip] = React4.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] = React4.useState([]);
+  const [nodes, setNodes] = React2.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 = 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]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     simulationRef.current?.stop?.();
     const positionedNodes = data.nodes.map((n) => ({
       ...n,
@@ -4511,13 +4738,13 @@ var Graph = ({
     }
   );
 };
-var CloudinaryContext = React4.createContext(null);
+var CloudinaryContext = React2.createContext(null);
 var CloudinaryProvider = ({
   cloudName,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(CloudinaryContext.Provider, { value: { cloudName }, children });
 var useCloudinaryConfig = () => {
-  const ctx = React4.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 ? React4__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 (React4__default.default.isValidElement(item)) {
+  if (React2__default.default.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -5462,7 +5689,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 +5914,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] = 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 = React4.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] = React4.useState({ x: 0, y: 0 });
-  React4.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 = React4.useRef(formik.values);
-  React4.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 }) => {
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (onDirtyChange) {
       onDirtyChange(formik.dirty);
     }
@@ -5947,7 +6174,7 @@ var DirtyObserver = ({ formik, onDirtyChange }) => {
 };
 var DirtyObserver_default = DirtyObserver;
 var UnsavedChangesGuard = ({ formik, enabled }) => {
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     const handleBeforeUnload = (e) => {
       if (!formik.dirty) return;
@@ -5986,7 +6213,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 +6462,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] = 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 = React4.useCallback(() => {
+  const startTimer = React2.useCallback(() => {
     if (typeof duration !== "number" || duration <= 0) {
       return;
     }
@@ -6255,12 +6482,12 @@ function useToastTimer({
       onTimeout();
     }, remainingRef.current);
   }, [clearTimer, duration, onTimeout]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     remainingRef.current = typeof duration === "number" ? duration : 0;
     startTimer();
     return clearTimer;
   }, [clearTimer, duration, startTimer]);
-  const pauseTimer = React4.useCallback(() => {
+  const pauseTimer = React2.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
@@ -6271,14 +6498,14 @@ function useToastTimer({
     );
     setIsPaused(true);
   }, [clearTimer, duration, pauseOnHover]);
-  const resumeTimer = React4.useCallback(() => {
+  const resumeTimer = React2.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
     setIsPaused(false);
     startTimer();
   }, [duration, pauseOnHover, startTimer]);
-  const progressStyle = React4.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 = React4.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] = React4.useState(() => {
+  const [items, setItems] = React2.useState(() => {
     return toastStore.getSnapshot();
   });
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     return toastStore.subscribe(setItems);
   }, []);
-  const safeShape = React4.useMemo(() => {
+  const safeShape = React2.useMemo(() => {
     return normalizeToastShape(shape ?? eui?.config?.global?.shape);
   }, [shape, eui?.config?.global?.shape]);
-  const visibleItems = React4.useMemo(() => {
+  const visibleItems = React2.useMemo(() => {
     const orderedItems = newestOnTop ? [...items].reverse() : [...items];
     return orderedItems.slice(0, maxToasts);
   }, [items, maxToasts, newestOnTop]);
@@ -6486,46 +6713,6 @@ function sendToast(data = {}) {
     status: data.status || "success" /* success */
   });
 }
-function TransitionDropdown({ visibility, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.Transition,
-    {
-      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",
-      children
-    }
-  );
-}
-var TransitionDropdown_default = TransitionDropdown;
-function TransitionFadeIn({ visibility, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.Transition,
-    {
-      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",
-      children
-    }
-  );
-}
-var TransitionFadeIn_default = TransitionFadeIn;
-
-// src/components/feedback/transition/index.tsx
-var Transition4 = {
-  TransitionDropdown: TransitionDropdown_default,
-  TransitionFadeIn: TransitionFadeIn_default
-};
 var sizes3 = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-2 text-sm",
@@ -6540,10 +6727,10 @@ function FormResponse({
   size = "md",
   styles
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Transition4.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: classNames16__default.default({
+      className: classNames17__default.default({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
@@ -6610,17 +6797,17 @@ function YoutubeVideo({
   ) });
 }
 var YoutubeVideo_default = YoutubeVideo;
-var ThemeContext = React4.createContext(
+var ThemeContext = React2.createContext(
   void 0
 );
 var ThemeProvider = ({
   defaultTheme = "dark",
   children
 }) => {
-  const [theme, setTheme] = React4.useState(() => {
+  const [theme, setTheme] = React2.useState(() => {
     return localStorage.getItem("theme") || defaultTheme;
   });
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
     } else {
@@ -6634,7 +6821,7 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
 };
 var ThemeSwitch = () => {
-  const themeContext = React4.useContext(ThemeContext);
+  const themeContext = React2.useContext(ThemeContext);
   if (!themeContext) return null;
   const { theme, toggleTheme } = themeContext;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6660,7 +6847,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 +6883,7 @@ var ShapeSwitch = () => {
 
 // src/hooks/theme/useCurrentTheme.ts
 var useCurrentTheme = () => {
-  const context = React4.useContext(ThemeContext);
+  const context = React2.useContext(ThemeContext);
   if (!context) {
     throw new Error("useCurrentTheme must be used within a ThemeProvider");
   }
@@ -18039,7 +18226,7 @@ function WorldMap({
     }
   };
   const mode = isDarkMode ? mapStyles.dark : mapStyles.light;
-  const resolvedData = React4.useMemo(() => {
+  const resolvedData = React2.useMemo(() => {
     return data.map((item) => {
       const c = COUNTRIES.find((x) => x.code === item.code);
       if (!c) return null;
@@ -18051,8 +18238,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] = React2.useState(false);
+  const [tooltipContent, setTooltipContent] = React2.useState(null);
   const handleMouseMove = (_e, point) => {
     setTooltipContent(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -18138,7 +18325,7 @@ function Button({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const btnRef = React4.useRef(null);
+  const btnRef = React2.useRef(null);
   const variantStyles = resolveAppearanceStyles({
     appearance,
     variant,
@@ -18201,14 +18388,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(Transition.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 +18410,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 +18426,7 @@ var toggleType = (visibility) => {
 var PasswordVisibilityToggler = ({
   onClick
 }) => {
-  const [passwordVisibility, setPasswordVisibilty] = React4.useState(false);
+  const [passwordVisibility, setPasswordVisibilty] = React2.useState(false);
   const handleOnClick = (visibility) => {
     onClick(visibility);
     setPasswordVisibilty(visibility);
@@ -18264,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] = React4.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(
@@ -18275,7 +18462,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 +18496,7 @@ var InputFile = ({
   styles,
   ...props
 }) => {
-  const fileInputRef = React4.useRef(null);
+  const fileInputRef = React2.useRef(null);
   const [field, meta, helpers] = formik.useField(props);
   const handleFileChange = (e) => {
     const file = e.target.files?.[0] || null;
@@ -18320,7 +18507,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 +18533,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 +18586,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 +18615,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 +18626,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 +18722,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 +18734,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 +18765,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 +18785,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 +18796,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 +19010,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 +19036,7 @@ function ImageView({ imageUrl, secure = true, alt = "image" }) {
   ) }) });
 }
 var ImageView_default = ImageView;
-var ImageInput = React4.forwardRef(
+var ImageInput = React2.forwardRef(
   ({
     title = "Upload Image",
     uploadDir = "eg-frontend-admin-temp",
@@ -18861,10 +19048,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] = 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);
@@ -18910,10 +19097,10 @@ var ImageInput = React4.forwardRef(
       if (!disableSetValue) setValue("");
       setLoading(false);
     };
-    React4.useImperativeHandle(ref, () => ({
+    React2.useImperativeHandle(ref, () => ({
       handleResetClick
     }));
-    React4.useEffect(() => {
+    React2.useEffect(() => {
       if (!disableSetValue) setValue(url);
     }, [url, setValue, disableSetValue]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
@@ -18932,7 +19119,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 +19185,14 @@ function MultiImageInput({
   const [field, meta, helpers] = formik.useField(props);
   const { value: imageUrls } = field;
   const { setValue } = helpers;
-  const imageInputRef = React4.useRef(null);
+  const imageInputRef = React2.useRef(null);
   const onValueChanged = (url) => {
     setValue([...imageUrls, url]);
     if (imageInputRef.current) {
       imageInputRef.current.handleResetClick();
     }
   };
-  React4.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: [
@@ -19049,7 +19236,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 +19249,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 +19261,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 +19292,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] = React2.useState(Number(field.value) || 0);
+  const [hover, setHover] = React2.useState(null);
+  React2.useEffect(() => {
     setRating(Number(field.value));
   }, [field.value]);
   const handleOnClick = (index) => {
@@ -19117,7 +19304,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 +19317,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 +19361,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 +19413,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 +19443,7 @@ function Tags({
   ...props
 }) {
   const [field, meta, helpers] = formik.useField({ ...props });
-  const [input, setInput] = React4.useState("");
+  const [input, setInput] = React2.useState("");
   const handleAddTag = () => {
     const trimmed = input.trim();
     if (trimmed && !field.value.includes(trimmed) && field.value.length < limit) {
@@ -19283,7 +19470,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 +19518,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 +19559,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 +19573,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 +19604,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 +19620,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 +19633,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 +19652,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -19482,7 +19669,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 +19688,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 +19707,8 @@ var Header = ({
   );
 };
 var useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = React4.useState(window.innerWidth < breakpoint);
-  React4.useEffect(() => {
+  const [isMobile, setIsMobile] = React2.useState(window.innerWidth < breakpoint);
+  React2.useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < breakpoint);
     };
@@ -19541,7 +19728,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 +19744,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 +19818,7 @@ function BlockGroup({
 }
 var BlockGroup_default = BlockGroup;
 var useTheme = () => {
-  const context = React4.useContext(ThemeContext);
+  const context = React2.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -19645,7 +19832,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 +19880,11 @@ function MarkdownEditor({
   ] });
 }
 var MarkdownEditor_default = MarkdownEditor;
-var MarkdownContext = React4.createContext(null);
+var MarkdownContext = React2.createContext(null);
 
 // src/components/markdown/hooks/useMarkdown.tsx
 function useMarkdown() {
-  return React4.useContext(MarkdownContext);
+  return React2.useContext(MarkdownContext);
 }
 
 // src/components/markdown/utils/generateHeadingNumbers.ts
@@ -19748,7 +19935,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 +19959,7 @@ function MarkdownViewer({ value }) {
   const markdown = value ?? context?.markdown ?? "";
   const headings = context?.headings ?? [];
   const setActiveHeading = context?.setActiveHeading;
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     const timeout = setTimeout(() => {
       headings.forEach((heading) => {
         const headingEls = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
@@ -19877,8 +20064,8 @@ function extractHeadings(markdown) {
   });
 }
 function MarkdownProvider({ markdown, children }) {
-  const [activeHeading, setActiveHeading] = React4.useState("");
-  const headings = React4.useMemo(() => extractHeadings(markdown), [markdown]);
+  const [activeHeading, setActiveHeading] = React2.useState("");
+  const headings = React2.useMemo(() => extractHeadings(markdown), [markdown]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MarkdownContext.Provider,
     {
@@ -19904,7 +20091,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 +20138,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 = React2.useMemo(() => {
     if (resolvedRoutes && resolvedRoutes.length > 0) {
       return buildFromRoutes(resolvedRoutes, pathname);
     }
@@ -19968,7 +20155,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React2__default.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           BreadcrumbItem_default,
           {
@@ -19981,7 +20168,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 +20182,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -20008,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: classNames16__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: classNames16__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: classNames16__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({
@@ -20075,7 +20240,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 +20288,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 +20301,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20177,7 +20342,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 +20387,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 +20416,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 +20469,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames16__default.default({
+      className: classNames17__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20313,7 +20478,7 @@ function HeaderNav({ data = [], styles }) {
 }
 var HeaderNav_default = HeaderNav;
 function useClickOutside(ref, fun) {
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     const listener = (e) => {
       if (!ref.current || ref.current.contains(e.target)) {
         return;
@@ -20354,8 +20519,8 @@ var HeaderNavGroup = ({
   styles,
   children
 }) => {
-  const [collapsed, setCollapsed] = React4.useState(true);
-  const headerNavGroupRef = React4.useRef(null);
+  const [collapsed, setCollapsed] = React2.useState(true);
+  const headerNavGroupRef = React2.useRef(null);
   useClickOutside(headerNavGroupRef, () => setCollapsed(true));
   const handleNavigation = () => {
     if (to) {
@@ -20366,7 +20531,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 +20559,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 +20572,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 +20602,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 +20631,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 +20671,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 +20743,8 @@ var MenuGroup = ({
   style,
   ...rest
 }) => {
-  const [collapsed, setCollapsed] = React4.useState(!defaultOpen);
-  React4.useEffect(() => {
+  const [collapsed, setCollapsed] = React2.useState(!defaultOpen);
+  React2.useEffect(() => {
     if (defaultOpen !== void 0) {
       setCollapsed(!defaultOpen);
     }
@@ -20696,12 +20861,12 @@ var Menu = ({
   defaultMenuElements,
   currentPath
 }) => {
-  const normalizedItems = React4.useMemo(() => assignKeys(items), [items]);
-  const selected = React4.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 = React4.useMemo(
+  const parentMap = React2.useMemo(
     () => buildParentMap(normalizedItems),
     [normalizedItems]
   );
@@ -20854,8 +21019,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] = React2.useState(getActiveTab);
+  React2.useEffect(() => {
     if (mode !== "route") return;
     const handlePopState = () => {
       setActiveTab(getActiveTab());
@@ -20898,6 +21063,11 @@ 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;
@@ -20952,68 +21122,51 @@ function Modal({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const modalRef = React4.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: React4.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({
-            "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: classNames16__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,
@@ -21021,8 +21174,8 @@ var GlowWrapper = ({
   className = "",
   hideOnLeave = true
 }) => {
-  const ref = React4.useRef(null);
-  const handleMove = React4.useCallback(
+  const ref = React2.useRef(null);
+  const handleMove = React2.useCallback(
     (e) => {
       const el = ref.current;
       if (!el) return;
@@ -21044,7 +21197,7 @@ var GlowWrapper = ({
     },
     [glowSize, glowColor]
   );
-  const handleLeave = React4.useCallback(() => {
+  const handleLeave = React2.useCallback(() => {
     const el = ref.current;
     if (!el || !hideOnLeave) return;
     el.style.setProperty("--glow-x", `-999px`);
@@ -21089,8 +21242,8 @@ function InfiniteScrollTrigger({
   threshold = 0,
   onLoadMore
 }) {
-  const triggerRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const triggerRef = React2.useRef(null);
+  React2.useEffect(() => {
     const element = triggerRef.current;
     if (!element || !hasMore || isLoading) {
       return;
@@ -21116,7 +21269,7 @@ function InfiniteScrollTrigger({
 }
 var InfiniteScrollTrigger_default = InfiniteScrollTrigger;
 function ShowMore({ text, limit }) {
-  const [showMore, setShowMore] = React4.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: [
@@ -21124,7 +21277,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 +21304,8 @@ function CommentComposer({
   loading,
   onSubmit
 }) {
-  const [value, setValue] = React4.useState("");
-  const [focused, setFocused] = React4.useState(false);
+  const [value, setValue] = React2.useState("");
+  const [focused, setFocused] = React2.useState(false);
   async function handleSubmit() {
     const content = value.trim();
     if (!content) {
@@ -21407,7 +21560,7 @@ function CommentHeader({ comment, config }) {
 }
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
-  const [show, setShow] = React4.useState(defaultVisibility);
+  const [show, setShow] = React2.useState(defaultVisibility);
   const openDrawer = () => {
     setShow((prev) => !prev);
   };
@@ -21422,7 +21575,7 @@ var useDrawer = (defaultVisibility = true) => {
 };
 var useDrawer_default = useDrawer;
 var useModal = () => {
-  const [show, setShow] = React4.useState(false);
+  const [show, setShow] = React2.useState(false);
   const handleOpenModal = () => {
     setShow(true);
   };
@@ -21470,7 +21623,7 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const ref = React4.useRef(null);
+  const ref = React2.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -21525,7 +21678,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(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;
@@ -21598,11 +21751,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] = 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,
@@ -21766,18 +21919,18 @@ function CommentThread({
   onDelete,
   onReport
 }) {
-  const [comments, setComments] = React4.useState([]);
-  const [isLoadingComments, setIsLoadingComments] = React4.useState(true);
-  const [replyCache, setReplyCache] = React4.useState(
+  const [comments, setComments] = React2.useState([]);
+  const [isLoadingComments, setIsLoadingComments] = React2.useState(true);
+  const [replyCache, setReplyCache] = React2.useState(
     {}
   );
-  const replyCacheRef = React4.useRef(replyCache);
+  const replyCacheRef = React2.useRef(replyCache);
   const ComposerComponent = components?.Composer ?? CommentComposer_default;
   const resolvedConfig = {
     ...DEFAULT_COMMENT_THREAD_CONFIG,
     ...config
   };
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     async function loadComments() {
       try {
         const result = await dataSource.getComments({
@@ -21791,10 +21944,10 @@ function CommentThread({
     }
     void loadComments();
   }, [dataSource, resolvedConfig.commentsPerPage]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     replyCacheRef.current = replyCache;
   }, [replyCache]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     let cancelled = false;
     async function refreshLoadedReplies() {
       const parentIds = Object.keys(replyCacheRef.current);
@@ -21830,13 +21983,13 @@ function CommentThread({
       cancelled = true;
     };
   }, [dataSource, resolvedConfig.repliesPerPage]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (!updatedComment) {
       return;
     }
     updateCommentEverywhere(updatedComment.id, () => updatedComment);
   }, [updatedComment]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (!deletedComment) {
       return;
     }
@@ -22050,13 +22203,13 @@ function SliderItem({
 }
 var SliderItem_default = SliderItem;
 function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
-  const [images, setImages] = React4.useState([
+  const [images, setImages] = React2.useState([
     {
       img: coverArt,
       selected: true
     }
   ]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     setImages([
       {
         img: coverArt,
@@ -22064,7 +22217,7 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       }
     ]);
   }, [isSuccess]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (screenshots) {
       const selectableScreenshots = [];
       screenshots.forEach((item) => {
@@ -22076,8 +22229,8 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       setImages((prev) => [...prev, ...selectableScreenshots]);
     }
   }, [isSuccess]);
-  const [displayImg, setDisplayImg] = React4.useState(coverArt);
-  React4.useEffect(() => {
+  const [displayImg, setDisplayImg] = React2.useState(coverArt);
+  React2.useEffect(() => {
     setDisplayImg(coverArt);
   }, [coverArt]);
   const displayImageHandler = (itemIndex, img) => {
@@ -22189,7 +22342,7 @@ function WorldMapCountryTable({
   title = "Country Breakdown",
   data
 }) {
-  const enrichedData = React4.useMemo(() => {
+  const enrichedData = React2.useMemo(() => {
     const mapped = data.map((item) => {
       const countryMeta = COUNTRIES.find((c) => c.code === item.code);
       return {
@@ -22202,11 +22355,11 @@ function WorldMapCountryTable({
     });
     return mapped.sort((a, b) => b.value - a.value);
   }, [data]);
-  const total = React4.useMemo(
+  const total = React2.useMemo(
     () => enrichedData.reduce((sum, i) => sum + i.value, 0),
     [enrichedData]
   );
-  const finalData = React4.useMemo(() => {
+  const finalData = React2.useMemo(() => {
     return enrichedData.map((item) => ({
       ...item,
       percent: total > 0 ? item.value / total * 100 : 0
@@ -22281,7 +22434,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 +22604,7 @@ var TNDropdownGroup = ({
   navigate,
   className
 }) => {
-  const [open, setOpen] = React4.useState(true);
+  const [open, setOpen] = React2.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -22540,8 +22693,8 @@ var TNGroup = ({
   components,
   selected
 }) => {
-  const [open, setOpen] = React4.useState(false);
-  const timeoutRef = React4.useRef(null);
+  const [open, setOpen] = React2.useState(false);
+  const timeoutRef = React2.useRef(null);
   const handleEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -22641,7 +22794,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 +22831,7 @@ function SidebarLayout({
   header = /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
   footer = /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
 }) {
-  const [showSidebar, setShowSidebar] = React4.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
@@ -22690,7 +22843,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 +22885,7 @@ function ScrollToTop({
   behavior = "smooth",
   target
 }) {
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (target) {
       target.scrollTo({
         top: 0,
@@ -22927,9 +23080,14 @@ exports.TitleBanner = TitleBanner;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip6;
 exports.TopNav = TopNav;
-exports.Transition = Transition4;
+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;