@algorithm-shift/design-system 1.3.107 → 1.3.108

package/dist/index.mjs

@@ -3577,6 +3577,7 @@ import {
   getFilteredRowModel,
   useReactTable
 } from "@tanstack/react-table";
+import axios3 from "axios";
 import { ArrowDown, ArrowUp, ArrowUpDown, Search } from "lucide-react";
 
 // src/components/ui/table.tsx
@@ -4013,13 +4014,153 @@ function DataTable({
   onDeleteRow,
   rowActions,
   enableRowSelection = false,
-  getRowSelection
+  getRowSelection,
+  tableId,
+  manageColumns = false,
+  preferenceUrl,
+  axiosInstance
 }) {
   const [columnFilters, setColumnFilters] = React11.useState([]);
   const [columnVisibility, setColumnVisibility] = React11.useState({});
+  const hasLoadedInitialState = React11.useRef(false);
+  const isSavingRef = React11.useRef(false);
+  const isFetchingRef = React11.useRef(false);
+  const transformApiToFrontend = React11.useCallback((apiSettings, allColumnIds) => {
+    if (!apiSettings || !apiSettings.columns || !apiSettings.columns.visible) {
+      return {};
+    }
+    const visibleColumns = apiSettings.columns.visible;
+    const result = {};
+    allColumnIds.forEach((colId) => {
+      result[colId] = visibleColumns.includes(colId);
+    });
+    return result;
+  }, []);
+  const transformFrontendToApi = React11.useCallback((visibility) => {
+    const visibleColumns = Object.keys(visibility).filter((colId) => visibility[colId] === true);
+    return {
+      columns: {
+        visible: visibleColumns
+      }
+    };
+  }, []);
+  const fetchColumnPreferences = React11.useCallback(async () => {
+    if (isFetchingRef.current) {
+      return;
+    }
+    if (!tableId || !manageColumns) {
+      hasLoadedInitialState.current = true;
+      return;
+    }
+    isFetchingRef.current = true;
+    try {
+      const entityKey = `table:${tableId}`;
+      const apiUrl = `${preferenceUrl}/${encodeURIComponent(entityKey)}`;
+      const axiosClient = axiosInstance ?? axios3;
+      const response = await axiosClient.get(apiUrl, {
+        withCredentials: true
+      });
+      if (response) {
+        const data2 = response.data;
+        if (data2.success && data2.data && data2.data.exists && data2.data.settings) {
+          let allColumnIds = [];
+          if (tableRef.current) {
+            allColumnIds = tableRef.current.getAllLeafColumns().map((col) => col.id).filter(Boolean);
+          } else {
+            allColumnIds = columns.map((col) => {
+              if (typeof col.id === "string") {
+                return col.id;
+              }
+              if (col.accessorKey) {
+                return col.accessorKey;
+              }
+              return null;
+            }).filter((id) => !!id);
+            if (enableRowSelection && !allColumnIds.includes("__select__")) {
+              allColumnIds.unshift("__select__");
+            }
+          }
+          if (allColumnIds.length > 0) {
+            const transformed = transformApiToFrontend(data2.data.settings, allColumnIds);
+            console.log("[DataTable] Loaded column preferences:", {
+              visibleColumns: data2.data.settings.columns?.visible,
+              allColumnIds,
+              transformed
+            });
+            if (Object.keys(transformed).length > 0) {
+              setColumnVisibility(transformed);
+            }
+          }
+        } else {
+          console.log("[DataTable] No saved preferences found, using default visibility");
+        }
+      } else {
+        console.warn("Failed to fetch column preferences:", response);
+      }
+    } catch (error) {
+      console.error("Error fetching column preferences:", error);
+    } finally {
+      hasLoadedInitialState.current = true;
+      isFetchingRef.current = false;
+    }
+  }, [tableId, transformApiToFrontend, manageColumns]);
+  const saveColumnPreferences = React11.useCallback(async (visibility) => {
+    if (!tableId || isSavingRef.current || !manageColumns) {
+      return;
+    }
+    isSavingRef.current = true;
+    try {
+      const entityKey = `table:${tableId}`;
+      const apiUrl = `${preferenceUrl}/${encodeURIComponent(entityKey)}`;
+      const settings = transformFrontendToApi(visibility);
+      const requestBody = {
+        settings,
+        is_default: true
+      };
+      const axiosClient = axiosInstance ?? axios3;
+      const response = await axiosClient.post(apiUrl, requestBody, {
+        withCredentials: true
+      });
+      if (!response) {
+        console.error("Failed to save column preferences:", response);
+      }
+    } catch (error) {
+      console.error("Error saving column preferences:", error);
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [tableId, transformFrontendToApi, manageColumns]);
+  React11.useEffect(() => {
+    if (hasLoadedInitialState.current || isFetchingRef.current) {
+      return;
+    }
+    if (!tableId) {
+      return;
+    }
+    if (manageColumns) {
+      fetchColumnPreferences();
+    }
+  }, [tableId, manageColumns]);
   const [manualSort, setManualSort] = React11.useState(null);
   const [searchTerm, setSearchTerm] = React11.useState("");
   const tableData = Array.isArray(data) ? data : [];
+  const filteredData = React11.useMemo(() => {
+    if (paginationMode === "client" && globalSearch && searchTerm.trim()) {
+      const searchLower = searchTerm.toLowerCase().trim();
+      return tableData.filter((row) => {
+        return columns.some((column) => {
+          const columnId = typeof column.id === "string" ? column.id : column.accessorKey;
+          if (!columnId) return false;
+          const accessorFn = column.accessorFn;
+          const cellValue = accessorFn ? accessorFn(row, 0) : row[columnId];
+          const cellValueStr = cellValue != null ? String(cellValue).toLowerCase() : "";
+          return cellValueStr.includes(searchLower);
+        });
+      });
+    }
+    return tableData;
+  }, [tableData, searchTerm, paginationMode, globalSearch, columns]);
+  const finalData = paginationMode === "client" && globalSearch ? filteredData : tableData;
   const finalCols = [...columns];
   if (enableRowSelection) {
     finalCols.unshift({
@@ -4046,44 +4187,89 @@ function DataTable({
   const dynamicCols = useDynamicColumns({ columns: finalCols, enableRowSelection });
   const [rowSelection, setRowSelection] = React11.useState({});
   const [localPageSize, setLocalPageSize] = React11.useState(pageSize);
+  const [localPageIndex, setLocalPageIndex] = React11.useState(0);
+  const isUpdatingPageSizeRef = React11.useRef(false);
+  const tableRef = React11.useRef(null);
+  React11.useEffect(() => {
+    if (paginationMode === "client") {
+      setLocalPageSize(pageSize);
+    }
+  }, [pageSize, paginationMode]);
   const table = useReactTable({
-    data: tableData,
+    data: finalData,
     columns: dynamicCols,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize
+      }
+    },
     state: {
       columnFilters,
       columnVisibility,
       rowSelection,
-      ...paginationMode === "server" ? {
-        pagination: {
-          pageIndex: controlledPageIndex ?? 0,
-          pageSize: localPageSize
-        }
-      } : {}
+      pagination: {
+        pageIndex: paginationMode === "server" ? controlledPageIndex ?? 0 : localPageIndex,
+        pageSize: localPageSize
+      }
     },
     enableRowSelection: !!enableRowSelection,
     onRowSelectionChange: (updater) => {
       setRowSelection((old) => {
         const newState = typeof updater === "function" ? updater(old) : updater;
-        const selectedData = Object.keys(newState).filter((key) => newState[key]).map((rowId) => tableData[Number(rowId)]);
+        const selectedData = Object.keys(newState).filter((key) => newState[key]).map((rowId) => finalData[Number(rowId)]);
         getRowSelection?.({ rows: selectedData });
         return newState;
       });
     },
     onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
+    onColumnVisibilityChange: (updater) => {
+      setColumnVisibility((old) => {
+        const newState = typeof updater === "function" ? updater(old) : updater;
+        setTimeout(() => {
+          if (tableRef.current && tableId && hasLoadedInitialState.current) {
+            try {
+              const completeVisibility = {};
+              tableRef.current.getAllLeafColumns().forEach((column) => {
+                completeVisibility[column.id] = column.getIsVisible();
+              });
+              if (Object.keys(completeVisibility).length > 0) {
+                saveColumnPreferences(completeVisibility);
+              }
+            } catch (error) {
+              console.error("Error saving column visibility to API:", error);
+            }
+          }
+        }, 0);
+        return newState;
+      });
+    },
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination && paginationMode === "client" ? getPaginationRowModel() : void 0,
     manualPagination: paginationMode === "server",
     pageCount: paginationMode === "server" ? Math.ceil(totalRecords / localPageSize) : void 0,
-    ...paginationMode === "server" ? {
-      onPaginationChange: (updater) => {
-        const prev = table.getState().pagination;
-        const next = typeof updater === "function" ? updater(prev) : updater;
+    onPaginationChange: (updater) => {
+      if (isUpdatingPageSizeRef.current) {
+        isUpdatingPageSizeRef.current = false;
+        return;
+      }
+      const prev = table.getState().pagination;
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      if (paginationMode === "server") {
         onPageChange?.(next.pageIndex, next.pageSize);
+      } else {
+        setLocalPageIndex(next.pageIndex);
+        setLocalPageSize(next.pageSize);
       }
-    } : {}
+    }
   });
+  React11.useEffect(() => {
+    tableRef.current = table;
+    if (table && !hasLoadedInitialState.current && !isFetchingRef.current && tableId) {
+      fetchColumnPreferences();
+    }
+  }, [table, tableId]);
   const getPageNumbers = (currentPage, totalPages, maxVisiblePages = 5) => {
     if (totalPages <= maxVisiblePages) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -4106,17 +4292,26 @@ function DataTable({
   const pageCount = table.getPageCount() === 0 ? 1 : table.getPageCount();
   const handlePageSizeChange = (e) => {
     const newSize = Number(e.target.value);
-    const currentPageIndex = table.getState().pagination.pageIndex;
-    onPageChange?.(currentPageIndex, newSize);
-    setLocalPageSize(newSize);
+    if (paginationMode === "server") {
+      const currentPageIndex = table.getState().pagination.pageIndex;
+      onPageChange?.(currentPageIndex, newSize);
+      setLocalPageSize(newSize);
+    } else {
+      isUpdatingPageSizeRef.current = true;
+      setLocalPageSize(newSize);
+      setLocalPageIndex(0);
+    }
   };
   const pageSizeOptions = React11.useMemo(() => {
+    if (paginationMode === "client") {
+      return [5, 10, 20, 50, 100];
+    }
     const options = [5, 10, 20, 50, 100].filter((size) => size < totalRecords);
     if (options.length === 0) {
       options.push(5);
     }
     return options;
-  }, [totalRecords]);
+  }, [paginationMode, totalRecords]);
   return /* @__PURE__ */ jsxs30("div", { className: "overflow-hidden rounded-md w-full", children: [
     !loading && /* @__PURE__ */ jsxs30("div", { className: "flex justify-between p-2 bg-gray-50", children: [
       /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-4 w-full", children: [
@@ -4132,10 +4327,17 @@ function DataTable({
                 type: "text",
                 placeholder: "Search...",
                 value: searchTerm,
-                onChange: (e) => setSearchTerm(e.target.value),
+                onChange: (e) => {
+                  setSearchTerm(e.target.value);
+                  if (paginationMode === "client") {
+                    setLocalPageIndex(0);
+                  }
+                },
                 onKeyDown: (e) => {
-                  if (e.key === "Enter" && onGlobalSearch) {
-                    onGlobalSearch(searchTerm.trim());
+                  if (e.key === "Enter") {
+                    if (paginationMode === "server" && onGlobalSearch) {
+                      onGlobalSearch(searchTerm.trim());
+                    }
                   }
                 },
                 className: "border border-gray-300 rounded-md text-sm px-3 py-2 pl-8 w-full focus:outline-none focus:ring-1 focus:ring-[#12715B]"
@@ -4143,7 +4345,7 @@ function DataTable({
             ),
             /* @__PURE__ */ jsx51(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
           ] }),
-          /* @__PURE__ */ jsx51(
+          paginationMode === "server" && /* @__PURE__ */ jsx51(
             Button,
             {
               size: "sm",
@@ -4154,7 +4356,7 @@ function DataTable({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs30(Popover, { children: [
+      manageColumns && /* @__PURE__ */ jsxs30(Popover, { children: [
         /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(
           Button,
           {
@@ -4164,42 +4366,44 @@ function DataTable({
             children: "Manage Columns"
           }
         ) }),
-        /* @__PURE__ */ jsxs30(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+        /* @__PURE__ */ jsxs30(PopoverContent, { align: "end", className: "w-48 p-3", children: [
           /* @__PURE__ */ jsx51("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-          /* @__PURE__ */ jsxs30("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
-            /* @__PURE__ */ jsx51(
-              "input",
-              {
-                type: "checkbox",
-                checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
-                ref: (input) => {
-                  if (input) {
-                    input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
-                  }
-                },
-                onChange: (e) => {
-                  table.getAllLeafColumns().forEach(
-                    (col) => col.toggleVisibility(e.target.checked)
-                  );
-                }
-              }
-            ),
-            "Toggle All"
-          ] }),
-          table.getAllLeafColumns().map((column) => {
-            const header = column.columnDef.header;
-            return /* @__PURE__ */ jsxs30("label", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsxs30("div", { className: "max-h-56 overflow-y-auto pr-1 space-y-2", children: [
+            /* @__PURE__ */ jsxs30("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
               /* @__PURE__ */ jsx51(
                 "input",
                 {
                   type: "checkbox",
-                  checked: column.getIsVisible(),
-                  onChange: (e) => column.toggleVisibility(e.target.checked)
+                  checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
+                  ref: (input) => {
+                    if (input) {
+                      input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+                    }
+                  },
+                  onChange: (e) => {
+                    table.getAllLeafColumns().forEach(
+                      (col) => col.toggleVisibility(e.target.checked)
+                    );
+                  }
                 }
               ),
-              typeof header === "function" ? header({ column, header, table }) : typeof header === "string" ? header : column.id
-            ] }, column.id);
-          })
+              "Toggle All"
+            ] }),
+            table.getAllLeafColumns().map((column) => {
+              const header = column.columnDef.header;
+              return /* @__PURE__ */ jsxs30("label", { className: "flex items-center gap-2 text-sm", children: [
+                /* @__PURE__ */ jsx51(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: column.getIsVisible(),
+                    onChange: (e) => column.toggleVisibility(e.target.checked)
+                  }
+                ),
+                typeof header === "function" ? header({ column, header, table }) : typeof header === "string" ? header : column.id
+              ] }, column.id);
+            })
+          ] })
         ] })
       ] })
     ] }),
@@ -4298,7 +4502,22 @@ function DataTable({
           `header-${header.id}-${index}`
         );
       }) }, `header-group-${hg.id}`)) }),
-      /* @__PURE__ */ jsx51(TableBody, { children: loading ? /* @__PURE__ */ jsx51(Fragment21, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx51(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ jsx51(TableCell, { className: "p-3", children: /* @__PURE__ */ jsx51("span", { className: "h-4 bg-gray-200 rounded w-3/4 block animate-pulse" }) }, j)) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx51(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
+      /* @__PURE__ */ jsx51(TableBody, { children: loading ? /* @__PURE__ */ jsx51(Fragment21, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx51(TableRow, { children: table.getHeaderGroups()[0].headers.map((header, j) => {
+        const column = header.column;
+        return /* @__PURE__ */ jsx51(
+          TableCell,
+          {
+            className: "p-3",
+            style: {
+              width: column.getSize(),
+              minWidth: column.columnDef.minSize,
+              maxWidth: column.columnDef.maxSize
+            },
+            children: /* @__PURE__ */ jsx51("span", { className: "h-4 bg-gray-200 rounded w-full block animate-pulse" })
+          },
+          j
+        );
+      }) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx51(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
         const isLastCell = cellIndex === arr.length - 1;
@@ -4876,7 +5095,7 @@ var HistoryTimeline = ({
 var HistoryTimeline_default = HistoryTimeline;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback4, useMemo as useMemo9, useState as useState12 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo9, useState as useState12 } from "react";
 import { ChevronDown as ChevronDown2, Menu } from "lucide-react";
 import Link3 from "next/link";
 import { usePathname, useRouter } from "next/navigation";
@@ -5131,7 +5350,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   const router = useRouter();
   const [showExitDialog, setShowExitDialog] = useState12(false);
   const [pendingUrl, setPendingUrl] = useState12(null);
-  const handleBuilderExit = useCallback4(
+  const handleBuilderExit = useCallback5(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -5298,7 +5517,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React12, { useEffect as useEffect26, useState as useState13 } from "react";
+import React12, { useEffect as useEffect27, useState as useState13 } from "react";
 
 // src/components/ui/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@@ -5371,7 +5590,7 @@ var StagesComponent = ({
   const [isCompleted, setIsCompleted] = useState13(false);
   const [activeChildStage, setActiveChildStage] = useState13(null);
   const [activeRootStage, setActiveRootStage] = useState13(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (currentStage) {
       setActiveStage(currentStage);
     } else {
@@ -5431,7 +5650,7 @@ var StagesComponent = ({
     }
     return { activeRoot: null, activeChild: null };
   };
-  useEffect26(() => {
+  useEffect27(() => {
     if (!currentStage || !Array.isArray(stages)) {
       setActiveRootStage(null);
       setActiveChildStage(null);
@@ -5562,7 +5781,7 @@ import { jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
 import { jsx as jsx65 } from "react/jsx-runtime";
 
 // src/components/Navigation/Navbar/Navbar.tsx
-import { useCallback as useCallback5, useMemo as useMemo10, useState as useState14, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo10, useState as useState14, useEffect as useEffect28 } from "react";
 import { Bell, Search as Search2, Menu as Menu2 } from "lucide-react";
 import Image3 from "next/image";
 import Link4 from "next/link";
@@ -5631,7 +5850,7 @@ function Navbar({
   const [screenMode, setScreenMode] = useState14(
     canvasMode
   );
-  useEffect27(() => {
+  useEffect28(() => {
     const detectMode = () => {
       if (window.innerWidth < 640) setScreenMode("mobile");
       else if (window.innerWidth < 1024) setScreenMode("tablet");
@@ -5645,7 +5864,7 @@ function Navbar({
   const isMobile = mode === "mobile";
   const isTablet = mode === "tablet";
   const isDesktop = mode === "desktop";
-  const handleBuilderExit = useCallback5(
+  const handleBuilderExit = useCallback6(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -5738,8 +5957,8 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-import React14, { useEffect as useEffect28, useMemo as useMemo11, useState as useState15, useCallback as useCallback6 } from "react";
-import axios3 from "axios";
+import React14, { useEffect as useEffect29, useMemo as useMemo11, useState as useState15, useCallback as useCallback7 } from "react";
+import axios4 from "axios";
 import {
   BarChart,
   Bar,
@@ -5816,12 +6035,12 @@ var ChartComponent = ({
   const [currentPage, setCurrentPage] = useState15(1);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  useEffect28(() => {
+  useEffect29(() => {
     if (apiUrl) {
       setCurrentPage(1);
     }
   }, [apiUrl]);
-  const fetchData = useCallback6(async (page) => {
+  const fetchData = useCallback7(async (page) => {
     if (!apiUrl) return;
     const cancelled = false;
     try {
@@ -5830,7 +6049,7 @@ var ChartComponent = ({
         page: page.toString(),
         limit: limit.toString()
       });
-      const axiosClient = props.axiosInstance ?? axios3;
+      const axiosClient = props.axiosInstance ?? axios4;
       const res = await axiosClient.get(`${apiUrl}?${params.toString()}`, {
         withCredentials: true
       });
@@ -5858,7 +6077,7 @@ var ChartComponent = ({
       if (!cancelled) setLocalLoading(false);
     }
   }, [apiUrl, limit]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!apiUrl) return;
     fetchData(currentPage);
   }, [apiUrl, currentPage, fetchData]);
@@ -6057,8 +6276,8 @@ var ChartComponent = ({
 var BarChart_default = React14.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React15, { useEffect as useEffect29, useMemo as useMemo12, useState as useState16 } from "react";
-import axios4 from "axios";
+import React15, { useEffect as useEffect30, useMemo as useMemo12, useState as useState16 } from "react";
+import axios5 from "axios";
 import {
   PieChart,
   Pie,
@@ -6147,13 +6366,13 @@ var DonutChart = ({
   const [localLoading, setLocalLoading] = useState16(false);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  useEffect29(() => {
+  useEffect30(() => {
     if (!apiUrl) return;
     let cancelled = false;
     const fetchData = async () => {
       try {
         setLocalLoading(true);
-        const axiosClient = props.axiosInstance ?? axios4;
+        const axiosClient = props.axiosInstance ?? axios5;
         const res = await axiosClient.get(apiUrl, {
           withCredentials: true
         });
@@ -6229,7 +6448,7 @@ var DonutChart = ({
     return { inner: 70, outer: 130 };
   };
   const [mounted, setMounted] = useState16(false);
-  useEffect29(() => {
+  useEffect30(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);