@zendeskgarden/react-pagination 8.75.1 → 8.76.1

package/dist/index.esm.js

@@ -1,530 +0,0 @@
-/**
- * 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.
- */
-
-import * as React from 'react';
-import React__default, { cloneElement, Children, forwardRef, useContext, useState } 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 { getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
-import { math } from 'polished';
-
-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);
-}
-
-const COMPONENT_ID$6 = 'pagination.pagination_view';
-const StyledPagination = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.75.1'
-}).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 => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledPagination.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'pagination.page';
-const colorStyles = props => {
-  const defaultColor = getColorV8('neutralHue', 600, props.theme);
-  const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
-  const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
-  const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
-  const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
-  const currentForegroundColor = activeForegroundColor;
-  const currentBackgroundColor = hoverBackgroundColor;
-  const currentHoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.16);
-  const currentActiveBackgroundColor = getColorV8('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({
-    theme: props.theme,
-    inset: true
-  }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColorV8('grey', 300, props.theme));
-};
-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);
-};
-const StyledPageBase = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.75.1'
-}).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));
-StyledPageBase.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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`));
-};
-const StyledPage = styled(StyledPageBase).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.75.1'
-}).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));
-StyledPage.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'cursor_pagination';
-const StyledCursorPagination = styled.nav.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledCursorPagination",
-  componentId: "sc-qmfecg-0"
-})(["display:flex;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledCursorPagination.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'cursor_pagination.cursor';
-const StyledCursor = styled(StyledPageBase).attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.75.1',
-  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));
-StyledCursor.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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);
-};
-const StyledIcon = styled(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).withConfig({
-  displayName: "StyledIcon",
-  componentId: "sc-2vzk6e-0"
-})(["", " transform:", ";"], marginStyles, props => props.theme.rtl && 'rotate(180deg)');
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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);
-};
-const StyledGap = styled(StyledPage).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.75.1'
-}).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 = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'pagination.navigation';
-const StyledNavigation = styled(StyledPage).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledNavigation",
-  componentId: "sc-184uuwe-0"
-})(["display:flex;align-items:center;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledNavigation.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) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, 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"
-  })));
-};
-
-var _path$2;
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
-var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, 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"
-  })));
-};
-
-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';
-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, {
-    "aria-label": ariaLabel,
-    ref: ref
-  }), theme.rtl ? React__default.createElement(SvgChevronLeftStroke, null) : React__default.createElement(SvgChevronRightStroke, null));
-});
-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, {
-    "aria-label": ariaLabel,
-    ref: ref
-  }));
-});
-PageComponent.displayName = 'Pagination.Page';
-const Page = PageComponent;
-
-const GapComponent = forwardRef((props, ref) => React__default.createElement(StyledGap, _extends$4({}, props, {
-  ref: ref
-}), "\u2026"));
-GapComponent.displayName = 'Pagination.Gap';
-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,
-    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;
-        }
-      }
-      if (onChange && updatedCurrentPage !== undefined) {
-        onChange(updatedCurrentPage);
-      }
-      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);
-    }
-    return props;
-  };
-  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
-    }));
-  };
-  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
-    }));
-  };
-  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);
-  };
-  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;
-      }
-      let minimum;
-      let maximum;
-      if (currentPage <= GAP + PADDING) {
-        minimum = GAP + 1;
-        maximum = minimum + PADDING * 2;
-      } else if (currentPage >= totalPages - GAP - PADDING) {
-        maximum = totalPages - GAP;
-        minimum = maximum - PADDING * 2;
-      } else {
-        minimum = currentPage - PADDING;
-        maximum = currentPage + PADDING;
-      }
-      if (pageIndex >= minimum && pageIndex <= currentPage || pageIndex >= currentPage && pageIndex <= maximum) {
-        pages.push(createPage(pageIndex));
-        continue;
-      }
-      if (pageIndex === GAP) {
-        if (minimum > GAP + 1 && currentPage > GAP + PADDING + 1) {
-          pages.push(createGap(pageIndex));
-        } else {
-          pages.push(createPage(pageIndex));
-        }
-        continue;
-      }
-      if (pageIndex === totalPages - GAP + 1) {
-        if (maximum < totalPages - GAP && currentPage < totalPages - GAP - PADDING) {
-          pages.push(createGap(pageIndex));
-        } else {
-          pages.push(createPage(pageIndex));
-        }
-        continue;
-      }
-    }
-    return pages;
-  };
-  return React__default.createElement(StyledPagination, _extends$4({}, getContainerProps({
-    role: null
-  }), otherProps, {
-    ref: ref
-  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage());
-});
-Pagination.propTypes = {
-  currentPage: PropTypes.number.isRequired,
-  totalPages: PropTypes.number.isRequired,
-  pagePadding: PropTypes.number,
-  pageGap: PropTypes.number,
-  onChange: PropTypes.func,
-  transformPageProps: PropTypes.func
-};
-Pagination.defaultProps = {
-  pagePadding: 2,
-  pageGap: 2
-};
-Pagination.displayName = 'Pagination';
-
-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); }
-var SvgChevronDoubleLeftStroke = function SvgChevronDoubleLeftStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, 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"
-  })));
-};
-
-const FirstComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...other
-  } = _ref;
-  return React__default.createElement(StyledCursor, _extends$4({
-    ref: ref
-  }, other), React__default.createElement(StyledIcon, {
-    type: "first"
-  }, React__default.createElement(SvgChevronDoubleLeftStroke, null)), React__default.createElement("span", null, children));
-});
-FirstComponent.displayName = 'CursorPagination.First';
-const First = FirstComponent;
-
-const NextComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...other
-  } = _ref;
-  return React__default.createElement(StyledCursor, _extends$4({
-    ref: ref,
-    as: "button"
-  }, other), React__default.createElement("span", null, children), React__default.createElement(StyledIcon, {
-    type: "next"
-  }, React__default.createElement(SvgChevronRightStroke, null)));
-});
-NextComponent.displayName = 'CursorPagination.Next';
-const Next = NextComponent;
-
-const PreviousComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...other
-  } = _ref;
-  return React__default.createElement(StyledCursor, _extends$4({
-    ref: ref,
-    as: "button"
-  }, other), React__default.createElement(StyledIcon, {
-    type: "previous"
-  }, React__default.createElement(SvgChevronLeftStroke, null)), React__default.createElement("span", null, children));
-});
-PreviousComponent.displayName = 'CursorPagination.Previous';
-const Previous = PreviousComponent;
-
-var _path;
-function _extends() { _extends = 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.apply(this, arguments); }
-var SvgChevronDoubleRightStroke = function SvgChevronDoubleRightStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, 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"
-  })));
-};
-
-const LastComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...other
-  } = _ref;
-  return React__default.createElement(StyledCursor, _extends$4({
-    ref: ref,
-    as: "button"
-  }, other), React__default.createElement("span", null, children), React__default.createElement(StyledIcon, {
-    type: "last"
-  }, React__default.createElement(SvgChevronDoubleRightStroke, null)));
-});
-LastComponent.displayName = 'CursorPagination.Last';
-const Last = LastComponent;
-
-const CursorPaginationComponent = forwardRef((props, ref) => React__default.createElement(StyledCursorPagination, _extends$4({
-  ref: ref
-}, props)));
-CursorPaginationComponent.displayName = 'CursorPagination';
-const CursorPagination = CursorPaginationComponent;
-CursorPagination.First = First;
-CursorPagination.Next = Next;
-CursorPagination.Previous = Previous;
-CursorPagination.Last = Last;
-
-export { CursorPagination, Pagination };