@zendeskgarden/react-pagination 9.0.0-next.7 → 9.0.0-next.8

package/dist/index.esm.js

@@ -1,518 +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, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { getControlledValue } from '@zendeskgarden/container-utilities';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
-import styled, { css, ThemeContext } from 'styled-components';
-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$8 = 'pagination.list';
-const StyledList = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  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 => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledList.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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.7'
-}).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 = 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(["border:none;background:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&: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, 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.button.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledPageBase",
-  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$5 = 'pagination.page';
-const sizeStyles$1 = props => {
-  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$5,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledPage",
-  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$4 = 'cursor_pagination';
-const StyledCursorPagination = styled.nav.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledCursorPagination",
-  componentId: "sc-qmfecg-0"
-})(["display:flex;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledCursorPagination.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'cursor_pagination.cursor';
-const StyledCursor = styled(StyledPageBase).attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.7',
-  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$3, 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$2 = 'pagination.gap';
-const sizeStyles = props => {
-  const shift = 2;
-  const fontSize = math(`${props.theme.fontSizes.md} + ${shift}`);
-  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 StyledGapListItem = styled(StyledListItem).attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledGapListItem",
-  componentId: "sc-10wd0iz-0"
-})(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => getColorV8('neutralHue', 600, p.theme), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledGapListItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'pagination.navigation';
-const StyledNavigation = styled(StyledPage).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledNavigation",
-  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.7'
-}).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) {
-  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({
-    type: "button"
-  }, 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({
-    type: "button"
-  }, 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 ariaLabel = useText(PageComponent, props, 'aria-label', `Page ${props.children}`);
-  return React__default.createElement(StyledPage, _extends$4({
-    type: "button"
-  }, props, {
-    "aria-label": ariaLabel,
-    ref: ref
-  }));
-});
-PageComponent.displayName = 'Pagination.Page';
-const Page = PageComponent;
-
-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 OffsetPagination = forwardRef((_ref, ref) => {
-  let {
-    currentPage: controlledCurrentPage,
-    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 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;
-      }
-    } 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);
-  }, [currentPage, focusedItem, onChange, totalPages]);
-  const renderPreviousPage = () => {
-    const isFirstPageSelected = totalPages > 0 && currentPage === 1;
-    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;
-    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, {
-    key: `gap-${pageIndex}`,
-    "aria-label": labels?.gap
-  });
-  const createPage = pageIndex => {
-    return React__default.createElement(StyledListItem, {
-      key: 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 = [];
-    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(StyledNav, {
-    "aria-label": navigationLabel
-  }, React__default.createElement(StyledList, _extends$4({}, otherProps, {
-    ref: ref
-  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage()));
-});
-OffsetPagination.propTypes = {
-  currentPage: PropTypes.number.isRequired,
-  totalPages: PropTypes.number.isRequired,
-  pagePadding: PropTypes.number,
-  pageGap: PropTypes.number,
-  onChange: PropTypes.func,
-  labels: PropTypes.any
-};
-OffsetPagination.defaultProps = {
-  pagePadding: 2,
-  pageGap: 2
-};
-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); }
-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, OffsetPagination };