@zendeskgarden/react-pagination 9.0.0-next.1 → 9.0.0-next.3

package/README.md

@@ -18,7 +18,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Pagination } from '@zendeskgarden/react-pagination';
+import { OffsetPagination } from '@zendeskgarden/react-pagination';
 
 initialState = {
   currentPage: 1
@@ -28,7 +28,7 @@ initialState = {
  * Place a `ThemeProvider` at the root of your React application
  */
 <ThemeProvider>
-  <Pagination
+  <OffsetPagination
     totalPages={11}
     currentPage={state.currentPage}
     onChange={currentPage => setState({ currentPage })}

package/dist/index.cjs.js

@@ -9,10 +9,9 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var styled = require('styled-components');
-var containerPagination = require('@zendeskgarden/container-pagination');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactTheming = require('@zendeskgarden/react-theming');
+var styled = require('styled-components');
 var polished = require('polished');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -54,19 +53,31 @@ function _extends$4() {
   return _extends$4.apply(this, arguments);
 }
 
-const COMPONENT_ID$6 = 'pagination.pagination_view';
-const StyledPagination = styled__default.default.ul.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.1'
+const COMPONENT_ID$8 = 'pagination.list';
+const StyledList = styled__default.default.ul.attrs({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledPagination",
-  componentId: "sc-1b7nye9-0"
-})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledPagination.defaultProps = {
+  displayName: "StyledList",
+  componentId: "sc-1uz2jxo-0"
+})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+StyledList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'pagination.page';
+const COMPONENT_ID$7 = 'pagination.list_item';
+const StyledListItem = styled__default.default.li.attrs({
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledListItem",
+  componentId: "sc-16j4sju-0"
+})(["box-sizing:border-box;margin-left:", ";user-select:none;&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+StyledListItem.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$6 = 'pagination.page';
 const colorStyles = props => {
   const defaultColor = reactTheming.getColor('neutralHue', 600, props.theme);
   const hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
@@ -77,7 +88,7 @@ const colorStyles = props => {
   const currentBackgroundColor = hoverBackgroundColor;
   const currentHoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.16);
   const currentActiveBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.28);
-  return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
+  return styled.css(["border:none;background:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='page']{background-color:", ";color:", ";}&[aria-current='page']:hover{background-color:", ";}&[aria-current='page']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
     theme: props.theme,
     inset: true
   }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColor('grey', 300, props.theme));
@@ -89,54 +100,54 @@ const sizeStyles$2 = props => {
   const padding = `${props.theme.space.base * 1.5}px`;
   return styled.css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], padding, height, lineHeight, fontSize);
 };
-const StyledPageBase = styled__default.default.li.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.1'
+const StyledPageBase = styled__default.default.button.attrs({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledPageBase",
-  componentId: "sc-lw1w9j-0"
-})(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;user-select:none;", ";&[aria-current='true']{font-weight:", ";}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+  componentId: "sc-ttwj4u-0"
+})(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledPageBase.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'pagination.page';
+const COMPONENT_ID$5 = 'pagination.page';
 const sizeStyles$1 = props => {
-  const height = `${props.theme.space.base * 8}px`;
-  return styled.css(["min-width:", ";max-width:", ";&[aria-current='true']{max-width:none;}"], height, polished.math(`${height} * 2`));
+  const height = props.theme.space.base * 8;
+  return styled.css(["min-width:", "px;max-width:", "px;&[aria-current='true']{max-width:none;}"], height, height * 2);
 };
 const StyledPage = styled__default.default(StyledPageBase).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledPage",
-  componentId: "sc-1k0een3-0"
-})(["margin-left:", ";", ";&[aria-current=\"true\"]{font-weight:", ";}&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => sizeStyles$1(props), props => props.theme.fontWeights.semibold, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+  componentId: "sc-sxjfwy-0"
+})(["", ";&[aria-current=\"true\"]{font-weight:", ";}", ";"], props => sizeStyles$1(props), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledPage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'cursor_pagination';
+const COMPONENT_ID$4 = 'cursor_pagination';
 const StyledCursorPagination = styled__default.default.nav.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledCursorPagination",
   componentId: "sc-qmfecg-0"
-})(["display:flex;justify-content:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:flex;justify-content:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledCursorPagination.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'cursor_pagination.cursor';
+const COMPONENT_ID$3 = 'cursor_pagination.cursor';
 const StyledCursor = styled__default.default(StyledPageBase).attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.3',
   as: 'button'
 }).withConfig({
   displayName: "StyledCursor",
   componentId: "sc-507ee-0"
-})(["display:flex;align-items:center;border:none;background:transparent;padding:", ";overflow:visible;&:not(", "-of-type){margin-right:", "px;}", ";"], props => `0px ${props.theme.space.base * 2}px`, props => props.theme.rtl ? ':first' : ':last', props => props.theme.space.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["display:flex;align-items:center;border:none;background:transparent;padding:", ";overflow:visible;&:not(", "-of-type){margin-right:", "px;}", ";"], props => `0px ${props.theme.space.base * 2}px`, props => props.theme.rtl ? ':first' : ':last', props => props.theme.space.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledCursor.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -166,36 +177,50 @@ StyledIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'pagination.gap';
+const COMPONENT_ID$2 = 'pagination.gap';
 const sizeStyles = props => {
   const shift = 2;
-  const marginTop = `-${shift}px`;
   const fontSize = polished.math(`${props.theme.fontSizes.md} + ${shift}`);
-  return styled.css(["margin-top:", ";font-size:", ";"], marginTop, fontSize);
+  const height = `${props.theme.space.base * 8}px`;
+  const lineHeight = reactTheming.getLineHeight(height, fontSize);
+  const padding = `${props.theme.space.base * 1.5}px`;
+  return styled.css(["padding:0 ", ";min-width:", ";max-width:", ";height:", ";line-height:", ";font-size:", ";"], padding, height, polished.math(`${height} * 2`), height, lineHeight, fontSize);
 };
-const StyledGap = styled__default.default(StyledPage).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.1'
+const StyledGapListItem = styled__default.default(StyledListItem).attrs({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledGap",
-  componentId: "sc-1hqjltf-0"
-})(["cursor:default;", ";&:hover{background-color:transparent;color:inherit;}", ";"], props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledGap.defaultProps = {
+  displayName: "StyledGapListItem",
+  componentId: "sc-10wd0iz-0"
+})(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => reactTheming.getColor('neutralHue', 600, p.theme), props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+StyledGapListItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'pagination.navigation';
+const COMPONENT_ID$1 = 'pagination.navigation';
 const StyledNavigation = styled__default.default(StyledPage).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledNavigation",
-  componentId: "sc-184uuwe-0"
-})(["display:flex;align-items:center;justify-content:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+  componentId: "sc-1lpl8pp-0"
+})(["display:flex;align-items:center;justify-content:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledNavigation.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
+const COMPONENT_ID = 'pagination.pagination_view';
+const StyledNav = styled__default.default.nav.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledNav",
+  componentId: "sc-ppnpkw-0"
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+StyledNav.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
 var _path$3;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
@@ -231,7 +256,9 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
 const PreviousComponent$1 = React.forwardRef((props, ref) => {
   const ariaLabel = reactTheming.useText(PreviousComponent$1, props, 'aria-label', 'Previous page');
   const theme = React.useContext(styled.ThemeContext);
-  return React__namespace.default.createElement(StyledNavigation, _extends$4({}, props, {
+  return React__namespace.default.createElement(StyledNavigation, _extends$4({
+    type: "button"
+  }, props, {
     "aria-label": ariaLabel,
     ref: ref
   }), theme.rtl ? React__namespace.default.createElement(SvgChevronRightStroke, null) : React__namespace.default.createElement(SvgChevronLeftStroke, null));
@@ -242,7 +269,9 @@ const Previous$1 = PreviousComponent$1;
 const NextComponent$1 = React.forwardRef((props, ref) => {
   const ariaLabel = reactTheming.useText(NextComponent$1, props, 'aria-label', 'Next page');
   const theme = React.useContext(styled.ThemeContext);
-  return React__namespace.default.createElement(StyledNavigation, _extends$4({}, props, {
+  return React__namespace.default.createElement(StyledNavigation, _extends$4({
+    type: "button"
+  }, props, {
     "aria-label": ariaLabel,
     ref: ref
   }), theme.rtl ? React__namespace.default.createElement(SvgChevronLeftStroke, null) : React__namespace.default.createElement(SvgChevronRightStroke, null));
@@ -251,9 +280,10 @@ NextComponent$1.displayName = 'Pagination.Next';
 const Next$1 = NextComponent$1;
 
 const PageComponent = React.forwardRef((props, ref) => {
-  const text = props['aria-current'] ? `Current page, page ${props.children}` : `Page ${props.children}`;
-  const ariaLabel = reactTheming.useText(PageComponent, props, 'aria-label', text);
-  return React__namespace.default.createElement(StyledPage, _extends$4({}, props, {
+  const ariaLabel = reactTheming.useText(PageComponent, props, 'aria-label', `Page ${props.children}`);
+  return React__namespace.default.createElement(StyledPage, _extends$4({
+    type: "button"
+  }, props, {
     "aria-label": ariaLabel,
     ref: ref
   }));
@@ -261,131 +291,89 @@ const PageComponent = React.forwardRef((props, ref) => {
 PageComponent.displayName = 'Pagination.Page';
 const Page = PageComponent;
 
-const GapComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledGap, _extends$4({}, props, {
-  ref: ref
-}), "\u2026"));
+const GapComponent = React.forwardRef((props, ref) => {
+  const ariaLabel = reactTheming.useText(GapComponent, props, 'aria-label', 'Ellipsis indicating non-visible pages');
+  return React__namespace.default.createElement(StyledGapListItem, _extends$4({}, props, {
+    "aria-label": ariaLabel,
+    ref: ref
+  }), "\u2026");
+});
 GapComponent.displayName = 'Pagination.Gap';
 const Gap = GapComponent;
 
 const PREVIOUS_KEY = 'previous';
 const NEXT_KEY = 'next';
-const Pagination = React.forwardRef((_ref, ref) => {
+const OffsetPagination = React.forwardRef((_ref, ref) => {
   let {
     currentPage: controlledCurrentPage,
-    transformPageProps,
     totalPages,
     pagePadding,
     pageGap,
     onChange,
+    'aria-label': ariaLabel,
+    labels,
     ...otherProps
   } = _ref;
   const [focusedItem, setFocusedItem] = React.useState();
   const [internalCurrentPage, setInternalCurrentPage] = React.useState(1);
+  const navigationLabel = reactTheming.useText(OffsetPagination, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Pagination');
   const currentPage = containerUtilities.getControlledValue(controlledCurrentPage, internalCurrentPage);
-  const theme = React.useContext(styled.ThemeContext);
-  const {
-    getContainerProps,
-    getPageProps,
-    getPreviousPageProps,
-    getNextPageProps
-  } = containerPagination.usePagination({
-    rtl: theme.rtl,
-    focusedItem,
-    selectedItem: currentPage,
-    onFocus: item => {
-      setFocusedItem(item);
-    },
-    onSelect: item => {
-      let updatedCurrentPage = item;
-      let updatedFocusedKey = focusedItem;
-      if (updatedCurrentPage === PREVIOUS_KEY && currentPage > 1) {
-        updatedCurrentPage = currentPage - 1;
-        if (updatedCurrentPage === 1 && focusedItem === PREVIOUS_KEY) {
-          updatedFocusedKey = 1;
-        }
-      } else if (updatedCurrentPage === NEXT_KEY && currentPage < totalPages) {
-        updatedCurrentPage = currentPage + 1;
-        if (updatedCurrentPage === totalPages && updatedFocusedKey === NEXT_KEY) {
-          updatedFocusedKey = totalPages;
-        }
+  const handleFocus = React.useCallback(item => {
+    setFocusedItem(item);
+  }, []);
+  const handleSelect = React.useCallback(item => {
+    let updatedCurrentPage = item;
+    let updatedFocusedKey = focusedItem;
+    if (updatedCurrentPage === PREVIOUS_KEY && currentPage > 1) {
+      updatedCurrentPage = currentPage - 1;
+      if (updatedCurrentPage === 1 && focusedItem === PREVIOUS_KEY) {
+        updatedFocusedKey = 1;
       }
-      if (onChange && updatedCurrentPage !== undefined) {
-        onChange(updatedCurrentPage);
+    } else if (updatedCurrentPage === NEXT_KEY && currentPage < totalPages) {
+      updatedCurrentPage = currentPage + 1;
+      if (updatedCurrentPage === totalPages && updatedFocusedKey === NEXT_KEY) {
+        updatedFocusedKey = totalPages;
       }
-      setFocusedItem(updatedFocusedKey);
-      setInternalCurrentPage(updatedCurrentPage);
     }
-  });
-  const getTransformedProps = function (pageType) {
-    let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    let pageNumber = arguments.length > 2 ? arguments[2] : undefined;
-    if (transformPageProps) {
-      return transformPageProps(pageType, props, pageNumber);
+    if (onChange && updatedCurrentPage !== undefined) {
+      onChange(updatedCurrentPage);
     }
-    return props;
-  };
+    setFocusedItem(updatedFocusedKey);
+    setInternalCurrentPage(updatedCurrentPage);
+  }, [currentPage, focusedItem, onChange, totalPages]);
   const renderPreviousPage = () => {
     const isFirstPageSelected = totalPages > 0 && currentPage === 1;
-    const focusRef = React__namespace.default.createRef();
-    const props = isFirstPageSelected ?
-    {
-      hidden: true
-    } : {
-      ...getPreviousPageProps({
-        'aria-label': '',
-        role: null,
-        item: PREVIOUS_KEY,
-        focusRef
-      }),
-      'aria-label': undefined
-    };
-    return React__namespace.default.createElement(Previous$1, _extends$4({
-      isFocused: focusedItem === PREVIOUS_KEY
-    }, getTransformedProps('previous', props), {
-      ref: focusRef
+    return React__namespace.default.createElement(StyledListItem, null, React__namespace.default.createElement(Previous$1, {
+      hidden: isFirstPageSelected,
+      onFocus: () => handleFocus('previous'),
+      onClick: () => handleSelect('previous'),
+      "aria-label": labels?.previous
     }));
   };
   const renderNextPage = () => {
     const isLastPageSelected = currentPage === totalPages;
-    const focusRef = React__namespace.default.createRef();
-    const props = isLastPageSelected ?
-    {
-      hidden: true
-    } : {
-      ...getNextPageProps({
-        'aria-label': '',
-        role: null,
-        item: NEXT_KEY,
-        focusRef
-      }),
-      'aria-label': undefined
-    };
-    return React__namespace.default.createElement(Next$1, _extends$4({
-      isFocused: focusedItem === NEXT_KEY
-    }, getTransformedProps('next', props), {
-      ref: focusRef
+    return React__namespace.default.createElement(StyledListItem, null, React__namespace.default.createElement(Next$1, {
+      hidden: isLastPageSelected,
+      onFocus: () => handleFocus('next'),
+      onClick: () => handleSelect('next'),
+      "aria-label": labels?.next
     }));
   };
-  const createGap = pageIndex => React__namespace.default.createElement(Gap, _extends$4({
-    key: `gap-${pageIndex}`
-  }, getTransformedProps('gap')));
+  const createGap = pageIndex => React__namespace.default.createElement(Gap, {
+    key: `gap-${pageIndex}`,
+    "aria-label": labels?.gap
+  });
   const createPage = pageIndex => {
-    const focusRef = React__namespace.default.createRef();
-    const props = {
-      ...getPageProps({
-        'aria-label': '',
-        role: null,
-        item: pageIndex,
-        focusRef
-      }),
-      'aria-label': undefined,
-      title: pageIndex
-    };
-    return React__namespace.default.createElement(Page, _extends$4({
+    return React__namespace.default.createElement(StyledListItem, {
       key: pageIndex
-    }, getTransformedProps('page', props, pageIndex), {
-      ref: focusRef
-    }), pageIndex);
+    }, React__namespace.default.createElement(Page, {
+      onFocus: () => handleFocus(pageIndex),
+      onClick: () => handleSelect(pageIndex),
+      "aria-current": currentPage === pageIndex ? 'page' : undefined,
+      "aria-label": labels?.renderPage?.(pageIndex)
+    }, pageIndex));
   };
   const renderPages = () => {
     const pages = [];
@@ -431,25 +419,25 @@ const Pagination = React.forwardRef((_ref, ref) => {
     }
     return pages;
   };
-  return React__namespace.default.createElement(StyledPagination, _extends$4({}, getContainerProps({
-    role: null
-  }), otherProps, {
+  return React__namespace.default.createElement(StyledNav, {
+    "aria-label": navigationLabel
+  }, React__namespace.default.createElement(StyledList, _extends$4({}, otherProps, {
     ref: ref
-  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage());
+  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage()));
 });
-Pagination.propTypes = {
+OffsetPagination.propTypes = {
   currentPage: PropTypes__default.default.number.isRequired,
   totalPages: PropTypes__default.default.number.isRequired,
   pagePadding: PropTypes__default.default.number,
   pageGap: PropTypes__default.default.number,
   onChange: PropTypes__default.default.func,
-  transformPageProps: PropTypes__default.default.func
+  labels: PropTypes__default.default.any
 };
-Pagination.defaultProps = {
+OffsetPagination.defaultProps = {
   pagePadding: 2,
   pageGap: 2
 };
-Pagination.displayName = 'Pagination';
+OffsetPagination.displayName = 'OffsetPagination';
 
 var _path$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
@@ -553,4 +541,4 @@ CursorPagination.Previous = Previous;
 CursorPagination.Last = Last;
 
 exports.CursorPagination = CursorPagination;
-exports.Pagination = Pagination;
+exports.OffsetPagination = OffsetPagination;

package/dist/index.esm.js

@@ -6,12 +6,11 @@
  */
 
 import * as React from 'react';
-import React__default, { cloneElement, Children, forwardRef, useContext, useState } from 'react';
+import React__default, { cloneElement, Children, forwardRef, useContext, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css, ThemeContext } from 'styled-components';
-import { usePagination } from '@zendeskgarden/container-pagination';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
 import { getColor, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
+import styled, { css, ThemeContext } from 'styled-components';
 import { math } from 'polished';
 
 function _extends$4() {
@@ -29,19 +28,31 @@ function _extends$4() {
   return _extends$4.apply(this, arguments);
 }
 
-const COMPONENT_ID$6 = 'pagination.pagination_view';
-const StyledPagination = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.1'
+const COMPONENT_ID$8 = 'pagination.list';
+const StyledList = styled.ul.attrs({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledPagination",
-  componentId: "sc-1b7nye9-0"
-})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledPagination.defaultProps = {
+  displayName: "StyledList",
+  componentId: "sc-1uz2jxo-0"
+})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$8, props));
+StyledList.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'pagination.page';
+const COMPONENT_ID$7 = 'pagination.list_item';
+const StyledListItem = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledListItem",
+  componentId: "sc-16j4sju-0"
+})(["box-sizing:border-box;margin-left:", ";user-select:none;&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', props => retrieveComponentStyles(COMPONENT_ID$7, props));
+StyledListItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$6 = 'pagination.page';
 const colorStyles = props => {
   const defaultColor = getColor('neutralHue', 600, props.theme);
   const hoverForegroundColor = getColor('neutralHue', 700, props.theme);
@@ -52,7 +63,7 @@ const colorStyles = props => {
   const currentBackgroundColor = hoverBackgroundColor;
   const currentHoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.16);
   const currentActiveBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28);
-  return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+  return css(["border:none;background:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='page']{background-color:", ";color:", ";}&[aria-current='page']:hover{background-color:", ";}&[aria-current='page']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
     theme: props.theme,
     inset: true
   }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColor('grey', 300, props.theme));
@@ -64,54 +75,54 @@ const sizeStyles$2 = props => {
   const padding = `${props.theme.space.base * 1.5}px`;
   return css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], padding, height, lineHeight, fontSize);
 };
-const StyledPageBase = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.1'
+const StyledPageBase = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledPageBase",
-  componentId: "sc-lw1w9j-0"
-})(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;user-select:none;", ";&[aria-current='true']{font-weight:", ";}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$5, props));
+  componentId: "sc-ttwj4u-0"
+})(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledPageBase.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'pagination.page';
+const COMPONENT_ID$5 = 'pagination.page';
 const sizeStyles$1 = props => {
-  const height = `${props.theme.space.base * 8}px`;
-  return css(["min-width:", ";max-width:", ";&[aria-current='true']{max-width:none;}"], height, math(`${height} * 2`));
+  const height = props.theme.space.base * 8;
+  return css(["min-width:", "px;max-width:", "px;&[aria-current='true']{max-width:none;}"], height, height * 2);
 };
 const StyledPage = styled(StyledPageBase).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledPage",
-  componentId: "sc-1k0een3-0"
-})(["margin-left:", ";", ";&[aria-current=\"true\"]{font-weight:", ";}&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => sizeStyles$1(props), props => props.theme.fontWeights.semibold, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', props => retrieveComponentStyles(COMPONENT_ID$4, props));
+  componentId: "sc-sxjfwy-0"
+})(["", ";&[aria-current=\"true\"]{font-weight:", ";}", ";"], props => sizeStyles$1(props), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledPage.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'cursor_pagination';
+const COMPONENT_ID$4 = 'cursor_pagination';
 const StyledCursorPagination = styled.nav.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledCursorPagination",
   componentId: "sc-qmfecg-0"
-})(["display:flex;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:flex;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledCursorPagination.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'cursor_pagination.cursor';
+const COMPONENT_ID$3 = 'cursor_pagination.cursor';
 const StyledCursor = styled(StyledPageBase).attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.3',
   as: 'button'
 }).withConfig({
   displayName: "StyledCursor",
   componentId: "sc-507ee-0"
-})(["display:flex;align-items:center;border:none;background:transparent;padding:", ";overflow:visible;&:not(", "-of-type){margin-right:", "px;}", ";"], props => `0px ${props.theme.space.base * 2}px`, props => props.theme.rtl ? ':first' : ':last', props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["display:flex;align-items:center;border:none;background:transparent;padding:", ";overflow:visible;&:not(", "-of-type){margin-right:", "px;}", ";"], props => `0px ${props.theme.space.base * 2}px`, props => props.theme.rtl ? ':first' : ':last', props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledCursor.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -141,36 +152,50 @@ StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'pagination.gap';
+const COMPONENT_ID$2 = 'pagination.gap';
 const sizeStyles = props => {
   const shift = 2;
-  const marginTop = `-${shift}px`;
   const fontSize = math(`${props.theme.fontSizes.md} + ${shift}`);
-  return css(["margin-top:", ";font-size:", ";"], marginTop, fontSize);
+  const height = `${props.theme.space.base * 8}px`;
+  const lineHeight = getLineHeight(height, fontSize);
+  const padding = `${props.theme.space.base * 1.5}px`;
+  return css(["padding:0 ", ";min-width:", ";max-width:", ";height:", ";line-height:", ";font-size:", ";"], padding, height, math(`${height} * 2`), height, lineHeight, fontSize);
 };
-const StyledGap = styled(StyledPage).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.1'
+const StyledGapListItem = styled(StyledListItem).attrs({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
-  displayName: "StyledGap",
-  componentId: "sc-1hqjltf-0"
-})(["cursor:default;", ";&:hover{background-color:transparent;color:inherit;}", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledGap.defaultProps = {
+  displayName: "StyledGapListItem",
+  componentId: "sc-10wd0iz-0"
+})(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => getColor('neutralHue', 600, p.theme), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
+StyledGapListItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'pagination.navigation';
+const COMPONENT_ID$1 = 'pagination.navigation';
 const StyledNavigation = styled(StyledPage).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledNavigation",
-  componentId: "sc-184uuwe-0"
-})(["display:flex;align-items:center;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+  componentId: "sc-1lpl8pp-0"
+})(["display:flex;align-items:center;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledNavigation.defaultProps = {
   theme: DEFAULT_THEME
 };
 
+const COMPONENT_ID = 'pagination.pagination_view';
+const StyledNav = styled.nav.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.3'
+}).withConfig({
+  displayName: "StyledNav",
+  componentId: "sc-ppnpkw-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNav.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
 var _path$3;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
@@ -206,7 +231,9 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
 const PreviousComponent$1 = forwardRef((props, ref) => {
   const ariaLabel = useText(PreviousComponent$1, props, 'aria-label', 'Previous page');
   const theme = useContext(ThemeContext);
-  return React__default.createElement(StyledNavigation, _extends$4({}, props, {
+  return React__default.createElement(StyledNavigation, _extends$4({
+    type: "button"
+  }, props, {
     "aria-label": ariaLabel,
     ref: ref
   }), theme.rtl ? React__default.createElement(SvgChevronRightStroke, null) : React__default.createElement(SvgChevronLeftStroke, null));
@@ -217,7 +244,9 @@ const Previous$1 = PreviousComponent$1;
 const NextComponent$1 = forwardRef((props, ref) => {
   const ariaLabel = useText(NextComponent$1, props, 'aria-label', 'Next page');
   const theme = useContext(ThemeContext);
-  return React__default.createElement(StyledNavigation, _extends$4({}, props, {
+  return React__default.createElement(StyledNavigation, _extends$4({
+    type: "button"
+  }, props, {
     "aria-label": ariaLabel,
     ref: ref
   }), theme.rtl ? React__default.createElement(SvgChevronLeftStroke, null) : React__default.createElement(SvgChevronRightStroke, null));
@@ -226,9 +255,10 @@ NextComponent$1.displayName = 'Pagination.Next';
 const Next$1 = NextComponent$1;
 
 const PageComponent = forwardRef((props, ref) => {
-  const text = props['aria-current'] ? `Current page, page ${props.children}` : `Page ${props.children}`;
-  const ariaLabel = useText(PageComponent, props, 'aria-label', text);
-  return React__default.createElement(StyledPage, _extends$4({}, props, {
+  const ariaLabel = useText(PageComponent, props, 'aria-label', `Page ${props.children}`);
+  return React__default.createElement(StyledPage, _extends$4({
+    type: "button"
+  }, props, {
     "aria-label": ariaLabel,
     ref: ref
   }));
@@ -236,131 +266,89 @@ const PageComponent = forwardRef((props, ref) => {
 PageComponent.displayName = 'Pagination.Page';
 const Page = PageComponent;
 
-const GapComponent = forwardRef((props, ref) => React__default.createElement(StyledGap, _extends$4({}, props, {
-  ref: ref
-}), "\u2026"));
+const GapComponent = forwardRef((props, ref) => {
+  const ariaLabel = useText(GapComponent, props, 'aria-label', 'Ellipsis indicating non-visible pages');
+  return React__default.createElement(StyledGapListItem, _extends$4({}, props, {
+    "aria-label": ariaLabel,
+    ref: ref
+  }), "\u2026");
+});
 GapComponent.displayName = 'Pagination.Gap';
 const Gap = GapComponent;
 
 const PREVIOUS_KEY = 'previous';
 const NEXT_KEY = 'next';
-const Pagination = forwardRef((_ref, ref) => {
+const OffsetPagination = forwardRef((_ref, ref) => {
   let {
     currentPage: controlledCurrentPage,
-    transformPageProps,
     totalPages,
     pagePadding,
     pageGap,
     onChange,
+    'aria-label': ariaLabel,
+    labels,
     ...otherProps
   } = _ref;
   const [focusedItem, setFocusedItem] = useState();
   const [internalCurrentPage, setInternalCurrentPage] = useState(1);
+  const navigationLabel = useText(OffsetPagination, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Pagination');
   const currentPage = getControlledValue(controlledCurrentPage, internalCurrentPage);
-  const theme = useContext(ThemeContext);
-  const {
-    getContainerProps,
-    getPageProps,
-    getPreviousPageProps,
-    getNextPageProps
-  } = usePagination({
-    rtl: theme.rtl,
-    focusedItem,
-    selectedItem: currentPage,
-    onFocus: item => {
-      setFocusedItem(item);
-    },
-    onSelect: item => {
-      let updatedCurrentPage = item;
-      let updatedFocusedKey = focusedItem;
-      if (updatedCurrentPage === PREVIOUS_KEY && currentPage > 1) {
-        updatedCurrentPage = currentPage - 1;
-        if (updatedCurrentPage === 1 && focusedItem === PREVIOUS_KEY) {
-          updatedFocusedKey = 1;
-        }
-      } else if (updatedCurrentPage === NEXT_KEY && currentPage < totalPages) {
-        updatedCurrentPage = currentPage + 1;
-        if (updatedCurrentPage === totalPages && updatedFocusedKey === NEXT_KEY) {
-          updatedFocusedKey = totalPages;
-        }
+  const handleFocus = useCallback(item => {
+    setFocusedItem(item);
+  }, []);
+  const handleSelect = useCallback(item => {
+    let updatedCurrentPage = item;
+    let updatedFocusedKey = focusedItem;
+    if (updatedCurrentPage === PREVIOUS_KEY && currentPage > 1) {
+      updatedCurrentPage = currentPage - 1;
+      if (updatedCurrentPage === 1 && focusedItem === PREVIOUS_KEY) {
+        updatedFocusedKey = 1;
       }
-      if (onChange && updatedCurrentPage !== undefined) {
-        onChange(updatedCurrentPage);
+    } else if (updatedCurrentPage === NEXT_KEY && currentPage < totalPages) {
+      updatedCurrentPage = currentPage + 1;
+      if (updatedCurrentPage === totalPages && updatedFocusedKey === NEXT_KEY) {
+        updatedFocusedKey = totalPages;
       }
-      setFocusedItem(updatedFocusedKey);
-      setInternalCurrentPage(updatedCurrentPage);
     }
-  });
-  const getTransformedProps = function (pageType) {
-    let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    let pageNumber = arguments.length > 2 ? arguments[2] : undefined;
-    if (transformPageProps) {
-      return transformPageProps(pageType, props, pageNumber);
+    if (onChange && updatedCurrentPage !== undefined) {
+      onChange(updatedCurrentPage);
     }
-    return props;
-  };
+    setFocusedItem(updatedFocusedKey);
+    setInternalCurrentPage(updatedCurrentPage);
+  }, [currentPage, focusedItem, onChange, totalPages]);
   const renderPreviousPage = () => {
     const isFirstPageSelected = totalPages > 0 && currentPage === 1;
-    const focusRef = React__default.createRef();
-    const props = isFirstPageSelected ?
-    {
-      hidden: true
-    } : {
-      ...getPreviousPageProps({
-        'aria-label': '',
-        role: null,
-        item: PREVIOUS_KEY,
-        focusRef
-      }),
-      'aria-label': undefined
-    };
-    return React__default.createElement(Previous$1, _extends$4({
-      isFocused: focusedItem === PREVIOUS_KEY
-    }, getTransformedProps('previous', props), {
-      ref: focusRef
+    return React__default.createElement(StyledListItem, null, React__default.createElement(Previous$1, {
+      hidden: isFirstPageSelected,
+      onFocus: () => handleFocus('previous'),
+      onClick: () => handleSelect('previous'),
+      "aria-label": labels?.previous
     }));
   };
   const renderNextPage = () => {
     const isLastPageSelected = currentPage === totalPages;
-    const focusRef = React__default.createRef();
-    const props = isLastPageSelected ?
-    {
-      hidden: true
-    } : {
-      ...getNextPageProps({
-        'aria-label': '',
-        role: null,
-        item: NEXT_KEY,
-        focusRef
-      }),
-      'aria-label': undefined
-    };
-    return React__default.createElement(Next$1, _extends$4({
-      isFocused: focusedItem === NEXT_KEY
-    }, getTransformedProps('next', props), {
-      ref: focusRef
+    return React__default.createElement(StyledListItem, null, React__default.createElement(Next$1, {
+      hidden: isLastPageSelected,
+      onFocus: () => handleFocus('next'),
+      onClick: () => handleSelect('next'),
+      "aria-label": labels?.next
     }));
   };
-  const createGap = pageIndex => React__default.createElement(Gap, _extends$4({
-    key: `gap-${pageIndex}`
-  }, getTransformedProps('gap')));
+  const createGap = pageIndex => React__default.createElement(Gap, {
+    key: `gap-${pageIndex}`,
+    "aria-label": labels?.gap
+  });
   const createPage = pageIndex => {
-    const focusRef = React__default.createRef();
-    const props = {
-      ...getPageProps({
-        'aria-label': '',
-        role: null,
-        item: pageIndex,
-        focusRef
-      }),
-      'aria-label': undefined,
-      title: pageIndex
-    };
-    return React__default.createElement(Page, _extends$4({
+    return React__default.createElement(StyledListItem, {
       key: pageIndex
-    }, getTransformedProps('page', props, pageIndex), {
-      ref: focusRef
-    }), pageIndex);
+    }, React__default.createElement(Page, {
+      onFocus: () => handleFocus(pageIndex),
+      onClick: () => handleSelect(pageIndex),
+      "aria-current": currentPage === pageIndex ? 'page' : undefined,
+      "aria-label": labels?.renderPage?.(pageIndex)
+    }, pageIndex));
   };
   const renderPages = () => {
     const pages = [];
@@ -406,25 +394,25 @@ const Pagination = forwardRef((_ref, ref) => {
     }
     return pages;
   };
-  return React__default.createElement(StyledPagination, _extends$4({}, getContainerProps({
-    role: null
-  }), otherProps, {
+  return React__default.createElement(StyledNav, {
+    "aria-label": navigationLabel
+  }, React__default.createElement(StyledList, _extends$4({}, otherProps, {
     ref: ref
-  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage());
+  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage()));
 });
-Pagination.propTypes = {
+OffsetPagination.propTypes = {
   currentPage: PropTypes.number.isRequired,
   totalPages: PropTypes.number.isRequired,
   pagePadding: PropTypes.number,
   pageGap: PropTypes.number,
   onChange: PropTypes.func,
-  transformPageProps: PropTypes.func
+  labels: PropTypes.any
 };
-Pagination.defaultProps = {
+OffsetPagination.defaultProps = {
   pagePadding: 2,
   pageGap: 2
 };
-Pagination.displayName = 'Pagination';
+OffsetPagination.displayName = 'OffsetPagination';
 
 var _path$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
@@ -527,4 +515,4 @@ CursorPagination.Next = Next;
 CursorPagination.Previous = Previous;
 CursorPagination.Last = Last;
 
-export { CursorPagination, Pagination };
+export { CursorPagination, OffsetPagination };

package/dist/typings/elements/{Pagination/Pagination.d.ts → OffsetPagination/OffsetPagination.d.ts}

@@ -9,4 +9,4 @@ import { IPaginationProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLUListElement>
  */
-export declare const Pagination: React.ForwardRefExoticComponent<IPaginationProps & React.RefAttributes<HTMLUListElement>>;
+export declare const OffsetPagination: React.ForwardRefExoticComponent<IPaginationProps & React.RefAttributes<HTMLUListElement>>;

package/dist/typings/elements/{Pagination → OffsetPagination}/components/Next.d.ts

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 /**
- * @extends LiHTMLAttributes<HTMLLIElement>
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-export declare const Next: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+export declare const Next: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/{Pagination → OffsetPagination}/components/Page.d.ts

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 /**
- * @extends LiHTMLAttributes<HTMLLIElement>
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-export declare const Page: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+export declare const Page: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/{Pagination → OffsetPagination}/components/Previous.d.ts

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 /**
- * @extends LiHTMLAttributes<HTMLLIElement>
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-export declare const Previous: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+export declare const Previous: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/index.d.ts

@@ -4,6 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { Pagination } from './elements/Pagination/Pagination';
+export { OffsetPagination } from './elements/OffsetPagination/OffsetPagination';
 export { CursorPagination } from './elements/CursorPagination/CursorPagination';
-export type { IPaginationProps, PageType as PAGE_TYPE } from './types';
+export type { IPaginationProps, PageType } from './types';

package/dist/typings/styled/{Pagination/StyledGap.d.ts → OffsetPagination/StyledGapListItem.d.ts}

@@ -5,10 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-export declare const StyledGap: import("styled-components").StyledComponent<"li", DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-} & {
+export declare const StyledGapListItem: import("styled-components").StyledComponent<"li", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & {

package/dist/typings/styled/{Pagination/StyledPagination.d.ts → OffsetPagination/StyledList.d.ts}

@@ -8,7 +8,7 @@
  * 1. List reset.
  * 2. Text truncation.
  */
-export declare const StyledPagination: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
+export declare const StyledList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/OffsetPagination/StyledListItem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+export declare const StyledListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/OffsetPagination/StyledNav.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/{Pagination → OffsetPagination}/StyledNavigation.d.ts

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledNavigation: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+export declare const StyledNavigation: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & {

package/dist/typings/styled/{Pagination → OffsetPagination}/StyledPage.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-export declare const StyledPage: import("styled-components").StyledComponent<"li", DefaultTheme, {
+export declare const StyledPage: import("styled-components").StyledComponent<"button", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & {

package/dist/typings/styled/{Pagination → OffsetPagination}/StyledPageBase.d.ts

@@ -5,7 +5,11 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-export declare const StyledPageBase: import("styled-components").StyledComponent<"li", DefaultTheme, {
+/**
+ * 1. <button> override.
+ * 2. Remove dotted outline from Firefox on focus.
+ */
+export declare const StyledPageBase: import("styled-components").StyledComponent<"button", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/index.d.ts

@@ -4,10 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { StyledPagination } from './Pagination/StyledPagination';
-export { StyledPage } from './Pagination/StyledPage';
+export { StyledList } from './OffsetPagination/StyledList';
+export { StyledListItem } from './OffsetPagination/StyledListItem';
+export { StyledPage } from './OffsetPagination/StyledPage';
 export { StyledCursorPagination } from './CursorPagination/StyledCursorPagination';
 export { StyledCursor } from './CursorPagination/StyledCursor';
 export { StyledIcon, type IStyledIcon } from './CursorPagination/StyledIcon';
-export { StyledGap } from './Pagination/StyledGap';
-export { StyledNavigation } from './Pagination/StyledNavigation';
+export { StyledGapListItem } from './OffsetPagination/StyledGapListItem';
+export { StyledNavigation } from './OffsetPagination/StyledNavigation';
+export { StyledNav } from './OffsetPagination/StyledNav';

package/dist/typings/types/index.d.ts

@@ -7,9 +7,9 @@
 import { HTMLAttributes } from 'react';
 export declare const PAGE_TYPE: readonly ["next", "page", "gap", "previous"];
 export type PageType = (typeof PAGE_TYPE)[number];
-export interface IPaginationProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
+export interface IPaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
     /**
-     * Sets the current page. Pages start at 1.
+     * Sets the current page. Pages start at 1
      */
     currentPage: number;
     /**
@@ -32,11 +32,9 @@ export interface IPaginationProps extends Omit<HTMLAttributes<HTMLUListElement>,
      */
     onChange?: (currentPage: number) => void;
     /**
-     * Applies localized labels, test attributes, etc. to individual pages
-     *
-     * @param {string} pageType The type of the page accepting the props
-     * @param {any} props Default page props to transform
-     * @param {number} pageNumber The page number
+     * Provides localized labels to pagination elements
      */
-    transformPageProps?: (pageType: PageType, props: any, pageNumber?: number) => any;
+    labels?: Record<Exclude<PageType, 'page'>, string> & {
+        renderPage: (p: number) => string;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-pagination",
-  "version": "9.0.0-next.1",
+  "version": "9.0.0-next.3",
   "description": "Components relating to pagination in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,6 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-pagination": "^1.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7"
@@ -33,7 +32,7 @@
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.1",
+    "@zendeskgarden/react-theming": "^9.0.0-next.3",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -46,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a9e4e776bf6ad8860a198fc24f27b2b5cbc83320"
+  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
 }