@atlaskit/page-header 10.4.3 → 10.4.5

package/CHANGELOG.md

@@ -1,28 +1,40 @@
 # @atlaskit/page-header
 
+## 10.4.5
+
+### Patch Changes
+
+- [#70460](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70460) [`2f37600156ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f37600156ae) - The internal composition of a component in this package has changed. There is no expected change in behaviour.
+
+## 10.4.4
+
+### Patch Changes
+
+- [#33652](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33652) [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
+
 ## 10.4.3
 
 ### Patch Changes
 
-- [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+- [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935) [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
 
 ## 10.4.2
 
 ### Patch Changes
 
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 
 ## 10.4.1
 
 ### Patch Changes
 
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 
 ## 10.4.0
 
 ### Minor Changes
 
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 
 ### Patch Changes
 
@@ -32,44 +44,44 @@
 
 ### Patch Changes
 
-- [`f8a61ff6218`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f8a61ff6218) - Enrol @atlaskit/page-header on push model consumption in Jira
+- [#32724](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32724) [`f8a61ff6218`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f8a61ff6218) - Enrol @atlaskit/page-header on push model consumption in Jira
 
 ## 10.3.5
 
 ### Patch Changes
 
-- [`e517bb1ead3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e517bb1ead3) - Migrates unit tests from enzyme to RTL.
+- [#31379](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31379) [`e517bb1ead3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e517bb1ead3) - Migrates unit tests from enzyme to RTL.
 
 ## 10.3.4
 
 ### Patch Changes
 
-- [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
+- [#31206](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31206) [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
 - Updated dependencies
 
 ## 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.
+- [#31338](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31338) [`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
 
-- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+- [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
 
 ## 10.3.1
 
 ### Patch Changes
 
-- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
 
 ## 10.3.0
 
 ### Minor Changes
 
-- [`ae50e8dea70`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae50e8dea70) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+- [#24004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24004) [`ae50e8dea70`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae50e8dea70) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
 
 ### Patch Changes
 
@@ -79,13 +91,13 @@
 
 ### Patch Changes
 
-- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
 
 ## 10.2.3
 
 ### Patch Changes
 
-- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
 
 ## 10.2.2
 
@@ -97,13 +109,13 @@
 
 ### Patch Changes
 
-- [`b3893a2357b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3893a2357b) - Fixes a styling issue that arose in v10.2.0 relating to the lineHeight of the page header's title.
+- [#14420](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/14420) [`b3893a2357b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3893a2357b) - Fixes a styling issue that arose in v10.2.0 relating to the lineHeight of the page header's title.
 
 ## 10.2.0
 
 ### Minor Changes
 
-- [`6b76b1ceab3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b76b1ceab3) - This change removes the dependency `styled components`. It has been refactored to use `@emotion/core` instead. Some examples have also been updated. There should be no UI or UX change.
+- [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302) [`6b76b1ceab3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b76b1ceab3) - This change removes the dependency `styled components`. It has been refactored to use `@emotion/core` instead. Some examples have also been updated. There should be no UI or UX change.
 
 ### Patch Changes
 
@@ -113,68 +125,68 @@
 
 ### Patch Changes
 
-- [`c5785203506`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5785203506) - Updated homepage in package.json
+- [#13728](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13728) [`c5785203506`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5785203506) - Updated homepage in package.json
 
 ## 10.1.2
 
 ### Patch Changes
 
-- [`ec0abf56583`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec0abf56583) - Fixes internal test snapshots.
+- [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837) [`ec0abf56583`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec0abf56583) - Fixes internal test snapshots.
 - Updated dependencies
 
 ## 10.1.1
 
 ### Patch Changes
 
-- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+- [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
 
 ## 10.1.0
 
 ### Minor Changes
 
-- [`169a082e5b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/169a082e5b4) - Added id prop to the `PageHeader` component. Now header text can be used as label of other component via aria-labelledby attribute
+- [#12328](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12328) [`169a082e5b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/169a082e5b4) - Added id prop to the `PageHeader` component. Now header text can be used as label of other component via aria-labelledby attribute
 
 ## 10.0.11
 
 ### Patch Changes
 
-- [`44e6c77d533`](https://bitbucket.org/atlassian/atlassian-frontend/commits/44e6c77d533) - Renames exports in page header examples to be more descriptive. For example, Example is renamed to PageHeaderDefaultExample.
+- [#11910](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11910) [`44e6c77d533`](https://bitbucket.org/atlassian/atlassian-frontend/commits/44e6c77d533) - Renames exports in page header examples to be more descriptive. For example, Example is renamed to PageHeaderDefaultExample.
 
 ## 10.0.10
 
 ### Patch Changes
 
-- [`ac373538cdd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac373538cdd) - Page header migrated from atlaskit to atlassian.design. Documentation and examples added along with updated snapshot test.
+- [#11488](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11488) [`ac373538cdd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac373538cdd) - Page header migrated from atlaskit to atlassian.design. Documentation and examples added along with updated snapshot test.
 
 ## 10.0.9
 
 ### Patch Changes
 
-- [`8450e34990c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8450e34990c) - [ux] Conditionally render ActionsWrapper for PageHeader's actions when provided.
+- [#9440](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/9440) [`8450e34990c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8450e34990c) - [ux] Conditionally render ActionsWrapper for PageHeader's actions when provided.
 
 ## 10.0.8
 
 ### Patch Changes
 
-- [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
+- [#8644](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8644) [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
 
 ## 10.0.7
 
 ### Patch Changes
 
-- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
 
 ## 10.0.6
 
 ### Patch Changes
 
-- [`be0acecf54`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be0acecf54) - [ux] page-header is a non interactive element and it was getting focus ring while clicking on it. Now focus ring has been removed to fix this issue.
+- [#5516](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5516) [`be0acecf54`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be0acecf54) - [ux] page-header is a non interactive element and it was getting focus ring while clicking on it. Now focus ring has been removed to fix this issue.
 
 ## 10.0.5
 
 ### Patch Changes
 
-- [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
+- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
   This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
   Also add `typescript` to `devDependencies` to denote version that the package was built with.
 
@@ -188,7 +200,7 @@
 
 ### Patch Changes
 
-- [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
+- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
 
   Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
   to prevent duplicates of tslib being bundled.
@@ -197,19 +209,19 @@
 
 ### Patch Changes
 
-- [`f9fe8ed609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9fe8ed609) - Added tabIndex and innerRef to underlying heading so it can be focused
+- [#3823](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3823) [`f9fe8ed609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9fe8ed609) - Added tabIndex and innerRef to underlying heading so it can be focused
 
 ## 10.0.1
 
 ### Patch Changes
 
-- [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
+- [#3428](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3428) [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
 
 ## 10.0.0
 
 ### Major Changes
 
-- [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
+- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
   For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
 
 ### Patch Changes
@@ -220,7 +232,7 @@
 
 ### Patch Changes
 
-- [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
+- [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
 
 ## 9.0.19
 

package/dist/cjs/PageHeader/index.js

@@ -43,5 +43,4 @@ 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;
+var _default = exports.default = PageHeader;

package/dist/cjs/PageHeader/styled.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 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 _primitives = require("@atlaskit/primitives");
 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
@@ -24,8 +25,8 @@ var outerStyles = (0, _react2.css)({
   margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
 });
 var styledTitleStyles = (0, _react2.css)({
-  marginTop: 0,
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
+  marginBlockStart: 0,
   outline: 'none'
 });
 var titleWrapperStyles = (0, _react2.css)({
@@ -39,18 +40,18 @@ var titleWrapperTruncateStyles = (0, _react2.css)({
 var titleContainerStyles = (0, _react2.css)({
   minWidth: 0,
   maxWidth: '100%',
-  marginBottom: "var(--ds-space-100, 8px)",
   flex: '1 0 auto',
-  flexShrink: undefined
+  flexShrink: undefined,
+  marginBlockEnd: "var(--ds-space-100, 8px)"
 });
 var actionStyles = (0, _react2.css)({
   maxWidth: '100%',
-  marginBottom: "var(--ds-space-100, 8px)",
-  marginLeft: 'auto',
-  paddingLeft: "var(--ds-space-400, 32px)",
   flex: '0 0 auto',
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  marginInlineStart: 'auto',
+  paddingInlineStart: "var(--ds-space-400, 32px)",
   whiteSpace: 'nowrap',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '>': {
     textAlign: 'right'
   }
@@ -58,34 +59,33 @@ var actionStyles = (0, _react2.css)({
 var titleContainerTruncateStyles = (0, _react2.css)({
   flexShrink: 1
 });
-var bottomBarStyles = (0, _react2.css)({
-  marginTop: "var(--ds-space-200, 16px)"
+var bottomBarStyles = (0, _primitives.xcss)({
+  marginBlockStart: 'space.200'
 });
 
 /**
- * __Outer wrapper__
+ * __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.
  *
  */
-var OuterWrapper = function OuterWrapper(_ref) {
+var OuterWrapper = exports.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
-exports.OuterWrapper = OuterWrapper;
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var h700Styles = (0, _react2.css)((0, _typography.h700)());
 /**
- * __Styled title wrapper__
+ * __Styled title wrapper__.
  *
  * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
  *
  */
-var StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+var StyledTitleWrapper = exports.StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     id = _ref2.id,
     truncateTitle = _ref2.truncateTitle;
@@ -96,14 +96,13 @@ var StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2,
     id: id
   }, children);
 });
-exports.StyledTitleWrapper = StyledTitleWrapper;
 /**
- * __Title wrapper__
+ * __Title wrapper__.
  *
  * A title wrapper is a wrapper around the title and the actions.
  *
  */
-var TitleWrapper = function TitleWrapper(_ref3) {
+var TitleWrapper = exports.TitleWrapper = function TitleWrapper(_ref3) {
   var children = _ref3.children,
     truncateTitle = _ref3.truncateTitle;
   return (0, _react2.jsx)("div", {
@@ -112,13 +111,12 @@ var TitleWrapper = function TitleWrapper(_ref3) {
 };
 
 /**
- * Title container
+ * 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 TitleContainer = exports.TitleContainer = function TitleContainer(_ref4) {
   var children = _ref4.children,
     truncateTitle = _ref4.truncateTitle;
   return (0, _react2.jsx)("div", {
@@ -127,13 +125,12 @@ var TitleContainer = function TitleContainer(_ref4) {
 };
 
 /**
- * __Actions wrapper__
+ * __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 ActionsWrapper = exports.ActionsWrapper = function ActionsWrapper(_ref5) {
   var children = _ref5.children;
   return (0, _react2.jsx)("div", {
     css: actionStyles
@@ -141,16 +138,14 @@ var ActionsWrapper = function ActionsWrapper(_ref5) {
 };
 
 /**
- * __Bottom bar wrapper__
+ * __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 BottomBarWrapper = exports.BottomBarWrapper = function BottomBarWrapper(_ref6) {
   var children = _ref6.children;
-  return (0, _react2.jsx)("div", {
-    css: bottomBarStyles
+  return (0, _react2.jsx)(_primitives.Box, {
+    xcss: bottomBarStyles
   }, children);
-};
-exports.BottomBarWrapper = BottomBarWrapper;
+};

package/dist/es2019/PageHeader/styled.js

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
 import { h700 } from '@atlaskit/theme/typography';
 const truncateStyles = css({
   overflowX: 'hidden',
@@ -17,8 +18,8 @@ const outerStyles = css({
   margin: `${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-200, 16px)"} 0`
 });
 const styledTitleStyles = css({
-  marginTop: 0,
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
+  marginBlockStart: 0,
   outline: 'none'
 });
 const titleWrapperStyles = css({
@@ -32,18 +33,18 @@ const titleWrapperTruncateStyles = css({
 const titleContainerStyles = css({
   minWidth: 0,
   maxWidth: '100%',
-  marginBottom: "var(--ds-space-100, 8px)",
   flex: '1 0 auto',
-  flexShrink: undefined
+  flexShrink: undefined,
+  marginBlockEnd: "var(--ds-space-100, 8px)"
 });
 const actionStyles = css({
   maxWidth: '100%',
-  marginBottom: "var(--ds-space-100, 8px)",
-  marginLeft: 'auto',
-  paddingLeft: "var(--ds-space-400, 32px)",
   flex: '0 0 auto',
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  marginInlineStart: 'auto',
+  paddingInlineStart: "var(--ds-space-400, 32px)",
   whiteSpace: 'nowrap',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '>': {
     textAlign: 'right'
   }
@@ -51,12 +52,12 @@ const actionStyles = css({
 const titleContainerTruncateStyles = css({
   flexShrink: 1
 });
-const bottomBarStyles = css({
-  marginTop: "var(--ds-space-200, 16px)"
+const bottomBarStyles = xcss({
+  marginBlockStart: 'space.200'
 });
 
 /**
- * __Outer wrapper__
+ * __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.
@@ -70,10 +71,10 @@ export const OuterWrapper = ({
   }, children);
 };
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const h700Styles = css(h700());
 /**
- * __Styled title wrapper__
+ * __Styled title wrapper__.
  *
  * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
  *
@@ -91,7 +92,7 @@ export const StyledTitleWrapper = /*#__PURE__*/React.forwardRef(({
   }, children);
 });
 /**
- * __Title wrapper__
+ * __Title wrapper__.
  *
  * A title wrapper is a wrapper around the title and the actions.
  *
@@ -106,7 +107,7 @@ export const TitleWrapper = ({
 };
 
 /**
- * Title container
+ * Title container.
  *
  * A title container is a container that wraps around the title and its styles (if applied).
  *
@@ -121,7 +122,7 @@ export const TitleContainer = ({
 };
 
 /**
- * __Actions wrapper__
+ * __Actions wrapper__.
  *
  * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
  *
@@ -135,7 +136,7 @@ export const ActionsWrapper = ({
 };
 
 /**
- * __Bottom bar wrapper__
+ * __Bottom bar wrapper__.
  *
  * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
  *
@@ -143,7 +144,7 @@ export const ActionsWrapper = ({
 export const BottomBarWrapper = ({
   children
 }) => {
-  return jsx("div", {
-    css: bottomBarStyles
+  return jsx(Box, {
+    xcss: bottomBarStyles
   }, children);
 };

package/dist/esm/PageHeader/styled.js

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
 import { h700 } from '@atlaskit/theme/typography';
 var truncateStyles = css({
   overflowX: 'hidden',
@@ -17,8 +18,8 @@ var outerStyles = css({
   margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
 });
 var styledTitleStyles = css({
-  marginTop: 0,
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
+  marginBlockStart: 0,
   outline: 'none'
 });
 var titleWrapperStyles = css({
@@ -32,18 +33,18 @@ var titleWrapperTruncateStyles = css({
 var titleContainerStyles = css({
   minWidth: 0,
   maxWidth: '100%',
-  marginBottom: "var(--ds-space-100, 8px)",
   flex: '1 0 auto',
-  flexShrink: undefined
+  flexShrink: undefined,
+  marginBlockEnd: "var(--ds-space-100, 8px)"
 });
 var actionStyles = css({
   maxWidth: '100%',
-  marginBottom: "var(--ds-space-100, 8px)",
-  marginLeft: 'auto',
-  paddingLeft: "var(--ds-space-400, 32px)",
   flex: '0 0 auto',
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  marginInlineStart: 'auto',
+  paddingInlineStart: "var(--ds-space-400, 32px)",
   whiteSpace: 'nowrap',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '>': {
     textAlign: 'right'
   }
@@ -51,12 +52,12 @@ var actionStyles = css({
 var titleContainerTruncateStyles = css({
   flexShrink: 1
 });
-var bottomBarStyles = css({
-  marginTop: "var(--ds-space-200, 16px)"
+var bottomBarStyles = xcss({
+  marginBlockStart: 'space.200'
 });
 
 /**
- * __Outer wrapper__
+ * __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.
@@ -69,10 +70,10 @@ export var OuterWrapper = function OuterWrapper(_ref) {
   }, children);
 };
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var h700Styles = css(h700());
 /**
- * __Styled title wrapper__
+ * __Styled title wrapper__.
  *
  * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
  *
@@ -89,7 +90,7 @@ export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, r
   }, children);
 });
 /**
- * __Title wrapper__
+ * __Title wrapper__.
  *
  * A title wrapper is a wrapper around the title and the actions.
  *
@@ -103,7 +104,7 @@ export var TitleWrapper = function TitleWrapper(_ref3) {
 };
 
 /**
- * Title container
+ * Title container.
  *
  * A title container is a container that wraps around the title and its styles (if applied).
  *
@@ -117,7 +118,7 @@ export var TitleContainer = function TitleContainer(_ref4) {
 };
 
 /**
- * __Actions wrapper__
+ * __Actions wrapper__.
  *
  * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
  *
@@ -130,14 +131,14 @@ export var ActionsWrapper = function ActionsWrapper(_ref5) {
 };
 
 /**
- * __Bottom bar wrapper__
+ * __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", {
-    css: bottomBarStyles
+  return jsx(Box, {
+    xcss: bottomBarStyles
   }, children);
 };

package/dist/types/PageHeader/index.d.ts

@@ -25,11 +25,11 @@ export type PageHeaderProps = {
      */
     innerRef?: (element: HTMLElement) => void;
     /**
-     * Prevent the title from wrapping across lines. This should be avoided.
+     * Prevent the title from wrapping across lines. Avoid using this wherever possible, as truncation can make page headings inaccessible.
      */
     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
+     * Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby.
      */
     id?: string;
 };

package/dist/types/PageHeader/styled.d.ts

@@ -1,22 +1,23 @@
 /** @jsx jsx */
 import React, { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 /**
- * __Outer wrapper__
+ * __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<{
+export declare const OuterWrapper: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 interface StyledTitleWrapperProps {
     children?: React.ReactNode;
     id?: string;
     truncateTitle?: boolean;
 }
 /**
- * __Styled title wrapper__
+ * __Styled title wrapper__.
  *
  * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
  *
@@ -27,35 +28,35 @@ interface TitleProps {
     children?: ReactNode;
 }
 /**
- * __Title wrapper__
+ * __Title wrapper__.
  *
  * A title wrapper is a wrapper around the title and the actions.
  *
  */
-export declare const TitleWrapper: React.FC<TitleProps>;
+export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
 /**
- * Title container
+ * 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>;
+export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
 /**
- * __Actions wrapper__
+ * __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<{
+export declare const ActionsWrapper: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
- * __Bottom bar wrapper__
+ * __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 declare const BottomBarWrapper: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 export {};

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

@@ -25,11 +25,11 @@ export type PageHeaderProps = {
      */
     innerRef?: (element: HTMLElement) => void;
     /**
-     * Prevent the title from wrapping across lines. This should be avoided.
+     * Prevent the title from wrapping across lines. Avoid using this wherever possible, as truncation can make page headings inaccessible.
      */
     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
+     * Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby.
      */
     id?: string;
 };

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

@@ -1,22 +1,23 @@
 /** @jsx jsx */
 import React, { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 /**
- * __Outer wrapper__
+ * __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<{
+export declare const OuterWrapper: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 interface StyledTitleWrapperProps {
     children?: React.ReactNode;
     id?: string;
     truncateTitle?: boolean;
 }
 /**
- * __Styled title wrapper__
+ * __Styled title wrapper__.
  *
  * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
  *
@@ -27,35 +28,35 @@ interface TitleProps {
     children?: ReactNode;
 }
 /**
- * __Title wrapper__
+ * __Title wrapper__.
  *
  * A title wrapper is a wrapper around the title and the actions.
  *
  */
-export declare const TitleWrapper: React.FC<TitleProps>;
+export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
 /**
- * Title container
+ * 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>;
+export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
 /**
- * __Actions wrapper__
+ * __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<{
+export declare const ActionsWrapper: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
- * __Bottom bar wrapper__
+ * __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 declare const BottomBarWrapper: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-header",
-  "version": "10.4.3",
+  "version": "10.4.5",
   "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,31 +12,23 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
-  "homepage": "https://atlassian.design/components/page-header",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "continuous",
     "productPushConsumption": [
       "jira"
     ],
+    "releaseModel": "continuous",
     "website": {
       "name": "Page header",
       "category": "Components"
     }
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/primitives": "^2.0.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -45,16 +37,12 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/breadcrumbs": "^11.10.0",
-    "@atlaskit/button": "^16.7.0",
-    "@atlaskit/docs": "*",
+    "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
+    "@atlaskit/breadcrumbs": "^12.0.0",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/inline-edit": "^12.3.0",
     "@atlaskit/page": "^12.3.0",
-    "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
@@ -89,6 +77,15 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "homepage": "https://atlassian.design/components/page-header",
   "af:exports": {
     ".": "./src/index.tsx"
   },

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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

package/tmp/api-report-tmp.d.ts

@@ -1,28 +0,0 @@
-## API Report File for "@atlaskit/page-header"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ReactElement } from 'react';
-import { ReactNode } from 'react';
-
-// @public
-const PageHeader: ({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles, truncateTitle, }: PageHeaderProps) => JSX.Element;
-export default PageHeader;
-
-// @public (undocumented)
-type PageHeaderProps = {
-    actions?: ReactElement;
-    bottomBar?: ReactElement;
-    breadcrumbs?: ReactElement;
-    children?: ReactNode;
-    disableTitleStyles?: boolean;
-    innerRef?: (element: HTMLElement) => void;
-    truncateTitle?: boolean;
-    id?: string;
-};
-
-// (No @packageDocumentation comment for this package)
-
-```