@atlaskit/page-header 10.3.2 → 10.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/page-header
 
+## 10.3.3
+
+### Patch Changes
+
+- [`74c1b81a476`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74c1b81a476) - Replaces use of `gridSize` with space tokens. There is no expected visual change.
+
 ## 10.3.2
 
 ### Patch Changes

package/README.md

@@ -10,4 +10,4 @@ yarn add @atlaskit/page-header
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/page-header).
+Detailed docs and example usage can be found [here](https://atlassian.design/components/page-header).

package/dist/cjs/PageHeader/index.js

@@ -1,20 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styled = require("./styled");
-
 // TODO: Remove this eslint-disable when prop names have been renamed.
 // This rule is here as prop name changes are a major as they are used
 // by our consumers. This can be done in the next lite-mode conversion.
-
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 
 /**
@@ -29,15 +24,15 @@ var _styled = require("./styled");
  */
 var PageHeader = function PageHeader(_ref) {
   var innerRef = _ref.innerRef,
-      breadcrumbs = _ref.breadcrumbs,
-      actions = _ref.actions,
-      bottomBar = _ref.bottomBar,
-      children = _ref.children,
-      id = _ref.id,
-      _ref$disableTitleStyl = _ref.disableTitleStyles,
-      disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
-      _ref$truncateTitle = _ref.truncateTitle,
-      truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle;
+    breadcrumbs = _ref.breadcrumbs,
+    actions = _ref.actions,
+    bottomBar = _ref.bottomBar,
+    children = _ref.children,
+    id = _ref.id,
+    _ref$disableTitleStyl = _ref.disableTitleStyles,
+    disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
+    _ref$truncateTitle = _ref.truncateTitle,
+    truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle;
   return /*#__PURE__*/_react.default.createElement(_styled.OuterWrapper, null, breadcrumbs, /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
     truncateTitle: truncateTitle
   }, /*#__PURE__*/_react.default.createElement(_styled.TitleContainer, {
@@ -48,6 +43,5 @@ var PageHeader = function PageHeader(_ref) {
     id: id
   }, children)), actions && /*#__PURE__*/_react.default.createElement(_styled.ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/_react.default.createElement(_styled.BottomBarWrapper, null, " ", bottomBar, " "));
 };
-
 var _default = PageHeader;
 exports.default = _default;

package/dist/cjs/PageHeader/styled.js

@@ -1,40 +1,31 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleWrapper = exports.TitleContainer = exports.StyledTitleWrapper = exports.OuterWrapper = exports.BottomBarWrapper = exports.ActionsWrapper = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
-var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 // TODO: Remove this eslint-disable when prop names have been renamed.
 // This rule is here as prop name changes are a major as they are used
 // by our consumers. The prop name concerned here is truncateTitle.
 // This can be done in the next lite-mode conversion.
-
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
-
 /** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
+
 var truncateStyles = (0, _react2.css)({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 var outerStyles = (0, _react2.css)({
-  margin: "".concat(gridSize * 3, "px 0 ").concat(gridSize * 2, "px 0")
+  margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
 });
 var styledTitleStyles = (0, _react2.css)({
   marginTop: 0,
-  lineHeight: "".concat(gridSize * 4, "px"),
+  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   outline: 'none'
 });
 var titleWrapperStyles = (0, _react2.css)({
@@ -48,15 +39,15 @@ var titleWrapperTruncateStyles = (0, _react2.css)({
 var titleContainerStyles = (0, _react2.css)({
   minWidth: 0,
   maxWidth: '100%',
-  marginBottom: "".concat(gridSize, "px"),
+  marginBottom: "var(--ds-space-100, 8px)",
   flex: '1 0 auto',
   flexShrink: undefined
 });
 var actionStyles = (0, _react2.css)({
   maxWidth: '100%',
-  marginBottom: "".concat(gridSize, "px"),
+  marginBottom: "var(--ds-space-100, 8px)",
   marginLeft: 'auto',
-  paddingLeft: "".concat(gridSize * 4, "px"),
+  paddingLeft: "var(--ds-space-400, 32px)",
   flex: '0 0 auto',
   whiteSpace: 'nowrap',
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -68,8 +59,9 @@ var titleContainerTruncateStyles = (0, _react2.css)({
   flexShrink: 1
 });
 var bottomBarStyles = (0, _react2.css)({
-  marginTop: "".concat(gridSize * 2, "px")
+  marginTop: "var(--ds-space-200, 16px)"
 });
+
 /**
  * __Outer wrapper__
  *
@@ -77,18 +69,16 @@ var bottomBarStyles = (0, _react2.css)({
  * the BottomBar and its Breadcrumbs.
  *
  */
-
 var OuterWrapper = function OuterWrapper(_ref) {
   var children = _ref.children;
   return (0, _react2.jsx)("div", {
     css: outerStyles
   }, children);
-}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+};
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 exports.OuterWrapper = OuterWrapper;
 var h700Styles = (0, _react2.css)((0, _typography.h700)());
-
 /**
  * __Styled title wrapper__
  *
@@ -97,8 +87,8 @@ var h700Styles = (0, _react2.css)((0, _typography.h700)());
  */
 var StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
-      id = _ref2.id,
-      truncateTitle = _ref2.truncateTitle;
+    id = _ref2.id,
+    truncateTitle = _ref2.truncateTitle;
   return (0, _react2.jsx)("h1", {
     css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
     ref: ref,
@@ -106,9 +96,7 @@ var StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2,
     id: id
   }, children);
 });
-
 exports.StyledTitleWrapper = StyledTitleWrapper;
-
 /**
  * __Title wrapper__
  *
@@ -117,59 +105,52 @@ exports.StyledTitleWrapper = StyledTitleWrapper;
  */
 var TitleWrapper = function TitleWrapper(_ref3) {
   var children = _ref3.children,
-      truncateTitle = _ref3.truncateTitle;
+    truncateTitle = _ref3.truncateTitle;
   return (0, _react2.jsx)("div", {
     css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
   }, children);
 };
+
 /**
  * Title container
  *
  * A title container is a container that wraps around the title and its styles (if applied).
  *
  */
-
-
 exports.TitleWrapper = TitleWrapper;
-
 var TitleContainer = function TitleContainer(_ref4) {
   var children = _ref4.children,
-      truncateTitle = _ref4.truncateTitle;
+    truncateTitle = _ref4.truncateTitle;
   return (0, _react2.jsx)("div", {
     css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
   }, children);
 };
+
 /**
  * __Actions wrapper__
  *
  * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
  *
  */
-
-
 exports.TitleContainer = TitleContainer;
-
 var ActionsWrapper = function ActionsWrapper(_ref5) {
   var children = _ref5.children;
   return (0, _react2.jsx)("div", {
     css: actionStyles
   }, children);
 };
+
 /**
  * __Bottom bar wrapper__
  *
  * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
  *
  */
-
-
 exports.ActionsWrapper = ActionsWrapper;
-
 var BottomBarWrapper = function BottomBarWrapper(_ref6) {
   var children = _ref6.children;
   return (0, _react2.jsx)("div", {
     css: bottomBarStyles
   }, children);
 };
-
 exports.BottomBarWrapper = BottomBarWrapper;

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _PageHeader.default;
   }
 });
-
 var _PageHeader = _interopRequireDefault(require("./PageHeader"));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "10.3.2",
+	"version": "10.3.3",
 	"sideEffects": false
 }

package/dist/es2019/PageHeader/index.js

@@ -1,11 +1,9 @@
 // TODO: Remove this eslint-disable when prop names have been renamed.
 // This rule is here as prop name changes are a major as they are used
 // by our consumers. This can be done in the next lite-mode conversion.
-
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 import React from 'react';
 import { ActionsWrapper, BottomBarWrapper, OuterWrapper, StyledTitleWrapper, TitleContainer, TitleWrapper } from './styled';
-
 /**
  * __Page header__
  *
@@ -36,5 +34,4 @@ const PageHeader = ({
     id: id
   }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBarWrapper, null, " ", bottomBar, " "));
 };
-
 export default PageHeader;

package/dist/es2019/PageHeader/styled.js

@@ -2,26 +2,23 @@
 // This rule is here as prop name changes are a major as they are used
 // by our consumers. The prop name concerned here is truncateTitle.
 // This can be done in the next lite-mode conversion.
-
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
-
 /** @jsx jsx */
+
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
-const gridSize = getGridSize();
 const truncateStyles = css({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 const outerStyles = css({
-  margin: `${gridSize * 3}px 0 ${gridSize * 2}px 0`
+  margin: `${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-200, 16px)"} 0`
 });
 const styledTitleStyles = css({
   marginTop: 0,
-  lineHeight: `${gridSize * 4}px`,
+  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   outline: 'none'
 });
 const titleWrapperStyles = css({
@@ -35,15 +32,15 @@ const titleWrapperTruncateStyles = css({
 const titleContainerStyles = css({
   minWidth: 0,
   maxWidth: '100%',
-  marginBottom: `${gridSize}px`,
+  marginBottom: "var(--ds-space-100, 8px)",
   flex: '1 0 auto',
   flexShrink: undefined
 });
 const actionStyles = css({
   maxWidth: '100%',
-  marginBottom: `${gridSize}px`,
+  marginBottom: "var(--ds-space-100, 8px)",
   marginLeft: 'auto',
-  paddingLeft: `${gridSize * 4}px`,
+  paddingLeft: "var(--ds-space-400, 32px)",
   flex: '0 0 auto',
   whiteSpace: 'nowrap',
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -55,8 +52,9 @@ const titleContainerTruncateStyles = css({
   flexShrink: 1
 });
 const bottomBarStyles = css({
-  marginTop: `${gridSize * 2}px`
+  marginTop: "var(--ds-space-200, 16px)"
 });
+
 /**
  * __Outer wrapper__
  *
@@ -64,17 +62,16 @@ const bottomBarStyles = css({
  * the BottomBar and its Breadcrumbs.
  *
  */
-
 export const OuterWrapper = ({
   children
 }) => {
   return jsx("div", {
     css: outerStyles
   }, children);
-}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+};
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const h700Styles = css(h700());
-
 /**
  * __Styled title wrapper__
  *
@@ -93,7 +90,6 @@ export const StyledTitleWrapper = /*#__PURE__*/React.forwardRef(({
     id: id
   }, children);
 });
-
 /**
  * __Title wrapper__
  *
@@ -108,13 +104,13 @@ export const TitleWrapper = ({
     css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
   }, children);
 };
+
 /**
  * Title container
  *
  * A title container is a container that wraps around the title and its styles (if applied).
  *
  */
-
 export const TitleContainer = ({
   children,
   truncateTitle
@@ -123,13 +119,13 @@ export const TitleContainer = ({
     css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
   }, children);
 };
+
 /**
  * __Actions wrapper__
  *
  * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
  *
  */
-
 export const ActionsWrapper = ({
   children
 }) => {
@@ -137,13 +133,13 @@ export const ActionsWrapper = ({
     css: actionStyles
   }, children);
 };
+
 /**
  * __Bottom bar wrapper__
  *
  * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
  *
  */
-
 export const BottomBarWrapper = ({
   children
 }) => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "10.3.2",
+	"version": "10.3.3",
 	"sideEffects": false
 }

package/dist/esm/PageHeader/index.js

@@ -1,11 +1,9 @@
 // TODO: Remove this eslint-disable when prop names have been renamed.
 // This rule is here as prop name changes are a major as they are used
 // by our consumers. This can be done in the next lite-mode conversion.
-
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 import React from 'react';
 import { ActionsWrapper, BottomBarWrapper, OuterWrapper, StyledTitleWrapper, TitleContainer, TitleWrapper } from './styled';
-
 /**
  * __Page header__
  *
@@ -18,15 +16,15 @@ import { ActionsWrapper, BottomBarWrapper, OuterWrapper, StyledTitleWrapper, Tit
  */
 var PageHeader = function PageHeader(_ref) {
   var innerRef = _ref.innerRef,
-      breadcrumbs = _ref.breadcrumbs,
-      actions = _ref.actions,
-      bottomBar = _ref.bottomBar,
-      children = _ref.children,
-      id = _ref.id,
-      _ref$disableTitleStyl = _ref.disableTitleStyles,
-      disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
-      _ref$truncateTitle = _ref.truncateTitle,
-      truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle;
+    breadcrumbs = _ref.breadcrumbs,
+    actions = _ref.actions,
+    bottomBar = _ref.bottomBar,
+    children = _ref.children,
+    id = _ref.id,
+    _ref$disableTitleStyl = _ref.disableTitleStyles,
+    disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
+    _ref$truncateTitle = _ref.truncateTitle,
+    truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle;
   return /*#__PURE__*/React.createElement(OuterWrapper, null, breadcrumbs, /*#__PURE__*/React.createElement(TitleWrapper, {
     truncateTitle: truncateTitle
   }, /*#__PURE__*/React.createElement(TitleContainer, {
@@ -37,5 +35,4 @@ var PageHeader = function PageHeader(_ref) {
     id: id
   }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBarWrapper, null, " ", bottomBar, " "));
 };
-
 export default PageHeader;

package/dist/esm/PageHeader/styled.js

@@ -2,26 +2,23 @@
 // This rule is here as prop name changes are a major as they are used
 // by our consumers. The prop name concerned here is truncateTitle.
 // This can be done in the next lite-mode conversion.
-
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
-
 /** @jsx jsx */
+
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
-var gridSize = getGridSize();
 var truncateStyles = css({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 var outerStyles = css({
-  margin: "".concat(gridSize * 3, "px 0 ").concat(gridSize * 2, "px 0")
+  margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
 });
 var styledTitleStyles = css({
   marginTop: 0,
-  lineHeight: "".concat(gridSize * 4, "px"),
+  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   outline: 'none'
 });
 var titleWrapperStyles = css({
@@ -35,15 +32,15 @@ var titleWrapperTruncateStyles = css({
 var titleContainerStyles = css({
   minWidth: 0,
   maxWidth: '100%',
-  marginBottom: "".concat(gridSize, "px"),
+  marginBottom: "var(--ds-space-100, 8px)",
   flex: '1 0 auto',
   flexShrink: undefined
 });
 var actionStyles = css({
   maxWidth: '100%',
-  marginBottom: "".concat(gridSize, "px"),
+  marginBottom: "var(--ds-space-100, 8px)",
   marginLeft: 'auto',
-  paddingLeft: "".concat(gridSize * 4, "px"),
+  paddingLeft: "var(--ds-space-400, 32px)",
   flex: '0 0 auto',
   whiteSpace: 'nowrap',
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -55,8 +52,9 @@ var titleContainerTruncateStyles = css({
   flexShrink: 1
 });
 var bottomBarStyles = css({
-  marginTop: "".concat(gridSize * 2, "px")
+  marginTop: "var(--ds-space-200, 16px)"
 });
+
 /**
  * __Outer wrapper__
  *
@@ -64,16 +62,15 @@ var bottomBarStyles = css({
  * the BottomBar and its Breadcrumbs.
  *
  */
-
 export var OuterWrapper = function OuterWrapper(_ref) {
   var children = _ref.children;
   return jsx("div", {
     css: outerStyles
   }, children);
-}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+};
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var h700Styles = css(h700());
-
 /**
  * __Styled title wrapper__
  *
@@ -82,8 +79,8 @@ var h700Styles = css(h700());
  */
 export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
-      id = _ref2.id,
-      truncateTitle = _ref2.truncateTitle;
+    id = _ref2.id,
+    truncateTitle = _ref2.truncateTitle;
   return jsx("h1", {
     css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
     ref: ref,
@@ -91,7 +88,6 @@ export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, r
     id: id
   }, children);
 });
-
 /**
  * __Title wrapper__
  *
@@ -100,45 +96,45 @@ export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, r
  */
 export var TitleWrapper = function TitleWrapper(_ref3) {
   var children = _ref3.children,
-      truncateTitle = _ref3.truncateTitle;
+    truncateTitle = _ref3.truncateTitle;
   return jsx("div", {
     css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
   }, children);
 };
+
 /**
  * Title container
  *
  * A title container is a container that wraps around the title and its styles (if applied).
  *
  */
-
 export var TitleContainer = function TitleContainer(_ref4) {
   var children = _ref4.children,
-      truncateTitle = _ref4.truncateTitle;
+    truncateTitle = _ref4.truncateTitle;
   return jsx("div", {
     css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
   }, children);
 };
+
 /**
  * __Actions wrapper__
  *
  * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
  *
  */
-
 export var ActionsWrapper = function ActionsWrapper(_ref5) {
   var children = _ref5.children;
   return jsx("div", {
     css: actionStyles
   }, children);
 };
+
 /**
  * __Bottom bar wrapper__
  *
  * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
  *
  */
-
 export var BottomBarWrapper = function BottomBarWrapper(_ref6) {
   var children = _ref6.children;
   return jsx("div", {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "10.3.2",
+	"version": "10.3.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-header",
-  "version": "10.3.2",
+  "version": "10.3.3",
   "description": "A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,19 +12,10 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/page-header",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -34,6 +25,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/tokens": "^1.2.5",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -43,13 +35,13 @@
   },
   "devDependencies": {
     "@atlaskit/breadcrumbs": "^11.7.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.0.1",
     "@atlaskit/inline-edit": "^12.2.0",
     "@atlaskit/page": "^12.2.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/visual-regression": "*",
@@ -71,9 +63,11 @@
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
+      "design-tokens": [
+        "color"
+      ],
       "theming": [
-        "react-context",
-        "tokens"
+        "react-context"
       ],
       "styling": [
         "static",

package/report.api.md

@@ -1,24 +1,24 @@
-## API Report File for "@atlaskit/page-header".
+<!-- API Report Version: 2.3 -->
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+## API Report File for "@atlaskit/page-header"
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 
-/**
- * __Page header__
- *
- * A page header defines the top of a page. It contains a title and can be optionally combined with
- * breadcrumbs buttons, search, and filters.
- *
- * - [Examples](https://atlassian.design/components/page-header/examples)
- * - [Code](https://atlassian.design/components/page-header/code)
- * - [Usage](https://atlassian.design/components/page-header/usage)
- */
-declare const PageHeader: ({
+// @public
+const PageHeader: ({
   innerRef,
   breadcrumbs,
   actions,
@@ -30,40 +30,19 @@ declare const PageHeader: ({
 }: PageHeaderProps) => JSX.Element;
 export default PageHeader;
 
-declare type PageHeaderProps = {
-  /**
-   * Contents of the action bar to be rendered next to the page title.
-   */
+// @public (undocumented)
+type PageHeaderProps = {
   actions?: ReactElement;
-  /**
-   * Contents of the action bar to be rendered next to the page title. Typically a button group.
-   */
   bottomBar?: ReactElement;
-  /**
-   * Page breadcrumbs to be rendered above the title.
-   */
   breadcrumbs?: ReactElement;
-  /**
-   * Contents of the bottom bar to be rendered below the page title. Typically contains a search bar and/or filters.
-   */
   children?: ReactNode;
-  /**
-   * Content of the page title. The text wraps by default.
-   */
   disableTitleStyles?: boolean;
-  /**
-   * Returns the inner ref to the DOM element of the title. This is exposed so the focus can be set.
-   */
   innerRef?: (element: HTMLElement) => void;
-  /**
-   * Prevent the title from wrapping across lines. This should be avoided.
-   */
   truncateTitle?: boolean;
-  /**
-   * Used as id of inner h1 tag. This is exposed so the header text can be used as label of other element by aria-labeledby
-   */
   id?: string;
 };
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/dist/types-ts4.0/PageHeader/index.d.ts

@@ -1,47 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-export declare type PageHeaderProps = {
-    /**
-     * Contents of the action bar to be rendered next to the page title.
-     */
-    actions?: ReactElement;
-    /**
-     * Contents of the action bar to be rendered next to the page title. Typically a button group.
-     */
-    bottomBar?: ReactElement;
-    /**
-     * Page breadcrumbs to be rendered above the title.
-     */
-    breadcrumbs?: ReactElement;
-    /**
-     * Contents of the bottom bar to be rendered below the page title. Typically contains a search bar and/or filters.
-     */
-    children?: ReactNode;
-    /**
-     * Content of the page title. The text wraps by default.
-     */
-    disableTitleStyles?: boolean;
-    /**
-     * Returns the inner ref to the DOM element of the title. This is exposed so the focus can be set.
-     */
-    innerRef?: (element: HTMLElement) => void;
-    /**
-     * Prevent the title from wrapping across lines. This should be avoided.
-     */
-    truncateTitle?: boolean;
-    /**
-     * Used as id of inner h1 tag. This is exposed so the header text can be used as label of other element by aria-labeledby
-     */
-    id?: string;
-};
-/**
- * __Page header__
- *
- * A page header defines the top of a page. It contains a title and can be optionally combined with
- * breadcrumbs buttons, search, and filters.
- *
- * - [Examples](https://atlassian.design/components/page-header/examples)
- * - [Code](https://atlassian.design/components/page-header/code)
- * - [Usage](https://atlassian.design/components/page-header/usage)
- */
-declare const PageHeader: ({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles, truncateTitle, }: PageHeaderProps) => JSX.Element;
-export default PageHeader;

package/dist/types-ts4.0/PageHeader/styled.d.ts

@@ -1,54 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-/**
- * __Outer wrapper__
- *
- * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
- * the BottomBar and its Breadcrumbs.
- *
- */
-export declare const OuterWrapper: React.FC<React.ReactNode>;
-interface StyledTitleWrapperProps {
-    children?: React.ReactNode;
-    id?: string;
-    truncateTitle?: boolean;
-}
-/**
- * __Styled title wrapper__
- *
- * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
- *
- */
-export declare const StyledTitleWrapper: React.ForwardRefExoticComponent<StyledTitleWrapperProps & React.RefAttributes<HTMLHeadingElement>>;
-interface TitleProps {
-    truncateTitle?: boolean;
-}
-/**
- * __Title wrapper__
- *
- * A title wrapper is a wrapper around the title and the actions.
- *
- */
-export declare const TitleWrapper: React.FC<TitleProps>;
-/**
- * Title container
- *
- * A title container is a container that wraps around the title and its styles (if applied).
- *
- */
-export declare const TitleContainer: React.FC<TitleProps>;
-/**
- * __Actions wrapper__
- *
- * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
- *
- */
-export declare const ActionsWrapper: React.FC;
-/**
- * __Bottom bar wrapper__
- *
- * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
- *
- */
-export declare const BottomBarWrapper: React.FC;
-export {};

package/dist/types-ts4.0/index.d.ts

@@ -1 +0,0 @@
-export { default } from './PageHeader';