@zendeskgarden/react-pagination 8.57.0 → 8.58.0

package/dist/index.esm.js

@@ -14,338 +14,157 @@ import { getControlledValue } from '@zendeskgarden/container-utilities';
 import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends$4() {
   _extends$4 = 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$4.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var COMPONENT_ID$6 = 'pagination.pagination_view';
-var StyledPagination = styled.ul.attrs({
+const COMPONENT_ID$6 = 'pagination.pagination_view';
+const StyledPagination = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledPagination",
   componentId: "sc-1b7nye9-0"
-})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["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 = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'pagination.page';
-var colorStyles = function colorStyles(props) {
-  var defaultColor = getColor('neutralHue', 600, props.theme);
-  var hoverForegroundColor = getColor('neutralHue', 700, props.theme);
-  var hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
-  var boxShadowColor = getColor('primaryHue', 600, props.theme, 0.35);
-  var activeForegroundColor = getColor('neutralHue', 800, props.theme);
-  var activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
-  var currentForegroundColor = activeForegroundColor;
-  var currentBackgroundColor = hoverBackgroundColor;
-  var currentHoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.16);
-  var currentActiveBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28);
+const COMPONENT_ID$5 = 'pagination.page';
+const colorStyles = props => {
+  const defaultColor = getColor('neutralHue', 600, props.theme);
+  const hoverForegroundColor = getColor('neutralHue', 700, props.theme);
+  const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
+  const boxShadowColor = getColor('primaryHue', 600, props.theme, 0.35);
+  const activeForegroundColor = getColor('neutralHue', 800, props.theme);
+  const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
+  const currentForegroundColor = activeForegroundColor;
+  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:", ";}&[data-garden-focus-visible]{box-shadow:inset ", ";}&: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, props.theme.shadows.md(boxShadowColor), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColor('grey', 300, props.theme));
 };
-var sizeStyles$2 = function sizeStyles(props) {
-  var fontSize = props.theme.fontSizes.md;
-  var height = "".concat(props.theme.space.base * 8, "px");
-  var lineHeight = getLineHeight(height, fontSize);
-  var padding = "".concat(props.theme.space.base * 1.5, "px");
+const sizeStyles$2 = props => {
+  const fontSize = props.theme.fontSizes.md;
+  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 ", ";height:", ";line-height:", ";font-size:", ";"], padding, height, lineHeight, fontSize);
 };
-var StyledPageBase = styled.li.attrs({
+const StyledPageBase = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).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;", ";&:focus{outline:none;}&[aria-current='true']{font-weight:", ";}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], function (props) {
-  return props.hidden && 'hidden';
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return sizeStyles$2(props);
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["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;", ";&:focus{outline: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));
 StyledPageBase.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'pagination.page';
-var sizeStyles$1 = function sizeStyles(props) {
-  var height = "".concat(props.theme.space.base * 8, "px");
-  return css(["min-width:", ";max-width:", ";&[aria-current='true']{max-width:none;}"], height, math("".concat(height, " * 2")));
+const COMPONENT_ID$4 = '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`));
 };
-var StyledPage = styled(StyledPageBase).attrs({
+const StyledPage = styled(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledPage",
   componentId: "sc-1k0een3-0"
-})(["margin-left:", ";", ";&[aria-current=\"true\"]{font-weight:", ";}&", "{margin-left:0;}", ";"], function (props) {
-  return "".concat(props.theme.space.base, "px");
-}, function (props) {
-  return sizeStyles$1(props);
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.rtl ? ':last-of-type' : ':first-of-type';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["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));
 StyledPage.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'cursor_pagination';
-var StyledCursorPagination = styled.nav.attrs({
+const COMPONENT_ID$3 = 'cursor_pagination';
+const StyledCursorPagination = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCursorPagination",
   componentId: "sc-qmfecg-0"
-})(["display:flex;justify-content:center;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:flex;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledCursorPagination.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'cursor_pagination.cursor';
-var StyledCursor = styled(StyledPageBase).attrs({
+const COMPONENT_ID$2 = 'cursor_pagination.cursor';
+const StyledCursor = styled(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   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;}", ";"], function (props) {
-  return "0px ".concat(props.theme.space.base * 2, "px");
-}, function (props) {
-  return props.theme.rtl ? ':first' : ':last';
-}, function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return 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$2, props));
 StyledCursor.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$5 = ["children"];
-var marginStyles = function marginStyles(props) {
-  var type = props.type,
-      theme = props.theme;
-  var margin = theme.space.base;
+const marginStyles = props => {
+  const {
+    type,
+    theme
+  } = props;
+  const margin = theme.space.base;
   if (theme.rtl) {
     return css(["margin-", ":", "px;"], type === 'last' || type === 'next' ? 'right' : 'left', margin);
   }
   return css(["margin-", ":", "px;"], type === 'first' || type === 'previous' ? 'right' : 'left', margin);
 };
-var StyledIcon = styled(function (_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+const StyledIcon = styled(_ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
   return cloneElement(Children.only(children), props);
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-2vzk6e-0"
-})(["", " transform:", ";"], marginStyles, function (props) {
-  return props.theme.rtl && 'rotate(180deg)';
-});
+})(["", " transform:", ";"], marginStyles, props => props.theme.rtl && 'rotate(180deg)');
 StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'pagination.gap';
-var sizeStyles = function sizeStyles(props) {
-  var shift = 2;
-  var marginTop = "-".concat(shift, "px");
-  var fontSize = math("".concat(props.theme.fontSizes.md, " + ").concat(shift));
+const COMPONENT_ID$1 = '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);
 };
-var StyledGap = styled(StyledPage).attrs({
+const StyledGap = styled(StyledPage).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledGap",
   componentId: "sc-1hqjltf-0"
-})(["cursor:default;", ";&:hover{background-color:transparent;color:inherit;}", ";"], function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["cursor:default;", ";&:hover{background-color:transparent;color:inherit;}", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledGap.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'pagination.navigation';
-var StyledNavigation = styled(StyledPage).attrs({
+const COMPONENT_ID = 'pagination.navigation';
+const StyledNavigation = styled(StyledPage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledNavigation",
   componentId: "sc-184uuwe-0"
-})(["display:flex;align-items:center;justify-content:center;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["display:flex;align-items:center;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledNavigation.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -361,7 +180,8 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
@@ -379,85 +199,84 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
   })));
 };
 
-var PreviousComponent$1 = forwardRef(function (props, ref) {
-  var ariaLabel = useText(PreviousComponent$1, props, 'aria-label', 'Previous page');
-  var theme = useContext(ThemeContext);
+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, {
     "aria-label": ariaLabel,
     ref: ref
   }), theme.rtl ? React__default.createElement(SvgChevronRightStroke, null) : React__default.createElement(SvgChevronLeftStroke, null));
 });
 PreviousComponent$1.displayName = 'Pagination.Previous';
-var Previous$1 = PreviousComponent$1;
+const Previous$1 = PreviousComponent$1;
 
-var NextComponent$1 = forwardRef(function (props, ref) {
-  var ariaLabel = useText(NextComponent$1, props, 'aria-label', 'Next page');
-  var theme = useContext(ThemeContext);
+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, {
     "aria-label": ariaLabel,
     ref: ref
   }), theme.rtl ? React__default.createElement(SvgChevronLeftStroke, null) : React__default.createElement(SvgChevronRightStroke, null));
 });
 NextComponent$1.displayName = 'Pagination.Next';
-var Next$1 = NextComponent$1;
+const Next$1 = NextComponent$1;
 
-var PageComponent = forwardRef(function (props, ref) {
-  var text = props['aria-current'] ? "Current page, page ".concat(props.children) : "Page ".concat(props.children);
-  var ariaLabel = useText(PageComponent, props, 'aria-label', text);
+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, {
     "aria-label": ariaLabel,
     ref: ref
   }));
 });
 PageComponent.displayName = 'Pagination.Page';
-var Page = PageComponent;
+const Page = PageComponent;
 
-var GapComponent = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledGap, _extends$4({}, props, {
-    ref: ref
-  }), "\u2026");
-});
+const GapComponent = forwardRef((props, ref) => React__default.createElement(StyledGap, _extends$4({}, props, {
+  ref: ref
+}), "\u2026"));
 GapComponent.displayName = 'Pagination.Gap';
-var Gap = GapComponent;
-
-var _excluded$4 = ["currentPage", "transformPageProps", "totalPages", "pagePadding", "pageGap", "onChange"];
-var PREVIOUS_KEY = 'previous';
-var NEXT_KEY = 'next';
-var Pagination = forwardRef(function (_ref, ref) {
-  var controlledCurrentPage = _ref.currentPage,
-      transformPageProps = _ref.transformPageProps,
-      totalPages = _ref.totalPages,
-      pagePadding = _ref.pagePadding,
-      pageGap = _ref.pageGap,
-      onChange = _ref.onChange,
-      otherProps = _objectWithoutProperties(_ref, _excluded$4);
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      focusedItem = _useState2[0],
-      setFocusedItem = _useState2[1];
-  var _useState3 = useState(1),
-      _useState4 = _slicedToArray(_useState3, 2),
-      internalCurrentPage = _useState4[0],
-      setInternalCurrentPage = _useState4[1];
-  var currentPage = getControlledValue(controlledCurrentPage, internalCurrentPage);
-  var theme = useContext(ThemeContext);
-  var _usePagination = usePagination({
+const Gap = GapComponent;
+
+const PREVIOUS_KEY = 'previous';
+const NEXT_KEY = 'next';
+const Pagination = forwardRef((_ref, ref) => {
+  let {
+    currentPage: controlledCurrentPage,
+    transformPageProps,
+    totalPages,
+    pagePadding,
+    pageGap,
+    onChange,
+    ...otherProps
+  } = _ref;
+  const [focusedItem, setFocusedItem] = useState();
+  const [internalCurrentPage, setInternalCurrentPage] = useState(1);
+  const currentPage = getControlledValue(controlledCurrentPage, internalCurrentPage);
+  const theme = useContext(ThemeContext);
+  const {
+    getContainerProps,
+    getPageProps,
+    getPreviousPageProps,
+    getNextPageProps
+  } = usePagination({
     rtl: theme.rtl,
-    focusedItem: focusedItem,
+    focusedItem,
     selectedItem: currentPage,
-    onFocus: function onFocus(item) {
+    onFocus: item => {
       setFocusedItem(item);
     },
-    onSelect: function onSelect(item) {
-      var updatedCurrentPage = item;
-      var updatedFocusedKey = focusedItem;
+    onSelect: item => {
+      let updatedCurrentPage = item;
+      let updatedFocusedKey = focusedItem;
       if (updatedCurrentPage === PREVIOUS_KEY && currentPage > 1) {
         updatedCurrentPage = currentPage - 1;
         if (updatedCurrentPage === 1 && focusedItem === PREVIOUS_KEY) {
@@ -475,92 +294,89 @@ var Pagination = forwardRef(function (_ref, ref) {
       setFocusedItem(updatedFocusedKey);
       setInternalCurrentPage(updatedCurrentPage);
     }
-  }),
-      getContainerProps = _usePagination.getContainerProps,
-      getPageProps = _usePagination.getPageProps,
-      getPreviousPageProps = _usePagination.getPreviousPageProps,
-      getNextPageProps = _usePagination.getNextPageProps;
-  var getTransformedProps = function getTransformedProps(pageType) {
-    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var pageNumber = arguments.length > 2 ? arguments[2] : undefined;
+  });
+  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);
     }
     return props;
   };
-  var renderPreviousPage = function renderPreviousPage() {
-    var isFirstPageSelected = totalPages > 0 && currentPage === 1;
-    var focusRef = React__default.createRef();
-    var props = isFirstPageSelected ?
+  const renderPreviousPage = () => {
+    const isFirstPageSelected = totalPages > 0 && currentPage === 1;
+    const focusRef = React__default.createRef();
+    const props = isFirstPageSelected ?
     {
       hidden: true
-    } : _objectSpread2(_objectSpread2({}, getPreviousPageProps({
-      'aria-label': '',
-      role: null,
-      item: PREVIOUS_KEY,
-      focusRef: focusRef
-    })), {}, {
+    } : {
+      ...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
     }));
   };
-  var renderNextPage = function renderNextPage() {
-    var isLastPageSelected = currentPage === totalPages;
-    var focusRef = React__default.createRef();
-    var props = isLastPageSelected ?
+  const renderNextPage = () => {
+    const isLastPageSelected = currentPage === totalPages;
+    const focusRef = React__default.createRef();
+    const props = isLastPageSelected ?
     {
       hidden: true
-    } : _objectSpread2(_objectSpread2({}, getNextPageProps({
-      'aria-label': '',
-      role: null,
-      item: NEXT_KEY,
-      focusRef: focusRef
-    })), {}, {
+    } : {
+      ...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
     }));
   };
-  var createGap = function createGap(pageIndex) {
-    return React__default.createElement(Gap, _extends$4({
-      key: "gap-".concat(pageIndex)
-    }, getTransformedProps('gap')));
-  };
-  var createPage = function createPage(pageIndex) {
-    var focusRef = React__default.createRef();
-    var props = _objectSpread2(_objectSpread2({}, getPageProps({
-      'aria-label': '',
-      role: null,
-      item: pageIndex,
-      focusRef: focusRef
-    })), {}, {
+  const createGap = pageIndex => React__default.createElement(Gap, _extends$4({
+    key: `gap-${pageIndex}`
+  }, getTransformedProps('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({
       key: pageIndex
     }, getTransformedProps('page', props, pageIndex), {
       ref: focusRef
     }), pageIndex);
   };
-  var renderPages = function renderPages() {
-    var pages = [];
-    var PADDING = pagePadding;
-    var GAP = pageGap;
-    for (var pageIndex = 1; pageIndex <= totalPages; pageIndex++) {
+  const renderPages = () => {
+    const pages = [];
+    const PADDING = pagePadding;
+    const GAP = pageGap;
+    for (let pageIndex = 1; pageIndex <= totalPages; pageIndex++) {
       if (pageIndex === currentPage || pageIndex < GAP || pageIndex > totalPages - GAP + 1) {
         pages.push(createPage(pageIndex));
         continue;
       }
-      var minimum = void 0;
-      var maximum = void 0;
+      let minimum;
+      let maximum;
       if (currentPage <= GAP + PADDING) {
         minimum = GAP + 1;
         maximum = minimum + PADDING * 2;
@@ -625,17 +441,19 @@ var SvgChevronDoubleLeftStroke = function SvgChevronDoubleLeftStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M7.812 13.39a.5.5 0 01-.64-.012l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L4.141 8l3.75 4.688a.5.5 0 01-.079.702zm5 0a.5.5 0 01-.64-.012l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L9.141 8l3.75 4.688a.5.5 0 01-.079.702z"
   })));
 };
 
-var _excluded$3 = ["children"];
-var FirstComponent = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded$3);
+const FirstComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...other
+  } = _ref;
   return React__default.createElement(StyledCursor, _extends$4({
     ref: ref
   }, other), React__default.createElement(StyledIcon, {
@@ -643,12 +461,13 @@ var FirstComponent = forwardRef(function (_ref, ref) {
   }, React__default.createElement(SvgChevronDoubleLeftStroke, null)), React__default.createElement("span", null, children));
 });
 FirstComponent.displayName = 'CursorPagination.First';
-var First = FirstComponent;
+const First = FirstComponent;
 
-var _excluded$2 = ["children"];
-var NextComponent = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded$2);
+const NextComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...other
+  } = _ref;
   return React__default.createElement(StyledCursor, _extends$4({
     ref: ref,
     as: "button"
@@ -657,12 +476,13 @@ var NextComponent = forwardRef(function (_ref, ref) {
   }, React__default.createElement(SvgChevronRightStroke, null)));
 });
 NextComponent.displayName = 'CursorPagination.Next';
-var Next = NextComponent;
+const Next = NextComponent;
 
-var _excluded$1 = ["children"];
-var PreviousComponent = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded$1);
+const PreviousComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...other
+  } = _ref;
   return React__default.createElement(StyledCursor, _extends$4({
     ref: ref,
     as: "button"
@@ -671,7 +491,7 @@ var PreviousComponent = forwardRef(function (_ref, ref) {
   }, React__default.createElement(SvgChevronLeftStroke, null)), React__default.createElement("span", null, children));
 });
 PreviousComponent.displayName = 'CursorPagination.Previous';
-var Previous = PreviousComponent;
+const Previous = PreviousComponent;
 
 var _path;
 
@@ -684,17 +504,19 @@ var SvgChevronDoubleRightStroke = function SvgChevronDoubleRightStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M8.188 2.61a.5.5 0 01.64.013l.062.065 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L11.859 8l-3.75-4.688a.5.5 0 01.079-.702zm-5 0a.5.5 0 01.64.013l.062.065 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L6.859 8l-3.75-4.688a.5.5 0 01.079-.702z"
   })));
 };
 
-var _excluded = ["children"];
-var LastComponent = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded);
+const LastComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...other
+  } = _ref;
   return React__default.createElement(StyledCursor, _extends$4({
     ref: ref,
     as: "button"
@@ -703,15 +525,13 @@ var LastComponent = forwardRef(function (_ref, ref) {
   }, React__default.createElement(SvgChevronDoubleRightStroke, null)));
 });
 LastComponent.displayName = 'CursorPagination.Last';
-var Last = LastComponent;
+const Last = LastComponent;
 
-var CursorPaginationComponent = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledCursorPagination, _extends$4({
-    ref: ref
-  }, props));
-});
+const CursorPaginationComponent = forwardRef((props, ref) => React__default.createElement(StyledCursorPagination, _extends$4({
+  ref: ref
+}, props)));
 CursorPaginationComponent.displayName = 'CursorPagination';
-var CursorPagination = CursorPaginationComponent;
+const CursorPagination = CursorPaginationComponent;
 CursorPagination.First = First;
 CursorPagination.Next = Next;
 CursorPagination.Previous = Previous;