react-better-html 1.1.192 → 1.1.194

package/dist/index.mjs

@@ -9,7 +9,6 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
-import { createSearchParams } from "react-router-dom";
 
 // src/constants/css.ts
 var cssProps = {
@@ -1548,12 +1547,13 @@ var alertsPlugin = (options) => ({
 });
 
 // src/plugins/reactRouterDom.ts
-import { useInRouterContext, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { createSearchParams, useInRouterContext, useLocation, useNavigate, useSearchParams } from "react-router-dom";
 var defaultReactRouterDomPluginOptions = {
   useNavigate,
   useLocation,
   useInRouterContext,
-  useSearchParams
+  useSearchParams,
+  createSearchParams
 };
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
@@ -3113,6 +3113,7 @@ function useUrlQuery() {
   }
   const navigate = reactRouterDomPluginConfig.useNavigate();
   const [searchParams] = reactRouterDomPluginConfig.useSearchParams();
+  const createSearchParams2 = reactRouterDomPluginConfig.createSearchParams;
   const setQuery = useCallback4(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3121,7 +3122,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: createSearchParams({
+          search: createSearchParams2({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -3194,7 +3195,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
   imageUrl,
   imageSize = 60,
   title,
-  titleAs,
+  titleAs = "h1",
   titleColor,
   titleRightElement,
   description,
@@ -3233,7 +3234,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
                     /* @__PURE__ */ jsx10(
                       Text_default,
                       {
-                        as: titleAs ?? "h1",
+                        as: titleAs,
                         textAlign,
                         color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
                         children: title
@@ -7705,17 +7706,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 +8003,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 +8018,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 +8049,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 +8089,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 +8099,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 +8122,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 +8145,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 +8163,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 +8171,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 +8256,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 +8264,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 +8293,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 +8332,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 +8354,7 @@ var TableComponent = forwardRef15(function Table({
       })
     );
   }, [memoizeFilters, name, filterData]);
-  useEffect10(() => {
+  useEffect11(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
   useImperativeHandle2(
@@ -8276,8 +8371,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 +8380,7 @@ var TableComponent = forwardRef15(function Table({
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         ref: wrapperComponentRef,
-        children: /* @__PURE__ */ jsxs18(
+        children: /* @__PURE__ */ jsxs19(
           TableStyledComponent,
           {
             isStriped,
@@ -8296,14 +8391,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 +8406,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 +8429,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 +8449,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 +8460,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 +8475,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 +8494,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 +8522,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 +8544,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 +8560,7 @@ var TableComponent = forwardRef15(function Table({
                   onClick: onClickSelectAllFilterListItems
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 Button_default.secondary,
                 {
                   text: "Deselect All",
@@ -8534,7 +8573,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 +8581,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 +8609,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 +8727,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 +8738,7 @@ var Arrow = memo23(function Arrow2(props) {
     [props, theme2]
   );
   const borderWidth = 1;
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Div_default,
     {
       position: "absolute",
@@ -8707,7 +8746,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 +8782,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 +8812,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 +8832,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 +8842,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
       return () => {
@@ -8822,7 +8861,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [isOpen, openTooltip, closeTooltip]
   );
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Div_default,
     {
       position: "relative",
@@ -8832,7 +8871,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           Div_default,
           {
             width: childrenWrapperWidth,
@@ -8842,7 +8881,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
             children
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           TooltipContainer,
           {
             theme: theme2,
@@ -8854,8 +8893,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 +8908,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
                   children: content
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 Div_default,
                 {
                   position: "absolute",
@@ -8883,7 +8922,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
                   borderTopRightRadius: 999
                 }
               ),
-              withArrow && /* @__PURE__ */ jsx23(
+              withArrow && /* @__PURE__ */ jsx24(
                 Arrow,
                 {
                   position,
@@ -8915,7 +8954,7 @@ TooltipComponent.item = forwardRef16(function Item({
   onClickWithValue
 }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Div_default.row,
     {
       alignItems: "center",
@@ -8933,10 +8972,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 +8983,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 +9001,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 +9020,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 +9029,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 +9043,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 +9055,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 +9064,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 +9085,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 +9108,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 +9133,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 +9146,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
                   transition: theme2.styles.transition
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 Text_default,
                 {
                   fontWeight: 700,
@@ -9122,7 +9161,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 +9174,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,22 +9192,27 @@ 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({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
+  titleAs = "h3",
+  titleColor,
+  titleRightElement,
   description,
+  descriptionColor,
+  rightElement,
   icon,
   image,
   headerPaddingBlock,
@@ -9181,21 +9225,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 +9250,7 @@ var FoldableComponent = forwardRef18(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isOpen) return;
     if (!bodyRef.current) return;
     const observer = new ResizeObserver(() => {
@@ -9230,28 +9274,41 @@ 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%",
         alignItems: "center",
-        gap: theme2.styles.gap,
+        gap: theme2.styles.space,
         paddingBlock: headerPaddingBlock ?? theme2.styles.gap,
         paddingInline: headerPaddingInline,
         cursor: "pointer",
         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__ */ jsxs22(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
+                /* @__PURE__ */ jsx26(
+                  Text_default,
+                  {
+                    as: titleAs,
+                    fontWeight: 700,
+                    lineHeight: "20px",
+                    color: titleColor ?? theme2.colors.textPrimary,
+                    children: title
+                  }
+                ),
+                titleRightElement
+              ] }),
+              description && /* @__PURE__ */ jsx26(Text_default, { color: descriptionColor ?? theme2.colors.textSecondary, children: description })
             ] })
           ] }),
-          /* @__PURE__ */ jsx25(
+          rightElement,
+          /* @__PURE__ */ jsx26(
             Icon_default,
             {
               name: "chevronDown",
@@ -9262,8 +9319,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 +9329,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 +9349,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, backgroundColor, 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,7 +9369,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
   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);
@@ -9327,7 +9384,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
   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",
@@ -9344,8 +9401,8 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
       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,
@@ -9356,7 +9413,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
             children: item.text
           }
         ),
-        item.children && /* @__PURE__ */ jsx26(
+        item.children && /* @__PURE__ */ jsx27(
           Icon_default,
           {
             name: "chevronDown",
@@ -9369,7 +9426,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
       ]
     }
   );
-  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
@@ -9377,9 +9434,9 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
     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",
@@ -9390,7 +9447,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
         overflow: "hidden",
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
-          item.children.map((child) => /* @__PURE__ */ jsx26(
+          item.children.map((child) => /* @__PURE__ */ jsx27(
             MenuItemComponent2,
             {
               item: child,
@@ -9399,7 +9456,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
             },
             child.text
           )),
-          /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsxs23(
             Div_default,
             {
               position: "absolute",
@@ -9408,7 +9465,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
               left: paddingLeft + iconSize / 2,
               zIndex: -1,
               children: [
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(
                   Div_default,
                   {
                     position: "relative",
@@ -9418,7 +9475,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundCol
                     zIndex: 1
                   }
                 ),
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(
                   Div_default,
                   {
                     position: "absolute",
@@ -9458,11 +9515,11 @@ var SideMenuComponent = function SideMenu({
   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";
@@ -9470,7 +9527,7 @@ var SideMenuComponent = function SideMenu({
   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",
@@ -9486,9 +9543,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",
@@ -9497,7 +9554,7 @@ var SideMenuComponent = function SideMenu({
                 whiteSpace: "nowrap",
                 gap: theme2.styles.gap,
                 children: [
-                  /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(
                     Image_default,
                     {
                       name: logoAssetName,
@@ -9507,7 +9564,7 @@ var SideMenuComponent = function SideMenu({
                       objectFit: "contain"
                     }
                   ),
-                  logoText && /* @__PURE__ */ jsx26(
+                  logoText && /* @__PURE__ */ jsx27(
                     Text_default,
                     {
                       fontFamily: logoFontFamily,
@@ -9522,9 +9579,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%",
@@ -9532,7 +9589,7 @@ 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(
+              children: /* @__PURE__ */ jsx27(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx27(
                 MenuItemComponent,
                 {
                   item,
@@ -9543,7 +9600,7 @@ var SideMenuComponent = function SideMenu({
               )) })
             }
           ),
-          readyBottomItems && /* @__PURE__ */ jsx26(
+          readyBottomItems && /* @__PURE__ */ jsx27(
             Div_default.column,
             {
               borderTop: mediaQuery.size1000 ? `solid 1px ${theme2.colors.border}` : void 0,
@@ -9552,7 +9609,7 @@ 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(
+              children: readyBottomItems.map((item) => /* @__PURE__ */ jsx27(
                 MenuItemComponent,
                 {
                   item,
@@ -9563,14 +9620,14 @@ var SideMenuComponent = function SideMenu({
               ))
             }
           ),
-          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",
@@ -9582,7 +9639,7 @@ var SideMenuComponent = function SideMenu({
                   isTabAccessed: true,
                   paddingBlock: theme2.styles.gap,
                   onClick: setSideMenuIsCollapsed.toggle,
-                  children: /* @__PURE__ */ jsx26(
+                  children: /* @__PURE__ */ jsx27(
                     Icon_default,
                     {
                       name: "chevronRight",
@@ -9597,7 +9654,7 @@ var SideMenuComponent = function SideMenu({
             }
           )
         ] }),
-        widthMobileHandle && /* @__PURE__ */ jsx26(
+        widthMobileHandle && /* @__PURE__ */ jsx27(
           Div_default.row,
           {
             position: "absolute",
@@ -9617,7 +9674,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",
@@ -9639,7 +9696,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Div_default,
     {
       position: "relative",
@@ -9648,7 +9705,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
       transition: theme2.styles.transition,
       children: [
         outsideComponent,
-        /* @__PURE__ */ jsx26(PageHolder_default, { ...props })
+        /* @__PURE__ */ jsx27(PageHolder_default, { ...props })
       ]
     }
   );
@@ -9658,7 +9715,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",
@@ -9670,7 +9727,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
       onMouseOut: setIsHovered.setFalse,
       onClick: setSideMenuIsOpenMobile.toggle,
       children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           Div_default,
           {
             position: "absolute",
@@ -9684,7 +9741,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           Div_default,
           {
             position: "absolute",
@@ -9699,7 +9756,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           Div_default,
           {
             position: "absolute",
@@ -9717,7 +9774,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;
@@ -9805,6 +9862,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,