@nulogy/components 13.0.0 → 13.1.1

package/dist/main.js

@@ -50056,6 +50056,7 @@
       "expand row": "Zeile erweitern",
       "go to next results": "Zu den n\xE4chsten Ergebnissen wechseln",
       "go to page": "Zu Seite {{count}} wechseln",
+      "current page of total": "Seite {{currentPage}} von {{totalPages}}",
       "go to previous results": "Zu den vorherigen Ergebnissen wechseln",
       "go to": "Wechseln zu",
       "hide actions": "Aktionen verbergen",
@@ -50098,6 +50099,7 @@
       "expand row": "Expand row",
       "go to next results": "Go to next results",
       "go to page": "Go to page {{count}}",
+      "current page of total": "Page {{currentPage}} of {{totalPages}}",
       "go to previous results": "Go to previous results",
       "go to": "Go to",
       "hide actions": "Hide actions",
@@ -50182,6 +50184,7 @@
       "expand row": "D\xE9velopper la ligne",
       "go to next results": "Aller aux r\xE9sultats suivants",
       "go to page": "Aller \xE0 la page {{count}}",
+      "current page of total": "Page {{currentPage}} sur {{totalPages}}",
       "go to previous results": "Aller aux r\xE9sultats pr\xE9c\xE9dents",
       "go to": "Aller \xE0",
       "hide actions": "Masquer les actions",
@@ -50224,6 +50227,7 @@
       "expand row": "Rij uitvouwen",
       "go to next results": "Ga naar volgende resultaten",
       "go to page": "Ga naar pagina {{count}}",
+      "current page of total": "Pagina {{currentPage}} van {{totalPages}}",
       "go to previous results": "Ga naar vorige resultaten",
       "go to": "Ga naar",
       "hide actions": "Acties verbergen",
@@ -50266,6 +50270,7 @@
       "expand row": "Rozwi\u0144 wiersz",
       "go to next results": "Przejd\u017A do nast\u0119pnych wynik\xF3w",
       "go to page": "Przejd\u017A do strony {{count}}",
+      "current page of total": "Strona {{currentPage}} z {{totalPages}}",
       "go to previous results": "Przejd\u017A do poprzednich wynik\xF3w",
       "go to": "Przejd\u017A do",
       "hide actions": "Hide actions",
@@ -50308,6 +50313,7 @@
       "expand row": "Expandir fila",
       "go to next results": "Ir para resultados seguintes",
       "go to page": "Ir para p\xE1gina {{count}}",
+      "current page of total": "P\xE1gina {{currentPage}} de {{totalPages}}",
       "go to previous results": "Ir para resultados anteriores",
       "go to": "Ir para",
       "hide actions": "Ocultar a\xE7\xF5es",
@@ -50350,6 +50356,7 @@
       "expand row": "Extindere r\xE2nd",
       "go to next results": "Merge\u021Bi la urm\u0103toarele rezultate",
       "go to page": "Merge\u021Bi la pagina {{count}}",
+      "current page of total": "Pagina {{currentPage}} din {{totalPages}}",
       "go to previous results": "Merge\u021Bi la rezultatele anterioare",
       "go to": "Merge\u021Bi la",
       "hide actions": "Ascundere ac\u021Biuni",
@@ -50392,6 +50399,7 @@
       "expand row": "\u5C55\u5F00\u884C",
       "go to next results": "\u8BBF\u95EE\u4E4B\u540E\u7684\u7ED3\u679C",
       "go to page": "\u8BBF\u95EE\u7B2C {{count}} \u9875 ",
+      "current page of total": "\u7B2C {{currentPage}} \u9875\uFF0C\u5171 {{totalPages}} \u9875",
       "go to previous results": "\u8BBF\u95EE\u4E4B\u524D\u7684\u7ED3\u679C",
       "go to": "\u8BBF\u95EE ",
       "hide actions": "\u9690\u85CF\u64CD\u4F5C",
@@ -51373,18 +51381,19 @@
     })(function (_ref) {
       var theme = _ref.theme,
           disabled = _ref.disabled,
-          currentPage = _ref.currentPage;
+          currentPage = _ref.currentPage,
+          iconOnly = _ref.iconOnly;
       return {
         fontSize: theme.fontSizes.small,
-        padding: theme.space.x1 + " " + theme.space.x2,
+        padding: iconOnly ? theme.space.x1 : theme.space.x1 + " " + theme.space.x2,
         lineHeight: theme.lineHeights.smallTextBase,
         display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         borderRadius: theme.radii.medium,
         border: "1px solid " + (currentPage ? theme.colors.darkBlue : theme.colors.lightGrey),
         color: disabled ? theme.colors.grey : theme.colors.black,
-        "&:not(:last-child)": {
-          marginRight: theme.space.x2
-        },
+        minWidth: iconOnly ? theme.space.x4 : "auto",
         cursor: disabled ? "default" : "pointer",
         "&:hover": {
           background: getHoverBackground(currentPage, disabled, theme)
@@ -51410,67 +51419,135 @@
           _ref$onClick = _ref.onClick,
           onClick = _ref$onClick === void 0 ? null : _ref$onClick,
           label = _ref.label,
-          ariaLabel = _ref.ariaLabel;
+          ariaLabel = _ref.ariaLabel,
+          showIconOnly = _ref.showIconOnly;
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
 
+      var theme = styled.useTheme();
       return /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
         disabled: disabled,
         onClick: onClick,
-        "aria-label": ariaLabel || t("go to previous results")
+        "aria-label": ariaLabel || t("go to previous results"),
+        iconOnly: showIconOnly
       }, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "leftArrow",
-        ml: "-8px"
-      }), " ", label || t("previous"));
+        ml: showIconOnly ? "0" : "-" + theme.space.x1
+      }), !showIconOnly && (label || t("previous")));
     };
 
     var NextButton = function NextButton(_ref) {
       var disabled = _ref.disabled,
           onClick = _ref.onClick,
           label = _ref.label,
-          ariaLabel = _ref.ariaLabel;
+          ariaLabel = _ref.ariaLabel,
+          showIconOnly = _ref.showIconOnly;
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
 
+      var theme = styled.useTheme();
       return /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
         disabled: disabled,
         onClick: onClick,
-        "aria-label": ariaLabel || t("go to next results")
-      }, label || t("next"), " ", /*#__PURE__*/React__default["default"].createElement(Icon, {
+        "aria-label": ariaLabel || t("go to next results"),
+        iconOnly: showIconOnly
+      }, !showIconOnly && (label || t("next")), /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "rightArrow",
-        mr: "-8px"
+        mr: showIconOnly ? "0" : "-" + theme.space.x1
       }));
     };
 
-    var SEPARATOR = "...";
-    var getPageItemsToDisplay = function getPageItemsToDisplay(totalPages, currentPage) {
-      var MAX_PAGES_TO_SHOW = 6;
-      var pages = Array.from({
-        length: totalPages
-      }, function (v, i) {
-        return i + 1;
-      });
-      if (totalPages <= MAX_PAGES_TO_SHOW) return pages;
+    var PaginationCount = function PaginationCount(_ref) {
+      var currentPage = _ref.currentPage,
+          totalPages = _ref.totalPages;
+
+      var _useTranslation = useTranslation(),
+          t = _useTranslation.t;
+
+      return /*#__PURE__*/React__default["default"].createElement(Text, {
+        fontSize: "small",
+        lineHeight: "smallTextBase",
+        mx: "x2"
+      }, t("current page of total", {
+        currentPage: currentPage,
+        totalPages: totalPages
+      }));
+    };
 
-      if (currentPage <= MAX_PAGES_TO_SHOW - 1) {
-        return [].concat(pages.slice(0, 5), [SEPARATOR, totalPages]);
+    function validateAndSetMaxVisiblePages(maxVisiblePages) {
+      if (maxVisiblePages < 3) {
+        console.error("Pagination maxVisiblePages prop must larger than 2. Value changed to 3.");
+        return 3;
       }
 
-      if (currentPage > totalPages - 5) {
-        return [1, SEPARATOR].concat(pages.slice(totalPages - 5));
+      if (maxVisiblePages > 12) {
+        console.error("Pagination maxVisiblePages prop must smaller than 13. Value changed to 12.");
+        return 12;
       }
 
-      return [1, SEPARATOR].concat(pages.slice(currentPage - 2, currentPage + 2), [SEPARATOR, totalPages]);
-    };
+      return maxVisiblePages;
+    }
+
+    function getPageItemsToDisplay(_ref) {
+      var totalPages = _ref.totalPages,
+          currentPage = _ref.currentPage,
+          _ref$maxVisiblePages = _ref.maxVisiblePages,
+          maxVisiblePages = _ref$maxVisiblePages === void 0 ? 6 : _ref$maxVisiblePages;
+      var pages = [];
+      maxVisiblePages = validateAndSetMaxVisiblePages(maxVisiblePages);
+
+      if (totalPages <= maxVisiblePages) {
+        return Array.from({
+          length: totalPages
+        }, function (_, i) {
+          return i + 1;
+        });
+      }
+
+      var remainingPages = maxVisiblePages - 2;
+      var half = Math.floor((remainingPages - 1) / 2);
+      var left = currentPage - half;
+      var right = currentPage + Math.ceil((remainingPages - 1) / 2);
+
+      if (left < 2) {
+        left = 2;
+        right = left + remainingPages - 1;
+      }
+
+      if (right > totalPages - 1) {
+        right = totalPages - 1;
+        left = right - remainingPages + 1;
+      }
+
+      pages.push(1); // always include the first page
+
+      if (left > 2) pages.push("...");
+
+      for (var i = left; i <= right; i++) {
+        pages.push(i);
+      }
+
+      if (right < totalPages - 1) pages.push("...");
+      pages.push(totalPages); // always include the last page
+
+      return pages;
+    }
+
+    var SEPARATOR = "...";
 
     function Pagination(_a) {
-      var onNext = _a.onNext,
-          onPrevious = _a.onPrevious,
-          onSelectPage = _a.onSelectPage,
+      var _a$onNext = _a.onNext,
+          onNext = _a$onNext === void 0 ? noop$2 : _a$onNext,
+          _a$onPrevious = _a.onPrevious,
+          onPrevious = _a$onPrevious === void 0 ? noop$2 : _a$onPrevious,
+          _a$onSelectPage = _a.onSelectPage,
+          onSelectPage = _a$onSelectPage === void 0 ? noop$2 : _a$onSelectPage,
           currentPage = _a.currentPage,
           totalPages = _a.totalPages,
+          _a$maxVisiblePages = _a.maxVisiblePages,
+          maxVisiblePages = _a$maxVisiblePages === void 0 ? 6 : _a$maxVisiblePages,
           nextAriaLabel = _a.nextAriaLabel,
           nextLabel = _a.nextLabel,
           previousAriaLabel = _a.previousAriaLabel,
@@ -51478,11 +51555,14 @@
           scrollToTopAfterPagination = _a.scrollToTopAfterPagination,
           scrollTargetRef = _a.scrollTargetRef,
           ariaLabel = _a["aria-label"],
-          restProps = __rest$3(_a, ["onNext", "onPrevious", "onSelectPage", "currentPage", "totalPages", "nextAriaLabel", "nextLabel", "previousAriaLabel", "previousLabel", "scrollToTopAfterPagination", "scrollTargetRef", "aria-label"]);
+          restProps = __rest$3(_a, ["onNext", "onPrevious", "onSelectPage", "currentPage", "totalPages", "maxVisiblePages", "nextAriaLabel", "nextLabel", "previousAriaLabel", "previousLabel", "scrollToTopAfterPagination", "scrollTargetRef", "aria-label"]);
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
 
+      var phone = !useMediaQuery("phoneLandscape");
+      var largerThanPhone = useMediaQuery("tabletPortrait");
+
       var scrollToTop = function scrollToTop() {
         var _a, _b;
 
@@ -51497,7 +51577,9 @@
 
       return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({
         as: "nav",
-        "aria-label": ariaLabel || t("pagination navigation")
+        gap: "x2",
+        "aria-label": ariaLabel || t("pagination navigation"),
+        alignItems: "center"
       }, restProps), /*#__PURE__*/React__default["default"].createElement(PreviousButton, {
         disabled: currentPage === 1,
         onClick: function onClick() {
@@ -51507,13 +51589,17 @@
           scrollToTop();
         },
         ariaLabel: previousAriaLabel,
-        label: previousLabel
-      }), getPageItemsToDisplay(totalPages, currentPage).map(function (page, index) {
+        label: phone ? null : previousLabel,
+        showIconOnly: phone
+      }), largerThanPhone ? getPageItemsToDisplay({
+        totalPages: totalPages,
+        currentPage: currentPage,
+        maxVisiblePages: maxVisiblePages
+      }).map(function (page, index) {
         var isCurrentPage = currentPage === page;
         if (page === SEPARATOR) return /*#__PURE__*/React__default["default"].createElement(Text, {
           key: "sep" + index,
           py: "x1",
-          mr: "x2",
           fontSize: "small",
           lineHeight: "smallTextBase"
         }, SEPARATOR);else return /*#__PURE__*/React__default["default"].createElement(PageNumber, {
@@ -51531,6 +51617,9 @@
             scrollToTop();
           }
         }, page);
+      }) : /*#__PURE__*/React__default["default"].createElement(PaginationCount, {
+        currentPage: currentPage,
+        totalPages: totalPages
       }), /*#__PURE__*/React__default["default"].createElement(NextButton, {
         disabled: currentPage === totalPages,
         onClick: function onClick() {
@@ -51540,7 +51629,8 @@
           scrollToTop();
         },
         ariaLabel: nextAriaLabel,
-        label: nextLabel
+        label: phone ? null : nextLabel,
+        showIconOnly: phone
       }));
     }
 
@@ -54534,7 +54624,7 @@
       return {
         display: "flex",
         whiteSpace: "nowrap",
-        overflowX: "scroll",
+        overflowX: "auto",
         overflowY: "hidden",
         marginBottom: theme.space.x1,
         "::-webkit-scrollbar": {

package/dist/main.module.js

@@ -50039,6 +50039,7 @@ var de_DE = {
   "expand row": "Zeile erweitern",
   "go to next results": "Zu den n\xE4chsten Ergebnissen wechseln",
   "go to page": "Zu Seite {{count}} wechseln",
+  "current page of total": "Seite {{currentPage}} von {{totalPages}}",
   "go to previous results": "Zu den vorherigen Ergebnissen wechseln",
   "go to": "Wechseln zu",
   "hide actions": "Aktionen verbergen",
@@ -50081,6 +50082,7 @@ var en_US = {
   "expand row": "Expand row",
   "go to next results": "Go to next results",
   "go to page": "Go to page {{count}}",
+  "current page of total": "Page {{currentPage}} of {{totalPages}}",
   "go to previous results": "Go to previous results",
   "go to": "Go to",
   "hide actions": "Hide actions",
@@ -50165,6 +50167,7 @@ var fr_FR = {
   "expand row": "D\xE9velopper la ligne",
   "go to next results": "Aller aux r\xE9sultats suivants",
   "go to page": "Aller \xE0 la page {{count}}",
+  "current page of total": "Page {{currentPage}} sur {{totalPages}}",
   "go to previous results": "Aller aux r\xE9sultats pr\xE9c\xE9dents",
   "go to": "Aller \xE0",
   "hide actions": "Masquer les actions",
@@ -50207,6 +50210,7 @@ var nl_NL = {
   "expand row": "Rij uitvouwen",
   "go to next results": "Ga naar volgende resultaten",
   "go to page": "Ga naar pagina {{count}}",
+  "current page of total": "Pagina {{currentPage}} van {{totalPages}}",
   "go to previous results": "Ga naar vorige resultaten",
   "go to": "Ga naar",
   "hide actions": "Acties verbergen",
@@ -50249,6 +50253,7 @@ var pl_PL = {
   "expand row": "Rozwi\u0144 wiersz",
   "go to next results": "Przejd\u017A do nast\u0119pnych wynik\xF3w",
   "go to page": "Przejd\u017A do strony {{count}}",
+  "current page of total": "Strona {{currentPage}} z {{totalPages}}",
   "go to previous results": "Przejd\u017A do poprzednich wynik\xF3w",
   "go to": "Przejd\u017A do",
   "hide actions": "Hide actions",
@@ -50291,6 +50296,7 @@ var pt_BR = {
   "expand row": "Expandir fila",
   "go to next results": "Ir para resultados seguintes",
   "go to page": "Ir para p\xE1gina {{count}}",
+  "current page of total": "P\xE1gina {{currentPage}} de {{totalPages}}",
   "go to previous results": "Ir para resultados anteriores",
   "go to": "Ir para",
   "hide actions": "Ocultar a\xE7\xF5es",
@@ -50333,6 +50339,7 @@ var ro_RO = {
   "expand row": "Extindere r\xE2nd",
   "go to next results": "Merge\u021Bi la urm\u0103toarele rezultate",
   "go to page": "Merge\u021Bi la pagina {{count}}",
+  "current page of total": "Pagina {{currentPage}} din {{totalPages}}",
   "go to previous results": "Merge\u021Bi la rezultatele anterioare",
   "go to": "Merge\u021Bi la",
   "hide actions": "Ascundere ac\u021Biuni",
@@ -50375,6 +50382,7 @@ var zh_CN = {
   "expand row": "\u5C55\u5F00\u884C",
   "go to next results": "\u8BBF\u95EE\u4E4B\u540E\u7684\u7ED3\u679C",
   "go to page": "\u8BBF\u95EE\u7B2C {{count}} \u9875 ",
+  "current page of total": "\u7B2C {{currentPage}} \u9875\uFF0C\u5171 {{totalPages}} \u9875",
   "go to previous results": "\u8BBF\u95EE\u4E4B\u524D\u7684\u7ED3\u679C",
   "go to": "\u8BBF\u95EE ",
   "hide actions": "\u9690\u85CF\u64CD\u4F5C",
@@ -51356,18 +51364,19 @@ var PaginationButton = styled.button.withConfig({
 })(function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled,
-      currentPage = _ref.currentPage;
+      currentPage = _ref.currentPage,
+      iconOnly = _ref.iconOnly;
   return {
     fontSize: theme.fontSizes.small,
-    padding: theme.space.x1 + " " + theme.space.x2,
+    padding: iconOnly ? theme.space.x1 : theme.space.x1 + " " + theme.space.x2,
     lineHeight: theme.lineHeights.smallTextBase,
     display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     borderRadius: theme.radii.medium,
     border: "1px solid " + (currentPage ? theme.colors.darkBlue : theme.colors.lightGrey),
     color: disabled ? theme.colors.grey : theme.colors.black,
-    "&:not(:last-child)": {
-      marginRight: theme.space.x2
-    },
+    minWidth: iconOnly ? theme.space.x4 : "auto",
     cursor: disabled ? "default" : "pointer",
     "&:hover": {
       background: getHoverBackground(currentPage, disabled, theme)
@@ -51393,67 +51402,135 @@ var PreviousButton = function PreviousButton(_ref) {
       _ref$onClick = _ref.onClick,
       onClick = _ref$onClick === void 0 ? null : _ref$onClick,
       label = _ref.label,
-      ariaLabel = _ref.ariaLabel;
+      ariaLabel = _ref.ariaLabel,
+      showIconOnly = _ref.showIconOnly;
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  var theme = useTheme();
   return /*#__PURE__*/React__default.createElement(PaginationButton, {
     disabled: disabled,
     onClick: onClick,
-    "aria-label": ariaLabel || t("go to previous results")
+    "aria-label": ariaLabel || t("go to previous results"),
+    iconOnly: showIconOnly
   }, /*#__PURE__*/React__default.createElement(Icon, {
     icon: "leftArrow",
-    ml: "-8px"
-  }), " ", label || t("previous"));
+    ml: showIconOnly ? "0" : "-" + theme.space.x1
+  }), !showIconOnly && (label || t("previous")));
 };
 
 var NextButton = function NextButton(_ref) {
   var disabled = _ref.disabled,
       onClick = _ref.onClick,
       label = _ref.label,
-      ariaLabel = _ref.ariaLabel;
+      ariaLabel = _ref.ariaLabel,
+      showIconOnly = _ref.showIconOnly;
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  var theme = useTheme();
   return /*#__PURE__*/React__default.createElement(PaginationButton, {
     disabled: disabled,
     onClick: onClick,
-    "aria-label": ariaLabel || t("go to next results")
-  }, label || t("next"), " ", /*#__PURE__*/React__default.createElement(Icon, {
+    "aria-label": ariaLabel || t("go to next results"),
+    iconOnly: showIconOnly
+  }, !showIconOnly && (label || t("next")), /*#__PURE__*/React__default.createElement(Icon, {
     icon: "rightArrow",
-    mr: "-8px"
+    mr: showIconOnly ? "0" : "-" + theme.space.x1
   }));
 };
 
-var SEPARATOR = "...";
-var getPageItemsToDisplay = function getPageItemsToDisplay(totalPages, currentPage) {
-  var MAX_PAGES_TO_SHOW = 6;
-  var pages = Array.from({
-    length: totalPages
-  }, function (v, i) {
-    return i + 1;
-  });
-  if (totalPages <= MAX_PAGES_TO_SHOW) return pages;
+var PaginationCount = function PaginationCount(_ref) {
+  var currentPage = _ref.currentPage,
+      totalPages = _ref.totalPages;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "small",
+    lineHeight: "smallTextBase",
+    mx: "x2"
+  }, t("current page of total", {
+    currentPage: currentPage,
+    totalPages: totalPages
+  }));
+};
 
-  if (currentPage <= MAX_PAGES_TO_SHOW - 1) {
-    return [].concat(pages.slice(0, 5), [SEPARATOR, totalPages]);
+function validateAndSetMaxVisiblePages(maxVisiblePages) {
+  if (maxVisiblePages < 3) {
+    console.error("Pagination maxVisiblePages prop must larger than 2. Value changed to 3.");
+    return 3;
   }
 
-  if (currentPage > totalPages - 5) {
-    return [1, SEPARATOR].concat(pages.slice(totalPages - 5));
+  if (maxVisiblePages > 12) {
+    console.error("Pagination maxVisiblePages prop must smaller than 13. Value changed to 12.");
+    return 12;
   }
 
-  return [1, SEPARATOR].concat(pages.slice(currentPage - 2, currentPage + 2), [SEPARATOR, totalPages]);
-};
+  return maxVisiblePages;
+}
+
+function getPageItemsToDisplay(_ref) {
+  var totalPages = _ref.totalPages,
+      currentPage = _ref.currentPage,
+      _ref$maxVisiblePages = _ref.maxVisiblePages,
+      maxVisiblePages = _ref$maxVisiblePages === void 0 ? 6 : _ref$maxVisiblePages;
+  var pages = [];
+  maxVisiblePages = validateAndSetMaxVisiblePages(maxVisiblePages);
+
+  if (totalPages <= maxVisiblePages) {
+    return Array.from({
+      length: totalPages
+    }, function (_, i) {
+      return i + 1;
+    });
+  }
+
+  var remainingPages = maxVisiblePages - 2;
+  var half = Math.floor((remainingPages - 1) / 2);
+  var left = currentPage - half;
+  var right = currentPage + Math.ceil((remainingPages - 1) / 2);
+
+  if (left < 2) {
+    left = 2;
+    right = left + remainingPages - 1;
+  }
+
+  if (right > totalPages - 1) {
+    right = totalPages - 1;
+    left = right - remainingPages + 1;
+  }
+
+  pages.push(1); // always include the first page
+
+  if (left > 2) pages.push("...");
+
+  for (var i = left; i <= right; i++) {
+    pages.push(i);
+  }
+
+  if (right < totalPages - 1) pages.push("...");
+  pages.push(totalPages); // always include the last page
+
+  return pages;
+}
+
+var SEPARATOR = "...";
 
 function Pagination(_a) {
-  var onNext = _a.onNext,
-      onPrevious = _a.onPrevious,
-      onSelectPage = _a.onSelectPage,
+  var _a$onNext = _a.onNext,
+      onNext = _a$onNext === void 0 ? noop$2 : _a$onNext,
+      _a$onPrevious = _a.onPrevious,
+      onPrevious = _a$onPrevious === void 0 ? noop$2 : _a$onPrevious,
+      _a$onSelectPage = _a.onSelectPage,
+      onSelectPage = _a$onSelectPage === void 0 ? noop$2 : _a$onSelectPage,
       currentPage = _a.currentPage,
       totalPages = _a.totalPages,
+      _a$maxVisiblePages = _a.maxVisiblePages,
+      maxVisiblePages = _a$maxVisiblePages === void 0 ? 6 : _a$maxVisiblePages,
       nextAriaLabel = _a.nextAriaLabel,
       nextLabel = _a.nextLabel,
       previousAriaLabel = _a.previousAriaLabel,
@@ -51461,11 +51538,14 @@ function Pagination(_a) {
       scrollToTopAfterPagination = _a.scrollToTopAfterPagination,
       scrollTargetRef = _a.scrollTargetRef,
       ariaLabel = _a["aria-label"],
-      restProps = __rest$3(_a, ["onNext", "onPrevious", "onSelectPage", "currentPage", "totalPages", "nextAriaLabel", "nextLabel", "previousAriaLabel", "previousLabel", "scrollToTopAfterPagination", "scrollTargetRef", "aria-label"]);
+      restProps = __rest$3(_a, ["onNext", "onPrevious", "onSelectPage", "currentPage", "totalPages", "maxVisiblePages", "nextAriaLabel", "nextLabel", "previousAriaLabel", "previousLabel", "scrollToTopAfterPagination", "scrollTargetRef", "aria-label"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  var phone = !useMediaQuery("phoneLandscape");
+  var largerThanPhone = useMediaQuery("tabletPortrait");
+
   var scrollToTop = function scrollToTop() {
     var _a, _b;
 
@@ -51480,7 +51560,9 @@ function Pagination(_a) {
 
   return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
     as: "nav",
-    "aria-label": ariaLabel || t("pagination navigation")
+    gap: "x2",
+    "aria-label": ariaLabel || t("pagination navigation"),
+    alignItems: "center"
   }, restProps), /*#__PURE__*/React__default.createElement(PreviousButton, {
     disabled: currentPage === 1,
     onClick: function onClick() {
@@ -51490,13 +51572,17 @@ function Pagination(_a) {
       scrollToTop();
     },
     ariaLabel: previousAriaLabel,
-    label: previousLabel
-  }), getPageItemsToDisplay(totalPages, currentPage).map(function (page, index) {
+    label: phone ? null : previousLabel,
+    showIconOnly: phone
+  }), largerThanPhone ? getPageItemsToDisplay({
+    totalPages: totalPages,
+    currentPage: currentPage,
+    maxVisiblePages: maxVisiblePages
+  }).map(function (page, index) {
     var isCurrentPage = currentPage === page;
     if (page === SEPARATOR) return /*#__PURE__*/React__default.createElement(Text, {
       key: "sep" + index,
       py: "x1",
-      mr: "x2",
       fontSize: "small",
       lineHeight: "smallTextBase"
     }, SEPARATOR);else return /*#__PURE__*/React__default.createElement(PageNumber, {
@@ -51514,6 +51600,9 @@ function Pagination(_a) {
         scrollToTop();
       }
     }, page);
+  }) : /*#__PURE__*/React__default.createElement(PaginationCount, {
+    currentPage: currentPage,
+    totalPages: totalPages
   }), /*#__PURE__*/React__default.createElement(NextButton, {
     disabled: currentPage === totalPages,
     onClick: function onClick() {
@@ -51523,7 +51612,8 @@ function Pagination(_a) {
       scrollToTop();
     },
     ariaLabel: nextAriaLabel,
-    label: nextLabel
+    label: phone ? null : nextLabel,
+    showIconOnly: phone
   }));
 }
 
@@ -54517,7 +54607,7 @@ var TabContainer = styled(Box).withConfig({
   return {
     display: "flex",
     whiteSpace: "nowrap",
-    overflowX: "scroll",
+    overflowX: "auto",
     overflowY: "hidden",
     marginBottom: theme.space.x1,
     "::-webkit-scrollbar": {

package/dist/src/Pagination/NextButton.d.ts

@@ -2,8 +2,9 @@ import React, { ReactNode } from "react";
 type NextButtonProps = {
     disabled: boolean;
     onClick: React.MouseEventHandler<HTMLButtonElement>;
-    label: ReactNode;
-    ariaLabel: string;
+    label?: ReactNode;
+    ariaLabel?: string;
+    showIconOnly?: boolean;
 };
-declare const NextButton: ({ disabled, onClick, label, ariaLabel }: NextButtonProps) => React.JSX.Element;
+declare const NextButton: ({ disabled, onClick, label, ariaLabel, showIconOnly }: NextButtonProps) => React.JSX.Element;
 export default NextButton;

package/dist/src/Pagination/PageNumber.d.ts

@@ -2,9 +2,10 @@
 type PageNumberProps = {
     currentPage: boolean;
 };
-declare const PageNumber: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "currentPage"> & {
+declare const PageNumber: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "currentPage" | "iconOnly"> & {
     disabled?: boolean;
     currentPage?: boolean;
+    iconOnly?: boolean;
 }, "ref"> & {
     ref?: import("react").Ref<HTMLButtonElement>;
 }, PageNumberProps>> & string;

package/dist/src/Pagination/Pagination.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode, RefObject } from "react";
 import { FlexProps } from "../Flex/Flex";
-declare const SEPARATOR: "...";
-export declare const getPageItemsToDisplay: (totalPages: number, currentPage: number) => Array<typeof SEPARATOR | number>;
+export declare const SEPARATOR: "...";
 interface PaginationProps extends FlexProps {
-    currentPage: number;
-    totalPages: number;
     onNext?: () => void;
     onPrevious?: () => void;
     onSelectPage?: (page: number) => void;
+    currentPage: number;
+    totalPages: number;
+    maxVisiblePages?: number;
     nextLabel?: ReactNode;
     nextAriaLabel?: string;
     previousLabel?: ReactNode;
@@ -15,5 +15,5 @@ interface PaginationProps extends FlexProps {
     scrollToTopAfterPagination?: boolean;
     scrollTargetRef?: RefObject<HTMLElement>;
 }
-declare function Pagination({ onNext, onPrevious, onSelectPage, currentPage, totalPages, nextAriaLabel, nextLabel, previousAriaLabel, previousLabel, scrollToTopAfterPagination, scrollTargetRef, "aria-label": ariaLabel, ...restProps }: PaginationProps): React.JSX.Element;
+declare function Pagination({ onNext, onPrevious, onSelectPage, currentPage, totalPages, maxVisiblePages, nextAriaLabel, nextLabel, previousAriaLabel, previousLabel, scrollToTopAfterPagination, scrollTargetRef, "aria-label": ariaLabel, ...restProps }: PaginationProps): React.JSX.Element;
 export default Pagination;

package/dist/src/Pagination/Pagination.story.d.ts

@@ -22,4 +22,5 @@ export declare const WithLessThan5Pages: {
         name: string;
     };
 };
+export declare const CustomMaxVisiblePages: () => React.JSX.Element;
 export declare function ScrollAfterPagination(): React.JSX.Element;

package/dist/src/Pagination/PaginationButton.d.ts

@@ -2,5 +2,6 @@
 declare const PaginationButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     disabled?: boolean;
     currentPage?: boolean;
+    iconOnly?: boolean;
 }>> & string;
 export default PaginationButton;

package/dist/src/Pagination/PaginationCount.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type PaginationCountProps = {
+    currentPage: number;
+    totalPages: number;
+};
+declare const PaginationCount: ({ currentPage, totalPages }: PaginationCountProps) => React.JSX.Element;
+export default PaginationCount;

package/dist/src/Pagination/PreviousButton.d.ts

@@ -2,8 +2,9 @@ import React, { ReactNode } from "react";
 type PreviousButtonProps = {
     disabled: boolean;
     onClick: React.MouseEventHandler<HTMLButtonElement>;
-    label: ReactNode;
-    ariaLabel: string;
+    label?: ReactNode;
+    ariaLabel?: string;
+    showIconOnly?: boolean;
 };
-declare const PreviousButton: ({ disabled, onClick, label, ariaLabel }: PreviousButtonProps) => React.JSX.Element;
+declare const PreviousButton: ({ disabled, onClick, label, ariaLabel, showIconOnly }: PreviousButtonProps) => React.JSX.Element;
 export default PreviousButton;

package/dist/src/Pagination/lib.d.ts

@@ -0,0 +1,9 @@
+import { SEPARATOR } from "./Pagination";
+interface PaginationItemsToDisplay {
+    totalPages: number;
+    currentPage: number;
+    maxVisiblePages?: number;
+}
+type PagesToDisplay = (number | typeof SEPARATOR)[];
+export declare function getPageItemsToDisplay({ totalPages, currentPage, maxVisiblePages, }: PaginationItemsToDisplay): PagesToDisplay;
+export {};

package/dist/src/utils/testHelpers/createMatchMedia.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Creates a mock implementation of the `window.matchMedia` function.
+ * This is useful for changing the width of the viewport in tests without
+ * needing to manipulate the actual browser environment.
+ *
+ */
+export declare const createMatchMedia: (width: number) => (query: string) => MediaQueryList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "13.0.0",
+  "version": "13.1.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -90,6 +90,7 @@
     "@storybook/theming": "^6.1.9",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "^12.1.5",
+    "@types/css-mediaquery": "^0.1.4",
     "@types/jest": "^29.5.1",
     "@types/node": "^14.0.14",
     "@types/react": "^17.0.39",
@@ -108,6 +109,7 @@
     "babel-preset-react": "6.24.1",
     "chromatic": "^6.0.6",
     "concurrently": "^5.2.0",
+    "css-mediaquery": "^0.1.2",
     "cypress": "^13.2.0",
     "cypress-enter-plugin": "^1.0.1",
     "cypress-plugin-tab": "^1.0.1",