@lightsparkdev/ui 1.1.7 → 1.1.8

package/dist/{chunk-R4K5SYXV.cjs → chunk-WRNS2LMW.cjs}

@@ -1,79 +1,88 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAHTHGVG7cjs = require('./chunk-AHTHGVG7.cjs');
+var _chunkM7NXFRWIcjs = require('./chunk-M7NXFRWI.cjs');
 
 
+var _chunkTTEGFKKUcjs = require('./chunk-TTEGFKKU.cjs');
 
 
-var _chunkOE2A2NNFcjs = require('./chunk-OE2A2NNF.cjs');
 
+var _chunk3DKIHTSYcjs = require('./chunk-3DKIHTSY.cjs');
 
 
 
-var _chunkWJPZO3H2cjs = require('./chunk-WJPZO3H2.cjs');
 
+var _chunkMHB5FZHOcjs = require('./chunk-MHB5FZHO.cjs');
 
 
 
-var _chunkAW7HR2GHcjs = require('./chunk-AW7HR2GH.cjs');
 
+var _chunkT24XLKO4cjs = require('./chunk-T24XLKO4.cjs');
 
 
-var _chunkGLKMRHMAcjs = require('./chunk-GLKMRHMA.cjs');
 
 
+var _chunkWUPRBHVCcjs = require('./chunk-WUPRBHVC.cjs');
 
-var _chunkBY4LOADLcjs = require('./chunk-BY4LOADL.cjs');
 
 
+var _chunkASYEQ7SWcjs = require('./chunk-ASYEQ7SW.cjs');
 
-var _chunk4OPCL7XScjs = require('./chunk-4OPCL7XS.cjs');
 
 
-var _chunkOL4MRFABcjs = require('./chunk-OL4MRFAB.cjs');
+var _chunkG32OGRLKcjs = require('./chunk-G32OGRLK.cjs');
 
 
-var _chunkGFBLAQGWcjs = require('./chunk-GFBLAQGW.cjs');
+var _chunkDSG76UY6cjs = require('./chunk-DSG76UY6.cjs');
 
 
-var _chunkWCLHQRK7cjs = require('./chunk-WCLHQRK7.cjs');
+var _chunkERYX2E23cjs = require('./chunk-ERYX2E23.cjs');
 
 
-var _chunkSIVR5ELDcjs = require('./chunk-SIVR5ELD.cjs');
+var _chunk2BMPLV5Ccjs = require('./chunk-2BMPLV5C.cjs');
 
 
-var _chunkVVLRO7QHcjs = require('./chunk-VVLRO7QH.cjs');
+var _chunkLKPOBVNOcjs = require('./chunk-LKPOBVNO.cjs');
 
 
-var _chunk4HMYOO4Kcjs = require('./chunk-4HMYOO4K.cjs');
+var _chunkWJMVZDWRcjs = require('./chunk-WJMVZDWR.cjs');
 
 
-var _chunk5S5W2AT6cjs = require('./chunk-5S5W2AT6.cjs');
+var _chunkIDFM6UQ2cjs = require('./chunk-IDFM6UQ2.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
+var _chunkGYFYOAO2cjs = require('./chunk-GYFYOAO2.cjs');
 
 
-var _chunkCSS4ASVJcjs = require('./chunk-CSS4ASVJ.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+
+
+var _chunkQBFCQQX5cjs = require('./chunk-QBFCQQX5.cjs');
+
+
+var _chunk5R7OENS4cjs = require('./chunk-5R7OENS4.cjs');
 
 
 
-var _chunk7OVH56SPcjs = require('./chunk-7OVH56SP.cjs');
+var _chunkUL22WLXRcjs = require('./chunk-UL22WLXR.cjs');
 
 
 
 
-var _chunkCDAUKAQHcjs = require('./chunk-CDAUKAQH.cjs');
+var _chunkLPTWQ2KPcjs = require('./chunk-LPTWQ2KP.cjs');
 
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
+var _chunk2J2ZDWLFcjs = require('./chunk-2J2ZDWLF.cjs');
+
+
 
 
 var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
@@ -85,17 +94,17 @@ var _jsxruntime = require('@emotion/react/jsx-runtime');
 function getDefaultFilterState(filter) {
   switch (filter.type) {
     case "date" /* DATE */:
-      return _chunk4OPCL7XScjs.getDefaultDateFilterState.call(void 0, );
+      return _chunk3DKIHTSYcjs.getDefaultDateFilterState.call(void 0, );
     case "enum" /* ENUM */:
-      return _chunkOE2A2NNFcjs.getDefaultEnumFilterState.call(void 0, );
+      return _chunkMHB5FZHOcjs.getDefaultEnumFilterState.call(void 0, );
     case "string" /* STRING */:
-      return _chunkAW7HR2GHcjs.getDefaultStringFilterState.call(void 0, );
+      return _chunkWUPRBHVCcjs.getDefaultStringFilterState.call(void 0, );
     case "id" /* ID */:
-      return _chunkWJPZO3H2cjs.getDefaultIdFilterState.call(void 0, filter.allowedEntities);
+      return _chunkT24XLKO4cjs.getDefaultIdFilterState.call(void 0, filter.allowedEntities);
     case "boolean" /* BOOLEAN */:
-      return _chunkGLKMRHMAcjs.getDefaultBooleanFilterState.call(void 0, );
+      return _chunkASYEQ7SWcjs.getDefaultBooleanFilterState.call(void 0, );
     case "currency" /* CURRENCY */:
-      return _chunkBY4LOADLcjs.getDefaultCurrencyFilterState.call(void 0, );
+      return _chunkG32OGRLKcjs.getDefaultCurrencyFilterState.call(void 0, );
     default:
       throw new Error("Invalid filter type");
   }
@@ -110,11 +119,13 @@ function initialFilterState(filters) {
   return state;
 }
 function DataManagerTable(props) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const isCardPageFullWidth = typeof props.cardPageFullWidth === "boolean" ? props.cardPageFullWidth : true;
   const cardPageMt = typeof props.cardPageMt === "undefined" ? 24 : props.cardPageMt;
+  const showPaginationPreviousNext = typeof ((_a = props.paginationDisplayOptions) == null ? void 0 : _a.showPaginationPreviousNext) === "boolean" ? props.paginationDisplayOptions.showPaginationPreviousNext : true;
+  const pageSizeString = typeof ((_b = props.paginationDisplayOptions) == null ? void 0 : _b.pageSizeStringTemplate) === "string" ? props.paginationDisplayOptions.pageSizeStringTemplate : "Show {pageSize} items";
   const breakPoint = _chunkKW3JYLRIcjs.useBreakpoints.call(void 0, );
-  const [pageSize, setPageSize] = _react.useState.call(void 0, ((_a = props.pageSizes) == null ? void 0 : _a[0]) || 20);
+  const [pageSize, setPageSize] = _react.useState.call(void 0, ((_c = props.pageSizes) == null ? void 0 : _c[0]) || 20);
   const [pageCursorState, setPageCursorState] = _react.useState.call(void 0, {
     startResult: void 0,
     nextPageCursor: props.nextPageCursor,
@@ -127,7 +138,7 @@ function DataManagerTable(props) {
     props.filterOptions ? initialFilterState(props.filterOptions.filters) : {}
   );
   const [fetchVariables, setFetchVariables] = _react.useState.call(void 0, 
-    ((_b = props.filterOptions) == null ? void 0 : _b.initialQueryVariables) || {}
+    ((_d = props.filterOptions) == null ? void 0 : _d.initialQueryVariables) || {}
   );
   const isSm = breakPoint.isSm();
   _react.useEffect.call(void 0, () => {
@@ -184,7 +195,7 @@ function DataManagerTable(props) {
         );
         if (validResult) {
           appliedFilterStates[filter.accessorKey] = validResult;
-          if (_chunkWJPZO3H2cjs.isIdFilterState.call(void 0, filterState)) {
+          if (_chunkT24XLKO4cjs.isIdFilterState.call(void 0, filterState)) {
             const appliedValues = validResult.appliedValues;
             const isApplied = !!(appliedValues == null ? void 0 : appliedValues.length);
             updateFilterState(filter)(_chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, filterStates2[filter.accessorKey]), {
@@ -208,7 +219,7 @@ function DataManagerTable(props) {
       const filterState = filterStatesArray[i];
       if (!filterState.isApplied) continue;
       const filter = filters2[i];
-      if (_chunkAW7HR2GHcjs.isStringFilterState.call(void 0, filterState)) {
+      if (_chunkWUPRBHVCcjs.isStringFilterState.call(void 0, filterState)) {
         if (filterState.value) {
           const value = filterState.value;
           let updatedAppliedValues = [];
@@ -226,10 +237,10 @@ function DataManagerTable(props) {
           appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
         } else if (((_b2 = filterState.appliedValues) == null ? void 0 : _b2.length) === 0) {
-          updateFilterState(filter)(_chunkAW7HR2GHcjs.getDefaultStringFilterState.call(void 0, ));
+          updateFilterState(filter)(_chunkWUPRBHVCcjs.getDefaultStringFilterState.call(void 0, ));
           filterState.isApplied = false;
         }
-      } else if (_chunkOE2A2NNFcjs.isEnumFilterState.call(void 0, filterState)) {
+      } else if (_chunkMHB5FZHOcjs.isEnumFilterState.call(void 0, filterState)) {
         if (filterState.value) {
           const newFilterState = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, filterStates2[filter.accessorKey]), {
             value: "",
@@ -239,7 +250,7 @@ function DataManagerTable(props) {
           appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
         } else if (((_d2 = filterState.appliedValues) == null ? void 0 : _d2.length) === 0) {
-          updateFilterState(filter)(_chunkOE2A2NNFcjs.getDefaultEnumFilterState.call(void 0, ));
+          updateFilterState(filter)(_chunkMHB5FZHOcjs.getDefaultEnumFilterState.call(void 0, ));
           filterState.isApplied = false;
         }
       }
@@ -311,6 +322,27 @@ function DataManagerTable(props) {
     }
     setIsLoading(false);
   });
+  const currentPage = Math.floor((pageCursorState.startResult || 0) / pageSize) + 1;
+  const handleChangePage = (page) => _chunkZ6EUSUADcjs.__async.call(void 0, this, null, function* () {
+    const pageCursorIndex = (page - 1) * pageSize + 1 - pageSize;
+    const cachedCursorState = pageCursorState.cursorCache[pageSize][pageCursorIndex];
+    if (!props.filterOptions || pageCursorIndex > 0 && !cachedCursorState || page === currentPage) {
+      return;
+    }
+    const { refetch } = props.filterOptions;
+    setIsLoading(true);
+    const newFetchVariables = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, fetchVariables), {
+      after: cachedCursorState
+    });
+    setFetchVariables(newFetchVariables);
+    try {
+      yield refetch(newFetchVariables);
+    } catch (e) {
+      setIsLoading(false);
+      throw e;
+    }
+    setIsLoading(false);
+  });
   const handleChangePageSize = (size) => _chunkZ6EUSUADcjs.__async.call(void 0, this, null, function* () {
     setPageSize(size);
     if (props.showMoreOptions) {
@@ -342,7 +374,7 @@ function DataManagerTable(props) {
     switch (filter.type) {
       case "date" /* DATE */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk4OPCL7XScjs.DateFilter,
+          _chunk3DKIHTSYcjs.DateFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -354,7 +386,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "enum" /* ENUM */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkOE2A2NNFcjs.EnumFilter,
+          _chunkMHB5FZHOcjs.EnumFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -370,7 +402,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "string" /* STRING */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkAW7HR2GHcjs.StringFilter,
+          _chunkWUPRBHVCcjs.StringFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -384,7 +416,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "id" /* ID */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkWJPZO3H2cjs.IdFilter,
+          _chunkT24XLKO4cjs.IdFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -398,7 +430,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "boolean" /* BOOLEAN */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkGLKMRHMAcjs.BooleanFilter,
+          _chunkASYEQ7SWcjs.BooleanFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -411,7 +443,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "currency" /* CURRENCY */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkBY4LOADLcjs.CurrencyFilter,
+          _chunkG32OGRLKcjs.CurrencyFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -443,10 +475,10 @@ function DataManagerTable(props) {
       children: [
         filterSections,
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FilterContentFooter, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCSS4ASVJcjs.Button, { text: "Clear", onClick: handleClearFilters }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, { text: "Clear", onClick: handleClearFilters }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FilterContentFooterRight, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCSS4ASVJcjs.Button, { text: "Cancel", onClick: () => setShowFilterEditor(false) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCSS4ASVJcjs.Button, { text: "Apply", kind: "primary", onClick: onApply })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, { text: "Cancel", onClick: () => setShowFilterEditor(false) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, { text: "Apply", kind: "primary", onClick: onApply })
           ] })
         ] })
       ]
@@ -462,16 +494,16 @@ function DataManagerTable(props) {
     text: !isFilterButtonSmall ? `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}` : void 0
   };
   if (props.filterOptions) {
-    const FilterContainerComponent = ((_c = props.customComponents) == null ? void 0 : _c.filterContainerComponent) || DataManagerTableFilterContainer;
+    const FilterContainerComponent = ((_e = props.customComponents) == null ? void 0 : _e.filterContainerComponent) || DataManagerTableFilterContainer;
     filters = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterContainerComponent, { children: isSm ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkCSS4ASVJcjs.Button,
+        _chunkGYFYOAO2cjs.Button,
         _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonButtonProps), props.filterButtonProps), {
           onClick: () => setShowFilterEditor(!showFilterEditor)
         })
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkWCLHQRK7cjs.Modal,
+        _chunk2BMPLV5Ccjs.Modal,
         {
           visible: showFilterEditor,
           onClose: () => setShowFilterEditor(false),
@@ -480,7 +512,7 @@ function DataManagerTable(props) {
         }
       )
     ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkSIVR5ELDcjs.Dropdown,
+      _chunkLKPOBVNOcjs.Dropdown,
       {
         borderRadius: 12,
         maxDropdownItemsWidth: 400,
@@ -498,10 +530,12 @@ function DataManagerTable(props) {
     ) });
   }
   let showMoreDropdown;
-  if (((_d = props.pageSizes) == null ? void 0 : _d.length) > 1) {
+  if (((_f = props.pageSizes) == null ? void 0 : _f.length) > 1) {
     showMoreDropdown = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkSIVR5ELDcjs.Dropdown,
+      _chunkLKPOBVNOcjs.Dropdown,
       {
+        align: "right",
+        verticalPlacement: "top",
         getCSS: ({ isOpen }) => ({
           height: "fit-content",
           alignSelf: "center"
@@ -514,9 +548,9 @@ function DataManagerTable(props) {
             width: "100%"
           }),
           getContent: ({ isOpen }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkVVLRO7QHcjs.TextIconAligner,
+            _chunkQBFCQQX5cjs.TextIconAligner,
             {
-              content: `Show ${pageSize} items`,
+              content: pageSizeString.replace("{pageSize}", `${pageSize}`),
               typography: { size: "ExtraSmall" },
               rightIcon: {
                 name: "Chevron",
@@ -540,7 +574,7 @@ function DataManagerTable(props) {
   if (props.showMoreOptions) {
     footer = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableFooter, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkCSS4ASVJcjs.Button,
+        _chunkGYFYOAO2cjs.Button,
         {
           text: "Show more",
           paddingY: "short",
@@ -555,24 +589,106 @@ function DataManagerTable(props) {
   } else if (props.resultCount) {
     const startResult = pageCursorState.startResult || 1;
     const endResult = Math.min(props.resultCount, startResult + pageSize - 1);
-    const isFullCount = (_e = props.isFullCount) != null ? _e : true;
+    const isFullCount = (_g = props.isFullCount) != null ? _g : true;
     const countString = isFullCount ? props.resultCount : props.resultCount + "+";
-    const resultsString = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGFBLAQGWcjs.Label, { children: "Viewing " }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOL4MRFABcjs.LabelModerate, { children: `${startResult}-${endResult}` }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGFBLAQGWcjs.Label, { children: " of " }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOL4MRFABcjs.LabelModerate, { children: `${countString}` }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGFBLAQGWcjs.Label, { children: " results" })
+    const resultsString = ((_h = props.paginationDisplayOptions) == null ? void 0 : _h.showPageNumberButtons) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkERYX2E23cjs.Label, { children: "Viewing " }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSG76UY6cjs.LabelModerate, { children: `${startResult}-${endResult}` }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkERYX2E23cjs.Label, { children: " of " }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSG76UY6cjs.LabelModerate, { children: `${countString}` }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkERYX2E23cjs.Label, { children: " results" })
     ] });
     const hasNext = props.resultCount ? startResult + pageSize - 1 < props.resultCount : false;
     const hasPrev = startResult > 1;
+    const pageNumbers = Array.from(
+      { length: Math.ceil(props.resultCount / pageSize) },
+      (_, i) => i
+    );
+    const pageNumberButtons = ((_i = props.paginationDisplayOptions) == null ? void 0 : _i.showPageNumberButtons) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PageNumberPaginationButtonsContainer, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkGYFYOAO2cjs.Button,
+        {
+          icon: {
+            name: "CentralChevronLeftSmall",
+            width: 24,
+            color: "text"
+          },
+          kind: "ghost",
+          paddingY: "short",
+          onClick: () => void handlePrev(),
+          disabled: !hasPrev
+        }
+      ),
+      pageNumbers.slice(0, 2).map((pageNumber) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PageNumberButton,
+        {
+          onClick: () => void handleChangePage(pageNumber + 1),
+          isCurrentPage: currentPage === pageNumber + 1,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7NXFRWIcjs.Body, { content: `${pageNumber + 1}` })
+        },
+        pageNumber
+      )),
+      pageNumbers.length > 4 && currentPage - 2 > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk5R7OENS4cjs.Icon,
+        {
+          name: "CentralDotGrid1x3Horizontal",
+          width: 18,
+          ml: 7,
+          mr: 7,
+          color: "text"
+        }
+      ),
+      currentPage - 1 > 1 && currentPage < pageNumbers.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PageNumberButton,
+        {
+          isCurrentPage: true,
+          onClick: () => void handleChangePage(currentPage),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7NXFRWIcjs.Body, { content: `${currentPage}` })
+        },
+        currentPage
+      ),
+      pageNumbers.length > 4 && currentPage + 1 < pageNumbers.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk5R7OENS4cjs.Icon,
+        {
+          name: "CentralDotGrid1x3Horizontal",
+          width: 18,
+          ml: 7,
+          mr: 7,
+          color: "text"
+        }
+      ),
+      pageNumbers.length > 4 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PageNumberButton,
+        {
+          isCurrentPage: currentPage === pageNumbers.length,
+          onClick: () => void handleChangePage(pageNumbers.length),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7NXFRWIcjs.Body, { content: `${pageNumbers.length}` })
+        },
+        pageNumbers.length
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkGYFYOAO2cjs.Button,
+        {
+          icon: {
+            name: "CentralChevronRightSmall",
+            width: 24,
+            color: "text"
+          },
+          kind: "ghost",
+          paddingY: "short",
+          onClick: () => void handleNext(),
+          disabled: !hasNext
+        }
+      )
+    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {});
     footer = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableFooter, { children: [
       resultsString,
+      pageNumberButtons,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PaginationContainer, { children: [
         showMoreDropdown,
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PaginationButtonsContainer, { children: [
+        showPaginationPreviousNext && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PaginationButtonsContainer, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkCSS4ASVJcjs.Button,
+            _chunkGYFYOAO2cjs.Button,
             {
               text: "Previous",
               paddingY: "short",
@@ -583,7 +699,7 @@ function DataManagerTable(props) {
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkCSS4ASVJcjs.Button,
+            _chunkGYFYOAO2cjs.Button,
             {
               text: "Next",
               paddingY: "short",
@@ -597,32 +713,32 @@ function DataManagerTable(props) {
       ] })
     ] });
   }
-  const DataManagerTableHeaderComponent = ((_f = props.customComponents) == null ? void 0 : _f.dataManagerTableHeaderComponent) || DataManagerTableHeader;
+  const DataManagerTableHeaderComponent = ((_j = props.customComponents) == null ? void 0 : _j.dataManagerTableHeaderComponent) || DataManagerTableHeader;
   const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     props.showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableHeaderComponent, { children: [
       props.header,
       filters
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAHTHGVG7cjs.Table, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), { loading: isLoading })),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTTEGFKKUcjs.Table, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), { loading: isLoading })),
     footer
   ] });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledDataManagerTable, { children: isCardPageFullWidth ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4HMYOO4Kcjs.CardPageFullWidth, { css: { marginTop: `${cardPageMt}px` }, children: content }) : content });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledDataManagerTable, { children: isCardPageFullWidth ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWJMVZDWRcjs.CardPageFullWidth, { css: { marginTop: `${cardPageMt}px` }, children: content }) : content });
 }
 var StyledDataManagerTable = _styled2.default.div`
   width: 100%;
 `;
 var commonPadding = `
   ${_chunkKW3JYLRIcjs.bp.lg(`
-  padding-left: ${_chunk7OVH56SPcjs.standardContentInset.lgPx}px;
-  padding-right: ${_chunk7OVH56SPcjs.standardContentInset.lgPx}px;
+  padding-left: ${_chunkUL22WLXRcjs.standardContentInset.lgPx}px;
+  padding-right: ${_chunkUL22WLXRcjs.standardContentInset.lgPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.sm(`
-  padding-left: ${_chunk7OVH56SPcjs.standardContentInset.smPx}px;
-  padding-right: ${_chunk7OVH56SPcjs.standardContentInset.smPx}px;
+  padding-left: ${_chunkUL22WLXRcjs.standardContentInset.smPx}px;
+  padding-right: ${_chunkUL22WLXRcjs.standardContentInset.smPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.minSmMaxLg(`
-  padding-left: ${_chunk7OVH56SPcjs.standardContentInset.minSmMaxLgPx}px;
-  padding-right: ${_chunk7OVH56SPcjs.standardContentInset.minSmMaxLgPx}px;
+  padding-left: ${_chunkUL22WLXRcjs.standardContentInset.minSmMaxLgPx}px;
+  padding-right: ${_chunkUL22WLXRcjs.standardContentInset.minSmMaxLgPx}px;
   `)}
 `;
 var DataManagerTableHeader = _styled2.default.div`
@@ -643,7 +759,7 @@ var DataManagerTableFooter = _styled2.default.div`
   padding-top: ${_chunkZUAO4DW3cjs.Spacing.px.md};
   padding-bottom: ${_chunkZUAO4DW3cjs.Spacing.px.md};
 
-  ${_chunkCSS4ASVJcjs.StyledButton} {
+  ${_chunkGYFYOAO2cjs.StyledButton} {
     align-self: end;
   }
 `;
@@ -657,16 +773,39 @@ var PaginationButtonsContainer = _styled2.default.div`
   margin-left: ${_chunkZUAO4DW3cjs.Spacing.px.md};
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
 `;
+var PageNumberPaginationButtonsContainer = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+var PageNumberButton = _styled2.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  cursor: pointer;
+  ${_chunkUL22WLXRcjs.standardBorderRadius.call(void 0, 8)}
+  border: none;
+  background-color: transparent;
+  &:hover {
+    border: 0.5px solid ${_chunk2J2ZDWLFcjs.colors["black-10"]};
+  }
+  ${({ isCurrentPage }) => isCurrentPage ? `
+      border: 0.5px solid ${_chunk2J2ZDWLFcjs.colors["black-10"]};
+    ` : ""}
+`;
 var DataManagerTableFilterContainer = _styled2.default.div`
   position: absolute;
   z-index: 3;
   right: 0;
-  ${_chunk5S5W2AT6cjs.StyledButtonRow} + & {
+  ${_chunkIDFM6UQ2cjs.StyledButtonRow} + & {
     background: linear-gradient(
       to right,
-      ${({ theme }) => _chunkCDAUKAQHcjs.themeOr.call(void 0, "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)")({ theme })}
+      ${({ theme }) => _chunkLPTWQ2KPcjs.themeOr.call(void 0, "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)")({ theme })}
         0%,
-      ${({ theme }) => _chunkCDAUKAQHcjs.getColor.call(void 0, theme, "bg")} 15%
+      ${({ theme }) => _chunkLPTWQ2KPcjs.getColor.call(void 0, theme, "bg")} 15%
     );
   }
   ${commonPadding}
@@ -675,8 +814,8 @@ var FilterDropdownContent = _styled2.default.div`
   width: 400px;
   background: ${({ theme }) => theme.bg};
   border: 0.5px solid
-    ${({ theme }) => _chunkCDAUKAQHcjs.themeOrWithKey.call(void 0, "c1Neutral", "c4Neutral")({ theme })};
-  ${_chunk7OVH56SPcjs.standardBorderRadius.call(void 0, 12)}
+    ${({ theme }) => _chunkLPTWQ2KPcjs.themeOrWithKey.call(void 0, "c1Neutral", "c4Neutral")({ theme })};
+  ${_chunkUL22WLXRcjs.standardBorderRadius.call(void 0, 12)}
   box-shadow:
     0px 1px 4px 0px rgba(0, 0, 0, 0.1),
     0px 4px 8px 0px rgba(0, 0, 0, 0.08);

package/dist/{chunk-AW7HR2GH.cjs → chunk-WUPRBHVC.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkM67CAR2Ncjs = require('./chunk-M67CAR2N.cjs');
+var _chunkU2OBO5TYcjs = require('./chunk-U2OBO5TY.cjs');
 
 
-var _chunkO6MEN3EWcjs = require('./chunk-O6MEN3EW.cjs');
+var _chunk7EJGVZAAcjs = require('./chunk-7EJGVZAA.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkGYFYOAO2cjs = require('./chunk-GYFYOAO2.cjs');
 
 
-var _chunkCSS4ASVJcjs = require('./chunk-CSS4ASVJ.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
 
@@ -39,7 +39,7 @@ var StringFilter = ({
   };
   const appliedValueButtons = (_a = state.appliedValues) == null ? void 0 : _a.map((value) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkCSS4ASVJcjs.Button,
+      _chunkGYFYOAO2cjs.Button,
       {
         kind: "primary",
         size: "ExtraSmall",
@@ -59,8 +59,8 @@ var StringFilter = ({
     );
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM67CAR2Ncjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkO6MEN3EWcjs.TextInput,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2OBO5TYcjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk7EJGVZAAcjs.TextInput,
       {
         placeholder: placeholder || "",
         onChange: handleChange,

package/dist/{chunk-LNTTMZI2.js → chunk-WW7XQEMR.js}

@@ -1,6 +1,6 @@
 import {
   pxToRems
-} from "./chunk-VGEA6GWH.js";
+} from "./chunk-AGHCD2FL.js";
 
 // src/components/StatusIndicator.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-67GVLM7K.js → chunk-XIWXA6GF.js}

@@ -1,9 +1,9 @@
 import {
   getFontColor
-} from "./chunk-E6PRWBTH.js";
+} from "./chunk-2JNM2KTT.js";
 import {
   getTypographyString
-} from "./chunk-RL7ARYRE.js";
+} from "./chunk-KCUSJWDZ.js";
 
 // src/styles/typography.tsx
 var applyTypography = (theme, typographyType, size, color = "inherit", applyToAll = true) => {

package/dist/{chunk-3EYFBQMD.js → chunk-XLNISD6K.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-5KSG5D3I.js";
 import {
   TextInput
-} from "./chunk-P4VV6HNR.js";
+} from "./chunk-TDUDDWTZ.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-GNAZTAW4.js → chunk-XSN4IRUE.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-5QARHWIH.js";
+} from "./chunk-R44KNXWJ.js";
 import {
   StyledLabel,
   getPropDefaults
-} from "./chunk-K3EZDBME.js";
+} from "./chunk-C3I42MEE.js";
 import {
   __spreadProps,
   __spreadValues