@atlaskit/page-header 10.9.6 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/page-header
 
+## 11.0.0
+
+### Major Changes
+
+- [#173248](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173248)
+  [`1e25b83888a4a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1e25b83888a4a) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/page-header`, you will need to ensure that
+  your bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in
+  support for `.css` imports, so you may not need to do anything. If you are using a different
+  bundler, please refer to the documentation for that bundler to understand how to handle `.css`
+  imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 10.9.6
 
 ### Patch Changes

package/dist/cjs/PageHeader/styled.compiled.css

@@ -0,0 +1,28 @@
+._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18s87y2j{margin:var(--_1j0v6uy)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1dyz4jg8{letter-spacing:normal}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1n261q9c{flex-wrap:nowrap}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1oblusic >{text-align:right}
+._1pfhidpf{margin-block-start:0}
+._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._4cvr1y6m{align-items:flex-start}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._ahbq1wug{margin-inline-start:auto}
+._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
+._i0dl1wug{flex-basis:auto}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/cjs/PageHeader/styled.js

@@ -1,3 +1,9 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
+// 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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,72 +11,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleWrapper = exports.TitleContainer = exports.StyledTitleWrapper = exports.OuterWrapper = exports.BottomBarWrapper = exports.ActionsWrapper = void 0;
+require("./styled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
-var _primitives = require("@atlaskit/primitives");
-// 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 */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var truncateStyles = (0, _react2.css)({
-  overflowX: 'hidden',
-  overflowY: 'hidden',
-  // `overflow-y` necessary to prevent a scrollbar from showing in FF: https://product-fabric.atlassian.net/browse/PYX-1035
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-var outerStyles = (0, _react2.css)({
-  margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
-});
-var titleStyles = (0, _react2.css)({
-  color: "var(--ds-text, #172B4D)",
-  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  letterSpacing: 'normal',
-  marginBlockStart: 0,
-  outline: 'none'
-});
-var titleWrapperStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexWrap: 'wrap'
-});
-var titleWrapperTruncateStyles = (0, _react2.css)({
-  flexWrap: 'nowrap'
-});
-var titleContainerStyles = (0, _react2.css)({
-  minWidth: 0,
-  maxWidth: '100%',
-  flex: '1 0 auto',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  flexShrink: undefined,
-  marginBlockEnd: "var(--ds-space-100, 8px)"
-});
-var actionStyles = (0, _react2.css)({
-  maxWidth: '100%',
-  flex: '0 0 auto',
-  marginBlockEnd: "var(--ds-space-100, 8px)",
-  marginInlineStart: 'auto',
-  paddingInlineStart: "var(--ds-space-400, 32px)",
-  whiteSpace: 'nowrap',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '>': {
-    textAlign: 'right'
-  }
-});
-var titleContainerTruncateStyles = (0, _react2.css)({
-  flexShrink: 1
-});
-var bottomBarStyles = (0, _primitives.xcss)({
-  marginBlockStart: 'space.200'
-});
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  bottomBar: "_1pfhpxbi"
+};
+var truncateStyles = null;
+var outerStyles = null;
+var titleStyles = null;
+var titleWrapperStyles = null;
+var titleWrapperTruncateStyles = null;
+var titleContainerStyles = null;
+var actionStyles = null;
+var titleContainerTruncateStyles = null;
 
 /**
  * __Outer wrapper__.
@@ -81,8 +36,11 @@ var bottomBarStyles = (0, _primitives.xcss)({
  */
 var OuterWrapper = exports.OuterWrapper = function OuterWrapper(_ref) {
   var children = _ref.children;
-  return (0, _react2.jsx)("div", {
-    css: outerStyles
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_18s87y2j"]),
+    style: {
+      "--_1j0v6uy": (0, _runtime.ix)("var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0"))
+    }
   }, children);
 };
 /**
@@ -95,11 +53,11 @@ var StyledTitleWrapper = exports.StyledTitleWrapper = /*#__PURE__*/_react.defaul
   var children = _ref2.children,
     id = _ref2.id,
     truncateTitle = _ref2.truncateTitle;
-  return (0, _react2.jsx)("h1", {
-    css: [titleStyles, truncateTitle && truncateStyles],
+  return /*#__PURE__*/_react.default.createElement("h1", {
     ref: ref,
     tabIndex: -1,
-    id: id
+    id: id,
+    className: (0, _runtime.ax)(["_syaz1fxt _11c81p5s _1dyz4jg8 _1pfhidpf _12ji1r31 _1qu2glyw _12y31o36", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
   }, children);
 });
 /**
@@ -111,8 +69,8 @@ var StyledTitleWrapper = exports.StyledTitleWrapper = /*#__PURE__*/_react.defaul
 var TitleWrapper = exports.TitleWrapper = function TitleWrapper(_ref3) {
   var children = _ref3.children,
     truncateTitle = _ref3.truncateTitle;
-  return (0, _react2.jsx)("div", {
-    css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1y6m _1n261g80", truncateTitle && "_1n261q9c"])
   }, children);
 };
 
@@ -125,8 +83,8 @@ var TitleWrapper = exports.TitleWrapper = function TitleWrapper(_ref3) {
 var TitleContainer = exports.TitleContainer = function TitleContainer(_ref4) {
   var children = _ref4.children,
     truncateTitle = _ref4.truncateTitle;
-  return (0, _react2.jsx)("div", {
-    css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_1ul9idpf _p12f1osq _16jlkb7n _1o9zidpf _i0dl1wug _6rthu2gc", truncateTitle && "_1o9zkb7n"])
   }, children);
 };
 
@@ -138,8 +96,8 @@ var TitleContainer = exports.TitleContainer = function TitleContainer(_ref4) {
  */
 var ActionsWrapper = exports.ActionsWrapper = function ActionsWrapper(_ref5) {
   var children = _ref5.children;
-  return (0, _react2.jsx)("div", {
-    css: actionStyles
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_p12f1osq _16jlidpf _1o9zidpf _i0dl1wug _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c _1oblusic"])
   }, children);
 };
 
@@ -151,7 +109,7 @@ var ActionsWrapper = exports.ActionsWrapper = function ActionsWrapper(_ref5) {
  */
 var BottomBarWrapper = exports.BottomBarWrapper = function BottomBarWrapper(_ref6) {
   var children = _ref6.children;
-  return (0, _react2.jsx)(_primitives.Box, {
-    xcss: bottomBarStyles
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.bottomBar
   }, children);
 };

package/dist/es2019/PageHeader/styled.compiled.css

@@ -0,0 +1,28 @@
+._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18s81d9c{margin:var(--ds-space-300,24px) 0 var(--ds-space-200,1pc) 0}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1dyz4jg8{letter-spacing:normal}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1n261q9c{flex-wrap:nowrap}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1oblusic >{text-align:right}
+._1pfhidpf{margin-block-start:0}
+._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._4cvr1y6m{align-items:flex-start}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._ahbq1wug{margin-inline-start:auto}
+._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
+._i0dl1wug{flex-basis:auto}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/es2019/PageHeader/styled.js

@@ -1,69 +1,24 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
 // 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 */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { Box, xcss } from '@atlaskit/primitives';
-const truncateStyles = css({
-  overflowX: 'hidden',
-  overflowY: 'hidden',
-  // `overflow-y` necessary to prevent a scrollbar from showing in FF: https://product-fabric.atlassian.net/browse/PYX-1035
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-const outerStyles = css({
-  margin: `${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-200, 16px)"} 0`
-});
-const titleStyles = css({
-  color: "var(--ds-text, #172B4D)",
-  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  letterSpacing: 'normal',
-  marginBlockStart: 0,
-  outline: 'none'
-});
-const titleWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexWrap: 'wrap'
-});
-const titleWrapperTruncateStyles = css({
-  flexWrap: 'nowrap'
-});
-const titleContainerStyles = css({
-  minWidth: 0,
-  maxWidth: '100%',
-  flex: '1 0 auto',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  flexShrink: undefined,
-  marginBlockEnd: "var(--ds-space-100, 8px)"
-});
-const actionStyles = css({
-  maxWidth: '100%',
-  flex: '0 0 auto',
-  marginBlockEnd: "var(--ds-space-100, 8px)",
-  marginInlineStart: 'auto',
-  paddingInlineStart: "var(--ds-space-400, 32px)",
-  whiteSpace: 'nowrap',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '>': {
-    textAlign: 'right'
-  }
-});
-const titleContainerTruncateStyles = css({
-  flexShrink: 1
-});
-const bottomBarStyles = xcss({
-  marginBlockStart: 'space.200'
-});
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  bottomBar: "_1pfhpxbi"
+};
+const truncateStyles = null;
+const outerStyles = null;
+const titleStyles = null;
+const titleWrapperStyles = null;
+const titleWrapperTruncateStyles = null;
+const titleContainerStyles = null;
+const actionStyles = null;
+const titleContainerTruncateStyles = null;
 
 /**
  * __Outer wrapper__.
@@ -75,8 +30,8 @@ const bottomBarStyles = xcss({
 export const OuterWrapper = ({
   children
 }) => {
-  return jsx("div", {
-    css: outerStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_18s81d9c"])
   }, children);
 };
 /**
@@ -90,11 +45,11 @@ export const StyledTitleWrapper = /*#__PURE__*/React.forwardRef(({
   id,
   truncateTitle
 }, ref) => {
-  return jsx("h1", {
-    css: [titleStyles, truncateTitle && truncateStyles],
+  return /*#__PURE__*/React.createElement("h1", {
     ref: ref,
     tabIndex: -1,
-    id: id
+    id: id,
+    className: ax(["_syaz1fxt _11c81p5s _1dyz4jg8 _1pfhidpf _12ji1r31 _1qu2glyw _12y31o36", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
   }, children);
 });
 /**
@@ -107,8 +62,8 @@ export const TitleWrapper = ({
   children,
   truncateTitle
 }) => {
-  return jsx("div", {
-    css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1y6m _1n261g80", truncateTitle && "_1n261q9c"])
   }, children);
 };
 
@@ -122,8 +77,8 @@ export const TitleContainer = ({
   children,
   truncateTitle
 }) => {
-  return jsx("div", {
-    css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1ul9idpf _p12f1osq _16jlkb7n _1o9zidpf _i0dl1wug _6rthu2gc", truncateTitle && "_1o9zkb7n"])
   }, children);
 };
 
@@ -136,8 +91,8 @@ export const TitleContainer = ({
 export const ActionsWrapper = ({
   children
 }) => {
-  return jsx("div", {
-    css: actionStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_p12f1osq _16jlidpf _1o9zidpf _i0dl1wug _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c _1oblusic"])
   }, children);
 };
 
@@ -150,7 +105,7 @@ export const ActionsWrapper = ({
 export const BottomBarWrapper = ({
   children
 }) => {
-  return jsx(Box, {
-    xcss: bottomBarStyles
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.bottomBar
   }, children);
 };

package/dist/esm/PageHeader/styled.compiled.css

@@ -0,0 +1,28 @@
+._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18s87y2j{margin:var(--_1j0v6uy)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1dyz4jg8{letter-spacing:normal}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1n261q9c{flex-wrap:nowrap}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1oblusic >{text-align:right}
+._1pfhidpf{margin-block-start:0}
+._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._4cvr1y6m{align-items:flex-start}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._ahbq1wug{margin-inline-start:auto}
+._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
+._i0dl1wug{flex-basis:auto}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/esm/PageHeader/styled.js

@@ -1,69 +1,24 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
 // 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 */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { Box, xcss } from '@atlaskit/primitives';
-var truncateStyles = css({
-  overflowX: 'hidden',
-  overflowY: 'hidden',
-  // `overflow-y` necessary to prevent a scrollbar from showing in FF: https://product-fabric.atlassian.net/browse/PYX-1035
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-var outerStyles = css({
-  margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
-});
-var titleStyles = css({
-  color: "var(--ds-text, #172B4D)",
-  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  letterSpacing: 'normal',
-  marginBlockStart: 0,
-  outline: 'none'
-});
-var titleWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexWrap: 'wrap'
-});
-var titleWrapperTruncateStyles = css({
-  flexWrap: 'nowrap'
-});
-var titleContainerStyles = css({
-  minWidth: 0,
-  maxWidth: '100%',
-  flex: '1 0 auto',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  flexShrink: undefined,
-  marginBlockEnd: "var(--ds-space-100, 8px)"
-});
-var actionStyles = css({
-  maxWidth: '100%',
-  flex: '0 0 auto',
-  marginBlockEnd: "var(--ds-space-100, 8px)",
-  marginInlineStart: 'auto',
-  paddingInlineStart: "var(--ds-space-400, 32px)",
-  whiteSpace: 'nowrap',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '>': {
-    textAlign: 'right'
-  }
-});
-var titleContainerTruncateStyles = css({
-  flexShrink: 1
-});
-var bottomBarStyles = xcss({
-  marginBlockStart: 'space.200'
-});
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  bottomBar: "_1pfhpxbi"
+};
+var truncateStyles = null;
+var outerStyles = null;
+var titleStyles = null;
+var titleWrapperStyles = null;
+var titleWrapperTruncateStyles = null;
+var titleContainerStyles = null;
+var actionStyles = null;
+var titleContainerTruncateStyles = null;
 
 /**
  * __Outer wrapper__.
@@ -74,8 +29,11 @@ var bottomBarStyles = xcss({
  */
 export var OuterWrapper = function OuterWrapper(_ref) {
   var children = _ref.children;
-  return jsx("div", {
-    css: outerStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_18s87y2j"]),
+    style: {
+      "--_1j0v6uy": ix("var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0"))
+    }
   }, children);
 };
 /**
@@ -88,11 +46,11 @@ export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, r
   var children = _ref2.children,
     id = _ref2.id,
     truncateTitle = _ref2.truncateTitle;
-  return jsx("h1", {
-    css: [titleStyles, truncateTitle && truncateStyles],
+  return /*#__PURE__*/React.createElement("h1", {
     ref: ref,
     tabIndex: -1,
-    id: id
+    id: id,
+    className: ax(["_syaz1fxt _11c81p5s _1dyz4jg8 _1pfhidpf _12ji1r31 _1qu2glyw _12y31o36", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
   }, children);
 });
 /**
@@ -104,8 +62,8 @@ export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, r
 export var TitleWrapper = function TitleWrapper(_ref3) {
   var children = _ref3.children,
     truncateTitle = _ref3.truncateTitle;
-  return jsx("div", {
-    css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1y6m _1n261g80", truncateTitle && "_1n261q9c"])
   }, children);
 };
 
@@ -118,8 +76,8 @@ export var TitleWrapper = function TitleWrapper(_ref3) {
 export var TitleContainer = function TitleContainer(_ref4) {
   var children = _ref4.children,
     truncateTitle = _ref4.truncateTitle;
-  return jsx("div", {
-    css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1ul9idpf _p12f1osq _16jlkb7n _1o9zidpf _i0dl1wug _6rthu2gc", truncateTitle && "_1o9zkb7n"])
   }, children);
 };
 
@@ -131,8 +89,8 @@ export var TitleContainer = function TitleContainer(_ref4) {
  */
 export var ActionsWrapper = function ActionsWrapper(_ref5) {
   var children = _ref5.children;
-  return jsx("div", {
-    css: actionStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_p12f1osq _16jlidpf _1o9zidpf _i0dl1wug _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c _1oblusic"])
   }, children);
 };
 
@@ -144,7 +102,7 @@ export var ActionsWrapper = function ActionsWrapper(_ref5) {
  */
 export var BottomBarWrapper = function BottomBarWrapper(_ref6) {
   var children = _ref6.children;
-  return jsx(Box, {
-    xcss: bottomBarStyles
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.bottomBar
   }, children);
 };

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import React, { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 /**
  * __Outer wrapper__.
  *
@@ -13,7 +12,7 @@ import { jsx } from '@emotion/react';
  */
 export declare const OuterWrapper: ({ children }: {
     children: ReactNode;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 interface StyledTitleWrapperProps {
     children?: React.ReactNode;
     id?: string;
@@ -36,14 +35,14 @@ interface TitleProps {
  * A title wrapper is a wrapper around the title and the actions.
  *
  */
-export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
+export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => JSX.Element;
 /**
  * Title container.
  *
  * A title container is a container that wraps around the title and its styles (if applied).
  *
  */
-export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
+export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => JSX.Element;
 /**
  * __Actions wrapper__.
  *
@@ -52,7 +51,7 @@ export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) =
  */
 export declare const ActionsWrapper: ({ children }: {
     children: ReactNode;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 /**
  * __Bottom bar wrapper__.
  *
@@ -61,5 +60,5 @@ export declare const ActionsWrapper: ({ children }: {
  */
 export declare const BottomBarWrapper: ({ children }: {
     children: ReactNode;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 export {};

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import React, { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 /**
  * __Outer wrapper__.
  *
@@ -13,7 +12,7 @@ import { jsx } from '@emotion/react';
  */
 export declare const OuterWrapper: ({ children }: {
     children: ReactNode;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 interface StyledTitleWrapperProps {
     children?: React.ReactNode;
     id?: string;
@@ -36,14 +35,14 @@ interface TitleProps {
  * A title wrapper is a wrapper around the title and the actions.
  *
  */
-export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
+export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => JSX.Element;
 /**
  * Title container.
  *
  * A title container is a container that wraps around the title and its styles (if applied).
  *
  */
-export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
+export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => JSX.Element;
 /**
  * __Actions wrapper__.
  *
@@ -52,7 +51,7 @@ export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) =
  */
 export declare const ActionsWrapper: ({ children }: {
     children: ReactNode;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 /**
  * __Bottom bar wrapper__.
  *
@@ -61,5 +60,5 @@ export declare const ActionsWrapper: ({ children }: {
  */
 export declare const BottomBarWrapper: ({ children }: {
     children: ReactNode;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "10.9.6",
+	"version": "11.0.0",
 	"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/"
@@ -20,15 +20,16 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Page header",
-			"category": "Components"
+			"category": "Layout and structure"
 		},
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/primitives": "^13.2.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/css": "^0.7.0",
+		"@atlaskit/primitives": "^13.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -36,12 +37,13 @@
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
+		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/breadcrumbs": "^14.0.0",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/page": "^12.6.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/textfield": "^6.5.0",
+		"@atlaskit/textfield": "^6.7.0",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
 		"react-dom": "^16.8.0",