@codecademy/gamut

Index: package/dist/Pagination/index.js
===================================================================
--- package/dist/Pagination/index.js
+++ package/dist/Pagination/index.js
@@ -1,8 +1,9 @@
 import { MiniChevronLeftIcon, MiniChevronRightIcon } from '@codecademy/gamut-icons';
-import { useMemo, useState } from 'react';
+import { useElementDir } from '@codecademy/gamut-styles';
+import { useMemo, useRef, useState } from 'react';
 import * as React from 'react';
-import { HiddenText } from '..';
+import { Text } from '..';
 import { FlexBox } from '../Box';
 import { AnimatedFadeButton, AnimatedSlideButton } from './AnimatedPaginationButtons';
 import { EllipsisButton } from './EllipsisButton';
 import { PaginationButton } from './PaginationButton';
@@ -22,8 +23,10 @@
   const navigation = isNavigation ? '/' : undefined;
   const [currentPage, setCurrentPage] = useState(pageNumber ?? defaultPageNumber);
   const [liveText, setLiveText] = useState('');
   const [shownPageArray, setShownPageArray] = useState([0]);
+  const rootRef = useRef(null);
+  const isRtl = useElementDir(rootRef);
   const showSkipToButtons = !!(type === undefined && totalPages >= 10 || type === 'includeSkipToButtons');
   const changeShownPages = shouldPagesChange({
     chapterSize,
     currentPage,
@@ -66,16 +69,18 @@
       sm: `${showSkipToButtons ? getMinWidth({
         chapterSize
       }) : 'initial'}`
     },
-    children: [/*#__PURE__*/_jsx(HiddenText, {
+    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: MiniChevronLeftIcon,
+      icon: isRtl ? MiniChevronRightIcon : MiniChevronLeftIcon,
       showButton: currentPage === 1 ? 'hidden' : 'shown',
       onClick: () => changeHandler(currentPage - 1)
     }), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(AnimatedSlideButton, {
@@ -128,9 +133,9 @@
     }), /*#__PURE__*/_jsx(AnimatedFadeButton, {
       "aria-label": `Navigate forward to page ${currentPage + 1}`,
       buttonType: variant,
       href: navigation,
-      icon: MiniChevronRightIcon,
+      icon: isRtl ? MiniChevronLeftIcon : MiniChevronRightIcon,
       showButton: currentPage === totalPages ? 'hidden' : 'shown',
       onClick: () => changeHandler(currentPage + 1)
     })]
   });