@semcore/pagination 16.1.12 → 17.0.0-prerelease.17

package/lib/es6/Pagination.js

@@ -1,9 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps8 } from "@semcore/core";
@@ -14,276 +8,270 @@ import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-var _excluded = ["styles", "getI18nText", "totalPages", "isLastOrSingle", "children"];
+import { Flex, ScreenReaderOnly, Hint } from '@semcore/base-components';
 import Button, { ButtonLink } from '@semcore/button';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
-import { Flex, ScreenReaderOnly } from '@semcore/flex-box';
 import ChevronDoubleLeft from '@semcore/icon/ChevronDoubleLeft/m';
 import InputNumber from '@semcore/input-number';
-import { Hint } from '@semcore/tooltip';
 import { Text } from '@semcore/typography';
 import React from 'react';
 /*!__reshadow-styles__:"./style/pagination.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPagination_2y4s9_gg_{justify-content:flex-start;align-items:center}.___SPagination_2y4s9_gg_.__withGap_2y4s9_gg_{gap:var(--intergalactic-spacing-4x, 16px)}.___SPagination_2y4s9_gg_.__withGap_2y4s9_gg_._size_l_2y4s9_gg_{gap:var(--intergalactic-spacing-5x, 20px)}.___SNextPage_2y4s9_gg_,.___SPrevPage_2y4s9_gg_{align-self:center;margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNextPage_2y4s9_gg_._size_l_2y4s9_gg_,.___SPrevPage_2y4s9_gg_._size_l_2y4s9_gg_{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SLabel_2y4s9_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SLabel_2y4s9_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-4x, 16px)}.___SLabel_2y4s9_gg_._size_l_2y4s9_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-5x, 20px)}.___STotalPages_2y4s9_gg_{align-self:center;line-height:normal;color:var(--intergalactic-text-link, #006dca)}.___STotalPagesLabel_2y4s9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-1x, 4px);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_2y4s9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_2y4s9_gg_._size_l_2y4s9_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SPageInput_2y4s9_gg_{max-width:68px;margin-left:var(--intergalactic-spacing-1x, 4px)}.___SPageInput_2y4s9_gg_._size_l_2y4s9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPageInput_2y4s9_gg_:focus-within .___SPageInputAddon_2y4s9_gg_{opacity:1;clip:initial;position:static}.___SPageInputAddon_2y4s9_gg_{opacity:0;clip:rect(1px,1px,1px,1px);position:absolute}.___SLabel_2y4s9_gg_,.___STotalPagesLabel_2y4s9_gg_,.___STotalPages_2y4s9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SLabel_2y4s9_gg_._size_l_2y4s9_gg_,.___STotalPagesLabel_2y4s9_gg_._size_l_2y4s9_gg_,.___STotalPages_2y4s9_gg_._size_l_2y4s9_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}", /*__inner_css_end__*/"2y4s9_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPagination_4tsjh_gg_{justify-content:flex-start;align-items:center}.___SPagination_4tsjh_gg_.__withGap_4tsjh_gg_{gap:var(--intergalactic-spacing-4x, 16px)}.___SPagination_4tsjh_gg_.__withGap_4tsjh_gg_._size_l_4tsjh_gg_{gap:var(--intergalactic-spacing-5x, 20px)}.___SNextPage_4tsjh_gg_,.___SPrevPage_4tsjh_gg_{align-self:center;margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNextPage_4tsjh_gg_._size_l_4tsjh_gg_,.___SPrevPage_4tsjh_gg_._size_l_4tsjh_gg_{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SLabel_4tsjh_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SLabel_4tsjh_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-4x, 16px)}.___SLabel_4tsjh_gg_._size_l_4tsjh_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-5x, 20px)}.___STotalPages_4tsjh_gg_{align-self:center;line-height:normal;color:var(--intergalactic-text-link, #006dca)}.___STotalPagesLabel_4tsjh_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-1x, 4px);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_4tsjh_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_4tsjh_gg_._size_l_4tsjh_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SPageInput_4tsjh_gg_{max-width:68px;margin-left:var(--intergalactic-spacing-1x, 4px)}.___SPageInput_4tsjh_gg_._size_l_4tsjh_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPageInput_4tsjh_gg_:focus-within .___SPageInputAddon_4tsjh_gg_{opacity:1;clip:initial;position:static}.___SPageInputAddon_4tsjh_gg_{opacity:0;clip:rect(1px,1px,1px,1px);position:absolute}.___SLabel_4tsjh_gg_,.___STotalPagesLabel_4tsjh_gg_,.___STotalPages_4tsjh_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SLabel_4tsjh_gg_._size_l_4tsjh_gg_,.___STotalPagesLabel_4tsjh_gg_._size_l_4tsjh_gg_,.___STotalPages_4tsjh_gg_._size_l_4tsjh_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}", /*__inner_css_end__*/"4tsjh_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SPagination": "___SPagination_2y4s9_gg_",
-  "__SLabel": "___SLabel_2y4s9_gg_",
-  "_size_l": "_size_l_2y4s9_gg_",
-  "__STotalPages": "___STotalPages_2y4s9_gg_",
-  "__STotalPagesLabel": "___STotalPagesLabel_2y4s9_gg_",
-  "__SPageInput": "___SPageInput_2y4s9_gg_",
-  "__SPageInputAddon": "___SPageInputAddon_2y4s9_gg_",
-  "_withGap": "__withGap_2y4s9_gg_",
-  "__SNextPage": "___SNextPage_2y4s9_gg_",
-  "__SPrevPage": "___SPrevPage_2y4s9_gg_",
-  "__STotalLastPages": "___STotalLastPages_2y4s9_gg_"
+  "__SPagination": "___SPagination_4tsjh_gg_",
+  "__SLabel": "___SLabel_4tsjh_gg_",
+  "_size_l": "_size_l_4tsjh_gg_",
+  "__STotalPages": "___STotalPages_4tsjh_gg_",
+  "__STotalPagesLabel": "___STotalPagesLabel_4tsjh_gg_",
+  "__SPageInput": "___SPageInput_4tsjh_gg_",
+  "__SPageInputAddon": "___SPageInputAddon_4tsjh_gg_",
+  "_withGap": "__withGap_4tsjh_gg_",
+  "__SNextPage": "___SNextPage_4tsjh_gg_",
+  "__SPrevPage": "___SPrevPage_4tsjh_gg_",
+  "__STotalLastPages": "___STotalLastPages_4tsjh_gg_"
 });
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-var PaginationRoot = /*#__PURE__*/function (_Component) {
-  function PaginationRoot() {
-    var _this;
-    _classCallCheck(this, PaginationRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, PaginationRoot, [].concat(args));
-    _defineProperty(_this, "nextPageButtonRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "prevPageButtonRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "state", {
+class PaginationRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "nextPageButtonRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "prevPageButtonRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
       // Crutch, so as not to take out `dirtyCurrentPage` in props
       dirtyCurrentPage: undefined
     });
-    _defineProperty(_this, "pageInputAddonRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "returnLostFocusTo", function (ref) {
-      requestAnimationFrame(function () {
-        var _ref$current;
-        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+    _defineProperty(this, "pageInputAddonRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "returnLostFocusTo", ref => {
+      requestAnimationFrame(() => {
+        ref.current?.focus();
       });
     });
-    _defineProperty(_this, "handlePageChange", function (currentPage) {
+    _defineProperty(this, "handlePageChange", currentPage => {
       currentPage = Number(currentPage);
       if (Number.isNaN(currentPage)) {
         return;
       }
-      _this.handlers.currentPage(currentPage);
-      _this.setState({
+      this.handlers.currentPage(currentPage);
+      this.setState({
         dirtyCurrentPage: undefined
       });
     });
-    _defineProperty(_this, "handlePageValueChange", function (value) {
-      var dirtyCurrentPage = _this.state.dirtyCurrentPage;
+    _defineProperty(this, "handlePageValueChange", value => {
+      const {
+        dirtyCurrentPage
+      } = this.state;
       if (Number.isNaN(Number(value))) {
         value = dirtyCurrentPage;
       }
-      _this.setState({
+      this.setState({
         dirtyCurrentPage: value
       });
     });
-    _defineProperty(_this, "handlePageValueBlur", function () {
-      setTimeout(function () {
-        if (_this.pageInputAddonRef.current !== document.activeElement) {
-          var currentPage = _this.asProps.currentPage;
-          _this.setState({
+    _defineProperty(this, "handlePageValueBlur", () => {
+      setTimeout(() => {
+        if (this.pageInputAddonRef.current !== document.activeElement) {
+          const {
+            currentPage
+          } = this.asProps;
+          this.setState({
             dirtyCurrentPage: currentPage
           });
         }
       }, 0);
     });
-    _defineProperty(_this, "getDirtyCurrentPage", function () {
-      var dirtyCurrentPage = _this.state.dirtyCurrentPage;
-      var totalPages = _this.asProps.totalPages;
-      var finalValue = dirtyCurrentPage > totalPages ? totalPages : dirtyCurrentPage;
+    _defineProperty(this, "getDirtyCurrentPage", () => {
+      const {
+        dirtyCurrentPage
+      } = this.state;
+      const {
+        totalPages
+      } = this.asProps;
+      const finalValue = dirtyCurrentPage > totalPages ? totalPages : dirtyCurrentPage;
       return finalValue <= 0 ? 1 : finalValue;
     });
-    /** @deprecated */
-    _defineProperty(_this, "handlePageInputIconClick", function () {
-      var dirtyCurrentPage = _this.getDirtyCurrentPage();
-      _this.handlePageChange(dirtyCurrentPage);
-    });
-    _defineProperty(_this, "handlePageInputKeyDown", function (event) {
+    _defineProperty(this, "handlePageInputKeyDown", event => {
       if (event.key !== 'Enter') return;
-      var dirtyCurrentPage = _this.getDirtyCurrentPage();
-      _this.handlePageChange(dirtyCurrentPage);
+      const dirtyCurrentPage = this.getDirtyCurrentPage();
+      this.handlePageChange(dirtyCurrentPage);
     });
-    _defineProperty(_this, "getFirstPageProps", function () {
-      var _this$asProps = _this.asProps,
-        currentPage = _this$asProps.currentPage,
-        getI18nText = _this$asProps.getI18nText,
-        size = _this$asProps.size;
-      var disabled = currentPage <= 1;
+    _defineProperty(this, "getFirstPageProps", () => {
+      const {
+        currentPage,
+        getI18nText,
+        size
+      } = this.asProps;
+      const disabled = currentPage <= 1;
       return {
-        disabled: disabled,
-        onClick: function onClick() {
-          _this.handlePageChange(1);
-          _this.returnLostFocusTo(_this.nextPageButtonRef);
+        disabled,
+        onClick: () => {
+          this.handlePageChange(1);
+          this.returnLostFocusTo(this.nextPageButtonRef);
         },
-        getI18nText: getI18nText,
-        size: size
+        getI18nText,
+        size
       };
     });
-    _defineProperty(_this, "getPrevPageProps", function () {
-      var _this$asProps2 = _this.asProps,
-        currentPage = _this$asProps2.currentPage,
-        getI18nText = _this$asProps2.getI18nText,
-        size = _this$asProps2.size;
-      var disabled = currentPage <= 1;
+    _defineProperty(this, "getPrevPageProps", () => {
+      const {
+        currentPage,
+        getI18nText,
+        size
+      } = this.asProps;
+      const disabled = currentPage <= 1;
       return {
-        currentPage: currentPage,
-        disabled: disabled,
-        onClick: function onClick() {
-          var followingPage = currentPage - 1;
-          _this.handlePageChange(followingPage);
+        currentPage,
+        disabled,
+        onClick: () => {
+          const followingPage = currentPage - 1;
+          this.handlePageChange(followingPage);
           if (followingPage <= 1) {
-            _this.returnLostFocusTo(_this.nextPageButtonRef);
+            this.returnLostFocusTo(this.nextPageButtonRef);
           }
         },
-        getI18nText: getI18nText,
-        ref: _this.prevPageButtonRef,
-        size: size
+        getI18nText,
+        ref: this.prevPageButtonRef,
+        size
       };
     });
-    _defineProperty(_this, "getNextPageProps", function () {
-      var _this$asProps3 = _this.asProps,
-        currentPage = _this$asProps3.currentPage,
-        totalPages = _this$asProps3.totalPages,
-        getI18nText = _this$asProps3.getI18nText,
-        size = _this$asProps3.size;
-      var disabled = currentPage >= totalPages;
+    _defineProperty(this, "getNextPageProps", () => {
+      const {
+        currentPage,
+        totalPages,
+        getI18nText,
+        size
+      } = this.asProps;
+      const disabled = currentPage >= totalPages;
       return {
-        currentPage: currentPage,
-        disabled: disabled,
-        onClick: function onClick() {
-          var followingPage = currentPage + 1;
-          _this.handlePageChange(followingPage);
+        currentPage,
+        disabled,
+        onClick: () => {
+          const followingPage = currentPage + 1;
+          this.handlePageChange(followingPage);
           if (followingPage >= totalPages) {
-            _this.returnLostFocusTo(_this.prevPageButtonRef);
+            this.returnLostFocusTo(this.prevPageButtonRef);
           }
         },
-        getI18nText: getI18nText,
-        ref: _this.nextPageButtonRef,
-        size: size
+        getI18nText,
+        ref: this.nextPageButtonRef,
+        size
       };
     });
-    _defineProperty(_this, "getPageInputProps", function () {
-      var _this$asProps4 = _this.asProps,
-        getI18nText = _this$asProps4.getI18nText,
-        locale = _this$asProps4.locale,
-        size = _this$asProps4.size;
+    _defineProperty(this, "getPageInputProps", () => {
+      const {
+        getI18nText,
+        locale,
+        size
+      } = this.asProps;
       return {
-        getI18nText: getI18nText,
-        locale: locale,
-        size: size,
-        paginationInputId: _this.paginationInputId
+        getI18nText,
+        locale,
+        size,
+        paginationInputId: this.paginationInputId
       };
     });
-    /** @deprecated */
-    _defineProperty(_this, "getPageInputAddonProps", function () {
+    _defineProperty(this, "getPageInputAddonProps", () => {
       return {
-        onClick: _this.handlePageInputIconClick,
-        ref: _this.pageInputAddonRef,
-        onBlur: _this.handlePageValueBlur
+        ref: this.pageInputAddonRef,
+        onBlur: this.handlePageValueBlur
       };
     });
-    _defineProperty(_this, "getPageInputValueProps", function () {
-      var dirtyCurrentPage = _this.state.dirtyCurrentPage;
-      var _this$asProps5 = _this.asProps,
-        currentPage = _this$asProps5.currentPage,
-        totalPages = _this$asProps5.totalPages,
-        getI18nText = _this$asProps5.getI18nText,
-        size = _this$asProps5.size;
+    _defineProperty(this, "getPageInputValueProps", () => {
+      const {
+        dirtyCurrentPage
+      } = this.state;
+      const {
+        currentPage,
+        totalPages,
+        getI18nText,
+        size
+      } = this.asProps;
       return {
         min: 1,
         max: totalPages,
         disabled: totalPages === 1,
         value: dirtyCurrentPage === undefined ? currentPage : dirtyCurrentPage,
-        onBlur: _this.handlePageValueBlur,
-        onChange: _this.handlePageValueChange,
-        onKeyDown: _this.handlePageInputKeyDown,
-        getI18nText: getI18nText,
-        size: size,
-        id: _this.paginationInputId
+        onBlur: this.handlePageValueBlur,
+        onChange: this.handlePageValueChange,
+        onKeyDown: this.handlePageInputKeyDown,
+        getI18nText,
+        size,
+        id: this.paginationInputId
       };
     });
-    _defineProperty(_this, "getTotalPagesProps", function () {
-      var _this$asProps6 = _this.asProps,
-        currentPage = _this$asProps6.currentPage,
-        totalPages = _this$asProps6.totalPages,
-        getI18nText = _this$asProps6.getI18nText,
-        locale = _this$asProps6.locale,
-        size = _this$asProps6.size;
-      var formatter = new Intl.NumberFormat(locale, {
+    _defineProperty(this, "getTotalPagesProps", () => {
+      const {
+        currentPage,
+        totalPages,
+        getI18nText,
+        locale,
+        size
+      } = this.asProps;
+      const formatter = new Intl.NumberFormat(locale, {
         style: 'decimal'
       });
       return {
-        totalPages: totalPages,
+        totalPages,
         children: formatter.format(totalPages),
         isLastOrSingle: currentPage === totalPages,
-        onClick: function onClick() {
-          _this.handlePageChange(totalPages);
-          _this.returnLostFocusTo(_this.prevPageButtonRef);
+        onClick: () => {
+          this.handlePageChange(totalPages);
+          this.returnLostFocusTo(this.prevPageButtonRef);
         },
-        getI18nText: getI18nText,
-        size: size
+        getI18nText,
+        size
       };
     });
-    return _this;
   }
-  _inherits(PaginationRoot, _Component);
-  return _createClass(PaginationRoot, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        totalPages: null,
-        currentPage: null
-      };
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.currentPage !== undefined && prevProps.currentPage !== this.asProps.currentPage) {
-        this.setState({
-          dirtyCurrentPage: undefined
-        });
-      }
-    }
-  }, {
-    key: "paginationInputId",
-    get: function get() {
-      var uid = this.asProps.uid;
-      return "pagination-input-".concat(uid);
+  uncontrolledProps() {
+    return {
+      totalPages: null,
+      currentPage: null
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.currentPage !== undefined && prevProps.currentPage !== this.asProps.currentPage) {
+      this.setState({
+        dirtyCurrentPage: undefined
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref9;
-      var SPagination = Flex;
-      var _this$asProps7 = this.asProps,
-        Children = _this$asProps7.Children,
-        hasChildren = _this$asProps7.children,
-        getI18nText = _this$asProps7.getI18nText,
-        currentPage = _this$asProps7.currentPage,
-        _this$asProps7$totalP = _this$asProps7.totalPages,
-        totalPages = _this$asProps7$totalP === void 0 ? 1 : _this$asProps7$totalP;
-      return _ref9 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SPagination, _ref9.cn("SPagination", _objectSpread({}, _assignProps({
+  }
+  get paginationInputId() {
+    const {
+      uid
+    } = this.asProps;
+    return `pagination-input-${uid}`;
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref9;
+    const SPagination = Flex;
+    const {
+      Children,
+      children: hasChildren,
+      getI18nText,
+      currentPage,
+      totalPages = 1
+    } = this.asProps;
+    return _ref9 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SPagination, _ref9.cn("SPagination", {
+      ..._assignProps({
         "flexWrap": 'wrap',
         "withGap": !hasChildren,
         "tag": 'nav',
         "aria-label": getI18nText('pagination')
-      }, _ref))), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref9.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, totalPages === 1 ? null : /*#__PURE__*/React.createElement(Flex, _ref9.cn("Flex", {}), /*#__PURE__*/React.createElement(Pagination.FirstPage, null), /*#__PURE__*/React.createElement(Pagination.PrevPage, null), /*#__PURE__*/React.createElement(Pagination.NextPage, null)), /*#__PURE__*/React.createElement(Flex, _ref9.cn("Flex", {
-        "alignItems": 'center'
-      }), /*#__PURE__*/React.createElement(Pagination.PageInput, null), /*#__PURE__*/React.createElement(Pagination.TotalPages, null))), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
-        "aria-live": 'polite',
-        "role": 'status'
-      }), getI18nText('pageInputLabel'), ' ', currentPage));
-    }
-  }]);
-}(Component);
+      }, _ref)
+    }), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref9.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, totalPages === 1 ? null : /*#__PURE__*/React.createElement(Flex, _ref9.cn("Flex", {}), /*#__PURE__*/React.createElement(Pagination.FirstPage, null), /*#__PURE__*/React.createElement(Pagination.PrevPage, null), /*#__PURE__*/React.createElement(Pagination.NextPage, null)), /*#__PURE__*/React.createElement(Flex, _ref9.cn("Flex", {
+      "alignItems": 'center'
+    }), /*#__PURE__*/React.createElement(Pagination.PageInput, null), /*#__PURE__*/React.createElement(Pagination.TotalPages, null))), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
+      "aria-live": 'polite',
+      "role": 'status'
+    }), getI18nText('pageInputLabel'), ' ', currentPage));
+  }
+}
 _defineProperty(PaginationRoot, "displayName", 'Pagination');
-_defineProperty(PaginationRoot, "defaultProps", function () {
+_defineProperty(PaginationRoot, "defaultProps", () => {
   return {
     defaultCurrentPage: 1,
     defaultTotalPages: 1,
@@ -294,169 +282,144 @@ _defineProperty(PaginationRoot, "defaultProps", function () {
 });
 _defineProperty(PaginationRoot, "style", style);
 _defineProperty(PaginationRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
-var FirstPage = /*#__PURE__*/function (_Component2) {
-  function FirstPage() {
-    _classCallCheck(this, FirstPage);
-    return _callSuper(this, FirstPage, arguments);
+class FirstPage extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "buttonRef", /*#__PURE__*/React.createRef());
   }
-  _inherits(FirstPage, _Component2);
-  return _createClass(FirstPage, [{
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps;
-      var getI18nText = this.asProps.getI18nText;
-      return /*#__PURE__*/React.createElement(Button, _assignProps2({
-        "aria-label": getI18nText('firstPage')
-      }, _ref2));
-    }
-  }]);
-}(Component);
-_defineProperty(FirstPage, "defaultProps", function (props) {
-  var hintContent = props.getI18nText('firstPage');
-  return {
-    children: /*#__PURE__*/React.createElement(Button.Addon, {
-      tag: Hint,
-      title: hintContent,
-      timeout: [250, 50],
-      __excludeProps: ['aria-label']
-    }, /*#__PURE__*/React.createElement(ChevronDoubleLeft, null))
-  };
-});
-var PrevPage = /*#__PURE__*/function (_Component3) {
-  function PrevPage() {
-    _classCallCheck(this, PrevPage);
-    return _callSuper(this, PrevPage, arguments);
+  render() {
+    var _ref2 = this.asProps;
+    const {
+      getI18nText,
+      Children,
+      children,
+      disabled
+    } = this.asProps;
+    const hintContent = getI18nText('firstPage');
+    const isAdvanced = children !== undefined;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _assignProps2({
+      "aria-label": getI18nText('firstPage'),
+      "ref": this.buttonRef
+    }, _ref2), isAdvanced ? /*#__PURE__*/React.createElement(Children, null) : /*#__PURE__*/React.createElement(Button.Addon, {
+      tag: ChevronDoubleLeft
+    })), !isAdvanced && /*#__PURE__*/React.createElement(Hint, {
+      triggerRef: this.buttonRef,
+      timeout: [250, 50]
+    }, hintContent));
   }
-  _inherits(PrevPage, _Component3);
-  return _createClass(PrevPage, [{
-    key: "render",
-    value: function render() {
-      var _ref3 = this.asProps,
-        _ref0;
-      var SPrevPage = Button;
-      return _ref0 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SPrevPage, _ref0.cn("SPrevPage", _objectSpread({}, _assignProps3({}, _ref3))));
-    }
-  }]);
-}(Component);
-_defineProperty(PrevPage, "defaultProps", function (props) {
-  return {
-    children: props.getI18nText('prevPageLabel')
-  };
-});
-var NextPage = /*#__PURE__*/function (_Component4) {
-  function NextPage() {
-    _classCallCheck(this, NextPage);
-    return _callSuper(this, NextPage, arguments);
+}
+class PrevPage extends Component {
+  render() {
+    var _ref3 = this.asProps,
+      _ref0;
+    const SPrevPage = Button;
+    return _ref0 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SPrevPage, _ref0.cn("SPrevPage", {
+      ..._assignProps3({}, _ref3)
+    }));
   }
-  _inherits(NextPage, _Component4);
-  return _createClass(NextPage, [{
-    key: "render",
-    value: function render() {
-      var _ref4 = this.asProps,
-        _ref1;
-      var SNextPage = Button;
-      return _ref1 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SNextPage, _ref1.cn("SNextPage", _objectSpread({}, _assignProps4({
+}
+_defineProperty(PrevPage, "defaultProps", props => ({
+  children: props.getI18nText('prevPageLabel')
+}));
+class NextPage extends Component {
+  render() {
+    var _ref4 = this.asProps,
+      _ref1;
+    const SNextPage = Button;
+    return _ref1 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SNextPage, _ref1.cn("SNextPage", {
+      ..._assignProps4({
         "use": 'primary',
         "theme": 'info'
-      }, _ref4))));
-    }
-  }]);
-}(Component);
-_defineProperty(NextPage, "defaultProps", function (props) {
-  return {
-    children: props.getI18nText('nextPageLabel')
-  };
-});
-var TotalPages = /*#__PURE__*/function (_Component5) {
-  function TotalPages() {
-    _classCallCheck(this, TotalPages);
-    return _callSuper(this, TotalPages, arguments);
+      }, _ref4)
+    }));
   }
-  _inherits(TotalPages, _Component5);
-  return _createClass(TotalPages, [{
-    key: "render",
-    value: function render() {
-      var _ref5 = this.asProps,
-        _ref10;
-      var STotalPages = ButtonLink;
-      var STotalPagesLabel = Text;
-      var STotalLastPages = Text;
-      var _this$asProps8 = this.asProps,
-        styles = _this$asProps8.styles,
-        getI18nText = _this$asProps8.getI18nText,
-        totalPages = _this$asProps8.totalPages,
-        isLastOrSingle = _this$asProps8.isLastOrSingle,
-        children = _this$asProps8.children,
-        other = _objectWithoutProperties(_this$asProps8, _excluded);
-      var textSize = other.size === 'l' ? '300' : '200';
-      return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(STotalPagesLabel, _ref10.cn("STotalPagesLabel", {
-        "size": textSize
-      }), getI18nText('totalPagesLabel')), isLastOrSingle ? /*#__PURE__*/React.createElement(STotalLastPages, _ref10.cn("STotalLastPages", _objectSpread({
-        "size": textSize,
+}
+_defineProperty(NextPage, "defaultProps", props => ({
+  children: props.getI18nText('nextPageLabel')
+}));
+class TotalPages extends Component {
+  render() {
+    var _ref5 = this.asProps,
+      _ref10;
+    const STotalPages = ButtonLink;
+    const STotalPagesLabel = Text;
+    const STotalLastPages = Text;
+    const {
+      styles,
+      getI18nText,
+      totalPages,
+      isLastOrSingle,
+      children,
+      ...other
+    } = this.asProps;
+    const textSize = other.size === 'l' ? '300' : '200';
+    return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(STotalPagesLabel, _ref10.cn("STotalPagesLabel", {
+      "size": textSize
+    }), getI18nText('totalPagesLabel')), isLastOrSingle ? /*#__PURE__*/React.createElement(STotalLastPages, _ref10.cn("STotalLastPages", {
+      "size": textSize,
+      "aria-label": getI18nText('lastPage', {
+        lastPageNumber: totalPages
+      }),
+      ...other
+    }), children) : /*#__PURE__*/React.createElement(STotalPages, _ref10.cn("STotalPages", {
+      ..._assignProps5({
         "aria-label": getI18nText('lastPage', {
           lastPageNumber: totalPages
         })
-      }, other)), children) : /*#__PURE__*/React.createElement(STotalPages, _ref10.cn("STotalPages", _objectSpread({}, _assignProps5({
-        "aria-label": getI18nText('lastPage', {
-          lastPageNumber: totalPages
-        })
-      }, _ref5)))));
-    }
-  }]);
-}(Component);
-var PageInputValue = function PageInputValue(props) {
+      }, _ref5)
+    })));
+  }
+}
+function PageInputValue(props) {
   var _ref6 = arguments[0],
     _ref11;
-  var SPageInputValue = InputNumber.Value;
-  return _ref11 = sstyled(props.styles), /*#__PURE__*/React.createElement(SPageInputValue, _ref11.cn("SPageInputValue", _objectSpread({}, _assignProps6({
-    "onBlur": function onBlur() {
-      return false;
-    }
-  }, _ref6))));
-};
-var PageInputAddon = function PageInputAddon(props) {
+  const SPageInputValue = InputNumber.Value;
+  return _ref11 = sstyled(props.styles), /*#__PURE__*/React.createElement(SPageInputValue, _ref11.cn("SPageInputValue", {
+    ..._assignProps6({
+      "onBlur": () => false
+    }, _ref6)
+  }));
+}
+function PageInputAddon(props) {
   var _ref7 = arguments[0],
     _ref12;
-  var SPageInputAddon = InputNumber.Addon;
-  return _ref12 = sstyled(props.styles), /*#__PURE__*/React.createElement(SPageInputAddon, _ref12.cn("SPageInputAddon", _objectSpread({}, _assignProps7({}, _ref7))));
-};
-var PageInput = /*#__PURE__*/function (_Component6) {
-  function PageInput() {
-    _classCallCheck(this, PageInput);
-    return _callSuper(this, PageInput, arguments);
-  }
-  _inherits(PageInput, _Component6);
-  return _createClass(PageInput, [{
-    key: "render",
-    value: function render() {
-      var _ref8 = this.asProps,
-        _ref13;
-      var SPageInput = InputNumber;
-      var SLabel = Text;
-      var _this$asProps9 = this.asProps,
-        Children = _this$asProps9.Children,
-        getI18nText = _this$asProps9.getI18nText,
-        styles = _this$asProps9.styles,
-        locale = _this$asProps9.locale,
-        size = _this$asProps9.size,
-        paginationInputId = _this$asProps9.paginationInputId;
-      return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SLabel, _ref13.cn("SLabel", {
-        "tag": 'label',
-        "htmlFor": paginationInputId,
-        "size": size
-      }), getI18nText('pageInputLabel')), /*#__PURE__*/React.createElement(SPageInput, _ref13.cn("SPageInput", _objectSpread({}, _assignProps8({
+  const SPageInputAddon = InputNumber.Addon;
+  return _ref12 = sstyled(props.styles), /*#__PURE__*/React.createElement(SPageInputAddon, _ref12.cn("SPageInputAddon", {
+    ..._assignProps7({}, _ref7)
+  }));
+}
+class PageInput extends Component {
+  render() {
+    var _ref8 = this.asProps,
+      _ref13;
+    const SPageInput = InputNumber;
+    const SLabel = Text;
+    const {
+      Children,
+      getI18nText,
+      styles,
+      locale,
+      size,
+      paginationInputId
+    } = this.asProps;
+    return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SLabel, _ref13.cn("SLabel", {
+      "tag": 'label',
+      "htmlFor": paginationInputId,
+      "size": size
+    }), getI18nText('pageInputLabel')), /*#__PURE__*/React.createElement(SPageInput, _ref13.cn("SPageInput", {
+      ..._assignProps8({
         "controlsLength": Children.origin ? undefined : 2,
         "locale": locale
-      }, _ref8))), Children.origin ? /*#__PURE__*/React.createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/React.createElement(Pagination.PageInput.Value, null)));
-    }
-  }]);
-}(Component);
+      }, _ref8)
+    }), Children.origin ? /*#__PURE__*/React.createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/React.createElement(Pagination.PageInput.Value, null)));
+  }
+}
 _defineProperty(PageInput, "enhance", [uniqueIDEnhancement()]);
-var Pagination = createComponent(PaginationRoot, {
-  PrevPage: PrevPage,
-  NextPage: NextPage,
-  FirstPage: FirstPage,
-  TotalPages: TotalPages,
+const Pagination = createComponent(PaginationRoot, {
+  PrevPage,
+  NextPage,
+  FirstPage,
+  TotalPages,
   PageInput: [PageInput, {
     Value: PageInputValue,
     Addon: PageInputAddon