react-better-html 1.1.191 → 1.1.193

package/dist/index.js

@@ -48,6 +48,7 @@ __export(index_exports, {
   Modal: () => Modal_default,
   PageHeader: () => PageHeader_default,
   PageHolder: () => PageHolder_default,
+  Pagination: () => Pagination_default,
   SideMenu: () => SideMenu_default,
   Table: () => Table_default,
   Tabs: () => Tabs_default,
@@ -7799,9 +7800,124 @@ ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
+
+// src/components/Pagination.tsx
+var import_react25 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var PaginationComponent = function Pagination({
+  currentPage = 1,
+  itemsLength = 0,
+  itemsPerPage,
+  pageCount,
+  maximumVisiblePages: maximumVisiblePages2 = 11,
+  onClickPreviousPage,
+  onClickNextPage,
+  onChangePage
+}) {
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const [currentPageInternal, setCurrentPage] = (0, import_react25.useState)(currentPage);
+  const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
+  const onClickPreviousPageElement = (0, import_react25.useCallback)(() => {
+    const newPage = currentPageInternal <= 1 ? 1 : currentPageInternal - 1;
+    setCurrentPage(newPage);
+    onClickPreviousPage?.(newPage);
+  }, [currentPageInternal, onClickPreviousPage]);
+  const onClickNextPageElement = (0, import_react25.useCallback)(() => {
+    const newPage = currentPageInternal >= pageCountInternal ? pageCountInternal : currentPageInternal + 1;
+    setCurrentPage(newPage);
+    onClickNextPage?.(newPage);
+  }, [currentPageInternal, pageCountInternal, onClickNextPage]);
+  const paginationItems = (0, import_react25.useMemo)(() => {
+    const halfRange = Math.floor(maximumVisiblePages2 / 2);
+    let startPage = Math.max(1, currentPageInternal - halfRange);
+    let endPage = Math.min(pageCountInternal, currentPageInternal + halfRange);
+    if (endPage - startPage + 1 < maximumVisiblePages2) {
+      startPage = Math.max(1, endPage - maximumVisiblePages2 + 1);
+      endPage = Math.min(pageCountInternal, startPage + maximumVisiblePages2 - 1);
+    }
+    return Array.from(
+      {
+        length: endPage - startPage + 1
+      },
+      (_, index) => startPage + index
+    );
+  }, [pageCountInternal, currentPageInternal]);
+  (0, import_react25.useEffect)(() => {
+    onChangePage?.(currentPageInternal);
+  }, [currentPageInternal, onChangePage]);
+  (0, import_react25.useEffect)(() => {
+    setCurrentPage(currentPage);
+  }, [currentPage]);
+  const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Button_default.icon,
+      {
+        icon: "doubleChevronLeft",
+        disabled: currentPageInternal === 1,
+        value: 1,
+        onClickWithValue: setCurrentPage
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button_default.icon, { icon: "chevronLeft", disabled: currentPageInternal === 1, onClick: onClickPreviousPageElement }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Div_default.row,
+      {
+        alignItems: "center",
+        justifyContent: "center",
+        flexWrap: mobileFooterBreakingPoint ? "wrap" : void 0,
+        gap: theme2.styles.gap,
+        children: paginationItems.map((pageIndex) => {
+          const isActive = currentPageInternal === pageIndex;
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            Div_default,
+            {
+              cursor: "pointer",
+              userSelect: "none",
+              value: pageIndex,
+              onClickWithValue: setCurrentPage,
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                Text_default,
+                {
+                  fontWeight: isActive ? 700 : 400,
+                  color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
+                  transition: theme2.styles.transition,
+                  children: pageIndex
+                }
+              )
+            },
+            pageIndex
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Button_default.icon,
+      {
+        icon: "chevronRight",
+        disabled: currentPageInternal === pageCountInternal,
+        onClick: onClickNextPageElement
+      }
+    ),
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Button_default.icon,
+      {
+        icon: "doubleChevronRight",
+        disabled: currentPageInternal === pageCountInternal,
+        onClickWithValue: setCurrentPage,
+        value: pageCountInternal
+      }
+    )
+  ] });
+};
+var Pagination2 = (0, import_react25.memo)(PaginationComponent);
+var Pagination_default = Pagination2;
+
+// src/components/Table.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = import_styled_components13.default.table.withConfig({
@@ -7946,7 +8062,7 @@ var filterPresetsText = {
   nextMonth: "Next month",
   nextYear: "Next year"
 };
-var TableComponent = (0, import_react25.forwardRef)(function Table({
+var TableComponent = (0, import_react26.forwardRef)(function Table({
   name,
   columns,
   data,
@@ -7972,14 +8088,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const { colorTheme } = useBetterHtmlContextInternal();
-  const filterModalRef = (0, import_react25.useRef)(null);
-  const readyColumns = (0, import_react25.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
-  const columnsRef = (0, import_react25.useRef)(readyColumns);
+  const filterModalRef = (0, import_react26.useRef)(null);
+  const readyColumns = (0, import_react26.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
+  const columnsRef = (0, import_react26.useRef)(readyColumns);
   columnsRef.current = readyColumns;
-  const [checkedItems, setCheckedItems] = (0, import_react25.useState)([]);
-  const [expandedRows, setExpandedRows] = (0, import_react25.useState)([]);
-  const [currentPage, setCurrentPage] = (0, import_react25.useState)(1);
-  const [filterData, setFilterData] = (0, import_react25.useState)(() => {
+  const [checkedItems, setCheckedItems] = (0, import_react26.useState)([]);
+  const [expandedRows, setExpandedRows] = (0, import_react26.useState)([]);
+  const [currentPage, setCurrentPage] = (0, import_react26.useState)(1);
+  const [filterData, setFilterData] = (0, import_react26.useState)(() => {
     if (!memoizeFilters || !name) return {};
     const localStorageData = JSON.parse(localStorage.getItem(`react-better-html-table-filters-${name}`) || "{}");
     const timestamp = localStorageData.timestamp;
@@ -7988,8 +8104,8 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     if (timeDiff > memoizeFiltersLifespan) return {};
     return data2;
   });
-  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react25.useState)();
-  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react25.useState)();
+  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react26.useState)();
+  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react26.useState)();
   const openedFilterData = openedFilterColumnIndex !== void 0 ? filterData[openedFilterColumnIndex] : void 0;
   const openedFilterColumn = openedFilterColumnIndex !== void 0 ? readyColumns[openedFilterColumnIndex] : void 0;
   const filterForm = useForm({
@@ -8019,26 +8135,26 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
       filterModalRef.current?.close();
     }
   });
-  const expandColumn = (0, import_react25.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
-  const renderCellContent = (0, import_react25.useCallback)(
+  const expandColumn = (0, import_react26.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
+  const renderCellContent = (0, import_react26.useCallback)(
     (column, item, itemIndex) => {
       switch (column.type) {
         case "text": {
           const value = column.keyName ? item[column.keyName] : void 0;
           const textProps = (typeof column.getTextProps === "function" ? column.getTextProps?.(item, itemIndex) : column.getTextProps) ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
         }
         case "element": {
-          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
+          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
         }
         case "image": {
           const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
         }
         case "checkbox": {
           const { onChange, ...toggleInputProps } = (typeof column.getToggleInputProps === "function" ? column.getToggleInputProps?.(item, itemIndex) : column.getToggleInputProps) ?? {};
           const checkedValue = checkedItems[itemIndex];
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
@@ -8059,7 +8175,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
           );
         }
         case "expand": {
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Icon_default,
             {
               name: "chevronDown",
@@ -8069,13 +8185,13 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
           ) });
         }
         default: {
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
         }
       }
     },
     [theme2, checkedItems, expandedRows]
   );
-  const onClickRowElement = (0, import_react25.useCallback)(
+  const onClickRowElement = (0, import_react26.useCallback)(
     (item, index) => {
       if (expandColumn) {
         setExpandedRows((oldValue) => {
@@ -8092,14 +8208,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [onClickRow, expandColumn]
   );
-  const onClickAllCheckboxesElement = (0, import_react25.useCallback)(
+  const onClickAllCheckboxesElement = (0, import_react26.useCallback)(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const onClickFilterButton = (0, import_react25.useCallback)(
+  const onClickFilterButton = (0, import_react26.useCallback)(
     (columnIndex) => {
       const thisFilterData = filterData[columnIndex];
       if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
@@ -8115,12 +8231,12 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [filterData]
   );
-  const onCloseFilterModal = (0, import_react25.useCallback)(() => {
+  const onCloseFilterModal = (0, import_react26.useCallback)(() => {
     setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
     setFilterListSelectedItems(void 0);
     filterForm.reset();
   }, []);
-  const onClickCancelFormFilter = (0, import_react25.useCallback)(() => {
+  const onClickCancelFormFilter = (0, import_react26.useCallback)(() => {
     if (openedFilterColumnIndex === void 0) return;
     setFilterData(
       (oldValue) => Object.entries({
@@ -8133,7 +8249,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     );
     filterModalRef.current?.close();
   }, [openedFilterColumnIndex]);
-  const onClickFilterListItem = (0, import_react25.useCallback)(
+  const onClickFilterListItem = (0, import_react26.useCallback)(
     (value) => setFilterListSelectedItems((oldValue) => {
       if (!oldValue) return [value];
       if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
@@ -8141,7 +8257,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     }),
     []
   );
-  const onClickFilterPreset = (0, import_react25.useCallback)(
+  const onClickFilterPreset = (0, import_react26.useCallback)(
     (preset) => {
       const getValueForDate = (date) => {
         if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
@@ -8226,7 +8342,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [openedFilterColumn]
   );
-  const renderExpandedRow = (0, import_react25.useCallback)(
+  const renderExpandedRow = (0, import_react26.useCallback)(
     (...props2) => {
       const expandColumn2 = readyColumns.find((column) => column.type === "expand");
       if (!expandColumn2) return;
@@ -8234,7 +8350,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [readyColumns]
   );
-  const dataAfterFilter = (0, import_react25.useMemo)(
+  const dataAfterFilter = (0, import_react26.useMemo)(
     () => data.filter(
       (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
         if (!filter) return true;
@@ -8263,17 +8379,17 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     ),
     [data, filterData]
   );
-  const dataAfterPagination = (0, import_react25.useMemo)(() => {
+  const dataAfterPagination = (0, import_react26.useMemo)(() => {
     if (pageSize === void 0) return dataAfterFilter;
     if (pageCount !== void 0) return dataAfterFilter;
     const pageStartItemIndex = (currentPage - 1) * (pageSize ?? 0);
     const pageEndItemIndex = pageStartItemIndex + (pageSize ?? 0);
     return dataAfterFilter.slice(pageStartItemIndex, pageEndItemIndex);
   }, [dataAfterFilter, pageSize, currentPage, pageCount]);
-  const everythingIsChecked = (0, import_react25.useMemo)(() => {
+  const everythingIsChecked = (0, import_react26.useMemo)(() => {
     return data.length > 0 && checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  const possibleFilterListValues = (0, import_react25.useMemo)(() => {
+  const possibleFilterListValues = (0, import_react26.useMemo)(() => {
     if (!openedFilterColumn) return [];
     return data.reduce((previousValue, currentValue) => {
       const valueFromList = openedFilterColumn.filter === "list" && openedFilterColumn.getValueForList ? openedFilterColumn.getValueForList(currentValue) : void 0;
@@ -8302,39 +8418,18 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     }, []);
   }, [data, openedFilterColumn, filterForm.values.search]);
   const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
-  const paginationItems = (0, import_react25.useMemo)(() => {
-    const halfRange = Math.floor(maximumVisiblePages / 2);
-    let startPage = Math.max(1, currentPage - halfRange);
-    let endPage = Math.min(pageCountInternal, currentPage + halfRange);
-    if (endPage - startPage + 1 < maximumVisiblePages) {
-      startPage = Math.max(1, endPage - maximumVisiblePages + 1);
-      endPage = Math.min(pageCountInternal, startPage + maximumVisiblePages - 1);
-    }
-    return Array.from(
-      {
-        length: endPage - startPage + 1
-      },
-      (_, index) => startPage + index
-    );
-  }, [pageCountInternal, currentPage]);
-  const onClickNextPage = (0, import_react25.useCallback)(() => {
-    setCurrentPage((oldValue) => oldValue >= pageCountInternal ? pageCountInternal : oldValue + 1);
-  }, [pageCountInternal]);
-  const onClickPreviousPage = (0, import_react25.useCallback)(() => {
-    setCurrentPage((oldValue) => oldValue <= 1 ? 1 : oldValue - 1);
-  }, []);
-  const onClickSelectAllFilterListItems = (0, import_react25.useCallback)(
+  const onClickSelectAllFilterListItems = (0, import_react26.useCallback)(
     () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
     [possibleFilterListValues]
   );
-  const onClickDeselectAllFilterListItems = (0, import_react25.useCallback)(() => setFilterListSelectedItems([]), []);
-  (0, import_react25.useEffect)(() => {
+  const onClickDeselectAllFilterListItems = (0, import_react26.useCallback)(() => setFilterListSelectedItems([]), []);
+  (0, import_react26.useEffect)(() => {
     onChangePage?.(currentPage);
   }, [onChangePage, currentPage]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     onChangeFilter?.(filterData);
   }, [onChangeFilter, filterData]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!memoizeFilters) return;
     if (!name) return;
     localStorage.setItem(
@@ -8345,10 +8440,10 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
       })
     );
   }, [memoizeFilters, name, filterData]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
-  (0, import_react25.useImperativeHandle)(
+  (0, import_react26.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -8362,8 +8457,8 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   );
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Div_default,
       {
         border: `1px solid ${theme2.colors.border}`,
@@ -8371,7 +8466,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         ref: wrapperComponentRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           TableStyledComponent,
           {
             isStriped,
@@ -8382,14 +8477,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
             containsOverflowComponents,
             withFooter,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 ThStyledComponent,
                 {
                   width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.type === "expand" ? 16 : void 0),
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                     Div_default.row,
                     {
                       width: "100%",
@@ -8397,15 +8492,15 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                       justifyContent: column.filter ? "space-between" : column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
                       gap: theme2.styles.gap,
                       children: [
-                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           ToggleInput_default.checkbox,
                           {
                             checked: everythingIsChecked,
                             disabled: data.length === 0,
                             onChange: onClickAllCheckboxesElement
                           }
-                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: column.label }) : void 0,
-                        column.filter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { children: column.label }) : void 0,
+                        column.filter && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           Button_default.icon,
                           {
                             icon: "filter",
@@ -8420,14 +8515,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react25.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react26.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "tr",
                   {
                     className: isInsideTableExpandRow && onClickRow === void 0 && expandColumn === void 0 ? "withoutHover" : void 0,
                     style: getRowStyle?.(item, rowIndex),
                     onClick: () => onClickRowElement(item, rowIndex),
-                    children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       TdStyledComponent,
                       {
                         textAlign: column.align,
@@ -8440,9 +8535,9 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                     ))
                   }
                 ),
-                expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
-              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
+              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              withFooter && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 Div_default.column,
                 {
                   position: "relative",
@@ -8451,7 +8546,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                   flexReverse: true,
                   gap: theme2.styles.gap / 2,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                       Text_default,
                       {
                         position: mobileFooterBreakingPoint ? "relative" : "absolute",
@@ -8466,73 +8561,17 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
-                      pageCountInternal > maximumVisiblePages && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Button_default.icon,
-                        {
-                          icon: "doubleChevronLeft",
-                          disabled: currentPage === 1,
-                          value: 1,
-                          onClickWithValue: setCurrentPage
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Button_default.icon,
-                        {
-                          icon: "chevronLeft",
-                          disabled: currentPage === 1,
-                          onClick: onClickPreviousPage
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Div_default.row,
-                        {
-                          alignItems: "center",
-                          justifyContent: "center",
-                          flexWrap: mobileFooterBreakingPoint ? "wrap" : void 0,
-                          gap: theme2.styles.gap,
-                          children: paginationItems.map((pageIndex) => {
-                            const isActive = currentPage === pageIndex;
-                            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                              Div_default,
-                              {
-                                cursor: "pointer",
-                                userSelect: "none",
-                                value: pageIndex,
-                                onClickWithValue: setCurrentPage,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                                  Text_default,
-                                  {
-                                    fontWeight: isActive ? 700 : 400,
-                                    color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
-                                    transition: theme2.styles.transition,
-                                    children: pageIndex
-                                  }
-                                )
-                              },
-                              pageIndex
-                            );
-                          })
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Button_default.icon,
-                        {
-                          icon: "chevronRight",
-                          disabled: currentPage === pageCountInternal,
-                          onClick: onClickNextPage
-                        }
-                      ),
-                      pageCountInternal > maximumVisiblePages && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Button_default.icon,
-                        {
-                          icon: "doubleChevronRight",
-                          disabled: currentPage === pageCountInternal,
-                          onClickWithValue: setCurrentPage,
-                          value: pageCountInternal
-                        }
-                      )
-                    ] })
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      Pagination_default,
+                      {
+                        currentPage,
+                        itemsLength: dataAfterFilter.length,
+                        itemsPerPage: pageSize,
+                        pageCount,
+                        maximumVisiblePages,
+                        onChangePage: setCurrentPage
+                      }
+                    )
                   ]
                 }
               ) }) }) })
@@ -8541,26 +8580,26 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Modal_default,
       {
         title: `Filter ${openedFilterColumn?.label ?? ""}`,
         description: openedFilterColumn?.filter === "number" ? "Enter minimum and maximum values to filter" : openedFilterColumn?.filter === "date" || openedFilterColumn?.filter === "date-time" ? "Enter minimum and maximum dates to filter" : openedFilterColumn?.filter === "list" ? "Select values to filter from the list bellow" : "",
         onClose: onCloseFilterModal,
         ref: filterModalRef,
-        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Form_default,
           {
             form: filterForm,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(FormRow_default, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(FormRow_default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
             ] })
           }
-        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Form_default,
           {
             form: filterForm,
@@ -8569,16 +8608,16 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),
-              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Label_default, { text: "Presets" }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label_default, { text: "Presets" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   Button_default.secondary,
                   {
                     text: filterPresetsText[preset],
@@ -8591,14 +8630,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
               ] })
             ]
           }
-        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Form_default,
           {
             gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
-            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Button_default.secondary,
                 {
                   text: "Select All",
@@ -8607,7 +8646,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                   onClick: onClickSelectAllFilterListItems
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Button_default.secondary,
                 {
                   text: "Deselect All",
@@ -8620,7 +8659,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             onSubmit: filterForm.onSubmit,
             children: [
-              openedFilterColumn?.withSearch && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              openedFilterColumn?.withSearch && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 InputField_default.search,
                 {
                   label: "Search",
@@ -8628,19 +8667,19 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                   ...filterForm.getInputFieldProps("search")
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Label_default, { text: "Possible values" }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label_default, { text: "Possible values" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
-                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     Div_default.box,
                     {
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: value.label || value.value }),
-                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { children: value.label || value.value }),
+                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                           Text_default,
                           {
                             fontSize: 14,
@@ -8656,23 +8695,23 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                     },
                     value.value
                   );
-                }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: "No values" }) })
+                }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: "No values" }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, {})
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default, {})
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader_default.box, {})
+        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loader_default.box, {})
       }
     )
   ] });
 });
-var Table2 = (0, import_react25.memo)(TableComponent);
+var Table2 = (0, import_react26.memo)(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var tooltipContainerStyle = (props) => ({
   top: import_styled_components14.css`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
@@ -8774,10 +8813,10 @@ var arrowStyle = (props, borderWidth) => ({
     transform: !borderWidth && props.align === "center" ? "translateY(-50%);" : void 0
   }
 });
-var Arrow = (0, import_react26.memo)(function Arrow2(props) {
+var Arrow = (0, import_react27.memo)(function Arrow2(props) {
   const theme2 = useTheme();
   const { position, size } = props;
-  const outerProps = (0, import_react26.useMemo)(
+  const outerProps = (0, import_react27.useMemo)(
     () => ({
       ...props,
       color: theme2.colors.border
@@ -8785,7 +8824,7 @@ var Arrow = (0, import_react26.memo)(function Arrow2(props) {
     [props, theme2]
   );
   const borderWidth = 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Div_default,
     {
       position: "absolute",
@@ -8793,7 +8832,7 @@ var Arrow = (0, import_react26.memo)(function Arrow2(props) {
       height: 0,
       border: `${size}px solid transparent`,
       ...arrowStyle(outerProps)[position],
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         Div_default,
         {
           position: "absolute",
@@ -8806,7 +8845,7 @@ var Arrow = (0, import_react26.memo)(function Arrow2(props) {
     }
   );
 });
-var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
+var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
   position = "bottom",
   trigger = "hover",
   align = "center",
@@ -8825,17 +8864,17 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
   children
 }, ref) {
   const theme2 = useTheme();
-  const triggerHolderRef = (0, import_react26.useRef)(null);
-  const contentRef = (0, import_react26.useRef)(null);
-  const tooltipContainerRef = (0, import_react26.useRef)(null);
-  const closeTimerRef = (0, import_react26.useRef)(void 0);
-  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
-  const [isOpenLate, setIsOpenLate] = (0, import_react26.useState)(false);
+  const triggerHolderRef = (0, import_react27.useRef)(null);
+  const contentRef = (0, import_react27.useRef)(null);
+  const tooltipContainerRef = (0, import_react27.useRef)(null);
+  const closeTimerRef = (0, import_react27.useRef)(void 0);
+  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
+  const [isOpenLate, setIsOpenLate] = (0, import_react27.useState)(false);
   const arrowSize = withArrow ? theme2.styles.gap : 0;
   const gap = theme2.styles.gap / 2;
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
-  const openTooltip = (0, import_react26.useCallback)(() => {
+  const openTooltip = (0, import_react27.useCallback)(() => {
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
     setIsOpenLate(true);
@@ -8859,18 +8898,18 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     }, 1);
     onOpen?.();
   }, [onOpen, outsideScreenGap, totalGap]);
-  const closeTooltip = (0, import_react26.useCallback)(() => {
+  const closeTooltip = (0, import_react27.useCallback)(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
     onClose?.();
   }, [onClose]);
-  const onMouseEnter = (0, import_react26.useCallback)(() => {
+  const onMouseEnter = (0, import_react27.useCallback)(() => {
     if (trigger === "hover") openTooltip();
   }, [trigger, openTooltip]);
-  const onMouseLeave = (0, import_react26.useCallback)(() => {
+  const onMouseLeave = (0, import_react27.useCallback)(() => {
     if (trigger === "hover") closeTooltip();
   }, [trigger, closeTooltip]);
-  const onClickHolder = (0, import_react26.useCallback)(
+  const onClickHolder = (0, import_react27.useCallback)(
     (event) => {
       if (trigger === "click") {
         if (!isOpen) openTooltip();
@@ -8879,7 +8918,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     },
     [trigger, openTooltip, isOpen, closeTooltip]
   );
-  const onClickOutside = (0, import_react26.useCallback)(
+  const onClickOutside = (0, import_react27.useCallback)(
     (event) => {
       if (!isOpen) return;
       if (trigger !== "click") return;
@@ -8889,7 +8928,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
       return () => {
@@ -8897,7 +8936,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
       };
     }
   }, [trigger, onClickOutside]);
-  (0, import_react26.useImperativeHandle)(
+  (0, import_react27.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -8908,7 +8947,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     },
     [isOpen, openTooltip, closeTooltip]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Div_default,
     {
       position: "relative",
@@ -8918,7 +8957,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Div_default,
           {
             width: childrenWrapperWidth,
@@ -8928,7 +8967,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           TooltipContainer,
           {
             theme: theme2,
@@ -8940,8 +8979,8 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
             isOpen,
             role: "tooltip",
             ref: tooltipContainerRef,
-            children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Div_default.box,
                 {
                   position: "relative",
@@ -8955,7 +8994,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
                   children: content
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -8969,7 +9008,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
                   borderTopRightRadius: 999
                 }
               ),
-              withArrow && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              withArrow && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Arrow,
                 {
                   position,
@@ -8987,7 +9026,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     }
   );
 });
-TooltipComponent.item = (0, import_react26.forwardRef)(function Item({
+TooltipComponent.item = (0, import_react27.forwardRef)(function Item({
   icon,
   iconColor,
   text,
@@ -9001,7 +9040,7 @@ TooltipComponent.item = (0, import_react26.forwardRef)(function Item({
   onClickWithValue
 }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Div_default.row,
     {
       alignItems: "center",
@@ -9019,22 +9058,22 @@ TooltipComponent.item = (0, import_react26.forwardRef)(function Item({
       onClickWithValue: !disabled ? onClickWithValue : void 0,
       ref,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
       ]
     }
   );
 });
-TooltipComponent.divider = (0, import_react26.forwardRef)(function DividerComponent(props, ref) {
+TooltipComponent.divider = (0, import_react27.forwardRef)(function DividerComponent(props, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
 });
-TooltipComponent.sectionTitle = (0, import_react26.forwardRef)(function SectionTitle({ text, ...props }, ref) {
+TooltipComponent.sectionTitle = (0, import_react27.forwardRef)(function SectionTitle({ text, ...props }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Text_default,
     {
       fontSize: 12,
@@ -9048,26 +9087,26 @@ TooltipComponent.sectionTitle = (0, import_react26.forwardRef)(function SectionT
     }
   );
 });
-var Tooltip2 = (0, import_react26.memo)(TooltipComponent);
+var Tooltip2 = (0, import_react27.memo)(TooltipComponent);
 Tooltip2.item = TooltipComponent.item;
 Tooltip2.divider = TooltipComponent.divider;
 Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
 var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
-var import_react27 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
+var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { colorTheme, componentsState } = useBetterHtmlContextInternal();
-  const firstRenderPassedRef = (0, import_react27.useRef)(false);
-  const tabsRef = (0, import_react27.useRef)({});
-  const [selectedTab, setSelectedTab] = (0, import_react27.useState)(() => {
+  const firstRenderPassedRef = (0, import_react28.useRef)(false);
+  const tabsRef = (0, import_react28.useRef)({});
+  const [selectedTab, setSelectedTab] = (0, import_react28.useState)(() => {
     const selectedTabValue = tabs[0] ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
@@ -9076,9 +9115,9 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
     }
     return selectedTabValue;
   });
-  const [rerenderState, setRerenderState] = (0, import_react27.useState)(0);
+  const [rerenderState, setRerenderState] = (0, import_react28.useState)(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
-  const onClickTab = (0, import_react27.useCallback)(
+  const onClickTab = (0, import_react28.useCallback)(
     (tab) => {
       setSelectedTab(tab);
       onChange?.(tab);
@@ -9090,11 +9129,11 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
     },
     [onChange, name, urlQuery]
   );
-  const width = (0, import_react27.useMemo)(
+  const width = (0, import_react28.useMemo)(
     () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
-  const leftSpacing = (0, import_react27.useMemo)(() => {
+  const leftSpacing = (0, import_react28.useMemo)(() => {
     const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
@@ -9102,7 +9141,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
     });
     return spacing;
   }, [selectedTab, tabs, tabsGap]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -9111,7 +9150,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
       clearTimeout(timeout);
     };
   }, []);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -9132,20 +9171,20 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
       }
     });
   }, [selectedTab, name]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     tabsRef.current[selectedTab]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTab]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
       );
     };
   }, []);
-  (0, import_react27.useImperativeHandle)(
+  (0, import_react28.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -9155,11 +9194,11 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Div_default,
           {
             position: "relative",
@@ -9180,7 +9219,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
               tabsRef.current[tab] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -9193,7 +9232,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
                   transition: theme2.styles.transition
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Text_default,
                 {
                   fontWeight: 700,
@@ -9208,7 +9247,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
           tab
         );
       }) }),
-      style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Div_default,
         {
           position: "absolute",
@@ -9221,16 +9260,16 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
         }
       )
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { width: "100%", children })
   ] });
 });
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
-  const thisTabGroupData = (0, import_react27.useMemo)(
+  const thisTabGroupData = (0, import_react28.useMemo)(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
@@ -9239,18 +9278,18 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
       );
     }
   }, [tabWithDot]);
-  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { width: "100%", children }) : void 0;
 };
-var Tabs2 = (0, import_react27.memo)(TabsComponent);
+var Tabs2 = (0, import_react28.memo)(TabsComponent);
 Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-var import_react28 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
+var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
@@ -9265,23 +9304,23 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const bodyRef = (0, import_react28.useRef)(null);
+  const bodyRef = (0, import_react29.useRef)(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
-  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react28.useState)();
+  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react29.useState)();
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = (0, import_react28.useCallback)(() => {
+  const open = (0, import_react29.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = (0, import_react28.useCallback)(() => {
+  const close = (0, import_react29.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = (0, import_react28.useCallback)(() => {
+  const toggleOpen = (0, import_react29.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!bodyRef.current) return;
     const body = bodyRef.current;
     setBodyVirtualHeight(body.scrollHeight * 2);
@@ -9292,7 +9331,7 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!isOpen) return;
     if (!bodyRef.current) return;
     const observer = new ResizeObserver(() => {
@@ -9304,7 +9343,7 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
       observer.disconnect();
     };
   }, [isOpen]);
-  (0, import_react28.useImperativeHandle)(
+  (0, import_react29.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -9316,8 +9355,8 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       Div_default.row,
       {
         width: "100%",
@@ -9329,15 +9368,15 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
-            image && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+            image && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Icon_default,
             {
               name: "chevronDown",
@@ -9348,8 +9387,8 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Divider_default.horizontal, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Div_default,
       {
         maxHeight: isOpen ? bodyVirtualHeight : 0,
@@ -9358,14 +9397,14 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
         overflow: !isOpen ? "hidden" : void 0,
         pointerEvents: !isOpen ? "none" : void 0,
         ref: bodyRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
-FoldableComponent.box = (0, import_react28.forwardRef)(function Box3({ ...props }, ref) {
+FoldableComponent.box = (0, import_react29.forwardRef)(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     FoldableComponent,
     {
       backgroundColor: theme2.colors.backgroundContent,
@@ -9378,14 +9417,14 @@ FoldableComponent.box = (0, import_react28.forwardRef)(function Box3({ ...props
     }
   );
 });
-var Foldable2 = (0, import_react28.memo)(FoldableComponent);
+var Foldable2 = (0, import_react29.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
 // src/components/SideMenu.tsx
-var import_react29 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ item, onClick }) {
+var import_react30 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ item, backgroundColor, onClick }) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
     throw new Error(
@@ -9398,13 +9437,14 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
   const location = reactRouterDomPluginConfig.useLocation();
   const { colorTheme, components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const [isOpened, setIsOpened] = useBooleanState();
-  const onClickElement = (0, import_react29.useCallback)(() => {
+  const onClickElement = (0, import_react30.useCallback)(() => {
     if (item.disabled) return;
     if (item.onClickCloseSideMenu !== false) onClick?.();
     item.onClick?.(item);
   }, [onClick, item]);
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const isActive = item.href ? location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/" : false;
+  const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const iconSize = 16;
   const paddingBlock = theme2.styles.gap;
   const paddingLeft = theme2.styles.gap + 2;
@@ -9412,13 +9452,13 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
   const lineHeight = 20;
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default.row,
     {
       alignItems: "center",
       gap: iconGap,
       whiteSpace: "nowrap",
-      backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : theme2.colors.backgroundContent,
+      backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : readyBackgroundColor,
       borderRadius: theme2.styles.borderRadius,
       paddingBlock,
       paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
@@ -9429,8 +9469,8 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
       opacity: item.disabled ? 0.6 : void 0,
       onClick: item.children ? setIsOpened.toggle : onClickElement,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Text_default,
           {
             flex: 1,
@@ -9441,7 +9481,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
             children: item.text
           }
         ),
-        item.children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Icon_default,
           {
             name: "chevronDown",
@@ -9454,7 +9494,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
       ]
     }
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!item.children) return;
     const toBeOpened = item.children.some(
       (child) => child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false
@@ -9462,9 +9502,9 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
     setIsOpened.setState(toBeOpened);
   }, [item]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default, { width: "100%", children: [
-    item.href ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
-    item.children && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default, { width: "100%", children: [
+    item.href ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
+    item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       Div_default.column,
       {
         position: "relative",
@@ -9475,8 +9515,16 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
         overflow: "hidden",
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
-          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent2, { item: child, onClick }, child.text)),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            MenuItemComponent2,
+            {
+              item: child,
+              backgroundColor: readyBackgroundColor,
+              onClick
+            },
+            child.text
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             Div_default,
             {
               position: "absolute",
@@ -9485,7 +9533,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
               left: paddingLeft + iconSize / 2,
               zIndex: -1,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Div_default,
                   {
                     position: "relative",
@@ -9495,7 +9543,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
                     zIndex: 1
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Div_default,
                   {
                     position: "absolute",
@@ -9505,9 +9553,9 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
                     left: 0,
                     border: `${lineWidth}px solid ${theme2.colors.border}`,
                     borderRadius: 999,
-                    borderTopColor: theme2.colors.backgroundContent,
-                    borderLeftColor: theme2.colors.backgroundContent,
-                    borderRightColor: theme2.colors.backgroundContent,
+                    borderTopColor: readyBackgroundColor,
+                    borderLeftColor: readyBackgroundColor,
+                    borderRightColor: readyBackgroundColor,
                     transform: "rotate(45deg)"
                   }
                 )
@@ -9529,23 +9577,25 @@ var SideMenuComponent = function SideMenu({
   logoFontFamily,
   collapsable,
   withCloseButton,
-  widthMobileHandle
+  widthMobileHandle,
+  backgroundColor
 }) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
-  const onClickXButton = (0, import_react29.useCallback)(() => {
+  const onClickXButton = (0, import_react30.useCallback)(() => {
     setSideMenuIsOpenMobile.setFalse();
   }, []);
-  const readyItems = (0, import_react29.useMemo)(() => items.filter((item) => !item.hidden), [items]);
-  const readyBottomItems = (0, import_react29.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
+  const readyItems = (0, import_react30.useMemo)(() => items.filter((item) => !item.hidden), [items]);
+  const readyBottomItems = (0, import_react30.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
   const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
-  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + 1 + theme2.styles.space;
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
+  const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default.column,
     {
       position: "fixed",
@@ -9553,7 +9603,7 @@ var SideMenuComponent = function SideMenu({
       height: `calc(100svh - ${topSpace}px)`,
       top: topSpace,
       left: 0,
-      backgroundColor: theme2.colors.backgroundContent,
+      backgroundColor: readyBackgroundColor,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
       paddingTop: logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space,
@@ -9561,9 +9611,9 @@ var SideMenuComponent = function SideMenu({
       userSelect: "none",
       zIndex: 10,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
-            (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
+            (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               Div_default.row,
               {
                 alignItems: "center",
@@ -9572,7 +9622,7 @@ var SideMenuComponent = function SideMenu({
                 whiteSpace: "nowrap",
                 gap: theme2.styles.gap,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     Image_default,
                     {
                       name: logoAssetName,
@@ -9582,7 +9632,7 @@ var SideMenuComponent = function SideMenu({
                       objectFit: "contain"
                     }
                   ),
-                  logoText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  logoText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     Text_default,
                     {
                       fontFamily: logoFontFamily,
@@ -9597,9 +9647,9 @@ var SideMenuComponent = function SideMenu({
                 ]
               }
             ) }),
-            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Div_default.column,
             {
               width: "100%",
@@ -9607,10 +9657,18 @@ var SideMenuComponent = function SideMenu({
               overflowY: "auto",
               paddingInline: theme2.styles.space,
               paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                MenuItemComponent,
+                {
+                  item,
+                  backgroundColor: readyBackgroundColor,
+                  onClick: onClickXButton
+                },
+                item.text
+              )) })
             }
           ),
-          readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Div_default.column,
             {
               borderTop: mediaQuery.size1000 ? `solid 1px ${theme2.colors.border}` : void 0,
@@ -9619,29 +9677,37 @@ var SideMenuComponent = function SideMenu({
               paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
               paddingInline: theme2.styles.space,
               paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
-              children: readyBottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text))
+              children: readyBottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                MenuItemComponent,
+                {
+                  item,
+                  backgroundColor: readyBackgroundColor,
+                  onClick: onClickXButton
+                },
+                item.text
+              ))
             }
           ),
-          isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Div_default,
             {
               borderTop: `solid 1px ${theme2.colors.border}`,
               marginTop: !readyBottomItems ? "auto" : void 0,
               paddingInline: theme2.styles.space,
               paddingBlock: theme2.styles.space,
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 Div_default.row,
                 {
                   alignItems: "center",
                   justifyContent: "center",
-                  backgroundColor: theme2.colors.backgroundContent,
+                  backgroundColor: readyBackgroundColor,
                   borderRadius: theme2.styles.borderRadius,
                   cursor: "pointer",
                   filterHover: filterHover().z1,
                   isTabAccessed: true,
                   paddingBlock: theme2.styles.gap,
                   onClick: setSideMenuIsCollapsed.toggle,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     Icon_default,
                     {
                       name: "chevronRight",
@@ -9656,13 +9722,13 @@ var SideMenuComponent = function SideMenu({
             }
           )
         ] }),
-        widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default.row,
           {
             position: "absolute",
             top: theme2.styles.space,
             left: "100%",
-            backgroundColor: theme2.colors.backgroundContent,
+            backgroundColor: readyBackgroundColor,
             border: `solid 1px ${theme2.colors.border}`,
             borderLeft: "none",
             borderTopRightRadius: theme2.styles.borderRadius,
@@ -9676,7 +9742,7 @@ var SideMenuComponent = function SideMenu({
             transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
             transition: theme2.styles.transition,
             onClick: setSideMenuIsOpenMobile.toggle,
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               Icon_default,
               {
                 name: "chevronRight",
@@ -9697,8 +9763,8 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
-  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + 1 + theme2.styles.space;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default,
     {
       position: "relative",
@@ -9707,7 +9773,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
       transition: theme2.styles.transition,
       children: [
         outsideComponent,
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PageHolder_default, { ...props })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PageHolder_default, { ...props })
       ]
     }
   );
@@ -9717,7 +9783,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = useBooleanState();
   const width = 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default,
     {
       position: "relative",
@@ -9729,7 +9795,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
       onMouseOut: setIsHovered.setFalse,
       onClick: setSideMenuIsOpenMobile.toggle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -9743,7 +9809,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -9758,7 +9824,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -9776,7 +9842,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
     }
   );
 };
-var SideMenu2 = (0, import_react29.memo)(SideMenuComponent);
+var SideMenu2 = (0, import_react30.memo)(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
 SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
@@ -9865,6 +9931,7 @@ function generateLocalStorage() {
   Modal,
   PageHeader,
   PageHolder,
+  Pagination,
   SideMenu,
   Table,
   Tabs,