@codecademy/gamut

Index: package/dist/Pagination/index.js
===================================================================
--- package/dist/Pagination/index.js
+++ package/dist/Pagination/index.js
@@ -17,9 +17,10 @@
   onChange,
   pageNumber,
   totalPages,
   type,
-  variant = 'stroke'
+  variant = 'stroke',
+  ...rest
 }) => {
   const navigation = isNavigation ? '/' : undefined;
   const [currentPage, setCurrentPage] = useState(pageNumber ?? defaultPageNumber);
   const [liveText, setLiveText] = useState('');
@@ -59,84 +60,89 @@
   useMemo(() => {
     if (pageNumber) changeHandler(pageNumber);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageNumber]);
-  return /*#__PURE__*/_jsxs(FlexBox, {
-    "aria-label": navigation ? `Browse Content By Page, total pages ${totalPages}` : `Paginated Navigation, total pages ${totalPages}`,
-    as: navigation ? 'nav' : undefined,
-    justifyContent: "center",
-    minWidth: {
-      _: 'initial',
-      sm: `${showSkipToButtons ? getMinWidth({
-        chapterSize
-      }) : 'initial'}`
-    },
-    ref: rootRef,
-    children: [/*#__PURE__*/_jsx(Text, {
-      "aria-live": "polite",
-      screenreader: true,
-      children: liveText
-    }), /*#__PURE__*/_jsx(AnimatedFadeButton, {
-      "aria-label": `Navigate back to page ${currentPage - 1}`,
-      buttonType: variant,
-      href: navigation,
-      icon: isRtl ? MiniChevronRightIcon : MiniChevronLeftIcon,
-      showButton: currentPage === 1 ? 'hidden' : 'shown',
-      onClick: () => changeHandler(currentPage - 1)
-    }), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(AnimatedSlideButton, {
-        "aria-label": "Jump back to page 1",
-        buttonDirection: "back",
+  return (
+    /*#__PURE__*/
+    // rest spreads last so a consumer can override the defaults, per house style
+    _jsxs(FlexBox, {
+      "aria-label": navigation ? `Browse Content By Page, total pages ${totalPages}` : `Paginated Navigation, total pages ${totalPages}`,
+      as: navigation ? 'nav' : undefined,
+      justifyContent: "center",
+      minWidth: {
+        _: 'initial',
+        sm: `${showSkipToButtons ? getMinWidth({
+          chapterSize
+        }) : 'initial'}`
+      },
+      ...rest,
+      ref: rootRef,
+      children: [/*#__PURE__*/_jsx(Text, {
+        "aria-live": "polite",
+        screenreader: true,
+        children: liveText
+      }), /*#__PURE__*/_jsx(AnimatedFadeButton, {
+        "aria-label": `Navigate back to page ${currentPage - 1}`,
         buttonType: variant,
-        display: hideOnMobile,
         href: navigation,
-        showButton: shownPageArray[0] === 1 ? 'hidden' : 'shown',
-        onClick: () => changeHandler(1),
-        children: "1"
-      }), /*#__PURE__*/_jsx(EllipsisButton, {
-        "aria-label": `Jump back to page ${backPageNumber}`,
-        buttonDirection: "back",
+        icon: isRtl ? MiniChevronRightIcon : MiniChevronLeftIcon,
+        showButton: currentPage === 1 ? 'hidden' : 'shown',
+        onClick: () => changeHandler(currentPage - 1)
+      }), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(AnimatedSlideButton, {
+          "aria-label": "Jump back to page 1",
+          buttonDirection: "back",
+          buttonType: variant,
+          display: hideOnMobile,
+          href: navigation,
+          showButton: shownPageArray[0] === 1 ? 'hidden' : 'shown',
+          onClick: () => changeHandler(1),
+          children: "1"
+        }), /*#__PURE__*/_jsx(EllipsisButton, {
+          "aria-label": `Jump back to page ${backPageNumber}`,
+          buttonDirection: "back",
+          buttonType: variant,
+          display: hideOnMobile,
+          href: navigation,
+          showButton: shownPageArray[0] === 1 ? 'hidden' : 'shown',
+          onClick: () => changeHandler(backPageNumber)
+        })]
+      }), shownPageArray.map(page => /*#__PURE__*/_jsx(PaginationButton, {
+        "aria-current": page === currentPage && 'page',
+        "aria-label": `${page === totalPages ? 'Last Page, ' : ''}Page ${page}`,
         buttonType: variant,
-        display: hideOnMobile,
         href: navigation,
-        showButton: shownPageArray[0] === 1 ? 'hidden' : 'shown',
-        onClick: () => changeHandler(backPageNumber)
-      })]
-    }), shownPageArray.map(page => /*#__PURE__*/_jsx(PaginationButton, {
-      "aria-current": page === currentPage && 'page',
-      "aria-label": `${page === totalPages ? 'Last Page, ' : ''}Page ${page}`,
-      buttonType: variant,
-      href: navigation,
-      selected: page === currentPage,
-      onClick: () => changeHandler(page),
-      children: page
-    }, page)), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(EllipsisButton, {
-        "aria-label": `Jump forward to page ${forwardPageNumber}`,
-        buttonDirection: "forward",
+        selected: page === currentPage,
+        onClick: () => changeHandler(page),
+        children: page
+      }, page)), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(EllipsisButton, {
+          "aria-label": `Jump forward to page ${forwardPageNumber}`,
+          buttonDirection: "forward",
+          buttonType: variant,
+          display: hideOnMobile,
+          href: navigation,
+          showButton: shownPageArray[chapterSize - 1] === totalPages ? 'hidden' : 'shown',
+          onClick: () => {
+            changeHandler(forwardPageNumber);
+          }
+        }), /*#__PURE__*/_jsx(AnimatedSlideButton, {
+          "aria-label": `Jump forward to last page, page ${totalPages}`,
+          buttonDirection: "forward",
+          buttonType: variant,
+          display: hideOnMobile,
+          href: navigation,
+          showButton: shownPageArray[chapterSize - 1] === totalPages ? 'hidden' : 'shown',
+          onClick: () => changeHandler(totalPages),
+          children: totalPages
+        })]
+      }), /*#__PURE__*/_jsx(AnimatedFadeButton, {
+        "aria-label": `Navigate forward to page ${currentPage + 1}`,
         buttonType: variant,
-        display: hideOnMobile,
         href: navigation,
-        showButton: shownPageArray[chapterSize - 1] === totalPages ? 'hidden' : 'shown',
-        onClick: () => {
-          changeHandler(forwardPageNumber);
-        }
-      }), /*#__PURE__*/_jsx(AnimatedSlideButton, {
-        "aria-label": `Jump forward to last page, page ${totalPages}`,
-        buttonDirection: "forward",
-        buttonType: variant,
-        display: hideOnMobile,
-        href: navigation,
-        showButton: shownPageArray[chapterSize - 1] === totalPages ? 'hidden' : 'shown',
-        onClick: () => changeHandler(totalPages),
-        children: totalPages
+        icon: isRtl ? MiniChevronLeftIcon : MiniChevronRightIcon,
+        showButton: currentPage === totalPages ? 'hidden' : 'shown',
+        onClick: () => changeHandler(currentPage + 1)
       })]
-    }), /*#__PURE__*/_jsx(AnimatedFadeButton, {
-      "aria-label": `Navigate forward to page ${currentPage + 1}`,
-      buttonType: variant,
-      href: navigation,
-      icon: isRtl ? MiniChevronLeftIcon : MiniChevronRightIcon,
-      showButton: currentPage === totalPages ? 'hidden' : 'shown',
-      onClick: () => changeHandler(currentPage + 1)
-    })]
-  });
+    })
+  );
 };
\ No newline at end of file