@atlaskit/pagination 14.2.3 → 14.2.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/pagination
 
+## 14.2.4
+
+### Patch Changes
+
+- [`87991a69644`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87991a69644) - - Remove @atlaskit/tokens as a dependency.
+  - Remove @emotion/react as a dependency.
+  - Remove padding on navigator button in favor of default button sizing.
+
 ## 14.2.3
 
 ### Patch Changes

package/dist/cjs/internal/components/navigator.js

@@ -11,23 +11,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _react2 = require("@emotion/react");
-
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
-/** @jsx jsx */
-var navigatorStyles = (0, _react2.css)({
-  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
-  paddingRight: "var(--ds-scale-050, 4px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
-  paddingLeft: "var(--ds-scale-050, 4px)"
-});
-
 function Navigator(props) {
-  return (0, _react2.jsx)(_standardButton.default // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  return /*#__PURE__*/_react.default.createElement(_standardButton.default // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, props, {
-    appearance: "subtle",
-    spacing: "none",
-    css: navigatorStyles
+    appearance: "subtle"
   }));
 }

package/dist/cjs/internal/components/render-ellipsis.js

@@ -1,24 +1,28 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = renderEllipsis;
 
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
 
-/**  @jsx jsx */
-var ellipsisStyles = (0, _react.css)({
-  display: 'inline-flex',
-  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-100, 8px)"),
-  alignItems: 'center',
-  textAlign: 'center'
-});
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
+var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 
 function renderEllipsis(_ref) {
-  var key = _ref.key;
-  return (0, _react.jsx)("span", {
+  var key = _ref.key,
+      testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_box.default, {
+    as: "span",
+    testId: testId,
     key: key,
-    css: ellipsisStyles
-  }, "...");
+    paddingInline: "scale.100"
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    testId: "".concat(testId, "-text"),
+    verticalAlign: "middle"
+  }, "..."));
 }

package/dist/cjs/internal/utils/collapse-range.js

@@ -40,7 +40,8 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
     var _pageCount = max - 2;
 
     return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, 1)), [ellipsis({
-      key: 'elipses-1'
+      key: 'ellipsis-1',
+      testId: "".concat(testId, "-ellipsis")
     })], (0, _toConsumableArray2.default)(getPageComponents(total - _pageCount)));
   }
 
@@ -48,16 +49,19 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
     var _pageCount2 = max - 2;
 
     return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, _pageCount2)), [ellipsis({
-      key: 'elipses-1'
+      key: 'ellipsis-1',
+      testId: "".concat(testId, "-ellipsis")
     })], (0, _toConsumableArray2.default)(getPageComponents(total - 1)));
   } // we have both start and end ellipsis
 
 
   var pageCount = max - 4;
   return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, 1)), [ellipsis({
-    key: 'elipses-1'
+    key: 'ellipsis-1',
+    testId: "".concat(testId, "-ellipsis")
   })], (0, _toConsumableArray2.default)(getPageComponents(current - Math.floor(pageCount / 2), current + pageCount - 1)), [ellipsis({
-    key: 'elipses-2'
+    key: 'ellipsis-2',
+    testId: "".concat(testId, "-ellipsis")
   })], (0, _toConsumableArray2.default)(getPageComponents(total - 1)));
 };
 

package/dist/cjs/pagination.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,12 +13,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = require("react");
-
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
+var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
+
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
@@ -35,6 +39,10 @@ var _constants = require("./internal/constants");
 
 var _collapseRange = _interopRequireDefault(require("./internal/utils/collapse-range"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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 _objectSpread(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) { (0, _defineProperty2.default)(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; }
@@ -42,11 +50,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.3"
+  packageVersion: "14.2.4"
 };
-var navStyles = (0, _react2.css)({
-  display: 'flex'
-});
 
 function InnerPagination(_ref, ref) {
   var _ref$components = _ref.components,
@@ -100,7 +105,7 @@ function InnerPagination(_ref, ref) {
 
   var transform = function transform(page, currPageIndex, testId) {
     var selectedPage = pages[selectedIndexValue];
-    return (0, _react2.jsx)(_page.default, {
+    return /*#__PURE__*/_react.default.createElement(_page.default, {
       key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex),
       component: components.Page,
       onClick: function onClick(event) {
@@ -115,13 +120,16 @@ function InnerPagination(_ref, ref) {
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
   };
 
-  return (0, _react2.jsx)("nav", {
-    "data-testid": testId,
-    css: navStyles,
-    style: style,
+  return /*#__PURE__*/_react.default.createElement(_box.default, {
+    testId: testId,
+    UNSAFE_style: style,
     ref: ref,
-    "aria-label": label
-  }, (0, _react2.jsx)(_navigator.default, {
+    "aria-label": label,
+    as: "nav"
+  }, /*#__PURE__*/_react.default.createElement(_inline.default, {
+    gap: "scale.0",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_navigator.default, {
     key: "left-navigator",
     component: components.Previous,
     onClick: function onClick(event) {
@@ -131,7 +139,7 @@ function InnerPagination(_ref, ref) {
       });
     },
     isDisabled: selectedIndexValue === 0,
-    iconBefore: (0, _react2.jsx)(_chevronLeftLarge.default, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
       label: ""
     }),
     "aria-label": previousLabel,
@@ -141,7 +149,7 @@ function InnerPagination(_ref, ref) {
     max: max,
     ellipsis: renderEllipsis,
     transform: transform
-  }, testId), (0, _react2.jsx)(_navigator.default, {
+  }, testId), /*#__PURE__*/_react.default.createElement(_navigator.default, {
     key: "right-navigator",
     component: components.Next,
     onClick: function onClick(event) {
@@ -151,13 +159,13 @@ function InnerPagination(_ref, ref) {
       });
     },
     isDisabled: selectedIndexValue === pages.length - 1,
-    iconBefore: (0, _react2.jsx)(_chevronRightLarge.default, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_chevronRightLarge.default, {
       label: ""
     }),
     "aria-label": nextLabel,
     pages: pages,
     testId: testId && "".concat(testId, "--right-navigator")
-  }));
+  })));
 }
 
 var Pagination = /*#__PURE__*/(0, _react.forwardRef)(InnerPagination);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.2.3",
+	"version": "14.2.4",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/navigator.js

@@ -1,20 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
-const navigatorStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
-  paddingRight: "var(--ds-scale-050, 4px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
-  paddingLeft: "var(--ds-scale-050, 4px)"
-});
 export default function Navigator(props) {
-  return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  return /*#__PURE__*/React.createElement(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, props, {
-    appearance: "subtle",
-    spacing: "none",
-    css: navigatorStyles
+    appearance: "subtle"
   }));
 }

package/dist/es2019/internal/components/render-ellipsis.js

@@ -1,16 +1,17 @@
-/**  @jsx jsx */
-import { css, jsx } from '@emotion/react';
-const ellipsisStyles = css({
-  display: 'inline-flex',
-  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-100, 8px)"}`,
-  alignItems: 'center',
-  textAlign: 'center'
-});
+import React from 'react';
+import Box from '@atlaskit/ds-explorations/box';
+import Text from '@atlaskit/ds-explorations/text';
 export default function renderEllipsis({
-  key
+  key,
+  testId
 }) {
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    testId: testId,
     key: key,
-    css: ellipsisStyles
-  }, "...");
+    paddingInline: "scale.100"
+  }, /*#__PURE__*/React.createElement(Text, {
+    testId: `${testId}-text`,
+    verticalAlign: "middle"
+  }, "..."));
 }

package/dist/es2019/internal/utils/collapse-range.js

@@ -24,23 +24,27 @@ const collapseRange = (pages, current, {
   if (hasStartEllipsis && !hasEndEllipsis) {
     const pageCount = max - 2;
     return [...getPageComponents(0, 1), ellipsis({
-      key: 'elipses-1'
+      key: 'ellipsis-1',
+      testId: `${testId}-ellipsis`
     }), ...getPageComponents(total - pageCount)];
   }
 
   if (!hasStartEllipsis && hasEndEllipsis) {
     const pageCount = max - 2;
     return [...getPageComponents(0, pageCount), ellipsis({
-      key: 'elipses-1'
+      key: 'ellipsis-1',
+      testId: `${testId}-ellipsis`
     }), ...getPageComponents(total - 1)];
   } // we have both start and end ellipsis
 
 
   const pageCount = max - 4;
   return [...getPageComponents(0, 1), ellipsis({
-    key: 'elipses-1'
+    key: 'ellipsis-1',
+    testId: `${testId}-ellipsis`
   }), ...getPageComponents(current - Math.floor(pageCount / 2), current + pageCount - 1), ellipsis({
-    key: 'elipses-2'
+    key: 'ellipsis-2',
+    testId: `${testId}-ellipsis`
   }), ...getPageComponents(total - 1)];
 };
 

package/dist/es2019/pagination.js

@@ -1,7 +1,7 @@
-/**  @jsx jsx */
-import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/react';
+import React, { forwardRef, memo } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
@@ -14,11 +14,8 @@ import collapseRange from './internal/utils/collapse-range';
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.3"
+  packageVersion: "14.2.4"
 };
-const navStyles = css({
-  display: 'flex'
-});
 
 function InnerPagination({
   components = emptyObject,
@@ -60,7 +57,7 @@ function InnerPagination({
 
   const transform = (page, currPageIndex, testId) => {
     const selectedPage = pages[selectedIndexValue];
-    return jsx(PageComponent, {
+    return /*#__PURE__*/React.createElement(PageComponent, {
       key: `page-${getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex}`,
       component: components.Page,
       onClick: event => onChangeWithAnalytics({
@@ -73,13 +70,16 @@ function InnerPagination({
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
   };
 
-  return jsx("nav", {
-    "data-testid": testId,
-    css: navStyles,
-    style: style,
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: testId,
+    UNSAFE_style: style,
     ref: ref,
-    "aria-label": label
-  }, jsx(Navigator, {
+    "aria-label": label,
+    as: "nav"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    gap: "scale.0",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Navigator, {
     key: "left-navigator",
     component: components.Previous,
     onClick: event => onChangeWithAnalytics({
@@ -87,7 +87,7 @@ function InnerPagination({
       selectedPageIndex: selectedIndexValue - 1
     }),
     isDisabled: selectedIndexValue === 0,
-    iconBefore: jsx(ChevronLeftLargeIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
       label: ""
     }),
     "aria-label": previousLabel,
@@ -97,7 +97,7 @@ function InnerPagination({
     max: max,
     ellipsis: renderEllipsis,
     transform
-  }, testId), jsx(Navigator, {
+  }, testId), /*#__PURE__*/React.createElement(Navigator, {
     key: "right-navigator",
     component: components.Next,
     onClick: event => onChangeWithAnalytics({
@@ -105,13 +105,13 @@ function InnerPagination({
       selectedPageIndex: selectedIndexValue + 1
     }),
     isDisabled: selectedIndexValue === pages.length - 1,
-    iconBefore: jsx(ChevronRightLargeIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
       label: ""
     }),
     "aria-label": nextLabel,
     pages: pages,
     testId: testId && `${testId}--right-navigator`
-  }));
+  })));
 }
 
 const Pagination = /*#__PURE__*/forwardRef(InnerPagination);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.2.3",
+	"version": "14.2.4",
 	"sideEffects": false
 }

package/dist/esm/internal/components/navigator.js

@@ -1,20 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
-var navigatorStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
-  paddingRight: "var(--ds-scale-050, 4px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
-  paddingLeft: "var(--ds-scale-050, 4px)"
-});
 export default function Navigator(props) {
-  return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  return /*#__PURE__*/React.createElement(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, props, {
-    appearance: "subtle",
-    spacing: "none",
-    css: navigatorStyles
+    appearance: "subtle"
   }));
 }

package/dist/esm/internal/components/render-ellipsis.js

@@ -1,15 +1,16 @@
-/**  @jsx jsx */
-import { css, jsx } from '@emotion/react';
-var ellipsisStyles = css({
-  display: 'inline-flex',
-  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-100, 8px)"),
-  alignItems: 'center',
-  textAlign: 'center'
-});
+import React from 'react';
+import Box from '@atlaskit/ds-explorations/box';
+import Text from '@atlaskit/ds-explorations/text';
 export default function renderEllipsis(_ref) {
-  var key = _ref.key;
-  return jsx("span", {
+  var key = _ref.key,
+      testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    testId: testId,
     key: key,
-    css: ellipsisStyles
-  }, "...");
+    paddingInline: "scale.100"
+  }, /*#__PURE__*/React.createElement(Text, {
+    testId: "".concat(testId, "-text"),
+    verticalAlign: "middle"
+  }, "..."));
 }

package/dist/esm/internal/utils/collapse-range.js

@@ -29,7 +29,8 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
     var _pageCount = max - 2;
 
     return [].concat(_toConsumableArray(getPageComponents(0, 1)), [ellipsis({
-      key: 'elipses-1'
+      key: 'ellipsis-1',
+      testId: "".concat(testId, "-ellipsis")
     })], _toConsumableArray(getPageComponents(total - _pageCount)));
   }
 
@@ -37,16 +38,19 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
     var _pageCount2 = max - 2;
 
     return [].concat(_toConsumableArray(getPageComponents(0, _pageCount2)), [ellipsis({
-      key: 'elipses-1'
+      key: 'ellipsis-1',
+      testId: "".concat(testId, "-ellipsis")
     })], _toConsumableArray(getPageComponents(total - 1)));
   } // we have both start and end ellipsis
 
 
   var pageCount = max - 4;
   return [].concat(_toConsumableArray(getPageComponents(0, 1)), [ellipsis({
-    key: 'elipses-1'
+    key: 'ellipsis-1',
+    testId: "".concat(testId, "-ellipsis")
   })], _toConsumableArray(getPageComponents(current - Math.floor(pageCount / 2), current + pageCount - 1)), [ellipsis({
-    key: 'elipses-2'
+    key: 'ellipsis-2',
+    testId: "".concat(testId, "-ellipsis")
   })], _toConsumableArray(getPageComponents(total - 1)));
 };
 

package/dist/esm/pagination.js

@@ -5,10 +5,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(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; }
 
-/**  @jsx jsx */
-import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/react';
+import React, { forwardRef, memo } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
@@ -21,11 +21,8 @@ import collapseRange from './internal/utils/collapse-range';
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.3"
+  packageVersion: "14.2.4"
 };
-var navStyles = css({
-  display: 'flex'
-});
 
 function InnerPagination(_ref, ref) {
   var _ref$components = _ref.components,
@@ -79,7 +76,7 @@ function InnerPagination(_ref, ref) {
 
   var transform = function transform(page, currPageIndex, testId) {
     var selectedPage = pages[selectedIndexValue];
-    return jsx(PageComponent, {
+    return /*#__PURE__*/React.createElement(PageComponent, {
       key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex),
       component: components.Page,
       onClick: function onClick(event) {
@@ -94,13 +91,16 @@ function InnerPagination(_ref, ref) {
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
   };
 
-  return jsx("nav", {
-    "data-testid": testId,
-    css: navStyles,
-    style: style,
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: testId,
+    UNSAFE_style: style,
     ref: ref,
-    "aria-label": label
-  }, jsx(Navigator, {
+    "aria-label": label,
+    as: "nav"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    gap: "scale.0",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Navigator, {
     key: "left-navigator",
     component: components.Previous,
     onClick: function onClick(event) {
@@ -110,7 +110,7 @@ function InnerPagination(_ref, ref) {
       });
     },
     isDisabled: selectedIndexValue === 0,
-    iconBefore: jsx(ChevronLeftLargeIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
       label: ""
     }),
     "aria-label": previousLabel,
@@ -120,7 +120,7 @@ function InnerPagination(_ref, ref) {
     max: max,
     ellipsis: renderEllipsis,
     transform: transform
-  }, testId), jsx(Navigator, {
+  }, testId), /*#__PURE__*/React.createElement(Navigator, {
     key: "right-navigator",
     component: components.Next,
     onClick: function onClick(event) {
@@ -130,13 +130,13 @@ function InnerPagination(_ref, ref) {
       });
     },
     isDisabled: selectedIndexValue === pages.length - 1,
-    iconBefore: jsx(ChevronRightLargeIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
       label: ""
     }),
     "aria-label": nextLabel,
     pages: pages,
     testId: testId && "".concat(testId, "--right-navigator")
-  }));
+  })));
 }
 
 var Pagination = /*#__PURE__*/forwardRef(InnerPagination);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.2.3",
+	"version": "14.2.4",
 	"sideEffects": false
 }

package/dist/types/internal/components/navigator.d.ts

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import React, { ReactElement, SyntheticEvent } from 'react';
-import { jsx } from '@emotion/react';
 export declare type NavigatorProps<T> = {
     /**
      * This will be passed in as aria-label to button. This is what screen reader will read
@@ -19,4 +17,4 @@ export declare type NavigatorProps<T> = {
     onClick?: (event: SyntheticEvent) => void;
     component?: React.ElementType<any>;
 };
-export default function Navigator<T>(props: NavigatorProps<T>): jsx.JSX.Element;
+export default function Navigator<T>(props: NavigatorProps<T>): JSX.Element;

package/dist/types/internal/components/render-ellipsis.d.ts

@@ -1,6 +1,6 @@
-/**  @jsx jsx */
 import { ReactElement } from 'react';
 export declare type EllipsisProp = {
     key: string;
+    testId?: string;
 };
-export default function renderEllipsis({ key }: EllipsisProp): ReactElement;
+export default function renderEllipsis({ key, testId, }: EllipsisProp): ReactElement;

package/dist/types/internal/utils/collapse-range.d.ts

@@ -3,6 +3,7 @@ declare const collapseRange: <T>(pages: T[], current: number, { max, ellipsis, t
     max: number;
     ellipsis: (arg: {
         key: string;
+        testId: string;
     }) => ReactElement;
     transform: (page: T, index: number, testId?: string | undefined) => ReactElement;
 }, testId?: string | undefined) => ReactElement[];

package/dist/types/pagination.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { PaginationPropTypes } from './types';
-declare function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, }: PaginationPropTypes<T>, ref: React.Ref<HTMLDivElement>): jsx.JSX.Element;
+declare function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, }: PaginationPropTypes<T>, ref: React.Ref<HTMLDivElement>): JSX.Element;
 declare const _default: typeof InnerPagination;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pagination",
-  "version": "14.2.3",
+  "version": "14.2.4",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,20 +32,21 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.4.0",
     "@atlaskit/codemod-utils": "^4.1.0",
+    "@atlaskit/ds-explorations": "^1.2.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1",
     "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@atlaskit/code": "^14.4.1",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/dynamic-table": "^14.8.0",
+    "@atlaskit/heading": "^1.0.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -69,9 +70,14 @@
     "@repo/internal": {
       "design-system": "v1",
       "dom-events": "use-bind-event-listener",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
+      "design-tokens": [
+        "spacing"
+      ],
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [