react-better-html 1.1.191 → 1.1.193

package/dist/index.mjs

@@ -7705,17 +7705,132 @@ var ColorThemeSwitch_default = ColorThemeSwitch2;
 // src/components/Table.tsx
 import {
   forwardRef as forwardRef15,
-  memo as memo22,
-  useCallback as useCallback11,
-  useMemo as useMemo8,
-  useState as useState9,
+  memo as memo23,
+  useCallback as useCallback12,
+  useMemo as useMemo9,
+  useState as useState10,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef6,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   Fragment as Fragment6
 } from "react";
 import styled12, { css as css2 } from "styled-components";
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// src/components/Pagination.tsx
+import { memo as memo22, useCallback as useCallback11, useEffect as useEffect10, useMemo as useMemo8, useState as useState9 } from "react";
+import { jsx as jsx22, jsxs as jsxs18 } from "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] = useState9(currentPage);
+  const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
+  const onClickPreviousPageElement = useCallback11(() => {
+    const newPage = currentPageInternal <= 1 ? 1 : currentPageInternal - 1;
+    setCurrentPage(newPage);
+    onClickPreviousPage?.(newPage);
+  }, [currentPageInternal, onClickPreviousPage]);
+  const onClickNextPageElement = useCallback11(() => {
+    const newPage = currentPageInternal >= pageCountInternal ? pageCountInternal : currentPageInternal + 1;
+    setCurrentPage(newPage);
+    onClickNextPage?.(newPage);
+  }, [currentPageInternal, pageCountInternal, onClickNextPage]);
+  const paginationItems = useMemo8(() => {
+    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]);
+  useEffect10(() => {
+    onChangePage?.(currentPageInternal);
+  }, [currentPageInternal, onChangePage]);
+  useEffect10(() => {
+    setCurrentPage(currentPage);
+  }, [currentPage]);
+  const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
+  return /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ jsx22(
+      Button_default.icon,
+      {
+        icon: "doubleChevronLeft",
+        disabled: currentPageInternal === 1,
+        value: 1,
+        onClickWithValue: setCurrentPage
+      }
+    ),
+    /* @__PURE__ */ jsx22(Button_default.icon, { icon: "chevronLeft", disabled: currentPageInternal === 1, onClick: onClickPreviousPageElement }),
+    /* @__PURE__ */ jsx22(
+      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__ */ jsx22(
+            Div_default,
+            {
+              cursor: "pointer",
+              userSelect: "none",
+              value: pageIndex,
+              onClickWithValue: setCurrentPage,
+              children: /* @__PURE__ */ jsx22(
+                Text_default,
+                {
+                  fontWeight: isActive ? 700 : 400,
+                  color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
+                  transition: theme2.styles.transition,
+                  children: pageIndex
+                }
+              )
+            },
+            pageIndex
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx22(
+      Button_default.icon,
+      {
+        icon: "chevronRight",
+        disabled: currentPageInternal === pageCountInternal,
+        onClick: onClickNextPageElement
+      }
+    ),
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ jsx22(
+      Button_default.icon,
+      {
+        icon: "doubleChevronRight",
+        disabled: currentPageInternal === pageCountInternal,
+        onClickWithValue: setCurrentPage,
+        value: pageCountInternal
+      }
+    )
+  ] });
+};
+var Pagination2 = memo22(PaginationComponent);
+var Pagination_default = Pagination2;
+
+// src/components/Table.tsx
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = styled12.table.withConfig({
@@ -7887,13 +8002,13 @@ var TableComponent = forwardRef15(function Table({
   const mediaQuery = useMediaQuery();
   const { colorTheme } = useBetterHtmlContextInternal();
   const filterModalRef = useRef6(null);
-  const readyColumns = useMemo8(() => columns.filter((column) => !column.hidden), [columns]);
+  const readyColumns = useMemo9(() => columns.filter((column) => !column.hidden), [columns]);
   const columnsRef = useRef6(readyColumns);
   columnsRef.current = readyColumns;
-  const [checkedItems, setCheckedItems] = useState9([]);
-  const [expandedRows, setExpandedRows] = useState9([]);
-  const [currentPage, setCurrentPage] = useState9(1);
-  const [filterData, setFilterData] = useState9(() => {
+  const [checkedItems, setCheckedItems] = useState10([]);
+  const [expandedRows, setExpandedRows] = useState10([]);
+  const [currentPage, setCurrentPage] = useState10(1);
+  const [filterData, setFilterData] = useState10(() => {
     if (!memoizeFilters || !name) return {};
     const localStorageData = JSON.parse(localStorage.getItem(`react-better-html-table-filters-${name}`) || "{}");
     const timestamp = localStorageData.timestamp;
@@ -7902,8 +8017,8 @@ var TableComponent = forwardRef15(function Table({
     if (timeDiff > memoizeFiltersLifespan) return {};
     return data2;
   });
-  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = useState9();
-  const [filterListSelectedItems, setFilterListSelectedItems] = useState9();
+  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = useState10();
+  const [filterListSelectedItems, setFilterListSelectedItems] = useState10();
   const openedFilterData = openedFilterColumnIndex !== void 0 ? filterData[openedFilterColumnIndex] : void 0;
   const openedFilterColumn = openedFilterColumnIndex !== void 0 ? readyColumns[openedFilterColumnIndex] : void 0;
   const filterForm = useForm({
@@ -7933,26 +8048,26 @@ var TableComponent = forwardRef15(function Table({
       filterModalRef.current?.close();
     }
   });
-  const expandColumn = useMemo8(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
-  const renderCellContent = useCallback11(
+  const expandColumn = useMemo9(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
+  const renderCellContent = useCallback12(
     (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__ */ jsx22(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
+          return /* @__PURE__ */ jsx23(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
         }
         case "element": {
-          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ jsx22(Fragment7, {});
+          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ jsx23(Fragment7, {});
         }
         case "image": {
           const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
-          return /* @__PURE__ */ jsx22(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
+          return /* @__PURE__ */ jsx23(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__ */ jsx22(
+          return /* @__PURE__ */ jsx23(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
@@ -7973,7 +8088,7 @@ var TableComponent = forwardRef15(function Table({
           );
         }
         case "expand": {
-          return /* @__PURE__ */ jsx22(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ jsx22(
+          return /* @__PURE__ */ jsx23(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ jsx23(
             Icon_default,
             {
               name: "chevronDown",
@@ -7983,13 +8098,13 @@ var TableComponent = forwardRef15(function Table({
           ) });
         }
         default: {
-          return /* @__PURE__ */ jsx22(Fragment7, {});
+          return /* @__PURE__ */ jsx23(Fragment7, {});
         }
       }
     },
     [theme2, checkedItems, expandedRows]
   );
-  const onClickRowElement = useCallback11(
+  const onClickRowElement = useCallback12(
     (item, index) => {
       if (expandColumn) {
         setExpandedRows((oldValue) => {
@@ -8006,14 +8121,14 @@ var TableComponent = forwardRef15(function Table({
     },
     [onClickRow, expandColumn]
   );
-  const onClickAllCheckboxesElement = useCallback11(
+  const onClickAllCheckboxesElement = useCallback12(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const onClickFilterButton = useCallback11(
+  const onClickFilterButton = useCallback12(
     (columnIndex) => {
       const thisFilterData = filterData[columnIndex];
       if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
@@ -8029,12 +8144,12 @@ var TableComponent = forwardRef15(function Table({
     },
     [filterData]
   );
-  const onCloseFilterModal = useCallback11(() => {
+  const onCloseFilterModal = useCallback12(() => {
     setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
     setFilterListSelectedItems(void 0);
     filterForm.reset();
   }, []);
-  const onClickCancelFormFilter = useCallback11(() => {
+  const onClickCancelFormFilter = useCallback12(() => {
     if (openedFilterColumnIndex === void 0) return;
     setFilterData(
       (oldValue) => Object.entries({
@@ -8047,7 +8162,7 @@ var TableComponent = forwardRef15(function Table({
     );
     filterModalRef.current?.close();
   }, [openedFilterColumnIndex]);
-  const onClickFilterListItem = useCallback11(
+  const onClickFilterListItem = useCallback12(
     (value) => setFilterListSelectedItems((oldValue) => {
       if (!oldValue) return [value];
       if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
@@ -8055,7 +8170,7 @@ var TableComponent = forwardRef15(function Table({
     }),
     []
   );
-  const onClickFilterPreset = useCallback11(
+  const onClickFilterPreset = useCallback12(
     (preset) => {
       const getValueForDate = (date) => {
         if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
@@ -8140,7 +8255,7 @@ var TableComponent = forwardRef15(function Table({
     },
     [openedFilterColumn]
   );
-  const renderExpandedRow = useCallback11(
+  const renderExpandedRow = useCallback12(
     (...props2) => {
       const expandColumn2 = readyColumns.find((column) => column.type === "expand");
       if (!expandColumn2) return;
@@ -8148,7 +8263,7 @@ var TableComponent = forwardRef15(function Table({
     },
     [readyColumns]
   );
-  const dataAfterFilter = useMemo8(
+  const dataAfterFilter = useMemo9(
     () => data.filter(
       (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
         if (!filter) return true;
@@ -8177,17 +8292,17 @@ var TableComponent = forwardRef15(function Table({
     ),
     [data, filterData]
   );
-  const dataAfterPagination = useMemo8(() => {
+  const dataAfterPagination = useMemo9(() => {
     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 = useMemo8(() => {
+  const everythingIsChecked = useMemo9(() => {
     return data.length > 0 && checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  const possibleFilterListValues = useMemo8(() => {
+  const possibleFilterListValues = useMemo9(() => {
     if (!openedFilterColumn) return [];
     return data.reduce((previousValue, currentValue) => {
       const valueFromList = openedFilterColumn.filter === "list" && openedFilterColumn.getValueForList ? openedFilterColumn.getValueForList(currentValue) : void 0;
@@ -8216,39 +8331,18 @@ var TableComponent = forwardRef15(function Table({
     }, []);
   }, [data, openedFilterColumn, filterForm.values.search]);
   const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
-  const paginationItems = useMemo8(() => {
-    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 = useCallback11(() => {
-    setCurrentPage((oldValue) => oldValue >= pageCountInternal ? pageCountInternal : oldValue + 1);
-  }, [pageCountInternal]);
-  const onClickPreviousPage = useCallback11(() => {
-    setCurrentPage((oldValue) => oldValue <= 1 ? 1 : oldValue - 1);
-  }, []);
-  const onClickSelectAllFilterListItems = useCallback11(
+  const onClickSelectAllFilterListItems = useCallback12(
     () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
     [possibleFilterListValues]
   );
-  const onClickDeselectAllFilterListItems = useCallback11(() => setFilterListSelectedItems([]), []);
-  useEffect10(() => {
+  const onClickDeselectAllFilterListItems = useCallback12(() => setFilterListSelectedItems([]), []);
+  useEffect11(() => {
     onChangePage?.(currentPage);
   }, [onChangePage, currentPage]);
-  useEffect10(() => {
+  useEffect11(() => {
     onChangeFilter?.(filterData);
   }, [onChangeFilter, filterData]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!memoizeFilters) return;
     if (!name) return;
     localStorage.setItem(
@@ -8259,7 +8353,7 @@ var TableComponent = forwardRef15(function Table({
       })
     );
   }, [memoizeFilters, name, filterData]);
-  useEffect10(() => {
+  useEffect11(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
   useImperativeHandle2(
@@ -8276,8 +8370,8 @@ var TableComponent = forwardRef15(function Table({
   );
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ jsxs18(Fragment7, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs19(Fragment7, { children: [
+    /* @__PURE__ */ jsx23(
       Div_default,
       {
         border: `1px solid ${theme2.colors.border}`,
@@ -8285,7 +8379,7 @@ var TableComponent = forwardRef15(function Table({
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         ref: wrapperComponentRef,
-        children: /* @__PURE__ */ jsxs18(
+        children: /* @__PURE__ */ jsxs19(
           TableStyledComponent,
           {
             isStriped,
@@ -8296,14 +8390,14 @@ var TableComponent = forwardRef15(function Table({
             containsOverflowComponents,
             withFooter,
             children: [
-              /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsx22("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsx23("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ jsx23(
                 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__ */ jsxs18(
+                  children: /* @__PURE__ */ jsxs19(
                     Div_default.row,
                     {
                       width: "100%",
@@ -8311,15 +8405,15 @@ var TableComponent = forwardRef15(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__ */ jsx22(
+                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ jsx23(
                           ToggleInput_default.checkbox,
                           {
                             checked: everythingIsChecked,
                             disabled: data.length === 0,
                             onChange: onClickAllCheckboxesElement
                           }
-                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ jsx22(Text_default, { children: column.label }) : void 0,
-                        column.filter && /* @__PURE__ */ jsx22(
+                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ jsx23(Text_default, { children: column.label }) : void 0,
+                        column.filter && /* @__PURE__ */ jsx23(
                           Button_default.icon,
                           {
                             icon: "filter",
@@ -8334,14 +8428,14 @@ var TableComponent = forwardRef15(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ jsx22("tbody", { children: isLoading ? /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx22(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs18(Fragment6, { children: [
-                /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23("tbody", { children: isLoading ? /* @__PURE__ */ jsx23("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx23("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx23(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs19(Fragment6, { children: [
+                /* @__PURE__ */ jsx23(
                   "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__ */ jsx22(
+                    children: readyColumns.map((column, colIndex) => /* @__PURE__ */ jsx23(
                       TdStyledComponent,
                       {
                         textAlign: column.align,
@@ -8354,9 +8448,9 @@ var TableComponent = forwardRef15(function Table({
                     ))
                   }
                 ),
-                expandedRows[rowIndex] && /* @__PURE__ */ jsx22("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx22("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
-              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx22(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ jsx22("tfoot", { children: /* @__PURE__ */ jsx22("tr", { className: "isFooter", children: /* @__PURE__ */ jsx22("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ jsxs18(
+                expandedRows[rowIndex] && /* @__PURE__ */ jsx23("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx23("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
+              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ jsx23("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx23("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx23(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              withFooter && /* @__PURE__ */ jsx23("tfoot", { children: /* @__PURE__ */ jsx23("tr", { className: "isFooter", children: /* @__PURE__ */ jsx23("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ jsxs19(
                 Div_default.column,
                 {
                   position: "relative",
@@ -8365,7 +8459,7 @@ var TableComponent = forwardRef15(function Table({
                   flexReverse: true,
                   gap: theme2.styles.gap / 2,
                   children: [
-                    /* @__PURE__ */ jsxs18(
+                    /* @__PURE__ */ jsxs19(
                       Text_default,
                       {
                         position: mobileFooterBreakingPoint ? "relative" : "absolute",
@@ -8380,73 +8474,17 @@ var TableComponent = forwardRef15(function Table({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
-                      pageCountInternal > maximumVisiblePages && /* @__PURE__ */ jsx22(
-                        Button_default.icon,
-                        {
-                          icon: "doubleChevronLeft",
-                          disabled: currentPage === 1,
-                          value: 1,
-                          onClickWithValue: setCurrentPage
-                        }
-                      ),
-                      /* @__PURE__ */ jsx22(
-                        Button_default.icon,
-                        {
-                          icon: "chevronLeft",
-                          disabled: currentPage === 1,
-                          onClick: onClickPreviousPage
-                        }
-                      ),
-                      /* @__PURE__ */ jsx22(
-                        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__ */ jsx22(
-                              Div_default,
-                              {
-                                cursor: "pointer",
-                                userSelect: "none",
-                                value: pageIndex,
-                                onClickWithValue: setCurrentPage,
-                                children: /* @__PURE__ */ jsx22(
-                                  Text_default,
-                                  {
-                                    fontWeight: isActive ? 700 : 400,
-                                    color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
-                                    transition: theme2.styles.transition,
-                                    children: pageIndex
-                                  }
-                                )
-                              },
-                              pageIndex
-                            );
-                          })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx22(
-                        Button_default.icon,
-                        {
-                          icon: "chevronRight",
-                          disabled: currentPage === pageCountInternal,
-                          onClick: onClickNextPage
-                        }
-                      ),
-                      pageCountInternal > maximumVisiblePages && /* @__PURE__ */ jsx22(
-                        Button_default.icon,
-                        {
-                          icon: "doubleChevronRight",
-                          disabled: currentPage === pageCountInternal,
-                          onClickWithValue: setCurrentPage,
-                          value: pageCountInternal
-                        }
-                      )
-                    ] })
+                    /* @__PURE__ */ jsx23(
+                      Pagination_default,
+                      {
+                        currentPage,
+                        itemsLength: dataAfterFilter.length,
+                        itemsPerPage: pageSize,
+                        pageCount,
+                        maximumVisiblePages,
+                        onChangePage: setCurrentPage
+                      }
+                    )
                   ]
                 }
               ) }) }) })
@@ -8455,26 +8493,26 @@ var TableComponent = forwardRef15(function Table({
         )
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       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__ */ jsx22(
+        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ jsx23(
           Form_default,
           {
             form: filterForm,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
-            children: /* @__PURE__ */ jsxs18(FormRow_default, { children: [
-              /* @__PURE__ */ jsx22(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
-              /* @__PURE__ */ jsx22(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
+            children: /* @__PURE__ */ jsxs19(FormRow_default, { children: [
+              /* @__PURE__ */ jsx23(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
+              /* @__PURE__ */ jsx23(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
             ] })
           }
-        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ jsxs18(
+        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ jsxs19(
           Form_default,
           {
             form: filterForm,
@@ -8483,16 +8521,16 @@ var TableComponent = forwardRef15(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: [
-              /* @__PURE__ */ jsx22(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs18(Fragment7, { children: [
-                /* @__PURE__ */ jsx22(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ jsx22(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
-              ] }) : /* @__PURE__ */ jsxs18(Fragment7, { children: [
-                /* @__PURE__ */ jsx22(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ jsx22(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              /* @__PURE__ */ jsx23(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs19(Fragment7, { children: [
+                /* @__PURE__ */ jsx23(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ jsx23(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              ] }) : /* @__PURE__ */ jsxs19(Fragment7, { children: [
+                /* @__PURE__ */ jsx23(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ jsx23(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),
-              openedFilterColumn.presets && /* @__PURE__ */ jsxs18(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ jsx22(Label_default, { text: "Presets" }),
-                /* @__PURE__ */ jsx22(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx22(
+              openedFilterColumn.presets && /* @__PURE__ */ jsxs19(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ jsx23(Label_default, { text: "Presets" }),
+                /* @__PURE__ */ jsx23(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx23(
                   Button_default.secondary,
                   {
                     text: filterPresetsText[preset],
@@ -8505,14 +8543,14 @@ var TableComponent = forwardRef15(function Table({
               ] })
             ]
           }
-        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ jsxs18(
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ jsxs19(
           Form_default,
           {
             gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
-            renderActionButtons: /* @__PURE__ */ jsxs18(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
-              /* @__PURE__ */ jsx22(
+            renderActionButtons: /* @__PURE__ */ jsxs19(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
+              /* @__PURE__ */ jsx23(
                 Button_default.secondary,
                 {
                   text: "Select All",
@@ -8521,7 +8559,7 @@ var TableComponent = forwardRef15(function Table({
                   onClick: onClickSelectAllFilterListItems
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 Button_default.secondary,
                 {
                   text: "Deselect All",
@@ -8534,7 +8572,7 @@ var TableComponent = forwardRef15(function Table({
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             onSubmit: filterForm.onSubmit,
             children: [
-              openedFilterColumn?.withSearch && /* @__PURE__ */ jsx22(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ jsx22(
+              openedFilterColumn?.withSearch && /* @__PURE__ */ jsx23(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ jsx23(
                 InputField_default.search,
                 {
                   label: "Search",
@@ -8542,19 +8580,19 @@ var TableComponent = forwardRef15(function Table({
                   ...filterForm.getInputFieldProps("search")
                 }
               ) }),
-              /* @__PURE__ */ jsxs18(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ jsx22(Label_default, { text: "Possible values" }),
-                /* @__PURE__ */ jsx22(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
+              /* @__PURE__ */ jsxs19(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ jsx23(Label_default, { text: "Possible values" }),
+                /* @__PURE__ */ jsx23(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
-                  return /* @__PURE__ */ jsx22(
+                  return /* @__PURE__ */ jsx23(
                     Div_default.box,
                     {
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
-                      children: /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
-                        /* @__PURE__ */ jsx22(Text_default, { children: value.label || value.value }),
-                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs18(
+                      children: /* @__PURE__ */ jsxs19(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
+                        /* @__PURE__ */ jsx23(Text_default, { children: value.label || value.value }),
+                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs19(
                           Text_default,
                           {
                             fontSize: 14,
@@ -8570,23 +8608,23 @@ var TableComponent = forwardRef15(function Table({
                     },
                     value.value
                   );
-                }) : /* @__PURE__ */ jsx22(Text_default.unknown, { children: "No values" }) })
+                }) : /* @__PURE__ */ jsx23(Text_default.unknown, { children: "No values" }) })
               ] }),
-              /* @__PURE__ */ jsx22(Div_default, {})
+              /* @__PURE__ */ jsx23(Div_default, {})
             ]
           }
-        ) : /* @__PURE__ */ jsx22(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ jsx22(Loader_default.box, {})
+        ) : /* @__PURE__ */ jsx23(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ jsx23(Loader_default.box, {})
       }
     )
   ] });
 });
-var Table2 = memo22(TableComponent);
+var Table2 = memo23(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-import { memo as memo23, useCallback as useCallback12, useRef as useRef7, useState as useState10, useEffect as useEffect11, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo9 } from "react";
+import { memo as memo24, useCallback as useCallback13, useRef as useRef7, useState as useState11, useEffect as useEffect12, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
 import styled13, { css as css3 } from "styled-components";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var tooltipContainerStyle = (props) => ({
   top: css3`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
@@ -8688,10 +8726,10 @@ var arrowStyle = (props, borderWidth) => ({
     transform: !borderWidth && props.align === "center" ? "translateY(-50%);" : void 0
   }
 });
-var Arrow = memo23(function Arrow2(props) {
+var Arrow = memo24(function Arrow2(props) {
   const theme2 = useTheme();
   const { position, size } = props;
-  const outerProps = useMemo9(
+  const outerProps = useMemo10(
     () => ({
       ...props,
       color: theme2.colors.border
@@ -8699,7 +8737,7 @@ var Arrow = memo23(function Arrow2(props) {
     [props, theme2]
   );
   const borderWidth = 1;
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Div_default,
     {
       position: "absolute",
@@ -8707,7 +8745,7 @@ var Arrow = memo23(function Arrow2(props) {
       height: 0,
       border: `${size}px solid transparent`,
       ...arrowStyle(outerProps)[position],
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         Div_default,
         {
           position: "absolute",
@@ -8743,13 +8781,13 @@ var TooltipComponent = forwardRef16(function Tooltip({
   const contentRef = useRef7(null);
   const tooltipContainerRef = useRef7(null);
   const closeTimerRef = useRef7(void 0);
-  const [isOpen, setIsOpen] = useState10(false);
-  const [isOpenLate, setIsOpenLate] = useState10(false);
+  const [isOpen, setIsOpen] = useState11(false);
+  const [isOpenLate, setIsOpenLate] = useState11(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 = useCallback12(() => {
+  const openTooltip = useCallback13(() => {
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
     setIsOpenLate(true);
@@ -8773,18 +8811,18 @@ var TooltipComponent = forwardRef16(function Tooltip({
     }, 1);
     onOpen?.();
   }, [onOpen, outsideScreenGap, totalGap]);
-  const closeTooltip = useCallback12(() => {
+  const closeTooltip = useCallback13(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
     onClose?.();
   }, [onClose]);
-  const onMouseEnter = useCallback12(() => {
+  const onMouseEnter = useCallback13(() => {
     if (trigger === "hover") openTooltip();
   }, [trigger, openTooltip]);
-  const onMouseLeave = useCallback12(() => {
+  const onMouseLeave = useCallback13(() => {
     if (trigger === "hover") closeTooltip();
   }, [trigger, closeTooltip]);
-  const onClickHolder = useCallback12(
+  const onClickHolder = useCallback13(
     (event) => {
       if (trigger === "click") {
         if (!isOpen) openTooltip();
@@ -8793,7 +8831,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, openTooltip, isOpen, closeTooltip]
   );
-  const onClickOutside = useCallback12(
+  const onClickOutside = useCallback13(
     (event) => {
       if (!isOpen) return;
       if (trigger !== "click") return;
@@ -8803,7 +8841,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
       return () => {
@@ -8822,7 +8860,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [isOpen, openTooltip, closeTooltip]
   );
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Div_default,
     {
       position: "relative",
@@ -8832,7 +8870,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           Div_default,
           {
             width: childrenWrapperWidth,
@@ -8842,7 +8880,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
             children
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           TooltipContainer,
           {
             theme: theme2,
@@ -8854,8 +8892,8 @@ var TooltipComponent = forwardRef16(function Tooltip({
             isOpen,
             role: "tooltip",
             ref: tooltipContainerRef,
-            children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs19(Div_default, { position: "relative", ref: contentRef, children: [
-              /* @__PURE__ */ jsx23(
+            children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs20(Div_default, { position: "relative", ref: contentRef, children: [
+              /* @__PURE__ */ jsx24(
                 Div_default.box,
                 {
                   position: "relative",
@@ -8869,7 +8907,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
                   children: content
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 Div_default,
                 {
                   position: "absolute",
@@ -8883,7 +8921,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
                   borderTopRightRadius: 999
                 }
               ),
-              withArrow && /* @__PURE__ */ jsx23(
+              withArrow && /* @__PURE__ */ jsx24(
                 Arrow,
                 {
                   position,
@@ -8915,7 +8953,7 @@ TooltipComponent.item = forwardRef16(function Item({
   onClickWithValue
 }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Div_default.row,
     {
       alignItems: "center",
@@ -8933,10 +8971,10 @@ TooltipComponent.item = forwardRef16(function Item({
       onClickWithValue: !disabled ? onClickWithValue : void 0,
       ref,
       children: [
-        icon && /* @__PURE__ */ jsx23(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
-        /* @__PURE__ */ jsxs19(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-          /* @__PURE__ */ jsx23(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
-          description && /* @__PURE__ */ jsx23(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
+        icon && /* @__PURE__ */ jsx24(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
+        /* @__PURE__ */ jsxs20(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+          /* @__PURE__ */ jsx24(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
+          description && /* @__PURE__ */ jsx24(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
       ]
     }
@@ -8944,11 +8982,11 @@ TooltipComponent.item = forwardRef16(function Item({
 });
 TooltipComponent.divider = forwardRef16(function DividerComponent(props, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsx23(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
+  return /* @__PURE__ */ jsx24(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
 });
 TooltipComponent.sectionTitle = forwardRef16(function SectionTitle({ text, ...props }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Text_default,
     {
       fontSize: 12,
@@ -8962,15 +9000,15 @@ TooltipComponent.sectionTitle = forwardRef16(function SectionTitle({ text, ...pr
     }
   );
 });
-var Tooltip2 = memo23(TooltipComponent);
+var Tooltip2 = memo24(TooltipComponent);
 Tooltip2.item = TooltipComponent.item;
 Tooltip2.divider = TooltipComponent.divider;
 Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
 var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
-import { forwardRef as forwardRef17, memo as memo24, useCallback as useCallback13, useEffect as useEffect12, useImperativeHandle as useImperativeHandle4, useMemo as useMemo10, useRef as useRef8, useState as useState11 } from "react";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback14, useEffect as useEffect13, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState12 } from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
@@ -8981,7 +9019,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const { colorTheme, componentsState } = useBetterHtmlContextInternal();
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
-  const [selectedTab, setSelectedTab] = useState11(() => {
+  const [selectedTab, setSelectedTab] = useState12(() => {
     const selectedTabValue = tabs[0] ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
@@ -8990,9 +9028,9 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     }
     return selectedTabValue;
   });
-  const [rerenderState, setRerenderState] = useState11(0);
+  const [rerenderState, setRerenderState] = useState12(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
-  const onClickTab = useCallback13(
+  const onClickTab = useCallback14(
     (tab) => {
       setSelectedTab(tab);
       onChange?.(tab);
@@ -9004,11 +9042,11 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     },
     [onChange, name, urlQuery]
   );
-  const width = useMemo10(
+  const width = useMemo11(
     () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
-  const leftSpacing = useMemo10(() => {
+  const leftSpacing = useMemo11(() => {
     const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
@@ -9016,7 +9054,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     });
     return spacing;
   }, [selectedTab, tabs, tabsGap]);
-  useEffect12(() => {
+  useEffect13(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -9025,7 +9063,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
       clearTimeout(timeout);
     };
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -9046,13 +9084,13 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
       }
     });
   }, [selectedTab, name]);
-  useEffect12(() => {
+  useEffect13(() => {
     tabsRef.current[selectedTab]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTab]);
-  useEffect12(() => {
+  useEffect13(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
@@ -9069,11 +9107,11 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ jsxs20(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ jsxs20(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
-      /* @__PURE__ */ jsx24(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+  return /* @__PURE__ */ jsxs21(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ jsxs21(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+      /* @__PURE__ */ jsx25(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
-        return /* @__PURE__ */ jsxs20(
+        return /* @__PURE__ */ jsxs21(
           Div_default,
           {
             position: "relative",
@@ -9094,7 +9132,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
               tabsRef.current[tab] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx24(
+              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx25(
                 Div_default,
                 {
                   position: "absolute",
@@ -9107,7 +9145,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
                   transition: theme2.styles.transition
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 Text_default,
                 {
                   fontWeight: 700,
@@ -9122,7 +9160,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
           tab
         );
       }) }),
-      style !== "box" && /* @__PURE__ */ jsx24(
+      style !== "box" && /* @__PURE__ */ jsx25(
         Div_default,
         {
           position: "absolute",
@@ -9135,16 +9173,16 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
         }
       )
     ] }),
-    children && /* @__PURE__ */ jsx24(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ jsx25(Div_default, { width: "100%", children })
   ] });
 });
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
-  const thisTabGroupData = useMemo10(
+  const thisTabGroupData = useMemo11(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
@@ -9153,15 +9191,15 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
       );
     }
   }, [tabWithDot]);
-  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ jsx24(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ jsx25(Div_default, { width: "100%", children }) : void 0;
 };
-var Tabs2 = memo24(TabsComponent);
+var Tabs2 = memo25(TabsComponent);
 Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-import { forwardRef as forwardRef18, memo as memo25, useCallback as useCallback14, useEffect as useEffect13, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState12 } from "react";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { forwardRef as forwardRef18, memo as memo26, useCallback as useCallback15, useEffect as useEffect14, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState13 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = forwardRef18(function Foldable({
@@ -9181,21 +9219,21 @@ var FoldableComponent = forwardRef18(function Foldable({
   const theme2 = useTheme();
   const bodyRef = useRef9(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
-  const [bodyVirtualHeight, setBodyVirtualHeight] = useState12();
+  const [bodyVirtualHeight, setBodyVirtualHeight] = useState13();
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = useCallback14(() => {
+  const open = useCallback15(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = useCallback14(() => {
+  const close = useCallback15(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = useCallback14(() => {
+  const toggleOpen = useCallback15(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!bodyRef.current) return;
     const body = bodyRef.current;
     setBodyVirtualHeight(body.scrollHeight * 2);
@@ -9206,7 +9244,7 @@ var FoldableComponent = forwardRef18(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isOpen) return;
     if (!bodyRef.current) return;
     const observer = new ResizeObserver(() => {
@@ -9230,8 +9268,8 @@ var FoldableComponent = forwardRef18(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ jsxs21(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs22(
       Div_default.row,
       {
         width: "100%",
@@ -9243,15 +9281,15 @@ var FoldableComponent = forwardRef18(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ jsxs21(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
-            icon && /* @__PURE__ */ jsx25(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
-            image && /* @__PURE__ */ jsx25(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ jsxs21(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ jsx25(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
-              description && /* @__PURE__ */ jsx25(Text_default, { color: theme2.colors.textSecondary, children: description })
+          /* @__PURE__ */ jsxs22(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+            icon && /* @__PURE__ */ jsx26(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+            image && /* @__PURE__ */ jsx26(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
+            /* @__PURE__ */ jsxs22(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ jsx26(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
+              description && /* @__PURE__ */ jsx26(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })
           ] }),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             Icon_default,
             {
               name: "chevronDown",
@@ -9262,8 +9300,8 @@ var FoldableComponent = forwardRef18(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ jsx25(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx25(Divider_default.horizontal, {}) }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx26(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ jsx26(
       Div_default,
       {
         maxHeight: isOpen ? bodyVirtualHeight : 0,
@@ -9272,14 +9310,14 @@ var FoldableComponent = forwardRef18(function Foldable({
         overflow: !isOpen ? "hidden" : void 0,
         pointerEvents: !isOpen ? "none" : void 0,
         ref: bodyRef,
-        children: /* @__PURE__ */ jsx25(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ jsx26(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
 FoldableComponent.box = forwardRef18(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     FoldableComponent,
     {
       backgroundColor: theme2.colors.backgroundContent,
@@ -9292,14 +9330,14 @@ FoldableComponent.box = forwardRef18(function Box3({ ...props }, ref) {
     }
   );
 });
-var Foldable2 = memo25(FoldableComponent);
+var Foldable2 = memo26(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
 // src/components/SideMenu.tsx
-import { memo as memo26, useCallback as useCallback15, useEffect as useEffect14, useMemo as useMemo11 } from "react";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
-var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
+import { memo as memo27, useCallback as useCallback16, useEffect as useEffect15, useMemo as useMemo12 } from "react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundColor, onClick }) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
     throw new Error(
@@ -9312,13 +9350,14 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
   const location = reactRouterDomPluginConfig.useLocation();
   const { colorTheme, components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const [isOpened, setIsOpened] = useBooleanState();
-  const onClickElement = useCallback15(() => {
+  const onClickElement = useCallback16(() => {
     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;
@@ -9326,13 +9365,13 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
   const lineHeight = 20;
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
-  const content = /* @__PURE__ */ jsxs22(
+  const content = /* @__PURE__ */ jsxs23(
     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,
@@ -9343,8 +9382,8 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
       opacity: item.disabled ? 0.6 : void 0,
       onClick: item.children ? setIsOpened.toggle : onClickElement,
       children: [
-        /* @__PURE__ */ jsx26(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+        /* @__PURE__ */ jsx27(
           Text_default,
           {
             flex: 1,
@@ -9355,7 +9394,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
             children: item.text
           }
         ),
-        item.children && /* @__PURE__ */ jsx26(
+        item.children && /* @__PURE__ */ jsx27(
           Icon_default,
           {
             name: "chevronDown",
@@ -9368,7 +9407,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
       ]
     }
   );
-  useEffect14(() => {
+  useEffect15(() => {
     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
@@ -9376,9 +9415,9 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
     setIsOpened.setState(toBeOpened);
   }, [item]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  return /* @__PURE__ */ jsxs22(Div_default, { width: "100%", children: [
-    item.href ? /* @__PURE__ */ jsx26(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
-    item.children && /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(Div_default, { width: "100%", children: [
+    item.href ? /* @__PURE__ */ jsx27(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
+    item.children && /* @__PURE__ */ jsxs23(
       Div_default.column,
       {
         position: "relative",
@@ -9389,8 +9428,16 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
         overflow: "hidden",
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
-          item.children.map((child) => /* @__PURE__ */ jsx26(MenuItemComponent2, { item: child, onClick }, child.text)),
-          /* @__PURE__ */ jsxs22(
+          item.children.map((child) => /* @__PURE__ */ jsx27(
+            MenuItemComponent2,
+            {
+              item: child,
+              backgroundColor: readyBackgroundColor,
+              onClick
+            },
+            child.text
+          )),
+          /* @__PURE__ */ jsxs23(
             Div_default,
             {
               position: "absolute",
@@ -9399,7 +9446,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
               left: paddingLeft + iconSize / 2,
               zIndex: -1,
               children: [
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(
                   Div_default,
                   {
                     position: "relative",
@@ -9409,7 +9456,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
                     zIndex: 1
                   }
                 ),
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(
                   Div_default,
                   {
                     position: "absolute",
@@ -9419,9 +9466,9 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
                     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)"
                   }
                 )
@@ -9443,23 +9490,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 = useCallback15(() => {
+  const onClickXButton = useCallback16(() => {
     setSideMenuIsOpenMobile.setFalse();
   }, []);
-  const readyItems = useMemo11(() => items.filter((item) => !item.hidden), [items]);
-  const readyBottomItems = useMemo11(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
+  const readyItems = useMemo12(() => items.filter((item) => !item.hidden), [items]);
+  const readyBottomItems = useMemo12(() => 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__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Div_default.column,
     {
       position: "fixed",
@@ -9467,7 +9516,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,
@@ -9475,9 +9524,9 @@ var SideMenuComponent = function SideMenu({
       userSelect: "none",
       zIndex: 10,
       children: [
-        /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs22(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
-            (logoAssetName || logoUrl) && /* @__PURE__ */ jsx26(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs23(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs23(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
+            (logoAssetName || logoUrl) && /* @__PURE__ */ jsx27(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs23(
               Div_default.row,
               {
                 alignItems: "center",
@@ -9486,7 +9535,7 @@ var SideMenuComponent = function SideMenu({
                 whiteSpace: "nowrap",
                 gap: theme2.styles.gap,
                 children: [
-                  /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(
                     Image_default,
                     {
                       name: logoAssetName,
@@ -9496,7 +9545,7 @@ var SideMenuComponent = function SideMenu({
                       objectFit: "contain"
                     }
                   ),
-                  logoText && /* @__PURE__ */ jsx26(
+                  logoText && /* @__PURE__ */ jsx27(
                     Text_default,
                     {
                       fontFamily: logoFontFamily,
@@ -9511,9 +9560,9 @@ var SideMenuComponent = function SideMenu({
                 ]
               }
             ) }),
-            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx26(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx27(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Div_default.column,
             {
               width: "100%",
@@ -9521,10 +9570,18 @@ var SideMenuComponent = function SideMenu({
               overflowY: "auto",
               paddingInline: theme2.styles.space,
               paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
-              children: /* @__PURE__ */ jsx26(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx26(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) })
+              children: /* @__PURE__ */ jsx27(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx27(
+                MenuItemComponent,
+                {
+                  item,
+                  backgroundColor: readyBackgroundColor,
+                  onClick: onClickXButton
+                },
+                item.text
+              )) })
             }
           ),
-          readyBottomItems && /* @__PURE__ */ jsx26(
+          readyBottomItems && /* @__PURE__ */ jsx27(
             Div_default.column,
             {
               borderTop: mediaQuery.size1000 ? `solid 1px ${theme2.colors.border}` : void 0,
@@ -9533,29 +9590,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__ */ jsx26(MenuItemComponent, { item, onClick: onClickXButton }, item.text))
+              children: readyBottomItems.map((item) => /* @__PURE__ */ jsx27(
+                MenuItemComponent,
+                {
+                  item,
+                  backgroundColor: readyBackgroundColor,
+                  onClick: onClickXButton
+                },
+                item.text
+              ))
             }
           ),
-          isCollapsable && /* @__PURE__ */ jsx26(
+          isCollapsable && /* @__PURE__ */ jsx27(
             Div_default,
             {
               borderTop: `solid 1px ${theme2.colors.border}`,
               marginTop: !readyBottomItems ? "auto" : void 0,
               paddingInline: theme2.styles.space,
               paddingBlock: theme2.styles.space,
-              children: /* @__PURE__ */ jsx26(
+              children: /* @__PURE__ */ jsx27(
                 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__ */ jsx26(
+                  children: /* @__PURE__ */ jsx27(
                     Icon_default,
                     {
                       name: "chevronRight",
@@ -9570,13 +9635,13 @@ var SideMenuComponent = function SideMenu({
             }
           )
         ] }),
-        widthMobileHandle && /* @__PURE__ */ jsx26(
+        widthMobileHandle && /* @__PURE__ */ jsx27(
           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,
@@ -9590,7 +9655,7 @@ var SideMenuComponent = function SideMenu({
             transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
             transition: theme2.styles.transition,
             onClick: setSideMenuIsOpenMobile.toggle,
-            children: /* @__PURE__ */ jsx26(
+            children: /* @__PURE__ */ jsx27(
               Icon_default,
               {
                 name: "chevronRight",
@@ -9611,8 +9676,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__ */ jsxs22(
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
+  return /* @__PURE__ */ jsxs23(
     Div_default,
     {
       position: "relative",
@@ -9621,7 +9686,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
       transition: theme2.styles.transition,
       children: [
         outsideComponent,
-        /* @__PURE__ */ jsx26(PageHolder_default, { ...props })
+        /* @__PURE__ */ jsx27(PageHolder_default, { ...props })
       ]
     }
   );
@@ -9631,7 +9696,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = useBooleanState();
   const width = 2;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Div_default,
     {
       position: "relative",
@@ -9643,7 +9708,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
       onMouseOut: setIsHovered.setFalse,
       onClick: setSideMenuIsOpenMobile.toggle,
       children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           Div_default,
           {
             position: "absolute",
@@ -9657,7 +9722,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           Div_default,
           {
             position: "absolute",
@@ -9672,7 +9737,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           Div_default,
           {
             position: "absolute",
@@ -9690,7 +9755,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
     }
   );
 };
-var SideMenu2 = memo26(SideMenuComponent);
+var SideMenu2 = memo27(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
 SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
@@ -9778,6 +9843,7 @@ export {
   Modal_default as Modal,
   PageHeader_default as PageHeader,
   PageHolder_default as PageHolder,
+  Pagination_default as Pagination,
   SideMenu_default as SideMenu,
   Table_default as Table,
   Tabs_default as Tabs,