react-better-html 1.1.192 → 1.1.194

package/dist/index.js

@@ -48,6 +48,7 @@ __export(index_exports, {
   Modal: () => Modal_default,
   PageHeader: () => PageHeader_default,
   PageHolder: () => PageHolder_default,
+  Pagination: () => Pagination_default,
   SideMenu: () => SideMenu_default,
   Table: () => Table_default,
   Tabs: () => Tabs_default,
@@ -105,7 +106,6 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 var import_react10 = require("react");
-var import_react_router_dom2 = require("react-router-dom");
 
 // src/constants/css.ts
 var cssProps = {
@@ -1649,7 +1649,8 @@ var defaultReactRouterDomPluginOptions = {
   useNavigate: import_react_router_dom.useNavigate,
   useLocation: import_react_router_dom.useLocation,
   useInRouterContext: import_react_router_dom.useInRouterContext,
-  useSearchParams: import_react_router_dom.useSearchParams
+  useSearchParams: import_react_router_dom.useSearchParams,
+  createSearchParams: import_react_router_dom.createSearchParams
 };
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
@@ -3209,6 +3210,7 @@ function useUrlQuery() {
   }
   const navigate = reactRouterDomPluginConfig.useNavigate();
   const [searchParams] = reactRouterDomPluginConfig.useSearchParams();
+  const createSearchParams2 = reactRouterDomPluginConfig.createSearchParams;
   const setQuery = (0, import_react10.useCallback)(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3217,7 +3219,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: (0, import_react_router_dom2.createSearchParams)({
+          search: createSearchParams2({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -3290,7 +3292,7 @@ var PageHeaderComponent = (0, import_react12.forwardRef)(function PageHeader({
   imageUrl,
   imageSize = 60,
   title,
-  titleAs,
+  titleAs = "h1",
   titleColor,
   titleRightElement,
   description,
@@ -3329,7 +3331,7 @@ var PageHeaderComponent = (0, import_react12.forwardRef)(function PageHeader({
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       Text_default,
                       {
-                        as: titleAs ?? "h1",
+                        as: titleAs,
                         textAlign,
                         color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
                         children: title
@@ -7799,9 +7801,124 @@ ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
+
+// src/components/Pagination.tsx
+var import_react25 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var PaginationComponent = function Pagination({
+  currentPage = 1,
+  itemsLength = 0,
+  itemsPerPage,
+  pageCount,
+  maximumVisiblePages: maximumVisiblePages2 = 11,
+  onClickPreviousPage,
+  onClickNextPage,
+  onChangePage
+}) {
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const [currentPageInternal, setCurrentPage] = (0, import_react25.useState)(currentPage);
+  const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
+  const onClickPreviousPageElement = (0, import_react25.useCallback)(() => {
+    const newPage = currentPageInternal <= 1 ? 1 : currentPageInternal - 1;
+    setCurrentPage(newPage);
+    onClickPreviousPage?.(newPage);
+  }, [currentPageInternal, onClickPreviousPage]);
+  const onClickNextPageElement = (0, import_react25.useCallback)(() => {
+    const newPage = currentPageInternal >= pageCountInternal ? pageCountInternal : currentPageInternal + 1;
+    setCurrentPage(newPage);
+    onClickNextPage?.(newPage);
+  }, [currentPageInternal, pageCountInternal, onClickNextPage]);
+  const paginationItems = (0, import_react25.useMemo)(() => {
+    const halfRange = Math.floor(maximumVisiblePages2 / 2);
+    let startPage = Math.max(1, currentPageInternal - halfRange);
+    let endPage = Math.min(pageCountInternal, currentPageInternal + halfRange);
+    if (endPage - startPage + 1 < maximumVisiblePages2) {
+      startPage = Math.max(1, endPage - maximumVisiblePages2 + 1);
+      endPage = Math.min(pageCountInternal, startPage + maximumVisiblePages2 - 1);
+    }
+    return Array.from(
+      {
+        length: endPage - startPage + 1
+      },
+      (_, index) => startPage + index
+    );
+  }, [pageCountInternal, currentPageInternal]);
+  (0, import_react25.useEffect)(() => {
+    onChangePage?.(currentPageInternal);
+  }, [currentPageInternal, onChangePage]);
+  (0, import_react25.useEffect)(() => {
+    setCurrentPage(currentPage);
+  }, [currentPage]);
+  const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Button_default.icon,
+      {
+        icon: "doubleChevronLeft",
+        disabled: currentPageInternal === 1,
+        value: 1,
+        onClickWithValue: setCurrentPage
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button_default.icon, { icon: "chevronLeft", disabled: currentPageInternal === 1, onClick: onClickPreviousPageElement }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Div_default.row,
+      {
+        alignItems: "center",
+        justifyContent: "center",
+        flexWrap: mobileFooterBreakingPoint ? "wrap" : void 0,
+        gap: theme2.styles.gap,
+        children: paginationItems.map((pageIndex) => {
+          const isActive = currentPageInternal === pageIndex;
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            Div_default,
+            {
+              cursor: "pointer",
+              userSelect: "none",
+              value: pageIndex,
+              onClickWithValue: setCurrentPage,
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                Text_default,
+                {
+                  fontWeight: isActive ? 700 : 400,
+                  color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
+                  transition: theme2.styles.transition,
+                  children: pageIndex
+                }
+              )
+            },
+            pageIndex
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Button_default.icon,
+      {
+        icon: "chevronRight",
+        disabled: currentPageInternal === pageCountInternal,
+        onClick: onClickNextPageElement
+      }
+    ),
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Button_default.icon,
+      {
+        icon: "doubleChevronRight",
+        disabled: currentPageInternal === pageCountInternal,
+        onClickWithValue: setCurrentPage,
+        value: pageCountInternal
+      }
+    )
+  ] });
+};
+var Pagination2 = (0, import_react25.memo)(PaginationComponent);
+var Pagination_default = Pagination2;
+
+// src/components/Table.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = import_styled_components13.default.table.withConfig({
@@ -7946,7 +8063,7 @@ var filterPresetsText = {
   nextMonth: "Next month",
   nextYear: "Next year"
 };
-var TableComponent = (0, import_react25.forwardRef)(function Table({
+var TableComponent = (0, import_react26.forwardRef)(function Table({
   name,
   columns,
   data,
@@ -7972,14 +8089,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const { colorTheme } = useBetterHtmlContextInternal();
-  const filterModalRef = (0, import_react25.useRef)(null);
-  const readyColumns = (0, import_react25.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
-  const columnsRef = (0, import_react25.useRef)(readyColumns);
+  const filterModalRef = (0, import_react26.useRef)(null);
+  const readyColumns = (0, import_react26.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
+  const columnsRef = (0, import_react26.useRef)(readyColumns);
   columnsRef.current = readyColumns;
-  const [checkedItems, setCheckedItems] = (0, import_react25.useState)([]);
-  const [expandedRows, setExpandedRows] = (0, import_react25.useState)([]);
-  const [currentPage, setCurrentPage] = (0, import_react25.useState)(1);
-  const [filterData, setFilterData] = (0, import_react25.useState)(() => {
+  const [checkedItems, setCheckedItems] = (0, import_react26.useState)([]);
+  const [expandedRows, setExpandedRows] = (0, import_react26.useState)([]);
+  const [currentPage, setCurrentPage] = (0, import_react26.useState)(1);
+  const [filterData, setFilterData] = (0, import_react26.useState)(() => {
     if (!memoizeFilters || !name) return {};
     const localStorageData = JSON.parse(localStorage.getItem(`react-better-html-table-filters-${name}`) || "{}");
     const timestamp = localStorageData.timestamp;
@@ -7988,8 +8105,8 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     if (timeDiff > memoizeFiltersLifespan) return {};
     return data2;
   });
-  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react25.useState)();
-  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react25.useState)();
+  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react26.useState)();
+  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react26.useState)();
   const openedFilterData = openedFilterColumnIndex !== void 0 ? filterData[openedFilterColumnIndex] : void 0;
   const openedFilterColumn = openedFilterColumnIndex !== void 0 ? readyColumns[openedFilterColumnIndex] : void 0;
   const filterForm = useForm({
@@ -8019,26 +8136,26 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
       filterModalRef.current?.close();
     }
   });
-  const expandColumn = (0, import_react25.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
-  const renderCellContent = (0, import_react25.useCallback)(
+  const expandColumn = (0, import_react26.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
+  const renderCellContent = (0, import_react26.useCallback)(
     (column, item, itemIndex) => {
       switch (column.type) {
         case "text": {
           const value = column.keyName ? item[column.keyName] : void 0;
           const textProps = (typeof column.getTextProps === "function" ? column.getTextProps?.(item, itemIndex) : column.getTextProps) ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
         }
         case "element": {
-          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
+          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
         }
         case "image": {
           const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
         }
         case "checkbox": {
           const { onChange, ...toggleInputProps } = (typeof column.getToggleInputProps === "function" ? column.getToggleInputProps?.(item, itemIndex) : column.getToggleInputProps) ?? {};
           const checkedValue = checkedItems[itemIndex];
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
@@ -8059,7 +8176,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
           );
         }
         case "expand": {
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Icon_default,
             {
               name: "chevronDown",
@@ -8069,13 +8186,13 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
           ) });
         }
         default: {
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
         }
       }
     },
     [theme2, checkedItems, expandedRows]
   );
-  const onClickRowElement = (0, import_react25.useCallback)(
+  const onClickRowElement = (0, import_react26.useCallback)(
     (item, index) => {
       if (expandColumn) {
         setExpandedRows((oldValue) => {
@@ -8092,14 +8209,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [onClickRow, expandColumn]
   );
-  const onClickAllCheckboxesElement = (0, import_react25.useCallback)(
+  const onClickAllCheckboxesElement = (0, import_react26.useCallback)(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const onClickFilterButton = (0, import_react25.useCallback)(
+  const onClickFilterButton = (0, import_react26.useCallback)(
     (columnIndex) => {
       const thisFilterData = filterData[columnIndex];
       if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
@@ -8115,12 +8232,12 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [filterData]
   );
-  const onCloseFilterModal = (0, import_react25.useCallback)(() => {
+  const onCloseFilterModal = (0, import_react26.useCallback)(() => {
     setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
     setFilterListSelectedItems(void 0);
     filterForm.reset();
   }, []);
-  const onClickCancelFormFilter = (0, import_react25.useCallback)(() => {
+  const onClickCancelFormFilter = (0, import_react26.useCallback)(() => {
     if (openedFilterColumnIndex === void 0) return;
     setFilterData(
       (oldValue) => Object.entries({
@@ -8133,7 +8250,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     );
     filterModalRef.current?.close();
   }, [openedFilterColumnIndex]);
-  const onClickFilterListItem = (0, import_react25.useCallback)(
+  const onClickFilterListItem = (0, import_react26.useCallback)(
     (value) => setFilterListSelectedItems((oldValue) => {
       if (!oldValue) return [value];
       if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
@@ -8141,7 +8258,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     }),
     []
   );
-  const onClickFilterPreset = (0, import_react25.useCallback)(
+  const onClickFilterPreset = (0, import_react26.useCallback)(
     (preset) => {
       const getValueForDate = (date) => {
         if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
@@ -8226,7 +8343,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [openedFilterColumn]
   );
-  const renderExpandedRow = (0, import_react25.useCallback)(
+  const renderExpandedRow = (0, import_react26.useCallback)(
     (...props2) => {
       const expandColumn2 = readyColumns.find((column) => column.type === "expand");
       if (!expandColumn2) return;
@@ -8234,7 +8351,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [readyColumns]
   );
-  const dataAfterFilter = (0, import_react25.useMemo)(
+  const dataAfterFilter = (0, import_react26.useMemo)(
     () => data.filter(
       (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
         if (!filter) return true;
@@ -8263,17 +8380,17 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     ),
     [data, filterData]
   );
-  const dataAfterPagination = (0, import_react25.useMemo)(() => {
+  const dataAfterPagination = (0, import_react26.useMemo)(() => {
     if (pageSize === void 0) return dataAfterFilter;
     if (pageCount !== void 0) return dataAfterFilter;
     const pageStartItemIndex = (currentPage - 1) * (pageSize ?? 0);
     const pageEndItemIndex = pageStartItemIndex + (pageSize ?? 0);
     return dataAfterFilter.slice(pageStartItemIndex, pageEndItemIndex);
   }, [dataAfterFilter, pageSize, currentPage, pageCount]);
-  const everythingIsChecked = (0, import_react25.useMemo)(() => {
+  const everythingIsChecked = (0, import_react26.useMemo)(() => {
     return data.length > 0 && checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  const possibleFilterListValues = (0, import_react25.useMemo)(() => {
+  const possibleFilterListValues = (0, import_react26.useMemo)(() => {
     if (!openedFilterColumn) return [];
     return data.reduce((previousValue, currentValue) => {
       const valueFromList = openedFilterColumn.filter === "list" && openedFilterColumn.getValueForList ? openedFilterColumn.getValueForList(currentValue) : void 0;
@@ -8302,39 +8419,18 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     }, []);
   }, [data, openedFilterColumn, filterForm.values.search]);
   const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
-  const paginationItems = (0, import_react25.useMemo)(() => {
-    const halfRange = Math.floor(maximumVisiblePages / 2);
-    let startPage = Math.max(1, currentPage - halfRange);
-    let endPage = Math.min(pageCountInternal, currentPage + halfRange);
-    if (endPage - startPage + 1 < maximumVisiblePages) {
-      startPage = Math.max(1, endPage - maximumVisiblePages + 1);
-      endPage = Math.min(pageCountInternal, startPage + maximumVisiblePages - 1);
-    }
-    return Array.from(
-      {
-        length: endPage - startPage + 1
-      },
-      (_, index) => startPage + index
-    );
-  }, [pageCountInternal, currentPage]);
-  const onClickNextPage = (0, import_react25.useCallback)(() => {
-    setCurrentPage((oldValue) => oldValue >= pageCountInternal ? pageCountInternal : oldValue + 1);
-  }, [pageCountInternal]);
-  const onClickPreviousPage = (0, import_react25.useCallback)(() => {
-    setCurrentPage((oldValue) => oldValue <= 1 ? 1 : oldValue - 1);
-  }, []);
-  const onClickSelectAllFilterListItems = (0, import_react25.useCallback)(
+  const onClickSelectAllFilterListItems = (0, import_react26.useCallback)(
     () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
     [possibleFilterListValues]
   );
-  const onClickDeselectAllFilterListItems = (0, import_react25.useCallback)(() => setFilterListSelectedItems([]), []);
-  (0, import_react25.useEffect)(() => {
+  const onClickDeselectAllFilterListItems = (0, import_react26.useCallback)(() => setFilterListSelectedItems([]), []);
+  (0, import_react26.useEffect)(() => {
     onChangePage?.(currentPage);
   }, [onChangePage, currentPage]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     onChangeFilter?.(filterData);
   }, [onChangeFilter, filterData]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!memoizeFilters) return;
     if (!name) return;
     localStorage.setItem(
@@ -8345,10 +8441,10 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
       })
     );
   }, [memoizeFilters, name, filterData]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
-  (0, import_react25.useImperativeHandle)(
+  (0, import_react26.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -8362,8 +8458,8 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   );
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Div_default,
       {
         border: `1px solid ${theme2.colors.border}`,
@@ -8371,7 +8467,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         ref: wrapperComponentRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           TableStyledComponent,
           {
             isStriped,
@@ -8382,14 +8478,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
             containsOverflowComponents,
             withFooter,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 ThStyledComponent,
                 {
                   width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.type === "expand" ? 16 : void 0),
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                     Div_default.row,
                     {
                       width: "100%",
@@ -8397,15 +8493,15 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                       justifyContent: column.filter ? "space-between" : column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
                       gap: theme2.styles.gap,
                       children: [
-                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           ToggleInput_default.checkbox,
                           {
                             checked: everythingIsChecked,
                             disabled: data.length === 0,
                             onChange: onClickAllCheckboxesElement
                           }
-                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: column.label }) : void 0,
-                        column.filter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { children: column.label }) : void 0,
+                        column.filter && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           Button_default.icon,
                           {
                             icon: "filter",
@@ -8420,14 +8516,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react25.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react26.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "tr",
                   {
                     className: isInsideTableExpandRow && onClickRow === void 0 && expandColumn === void 0 ? "withoutHover" : void 0,
                     style: getRowStyle?.(item, rowIndex),
                     onClick: () => onClickRowElement(item, rowIndex),
-                    children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       TdStyledComponent,
                       {
                         textAlign: column.align,
@@ -8440,9 +8536,9 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                     ))
                   }
                 ),
-                expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
-              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
+              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              withFooter && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 Div_default.column,
                 {
                   position: "relative",
@@ -8451,7 +8547,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                   flexReverse: true,
                   gap: theme2.styles.gap / 2,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                       Text_default,
                       {
                         position: mobileFooterBreakingPoint ? "relative" : "absolute",
@@ -8466,73 +8562,17 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
-                      pageCountInternal > maximumVisiblePages && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Button_default.icon,
-                        {
-                          icon: "doubleChevronLeft",
-                          disabled: currentPage === 1,
-                          value: 1,
-                          onClickWithValue: setCurrentPage
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Button_default.icon,
-                        {
-                          icon: "chevronLeft",
-                          disabled: currentPage === 1,
-                          onClick: onClickPreviousPage
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Div_default.row,
-                        {
-                          alignItems: "center",
-                          justifyContent: "center",
-                          flexWrap: mobileFooterBreakingPoint ? "wrap" : void 0,
-                          gap: theme2.styles.gap,
-                          children: paginationItems.map((pageIndex) => {
-                            const isActive = currentPage === pageIndex;
-                            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                              Div_default,
-                              {
-                                cursor: "pointer",
-                                userSelect: "none",
-                                value: pageIndex,
-                                onClickWithValue: setCurrentPage,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                                  Text_default,
-                                  {
-                                    fontWeight: isActive ? 700 : 400,
-                                    color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
-                                    transition: theme2.styles.transition,
-                                    children: pageIndex
-                                  }
-                                )
-                              },
-                              pageIndex
-                            );
-                          })
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Button_default.icon,
-                        {
-                          icon: "chevronRight",
-                          disabled: currentPage === pageCountInternal,
-                          onClick: onClickNextPage
-                        }
-                      ),
-                      pageCountInternal > maximumVisiblePages && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        Button_default.icon,
-                        {
-                          icon: "doubleChevronRight",
-                          disabled: currentPage === pageCountInternal,
-                          onClickWithValue: setCurrentPage,
-                          value: pageCountInternal
-                        }
-                      )
-                    ] })
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      Pagination_default,
+                      {
+                        currentPage,
+                        itemsLength: dataAfterFilter.length,
+                        itemsPerPage: pageSize,
+                        pageCount,
+                        maximumVisiblePages,
+                        onChangePage: setCurrentPage
+                      }
+                    )
                   ]
                 }
               ) }) }) })
@@ -8541,26 +8581,26 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Modal_default,
       {
         title: `Filter ${openedFilterColumn?.label ?? ""}`,
         description: openedFilterColumn?.filter === "number" ? "Enter minimum and maximum values to filter" : openedFilterColumn?.filter === "date" || openedFilterColumn?.filter === "date-time" ? "Enter minimum and maximum dates to filter" : openedFilterColumn?.filter === "list" ? "Select values to filter from the list bellow" : "",
         onClose: onCloseFilterModal,
         ref: filterModalRef,
-        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Form_default,
           {
             form: filterForm,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(FormRow_default, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(FormRow_default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
             ] })
           }
-        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Form_default,
           {
             form: filterForm,
@@ -8569,16 +8609,16 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),
-              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Label_default, { text: "Presets" }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label_default, { text: "Presets" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   Button_default.secondary,
                   {
                     text: filterPresetsText[preset],
@@ -8591,14 +8631,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
               ] })
             ]
           }
-        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Form_default,
           {
             gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
-            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Button_default.secondary,
                 {
                   text: "Select All",
@@ -8607,7 +8647,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                   onClick: onClickSelectAllFilterListItems
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Button_default.secondary,
                 {
                   text: "Deselect All",
@@ -8620,7 +8660,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             onSubmit: filterForm.onSubmit,
             children: [
-              openedFilterColumn?.withSearch && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              openedFilterColumn?.withSearch && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 InputField_default.search,
                 {
                   label: "Search",
@@ -8628,19 +8668,19 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                   ...filterForm.getInputFieldProps("search")
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Label_default, { text: "Possible values" }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label_default, { text: "Possible values" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
-                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     Div_default.box,
                     {
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: value.label || value.value }),
-                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { children: value.label || value.value }),
+                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                           Text_default,
                           {
                             fontSize: 14,
@@ -8656,23 +8696,23 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                     },
                     value.value
                   );
-                }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: "No values" }) })
+                }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: "No values" }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, {})
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default, {})
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader_default.box, {})
+        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loader_default.box, {})
       }
     )
   ] });
 });
-var Table2 = (0, import_react25.memo)(TableComponent);
+var Table2 = (0, import_react26.memo)(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var tooltipContainerStyle = (props) => ({
   top: import_styled_components14.css`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
@@ -8774,10 +8814,10 @@ var arrowStyle = (props, borderWidth) => ({
     transform: !borderWidth && props.align === "center" ? "translateY(-50%);" : void 0
   }
 });
-var Arrow = (0, import_react26.memo)(function Arrow2(props) {
+var Arrow = (0, import_react27.memo)(function Arrow2(props) {
   const theme2 = useTheme();
   const { position, size } = props;
-  const outerProps = (0, import_react26.useMemo)(
+  const outerProps = (0, import_react27.useMemo)(
     () => ({
       ...props,
       color: theme2.colors.border
@@ -8785,7 +8825,7 @@ var Arrow = (0, import_react26.memo)(function Arrow2(props) {
     [props, theme2]
   );
   const borderWidth = 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Div_default,
     {
       position: "absolute",
@@ -8793,7 +8833,7 @@ var Arrow = (0, import_react26.memo)(function Arrow2(props) {
       height: 0,
       border: `${size}px solid transparent`,
       ...arrowStyle(outerProps)[position],
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         Div_default,
         {
           position: "absolute",
@@ -8806,7 +8846,7 @@ var Arrow = (0, import_react26.memo)(function Arrow2(props) {
     }
   );
 });
-var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
+var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
   position = "bottom",
   trigger = "hover",
   align = "center",
@@ -8825,17 +8865,17 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
   children
 }, ref) {
   const theme2 = useTheme();
-  const triggerHolderRef = (0, import_react26.useRef)(null);
-  const contentRef = (0, import_react26.useRef)(null);
-  const tooltipContainerRef = (0, import_react26.useRef)(null);
-  const closeTimerRef = (0, import_react26.useRef)(void 0);
-  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
-  const [isOpenLate, setIsOpenLate] = (0, import_react26.useState)(false);
+  const triggerHolderRef = (0, import_react27.useRef)(null);
+  const contentRef = (0, import_react27.useRef)(null);
+  const tooltipContainerRef = (0, import_react27.useRef)(null);
+  const closeTimerRef = (0, import_react27.useRef)(void 0);
+  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
+  const [isOpenLate, setIsOpenLate] = (0, import_react27.useState)(false);
   const arrowSize = withArrow ? theme2.styles.gap : 0;
   const gap = theme2.styles.gap / 2;
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
-  const openTooltip = (0, import_react26.useCallback)(() => {
+  const openTooltip = (0, import_react27.useCallback)(() => {
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
     setIsOpenLate(true);
@@ -8859,18 +8899,18 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     }, 1);
     onOpen?.();
   }, [onOpen, outsideScreenGap, totalGap]);
-  const closeTooltip = (0, import_react26.useCallback)(() => {
+  const closeTooltip = (0, import_react27.useCallback)(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
     onClose?.();
   }, [onClose]);
-  const onMouseEnter = (0, import_react26.useCallback)(() => {
+  const onMouseEnter = (0, import_react27.useCallback)(() => {
     if (trigger === "hover") openTooltip();
   }, [trigger, openTooltip]);
-  const onMouseLeave = (0, import_react26.useCallback)(() => {
+  const onMouseLeave = (0, import_react27.useCallback)(() => {
     if (trigger === "hover") closeTooltip();
   }, [trigger, closeTooltip]);
-  const onClickHolder = (0, import_react26.useCallback)(
+  const onClickHolder = (0, import_react27.useCallback)(
     (event) => {
       if (trigger === "click") {
         if (!isOpen) openTooltip();
@@ -8879,7 +8919,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     },
     [trigger, openTooltip, isOpen, closeTooltip]
   );
-  const onClickOutside = (0, import_react26.useCallback)(
+  const onClickOutside = (0, import_react27.useCallback)(
     (event) => {
       if (!isOpen) return;
       if (trigger !== "click") return;
@@ -8889,7 +8929,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
       return () => {
@@ -8897,7 +8937,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
       };
     }
   }, [trigger, onClickOutside]);
-  (0, import_react26.useImperativeHandle)(
+  (0, import_react27.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -8908,7 +8948,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     },
     [isOpen, openTooltip, closeTooltip]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Div_default,
     {
       position: "relative",
@@ -8918,7 +8958,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Div_default,
           {
             width: childrenWrapperWidth,
@@ -8928,7 +8968,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           TooltipContainer,
           {
             theme: theme2,
@@ -8940,8 +8980,8 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
             isOpen,
             role: "tooltip",
             ref: tooltipContainerRef,
-            children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Div_default.box,
                 {
                   position: "relative",
@@ -8955,7 +8995,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
                   children: content
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -8969,7 +9009,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
                   borderTopRightRadius: 999
                 }
               ),
-              withArrow && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              withArrow && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Arrow,
                 {
                   position,
@@ -8987,7 +9027,7 @@ var TooltipComponent = (0, import_react26.forwardRef)(function Tooltip({
     }
   );
 });
-TooltipComponent.item = (0, import_react26.forwardRef)(function Item({
+TooltipComponent.item = (0, import_react27.forwardRef)(function Item({
   icon,
   iconColor,
   text,
@@ -9001,7 +9041,7 @@ TooltipComponent.item = (0, import_react26.forwardRef)(function Item({
   onClickWithValue
 }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Div_default.row,
     {
       alignItems: "center",
@@ -9019,22 +9059,22 @@ TooltipComponent.item = (0, import_react26.forwardRef)(function Item({
       onClickWithValue: !disabled ? onClickWithValue : void 0,
       ref,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
       ]
     }
   );
 });
-TooltipComponent.divider = (0, import_react26.forwardRef)(function DividerComponent(props, ref) {
+TooltipComponent.divider = (0, import_react27.forwardRef)(function DividerComponent(props, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
 });
-TooltipComponent.sectionTitle = (0, import_react26.forwardRef)(function SectionTitle({ text, ...props }, ref) {
+TooltipComponent.sectionTitle = (0, import_react27.forwardRef)(function SectionTitle({ text, ...props }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Text_default,
     {
       fontSize: 12,
@@ -9048,26 +9088,26 @@ TooltipComponent.sectionTitle = (0, import_react26.forwardRef)(function SectionT
     }
   );
 });
-var Tooltip2 = (0, import_react26.memo)(TooltipComponent);
+var Tooltip2 = (0, import_react27.memo)(TooltipComponent);
 Tooltip2.item = TooltipComponent.item;
 Tooltip2.divider = TooltipComponent.divider;
 Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
 var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
-var import_react27 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
+var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { colorTheme, componentsState } = useBetterHtmlContextInternal();
-  const firstRenderPassedRef = (0, import_react27.useRef)(false);
-  const tabsRef = (0, import_react27.useRef)({});
-  const [selectedTab, setSelectedTab] = (0, import_react27.useState)(() => {
+  const firstRenderPassedRef = (0, import_react28.useRef)(false);
+  const tabsRef = (0, import_react28.useRef)({});
+  const [selectedTab, setSelectedTab] = (0, import_react28.useState)(() => {
     const selectedTabValue = tabs[0] ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
@@ -9076,9 +9116,9 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
     }
     return selectedTabValue;
   });
-  const [rerenderState, setRerenderState] = (0, import_react27.useState)(0);
+  const [rerenderState, setRerenderState] = (0, import_react28.useState)(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
-  const onClickTab = (0, import_react27.useCallback)(
+  const onClickTab = (0, import_react28.useCallback)(
     (tab) => {
       setSelectedTab(tab);
       onChange?.(tab);
@@ -9090,11 +9130,11 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
     },
     [onChange, name, urlQuery]
   );
-  const width = (0, import_react27.useMemo)(
+  const width = (0, import_react28.useMemo)(
     () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
-  const leftSpacing = (0, import_react27.useMemo)(() => {
+  const leftSpacing = (0, import_react28.useMemo)(() => {
     const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
@@ -9102,7 +9142,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
     });
     return spacing;
   }, [selectedTab, tabs, tabsGap]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -9111,7 +9151,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
       clearTimeout(timeout);
     };
   }, []);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -9132,20 +9172,20 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
       }
     });
   }, [selectedTab, name]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     tabsRef.current[selectedTab]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTab]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
       );
     };
   }, []);
-  (0, import_react27.useImperativeHandle)(
+  (0, import_react28.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -9155,11 +9195,11 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Div_default,
           {
             position: "relative",
@@ -9180,7 +9220,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
               tabsRef.current[tab] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -9193,7 +9233,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
                   transition: theme2.styles.transition
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Text_default,
                 {
                   fontWeight: 700,
@@ -9208,7 +9248,7 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
           tab
         );
       }) }),
-      style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Div_default,
         {
           position: "absolute",
@@ -9221,16 +9261,16 @@ var TabsComponent = (0, import_react27.forwardRef)(function Tabs({ tabs, name, a
         }
       )
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { width: "100%", children })
   ] });
 });
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
-  const thisTabGroupData = (0, import_react27.useMemo)(
+  const thisTabGroupData = (0, import_react28.useMemo)(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
@@ -9239,22 +9279,27 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
       );
     }
   }, [tabWithDot]);
-  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { width: "100%", children }) : void 0;
 };
-var Tabs2 = (0, import_react27.memo)(TabsComponent);
+var Tabs2 = (0, import_react28.memo)(TabsComponent);
 Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-var import_react28 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
+var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
+  titleAs = "h3",
+  titleColor,
+  titleRightElement,
   description,
+  descriptionColor,
+  rightElement,
   icon,
   image,
   headerPaddingBlock,
@@ -9265,23 +9310,23 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const bodyRef = (0, import_react28.useRef)(null);
+  const bodyRef = (0, import_react29.useRef)(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
-  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react28.useState)();
+  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react29.useState)();
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = (0, import_react28.useCallback)(() => {
+  const open = (0, import_react29.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = (0, import_react28.useCallback)(() => {
+  const close = (0, import_react29.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = (0, import_react28.useCallback)(() => {
+  const toggleOpen = (0, import_react29.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!bodyRef.current) return;
     const body = bodyRef.current;
     setBodyVirtualHeight(body.scrollHeight * 2);
@@ -9292,7 +9337,7 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!isOpen) return;
     if (!bodyRef.current) return;
     const observer = new ResizeObserver(() => {
@@ -9304,7 +9349,7 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
       observer.disconnect();
     };
   }, [isOpen]);
-  (0, import_react28.useImperativeHandle)(
+  (0, import_react29.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -9316,28 +9361,41 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       Div_default.row,
       {
         width: "100%",
         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__ */ (0, import_jsx_runtime26.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
-            image && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+            image && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  Text_default,
+                  {
+                    as: titleAs,
+                    fontWeight: 700,
+                    lineHeight: "20px",
+                    color: titleColor ?? theme2.colors.textPrimary,
+                    children: title
+                  }
+                ),
+                titleRightElement
+              ] }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { color: descriptionColor ?? theme2.colors.textSecondary, children: description })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          rightElement,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Icon_default,
             {
               name: "chevronDown",
@@ -9348,8 +9406,8 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Divider_default.horizontal, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Div_default,
       {
         maxHeight: isOpen ? bodyVirtualHeight : 0,
@@ -9358,14 +9416,14 @@ var FoldableComponent = (0, import_react28.forwardRef)(function Foldable({
         overflow: !isOpen ? "hidden" : void 0,
         pointerEvents: !isOpen ? "none" : void 0,
         ref: bodyRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
-FoldableComponent.box = (0, import_react28.forwardRef)(function Box3({ ...props }, ref) {
+FoldableComponent.box = (0, import_react29.forwardRef)(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     FoldableComponent,
     {
       backgroundColor: theme2.colors.backgroundContent,
@@ -9378,14 +9436,14 @@ FoldableComponent.box = (0, import_react28.forwardRef)(function Box3({ ...props
     }
   );
 });
-var Foldable2 = (0, import_react28.memo)(FoldableComponent);
+var Foldable2 = (0, import_react29.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
 // src/components/SideMenu.tsx
-var import_react29 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ item, backgroundColor, onClick }) {
+var import_react30 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ item, backgroundColor, onClick }) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
     throw new Error(
@@ -9398,7 +9456,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
   const location = reactRouterDomPluginConfig.useLocation();
   const { colorTheme, components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const [isOpened, setIsOpened] = useBooleanState();
-  const onClickElement = (0, import_react29.useCallback)(() => {
+  const onClickElement = (0, import_react30.useCallback)(() => {
     if (item.disabled) return;
     if (item.onClickCloseSideMenu !== false) onClick?.();
     item.onClick?.(item);
@@ -9413,7 +9471,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
   const lineHeight = 20;
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default.row,
     {
       alignItems: "center",
@@ -9430,8 +9488,8 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
       opacity: item.disabled ? 0.6 : void 0,
       onClick: item.children ? setIsOpened.toggle : onClickElement,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Text_default,
           {
             flex: 1,
@@ -9442,7 +9500,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
             children: item.text
           }
         ),
-        item.children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Icon_default,
           {
             name: "chevronDown",
@@ -9455,7 +9513,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
       ]
     }
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!item.children) return;
     const toBeOpened = item.children.some(
       (child) => child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false
@@ -9463,9 +9521,9 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
     setIsOpened.setState(toBeOpened);
   }, [item]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default, { width: "100%", children: [
-    item.href ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
-    item.children && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default, { width: "100%", children: [
+    item.href ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
+    item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       Div_default.column,
       {
         position: "relative",
@@ -9476,7 +9534,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
         overflow: "hidden",
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
-          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             MenuItemComponent2,
             {
               item: child,
@@ -9485,7 +9543,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
             },
             child.text
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             Div_default,
             {
               position: "absolute",
@@ -9494,7 +9552,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
               left: paddingLeft + iconSize / 2,
               zIndex: -1,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Div_default,
                   {
                     position: "relative",
@@ -9504,7 +9562,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
                     zIndex: 1
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Div_default,
                   {
                     position: "absolute",
@@ -9544,11 +9602,11 @@ var SideMenuComponent = function SideMenu({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
-  const onClickXButton = (0, import_react29.useCallback)(() => {
+  const onClickXButton = (0, import_react30.useCallback)(() => {
     setSideMenuIsOpenMobile.setFalse();
   }, []);
-  const readyItems = (0, import_react29.useMemo)(() => items.filter((item) => !item.hidden), [items]);
-  const readyBottomItems = (0, import_react29.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
+  const readyItems = (0, import_react30.useMemo)(() => items.filter((item) => !item.hidden), [items]);
+  const readyBottomItems = (0, import_react30.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
   const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
@@ -9556,7 +9614,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__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default.column,
     {
       position: "fixed",
@@ -9572,9 +9630,9 @@ var SideMenuComponent = function SideMenu({
       userSelect: "none",
       zIndex: 10,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
-            (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
+            (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               Div_default.row,
               {
                 alignItems: "center",
@@ -9583,7 +9641,7 @@ var SideMenuComponent = function SideMenu({
                 whiteSpace: "nowrap",
                 gap: theme2.styles.gap,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     Image_default,
                     {
                       name: logoAssetName,
@@ -9593,7 +9651,7 @@ var SideMenuComponent = function SideMenu({
                       objectFit: "contain"
                     }
                   ),
-                  logoText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  logoText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     Text_default,
                     {
                       fontFamily: logoFontFamily,
@@ -9608,9 +9666,9 @@ var SideMenuComponent = function SideMenu({
                 ]
               }
             ) }),
-            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Div_default.column,
             {
               width: "100%",
@@ -9618,7 +9676,7 @@ var SideMenuComponent = function SideMenu({
               overflowY: "auto",
               paddingInline: theme2.styles.space,
               paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 MenuItemComponent,
                 {
                   item,
@@ -9629,7 +9687,7 @@ var SideMenuComponent = function SideMenu({
               )) })
             }
           ),
-          readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Div_default.column,
             {
               borderTop: mediaQuery.size1000 ? `solid 1px ${theme2.colors.border}` : void 0,
@@ -9638,7 +9696,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__ */ (0, import_jsx_runtime27.jsx)(
+              children: readyBottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 MenuItemComponent,
                 {
                   item,
@@ -9649,14 +9707,14 @@ var SideMenuComponent = function SideMenu({
               ))
             }
           ),
-          isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Div_default,
             {
               borderTop: `solid 1px ${theme2.colors.border}`,
               marginTop: !readyBottomItems ? "auto" : void 0,
               paddingInline: theme2.styles.space,
               paddingBlock: theme2.styles.space,
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 Div_default.row,
                 {
                   alignItems: "center",
@@ -9668,7 +9726,7 @@ var SideMenuComponent = function SideMenu({
                   isTabAccessed: true,
                   paddingBlock: theme2.styles.gap,
                   onClick: setSideMenuIsCollapsed.toggle,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     Icon_default,
                     {
                       name: "chevronRight",
@@ -9683,7 +9741,7 @@ var SideMenuComponent = function SideMenu({
             }
           )
         ] }),
-        widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default.row,
           {
             position: "absolute",
@@ -9703,7 +9761,7 @@ var SideMenuComponent = function SideMenu({
             transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
             transition: theme2.styles.transition,
             onClick: setSideMenuIsOpenMobile.toggle,
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               Icon_default,
               {
                 name: "chevronRight",
@@ -9725,7 +9783,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__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default,
     {
       position: "relative",
@@ -9734,7 +9792,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
       transition: theme2.styles.transition,
       children: [
         outsideComponent,
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PageHolder_default, { ...props })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PageHolder_default, { ...props })
       ]
     }
   );
@@ -9744,7 +9802,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = useBooleanState();
   const width = 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default,
     {
       position: "relative",
@@ -9756,7 +9814,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
       onMouseOut: setIsHovered.setFalse,
       onClick: setSideMenuIsOpenMobile.toggle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -9770,7 +9828,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -9785,7 +9843,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -9803,7 +9861,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
     }
   );
 };
-var SideMenu2 = (0, import_react29.memo)(SideMenuComponent);
+var SideMenu2 = (0, import_react30.memo)(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
 SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
@@ -9892,6 +9950,7 @@ function generateLocalStorage() {
   Modal,
   PageHeader,
   PageHolder,
+  Pagination,
   SideMenu,
   Table,
   Tabs,